Jak zrobić stronę typu One Page w WordPress

Czego dowiesz się z tego tekstu:

  1. Co to znaczy strona typu „One Page”
  2. Co jest potrzebne do utworzenia srony typu One Page w WordPress
  3. Jak przygotować stronę typu One Page w WordPress
    1. Tworzymy stronę główną
    2. Tworzymy sekcje z tytułami i kotwicami
    3. Tworzymy menu
    4. Efekt płynnego scrollowania strony
  4. Jak dodać podstronę blog z wpisami
  5. Podsumowanie

Co to znaczy strona typu „One Page”

Większość stron internetowych jest zbudowana z kilku podstron np. strona główna, o nas, oferta, kontakt itd. Klikając element w menu, strona się przeładowuje i przenosi nas do wybranej podstrony.

Od jakiegoś czasu możemy się też spotkać ze stronami, które zbudowane są tylko z jednego widoku. Zwykle takie strony są zbudowane z kilku sekcji ułożonych jedna pod drugą. Nawigacja po takiej stronie z poziomu menu odbywa się poprzez przesuwania do danej sekcji. Klikając w wybraną pozycję w menu, zostajemy na tej samej podstronie, ale strona przesuwa się do konkretnego miejsca.

Przykładem strony typu One Page jest np. moja podstrona z kursem on-line: https://strona.kursnastart.pl/

Tego typu strony są stosowane do pokazania konkretnego produktu lub usługi. Często są to tzw. Landing Page – czyli strony lądowania, gdzie kierujemy użytkownika np. bezpośrednio z reklamy. Mają również zastosowania przy prostych stronach wizytówkowych.

Moim zdaniem tego typu strony fajnie się sprawdzają głównie w roli landingów. Jeżeli zależy nam na budowaniu wysokiej pozycji w wynikach wyszukiwania google, warto postawić na rozbudowaną strukturę. Fajnym rozwiązaniem jest według mnie połączenia strony głównej typu One Page z np. blogiem. Na stronie głównej można w ciekawy sposób zaprezentować siebie lub swoją firmę a na blogu gromadzić content potrzebny do budowania pozycji w google.

Co jest potrzebne do utworzenia strony typu One Page w WordPress

Pokażę Ci, jak możesz przygotować ciekawą stronę typu One Page w WordPress. Do jej budowy wykorzystałam domyślny motyw WordPress Twenty Twenty.

Co będzie Ci potrzebne:

  • Instalacja aktualnej wersji WordPress (z aktywnym edytorem Gutenberg)
  • Dowolny motyw WordPress – u mnie Twenty Twenty
  • (Opcjonalnie) Wtyczka Page scroll to id – doda efekt płynnego przesuwania po stronie

Jak przygotować stronę typu One Page w WordPress

Na potrzeby tego artykułu zakładam, że masz już gotową instalację WordPress na swojej domenie. Jeżeli nie masz jeszcze własnej strony www, zacznij od wyboru domeny i hostingu. W dalszej kolejności potrzebna będzie instalacja WordPress. Na większości serwerów można to zrobić w bardzo prosty sposób.
Możesz też dołączyć do bezpłatnej części mojego kursu, z którego dowiesz się jak to zrobić https://strona.kursnastart.pl/.

W razie problemów daj znać w komentarzu.

Efekt Twojej pracy po zapoznaniu się z tym artykułem może wyglądać podobnie do poniższego:

Tworzymy stronę główną z sekcjami

Tak jak pisałam wcześniej ja pracuję na instalowanym razem z WordPress motywie Twenty Twenty – Ty możesz skorzystać z dowolnego innego motywu.

Wystarczy nam jedna strona tekstowa.

Utworzoną stronę tekstową ustawmy jako stronę główną.

  1. Przejdź do Ustawienia -> Czytanie.
  2. Wybierz opcję „Strona główna wyświetla” statyczną stronę
  3. Z listy rozwijanej wybierz utworzoną uprzednio stronę. U mnie „Strona główna”.
  4. Zapisz zmiany

Po zapisaniu zmian wróć do edycji naszej strony głównej w menu Strony.

Dodając kolejne elementy (sekcje) na swojej stronie, możesz użyć bloku „Grupa” (nie jest to konieczne). Dzięki temu każda sekcja może mieć inny kolor tła, co da ciekawy efekt końcowy.

Po utworzeniu grupy możesz ustawić jej szerokość na cały ekran i zmienić kolor tła. Kolor tła wybierz z domyślnej palety lub skorzystaj z linku „Własny kolor” i ustaw dowolny kolor tła.

Klikając wewnątrz grupy, możesz dodać tam dowolny element.

Najważniejszy dla nas będzie nagłówek. Każda sekcja powinna mieć swój nagłówek. Po dodaniu nagłówka rozwiń w opcjach bloku po prawej stronie sekcję „Zaawansowane”. Znajdziesz tam pole o nazwie „Kotwica HTML„. Wpisz w to pole nazwę powiązaną z nagłówkiem (bez spacji i polskich znaków).

W analogiczny sposób stwórz kolejne sekcje. Jeżeli do danej sekcji chcesz ustawić pozycję menu, pamiętaj o nagłówku i wypełnieniu pola „Kotwica HTML”.

W sekcjach możesz umieszczać dowolne elementy: zdjęcia, kolumny formularze, galerie itd. To one budują Twój One Page.

Tworzymy menu z linkami do sekcji

Ostatnim elementem, którego brakuje na naszym One Page, jest nawigacja po stronie. Jak ją zrobić?

  1. Przejdź do Wygląd->Menu
  2. Kliknij „Utwórz nowe menu” i nazwij je np. top. Ważne, aby zaznaczyć, by wyświetlało się w odpowiednim miejscu w motywie (Wyświetl lokalizację). W zależności od motywu mogą to być różne lokalizacje. U mnie: „Poziome menu dla komputerów stacjonarnych” oraz „Menu mobilne”.
  1. Kolejny krok to dodanie odpowiednich pozycji w menu. Każda pozycja będzie prowadziła do kolejnej sekcji na stronie głównej. Wykorzystamy do tego „Własne odnośniki”. W polu „Adres URL” podaj nazwę, która została wpisana w pole „Kotwica HTML” na stronie głównej ze znacznikiem „#” z przodu (patrz screen poniżej). W polu „Tekst odnośnika” wpisz tekst, który ma się wyświetlić w menu.
  1. W analogiczny sposób stwórz tyle pozycji menu, do ilu sekcji chcesz się odnieść w menu (nie musisz do każdej).
  2. Po dodaniu wszystkich pozycji zapisz menu.

Jeżeli dobrze przypisałeś lokalizację menu po przejściu na widok strony główne, Twoja nawigacja powinna się wyświetlać prawidłowo. U mnie wygląda to tak jak poniżej:

Klikając w poszczególne elementy nawigacji, strona powinna przesuwać się do konkretnej sekcji.

Twoja strona typu One Page jest właściwie gotowa 🙂 Proste prawda?

Efekt płynnego scrollowania

W zależności od motywu, z jakiego korzystasz, możesz mieć efekt płynnego scrollowania po stronie wbudowany lub nie. W tym przykładzie użyłam motywu Twenty Twenty. Ten motyw ma wbudowaną funkcję smooth scroll. Jeżeli Twój motyw jej nie ma, a zależy Ci na płynnym przesuwaniu po stronie, wypróbuj wtyczkę Page scroll to id z repozytorium WordPress.

Podsumowanie

Do stworzenia strony typu One Page nie użyłam żadnej wtyczki. Zbudowana jest na podstawowej instalacji WordPress z domyślnym motywem Twenty Twenty – a efekt? Możesz zbudować świetnie wyglądającą stronkę, nie obciążając jej zbędnymi wtyczkami. Wystarczy mieć odpowiednią wiedzę, którą po przeczytaniu tego tekstu masz 🙂

Bezpłatny e-book

Pobierz bezpłatnego e-booka i podkręć swojego bloga na WordPress!

Podając adres email zgadzam się na przetwarzanie moich danych osobowych w celu przesłania e-booka i innych ciekawych dla blogerów treści na stronie izabelekarkocha.com. Wiem, że mogę się wypisać w każdej chwili.

Jeszcze tylko chwilka...

Dzięki - sprawdź swoją skrzynkę email. Jeżeli nie znajdziesz mojego maila, koniecznie sprawdź folder SPAM i dodaj mój adres do zaufanych. 

2 Odpowiedzi do “Jak zrobić stronę typu One Page w WordPress”

  1. Super. Bardzo pomocny artykuł.

    Odpowiedz

    1. Izabela Karkocha 26 lutego 2020 at 08:14

      Cieszę się, że okazał się przydatny 🙂

      Odpowiedz

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *