fbpx
Przejdź do treści
Strona główna » Blog » Jak zrobić stronę typu One Page w WordPress

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 strony 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.

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 jeżeli wybrany przez Ciebie motyw nie ma takiej funkcjonalności.

Nowa strona WordPress

Kurs online
„Edytor Gutenberg”

Kus online, dzięki któremu nauczysz się pracować z edytorem wizualnym WordPressa- Gutenberg.

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.

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:

strona typu one-page w wordress

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.

strona typu one-page w wordress

Wystarczy nam jedna strona tekstowa.

strona typu one-page w wordress

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 „/” (dzięki temu nie będzie problemu z przejściem na daną sekcję z innej podstrony np. Polityka Prywatności), oraz „#” 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.

Jak dodać podstronę blog z wpisami

Do naszego one-page możemy dodać oddzielną podstronę z listą wpisów blogowych. Jak to zrobić?

  1. Dodajemy nową stronę tekstową. Przejdź do Strony->Dodaj nową
  2. Nazwij ją „Blog”
  1. Kliknij przycisk „Opublikuj”
  1. Ponownie kliknij Opublikuj
  1. Przejdź teraz do Ustawienia -> Czytanie. Jako Strona z wpisami ustaw nową stronę Blog.
  1. Po ponownym przejściu na listę stron, zauważysz, że strona Blog ma nową etykietę „Lista wpisów”.
  1. Ostatni krok to dodanie pozycji z blogiem do menu. Przejdź do Wygląd -> Menu. Na liście stron zaznacz Blog. Kliknij Dodaj do menu. Nie zapomnij zapisać zmian niebieskim przyciskiem Zapisz menu.

Po przejściu na podgląd swojej witryny zobaczysz efekt swojej pracy w postaci nowej pozycji w menu „Blog”. Po jej kliknięciu zobaczysz listę wpisów blogowych.

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 🙂

Masz już swoją stronę internetową?

Czy wiesz, jak ważne jest szybkość wczytywania strony www, jej bezpieczeństwo i optymalizacja pod SEO i urządzenia mobilne?

Pobierz bezpłatną checklistę i sprawdź swoją stronę www punkt po punkcie

14 komentarzy do “Jak zrobić stronę typu One Page w WordPress”

  1. Hej, świetne info – dzięki, ale gdzieś się podziała ta wisienka na torcie czyli 4 część o tym, jak dodać podstronę blog z wpisami, bo niestety nie ma 🙁 Może gdzie indziej na blogu znajdę takie info, bo rozbudzona ciekawość i chęć są 😉

  2. Cześć, zrobiłem menu na template Twenty Twenty jednak scrolling effect, który otrzymałem zachowuje się tak że jest chwilowe opóźnienie zanim strona przewinie się do docelowej sekcji. Czy jest jakaś możliwość zmiany efektu przewijania na taki, aby przewijanie odbyło się dynamicznie, od razu po kliknięciu w element menu, bez tego początkowego spowolnienia? Dodam, że używam wtyczki Elementor.

  3. Witam, jestem w trakcie tworzenia podobnej strony one page. Z głównej strony będą trzy odnośniki do stron statycznych. Na tych stronach pojawia mi się główne górne menu tak jak na stronie głównej. Poza oczywiście pozycją „strona główna” (która odsyła nas z powrotem na str. główną) pozostałe elementy menu nie „działają” ponieważ są zakotwiczone nie na tej stronie, na której właśnie jesteśmy. Moje pytanie brzmi tak to obejść lub w jaki sposób pozbyć się innych elementów w menu tak aby można było wrócić tylko do strony głównej.
    Mam nadzieję, że jasno opisałem 😉

  4. Dzięki za wpis. Bardzo pomocny. Szczególnie łączenie strony typu One Page ze zwykłymi podstronami. Linki zawsze stwarzały problem a wystarczyło dodać „/” przed hasztagiem 🙂

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *