Jak zrobić stronę internetową krok po kroku
Z tego poradnika dowiesz się jak zrobić stronę internetową. Stworzenie strony internetowej nie musi być trudne. Pokażę Ci krok po kroku jak przejść cały ten proces. Po przejściu tego poradnika będziesz miał gotową stronę internetową, którą możesz wykorzystać w dowolnej branży.
Po ukończeniu tego poradnika, będziesz miał gotową własną stronę internetową. Poniżej znajdziesz przykłady gotowych stron, które możesz samodzielnie stworzyć.
Całą część praktyczną poradnika możesz zobaczyć w formie Video.
W artykule znajdziesz dodatkowe informacje i rozszerzenie, niektórych tematów.
Spis treści- "jak zrobić stronę internetową krok po kroku?"
1. Plan Twojej strony internetowej
Jeśli chcesz zrobić stronę internetową, to pierwszym krokiem jest planowanie. Dobry plan zaoszczędzi Ci mnóstwo czasu. Dzięki niemu unikniesz dodatkowej pracy, i szybciej stworzysz Twoją stronę.
Uproszczony plan Twojej strony
Wybór grupy odbiorczej Twojej strony. (kto będzie z niej korzystał i w jaki sposób).
Stworzenie struktury strony – rozpisanie jakie podstrony będą znajdować się na Twojej stronie. Na przykład:
- Strona główna
- Oferta
- O nas
- Kontakt
Przygotowanie tekstów i grafik na stronę.
Wybór kolorystyki strony. Na przykład przy pomocy bezpłatnego narzędzia Adobe Color Wheel.
Ustalenie terminu realizacji projektu. Zaplanuj, kiedy chcesz uruchomić Twoją stronę internetową. Jeśli tworzysz swoją stronę pierwszy raz, zarezerwuj sobie na jej stworzenie przynajmniej kilka dni.
Więcej na temat planowania strony dowiesz się z mojego bezpłatnego Ebooka.
2. Wybór nazwy domeny, czyli nazwy Twojej strony
Każda strona internetowa potrzebuje nazwy domeny. Z tej części artykułu dowiesz się co to jest domena i w jaki sposób wybrać jej nazwę.
Co to jest domena?
Domena to unikalny adres, po którym użytkownik trafi na Twoją stronę internetową.
Nazwa Twojej strony odkrywa istotną rolę marketingową. Będziesz dzielić się nią w różnych miejscach:
- W mediach społecznościowych,
- na reklamach.
Poniżej znajdziesz kilka wskazówek dotyczących tego, jak wybrać dobrą nazwę domeny dla Twojej strony internetowej.
Ogólne zasady przy wyborze nazwy domeny.
- Unikaj polskich znaków w nazwie.
- Unikaj znaków takich jak kropka, przecinek.
- Wybierz krótką nazwę najlepiej do 20 znaków.
- Wybierz nazwę łatwą do zapamiętania i wymówienia.
Różne podejścia do wyboru nazwy.
Najczęściej można spotkać 3 podejścia do wyboru nazwy domeny. Każde z nich ma swoje słabe i mocne strony. Wybierz, to które najlepiej pasuje do Twojej sytuacji.
Jeśli budujesz firmę
W nazwie strony możesz użyć nazwy swojej firmy. Zadbaj o to ,aby Twoja nazwa firmowa nawiązywała do tematu, którym się zajmujesz. Jeśli masz bardzo skomplikowaną nazwę firmy, warto ją skrócić.
Przykład:
netgonet.pl
Jeśli budujesz markę osobistą
Jeśli działasz samodzielnie. Chcesz, aby Twoje nazwisko było rozpoznawalne w branży, możesz wybrać swoje imię i nazwisko. Lub samo nazwisko.
Przykłady:
- garyvaynerchuk.com
- kamillizurej.pl
- marzenajankowska.pl
- grantcardone.com
- paweltkaczyk.pl
Wyjątki
Jeśli masz bardzo długie lub trudne do wymówienia nazwisko możesz rozważyć skrócenie nazwy Twojej strony.
Przykład:
Magdalena Pawłowska wybrała nazwę dla swojej domeny:
- magdalenap.com
Jeśli rozwijasz projekt wokół konkretnego tematu
Jeśli tworzysz jakiś unikalny projekt możesz stworzysz nazwę,
Przykłady:
- jakoszczędzacpieniądze.pl
- smartpassiveincome.pl
- szkolamarketingu.pl
Nazwa bezpośrednio odnosi się do tematyki i zawiera słowo kluczowe. (marketing, pieniądze, przychód).
Taka nazwa daje mniejszą elastyczność w przypadku zmiany kierunku biznesowego.
Podsumowanie - nazwa domeny przy tworzeniu strony www
Nie musisz kurczowo trzymać się powyższych zasad. Pamiętaj, że sama nazwa firmy/projektu nie ma wartości, dopóki jej nie stworzysz. Takie marki jak Apple, Microsoft nic by nie znaczyły, gdyby nie praca nad rozwojem ich rozpoznawalności.
Masz już wybraną nazwę domeny? Czas sprawdzić, czy jest dostępna.
3. Zakup domeny i hostingu
Jeśli chcesz zrobić stronę internetową, będziesz potrzebował domeny i hostingu.
Domena, to przyjazny adres internetowy, dzięki któremu ludzie będą mogli wejść na Twoją stronę internetową.
Hosting to miejsce, w którym znajdzie się Twoja strona. To tam, umieścisz wszystkie pliki strony. Opisy, zdjęcia grafiki.
Jak kupić domenę?
Przed zakupem domeny musisz sprawdzić czy jest dostępna.
Wystarczy, że wejdziesz na poniższą stronę i wpiszesz nazwę domeny, którą wybrałeś.
Jeśli domena jest dostępna, będziesz mógł dodać ja do koszyka i kupić.
Pierwszy rok korzystania z domeny zazwyczaj jest w promocyjnej cenie. Kolejny rok będzie droższy. Szczegółowy cennik znajdziesz na stronie lh.
Inne firmy – Jeśli zdecydujesz się kupić domenę w innej firmie, to sprawdź cenę odnowienia usługi. Jeśli domena z końcówka pl jest w cenie większej niż 130 zł to trzymaj się od takiej oferty z daleka.
Jak kupić hosting?
Na rynku działają dziesiątki firm, które świadczą tego typu usługi. Podczas swojej pracy przetestowałem wiele rozwiązań.
Przy wyborze hostingu należy kierować się konkretnymi potrzebami projektu.
Jeśli chcesz zbudować prostą stronę internetową, to najlepszym rozwiązaniem będzie zakup hostingu w firmie lh.pl. Na początek wybierz najtańszy pakiet – 50 zł za pierwszy rok (potem około 100 zł rocznie).
Dodatkowo mam dla Ciebie prezent:
25% zniżki na dowolny pakiet hostingu. Wystarczy, że wpiszesz poniższy kod podczas zamówienia:
Kod rabatowy: NetGonet
Korzystam z usług firmy lh przy wielu moich projektach i jestem bardzo zadowolony. Dlaczego zdecydowałem się akurat na ten hosting?
Dlaczego warto skorzystać z hostingu lh.pl?
- Obsługa klienta — Obsługa klienta szybko pomaga w rozwiązywaniu pojawiających się problemów. Może też odpowiedzieć na Twoje pytania techniczne. Na przykład firma lh.pl za darmo instaluje WordPress i certyfikat SSL.
- Darmowy certyfikat SSL – nawet w najtańszym pakiecie znajduje się automatyczna instalacja darmowego certyfikatu SSL.
- Szybkość działania – Hosting lh.pl działa szybko i stabilnie. Możesz przeczytać na ten temat tutaj.
- Hosting spełnia wymagania WordPressa – Hosting lh spełnia wszystkie wymagania techcznine, potrzebne do instalacji WordPressa.
- Cena. – ceny w stosunku do korzyści są bardzo korzystne.
- Opinie klientów – Firma lh.pl ma bardzo wiele pozytywnych opinii w internecie.
- Historia i wielkość firmy – firma działa na rynku od 2002 roku. Znajduje się w top 10 największych firm hostingowych w Polsce.
4. Instalacja WordPress
Kolejnym krokiem w stworzeniu strony internetowej jest instalacja WordPressa i certyfikatu SSL
WordPress – to system do zarządzania treścią. Dzięki niemu stworzysz swoją stronę.
Certyfikat SSL – w uproszczeniu jest to protokół, który zabezpiecza przepływ danych pomiędzy stroną a klientem. Gdy jest prawidłowo zainstalowany w pasku wyszukiwarki przy adresie URL pokażę się kłódka i informacja o tym, że strona jest bezpieczna.
Najprostszy sposób instalacji WordPress
Jeśli posiadasz hosting lh.pl wystarczy, że napiszesz do obsługi klienta, a oni zrobią to za Ciebie.
Wyślij na adres info@lh.pl następującą wiadomość.
Proszę o instalacje WordPressa oraz bezpłatnego certyfikatu SSL na domenie xyz.pl (wpisz nazwę swojej domeny).
Po wysłaniu tych informacji otrzymasz dane logowania do WordPressa na swojego maila.
Ważna uwaga: Mail musi zostać wysłany z maila, który podałeś podczas rejestracji konta w lh.pl .
Jeśli skorzystałeś z tego sposobu, to możesz przejść do kolejnego kroku.
Do zmiany wyglądu strony Twojej strony.
Ręczna instalacja WordPressa
Jeśli chcesz nauczyć się instalować WordPress ręcznie, to poniższy film przeprowadzi Cię przez ten proces.
Instalacja certyfikatu SSL
Jeśli instalujesz WordPressa samodzielnie musisz dodatkowo skonfigurować certyfikat SSL. Jeśli go nie masz, to klienci po wejściu na Twoją stronę otrzymają ostrzeżenie.
Możesz zainstalować certyfikat SSL przy pomocy panelu administracyjnego lub korzystając z pomocy obsługi klienta.
Poniżej znajdziesz poradnik jak ręcznie zainstalować certyfikat SSL
5. Zmiana wyglądu strony internetowej
Po instalacji WordPressa, Twoja strona powinna zacząć działać. Niestety na razie nie wygląda imponująco. Czas to zmienić. 🙂
Logowanie do WordPress
Żeby wprowadzić zmiany na Twojej stronie internetowej musisz zalogować się do panelu administracyjnego WordPress.
Adres logowania wygląda w następujący sposób www.nazwadomeny.pl/wp-admin.
na przykład: twojastronafirmowa.pl/wp-admin
Następnie podaj login i hasło.
Panel administracyjny
Po zalogowaniu znajdziesz się w panelu administracyjnym. To tutaj możesz zmieniać ustawienia Twojej strony internetowej. Edytować jej zawartość, dodawać wpisy, zdjęcia i inne elementy strony www.
Sprawdzenie adresu strony
Pierwszą rzeczą, jaką należy zrobić, jest sprawdzenie czy masz ustawiony prawidłowy adres Twojej witryny. Wejdź w:
Ustawienia —> Ogólne i jeśli adres zaczyna się od HTTP:// to zmień go na HTTPS://.
Jeśli adres zaczyna się od HTTPS:// to zostaw go tak jak jest.
Po zapisaniu zmian będziesz musiał ponownie zalogować się do Twojego WordPressa.
Jeśli Twój certyfikat SSL jest prawidłowo zainstalowany, to przy adresie Twojej strony zobaczysz kłódkę. Jeśli zamiast niej pokazuje się komunikat o tym, że strona jest niebezpieczna, znaczy to, że certyfikat został błędnie zainstalowany. W takim przypadku możesz zwrócić się o pomoc do obsługi klienta.
Czas zmienić wygląd Twojej strony. Jest to dla mnie najprzyjemniejsza część pracy przy stronie. Mam nadzieję, że Tobie również się spodoba :).
Kliknij w opcję wygląd a następnie Motywy
Kliknij przycisk Dodaj.
Po prawej stronie w oknie wyszukiwania wpisz słowo: Astra. Następnie gdy na dole pojawi się motyw Astra. Najedź na niego myszką i naciśnij przycisk zainstaluj.
Po instalacji naciśnij przycisk Włącz.
Właśnie zainstalowałeś nowy motyw na Twojej stronie internetowej. Niestety Twoja strona dalej wygląda nieciekawie.
Teraz czas skorzystać z gotowych szablonów stron internetowych.
Szablony pozwalają na dodanie dodatkowych styli do wybranych podstron.
Wybór szablonu strony internetowej
Po instalacji, u góry pokaże nam się automatyczny konfigurator. Ten proces jest pokazany na filmie. Jeśli konfigurator się nie wyświetli to możesz dotrzeć do niego w następujący sposób.
Kliknij przycisk Wygląd następnie Astra Options.
Kliknij tekst po prawej stronie Install Importer Plugins.
Naciśnij ikonkę Elementor.
Po kliknięciu w przycisk zobaczysz listę szablonów gotowych stron internetowych.
Na początek wybierz suwakiem opcje free. Dzięki temu zobaczysz wszystkie darmowe szablony do WordPress.
Wybierz ten, który najbardziej Ci odpowiada i kliknij w niego lewym przyciskiem myszki.
Po kliknięciu w wybrany szablon kliknij w przycisk Import Complete Site a następnie Import.
Jeśli widzisz powyższy ekran to znaczy, że szablon został prawidłowo zainstalowany. Teraz zobacz jak wygląda Twoja strona. Wpisz jej adres w pasku wyszukiwania i zobacz co się stało.
Twoja strona powinna wyglądać tak jak na szablonie. Jeśli tak się stało, to gratuluje!. Czas przejść do edycji zawartości strony.
Potrzebujesz więcej możliwości?
6. Edycja treści na stronie WordPress
Zanim zaczniesz edycję strony, warto abyś zrozumiał w jaki sposób edytować poszczególne elementy strony.
Nagłówek (header)
Zawartość strony (body)
Pasek boczny (sidebar)
Stopka (footer)
Strona internetowa jest podzielona na kilka sekcji.
- Nagłówek (header)
- Zawartość strony (body)
- Pasek boczny (sidebar)
- Stopka (footer)
Nagłówek, stopkę i pasek boczny możesz edytować w ustawieniach motywu. Wchodząc w opcje dostosuj.
Zawartość strony możesz edytować przy pomocy domyślnego edytora ( Gutenberg) lub edytora, którego użyjemy w tym poradniku Elementora.
Gdy spróbujesz zmienić kilka rzeczy na stronie wszystko stanie się jasne.
*Istnieją wyjątki od tych zasad, jednak tym zajmiemy się w bardziej zaawansowanych poradnikach.
Edycja zawartości menu
Motyw utworzył domyślne menu. Możemy je zmienić, klikając na zakładkę Wygląd –> Menu . W tym miejscu wybierasz, które strony mają pojawić się w Twoim menu. Wystarczy, że zaznaczysz checboxa i klikniesz przycisk dodaj do menu
Po wprowadzeniu zmian kliknij w przycisk zapisz menu.
Edycja nagłówka strony
Nagłówek, to górna część strony internetowej. Zazwyczaj znajdziesz Tam logo i menu. Możesz jednak dodać tam inne elementy. Przyciski social media, przycisk, koszyk itp.
Motyw astra posiada narzędzie do budowania nagłówka na stronie. Wystawczy, że wejdziesz na Dostosuj –> Header Builder i znajdziesz tam niezbędne ustawienia.
Kliknij tutaj i zostaniesz przekierowany do poradnika w formie Video
Edycja stopki na stronie
Edytor stopki również znajdziesz wchodząc w dostosuj a następnie w Footer Builder.
Pamiętaj, że ta opcja jest dostępna tylko w motywie Astra.
Edytor działa w podobny sposób do edytora nagłówka.
Zobacz poradnik w formie Video.
Instalacja edytora Elementor
Gdy skończyłeś tworzyć nagłówek i stopkę czas przejść do wnętrza Twojej strony. Podczas instalacji szablonu zostało zainstalowanych kilka wtyczek. Wtyczki, to dodatki do strony, dzięki którym możesz dodać niej różne funkcje takie jak:
- galeria,
- formularz kontaktowy,
- mapa,
- sklep internetowy,
- i wiele innych.
Jedna z wtyczek, która została zainstalowana, to Elementor.
Elementor, to prosty edytor, dzięki któremu będziesz w stanie zmienić wygląd Twoich podstron.
*Jeśli korzystasz z innego motywu niż podany w poradniku, możesz zainstalować go ręcznie. Musisz tylko sprawdzić, czy Elementor współpracuje z danym motywem. Wejdź w zakładkę wtyczki i w polu wyszukiwania wpisz nazwę Elementor.
Następnie klikasz przycisk instaluj.
W ten sposób możesz zainstalować dowolnie wybraną wtyczkę.
Dodawanie treści do strony
Aby edytować stronę należy wejść w zakładkę strony. Wejść na wybraną podstronę i kliknąć edytuj w Elementorze.
Wyjątek, to strona bloga i sklepu. Tych stron nie możesz edytować w ten sposób. Żeby je edytować potrzebujesz płatnej wersji Elementora. Więcej na ten temat zobaczysz w tym filmie.
Po kliknięciu w przycisk zostaniesz przekierowany do edytora, w którym możesz zmienić wiele elementów na stronie.
Po lewej stronie znajduję się panel, z którego możesz przeciągać różne elementy. Na przykład: nagłówki, teksty, galerie, mapę. Elementy, zaznaczone jako Pro, są dostępne w płatnej wersji Elementora.
Poniżej znajdziesz rozszerzony poradnik dotyczący obsługi bezpłatnej wersji Elementora.
Jeśli wolisz czytać, to przejdź niżej :).
Zmiana tekstów na stronie
Jeśli chcesz zmienić tekst na stronie, wystarczy, że w niego klikniesz i wpiszesz wybrany tekst.
Możesz również dodać nowe pole tekstowe w dowolnym miejscu. Wybierz je z panelu po lewej stronie i przeciągnij na prawo.
Zmiana zdjęć
Jeśli chcesz podmienić zdjęcie kliknij na nie lewym przyciskiem myszy. Następnie po lewej stronie zobaczysz pole do podmiany zdjęcia. Możesz wgrać tutaj zdjęcie z komputera lub skorzystać z tych, które są już umieszczone na serwerze.
Jeśli chcesz zmienić zdjęcie na banerze lub zdjęcie w tle, będziesz musiał poszukać opcji obrazu w zakłócę treść lub styl.
Usuwanie elementów na stronie
Jeśli jakiś element ci nie odpowiada możesz go usunąć. Wystarczy, że klikniesz prawym przyciskiem myszy na wybrany element. Następnie wybierz z listy przycisk Usuń.
Dodawanie dodatkowych sekcji na stronie internetowej
Możesz samodzielnie zbudować układ Twojej strony internetowej. Jeśli chcesz to zrobić to:
1. Najedź myszką na wybrany blok. U góry pokażę się niebieckie menu. Po kliknięciu na znak plus pokażą się poniższe ikonki. (ikonki znajdziesz również po zjechaniu na sam dół strony).
2. Gdy klikniesz na ikonę plus po lewej stronie będziesz mógł wybrać strukturę danej sekcji. Klikając w wybrany prostokąt stworzysz odpowiadającą mu ilość kolumn.
Wybór układu kolumn
Jeśli wybierzesz 3 prostokąt od lewej stworzysz układ 3 kolumn.
Teraz możesz kliknąć na wybraną kolumnę i umieścić tam dowolny element. Na przykład zdjęcie, film tekst.
Przeciągnij wybrany element z lewego panelu do nowej kolumny.
Dodałeś nowy element. Teraz możesz zmienić jego zwartość i wygląd. Jeśli klikniesz lewym przyciskiem myszy na element, który właśnie dodałeś po lewej stronie pojawią się dostępne opcje edycji.
Znajdziesz tam 3 zakładki:
- Treść – w tej zakładce możesz edytować zawartość bloku.
- Styl – w tej zakładce zmieniasz styl danego elementu.
- Zaawansowane – tutaj znajdziesz zaawansowane ustawienia np. ukrycie danego elementy na urządzeniach mobilnych animacje i inne elementy.
Wygląd mobilny strony internetowej
Jeśli chcesz zrobić stronę internetową musisz pamiętać o tym, żeby dostosować ją pod urządzenia mobilne.
Na szczęście Elementor posiada gotowe funkcję, dzięki którym możesz to zrobić.
Gdy edytujesz stronę przy pomocy Elementora, kliknij w ikonkę w lewym dolnym rogu ekrany.
Po kliknięciu u góry strony pojawi się nowy pasek. Kliknij na ikonkę smartfona i zobaczysz, że strona zmieniła wygląd.
Teraz przy pomocy ustawień poszczególnych bloków będziesz mógł edytować wygląd mobilny Twojej strony.
Aktualizacja zmian i publikowanie strony Elementor
Po wprowadzeniu zmian na Twojej stronie kliknij przycisk AKTUALIZUJ.
Dopiero wtedy zmiany zostaną wprowadzone. Pamiętaj, aby robić to, co jakiś czas. Jeśli o tym zapomnisz możesz stracić swoją pracę.
Jeśli nie zdążyłeś dokończyć strony, możesz zapisać ją jako szkic. Wtedy stronie nie będzie widoczna dla odwiedzających.
Gratuluje!
Właśnie udało Ci się stworzyć swoją pierwszą stronę internetową.
Podziel się Twoją stroną
Teraz dołącz do grupy wsparcia na Facebooku i podziel się Twoją nową stroną internetową 🙂
Masz już stronę internetową co teraz?
Gdy znasz już podstawy możesz dalej rozwijać swoją stronę, aby przynosiła Ci jak najwięcej korzyści.
Aktualizacje strony www
Jeśli masz komputer lub smartforma, to często musisz robić aktualizacje. Tak samo jest w przypadku strony internetowej.
Żeby twoja własna strona internetowa była bezpieczna i dobrze działała musisz ją aktualizować.
Poniżej znajdziesz poradnik dotyczący tego jak aktualizować stronę WordPress
7. Dodatkowe funkcje na stronie
WordPress, to niezwykle elastyczny system. Możesz dodać do niego wiele przydatnych funkcji. Poniżej znajdziesz listę dodatkowych poradników.
- Jak stworzyć bloga,
- Jak dodać formularz kontaktowy,
- Obsługa Elementor Pro
- Jak zadbać o pozycję w wynikach wyszukiwania,
- Jak zabezpieczyć stronę WordPress
- Jak stworzyć sklep internetowy,
- Jak dodać newsletter do strony,
- Jak przetłumaczyć Twoją stronę,
Dziękuję za bardzo dobry i obszerny artykuł. Pozdrawiam
Cieszę się, że artykuł się podobał. Pozdrawiam :).