Jak stworzyć jednostronicową stronę internetową na WordPressie

Wiele udanych stron internetowych to duże, złożone sprawy z dużą ilością stron i treści. Jednakże, czasami więcej naprawdę jest mniej w świecie projektowania stron internetowych. I właśnie dlatego, zamiast tradycyjnego podejścia, może warto stworzyć stronę typu one-page na WordPress.

W tym artykule, będziemy bardziej dogłębnie o korzyściach i zastosowaniach tego typu witryny. Następnie pokażemy Ci, jak stworzyć witrynę typu one-page na WordPressie w zaledwie trzech krokach. Zaczynajmy!

📚 Spis treści:

Dlaczego możesz chcieć stworzyć stronę typu one-page

Większość stron internetowych ma wiele stron. Przy minimum, tam jest zazwyczaj strona główna, strona kontaktowa, o stronie, i strony dla każdej treści lub usług, które oferujesz.

Jednostronicowa strona internetowa, z drugiej strony, kondensuje wszystkie ważne informacje w dół do jednej strony głównej, często poprzez włączenie kilku dedykowanych sekcji. Projekt strony internetowej typu one-page oferuje wiele korzyści, takich jak:

• Prostota, która ułatwia odwiedzającym poruszanie się po witrynie i znalezienie tego, czego potrzebują.
• Łatwość konserwacji, ponieważ jest bardzo mało treści do utrzymania.

Oczywiście, projekt strony internetowej typu one-page nie jest właściwym wyborem dla każdej witryny. Duże, złożone witryny mają swoje miejsce. Jednakże, jeśli prowadzisz małą witrynę biznesową, portfolio lub prosty sklep, możesz rozważyć ten format.

Niezbędne elementy witryny jednostronicowej

Gdy twoja witryna obejmuje tylko jedną stronę, musisz być bardzo świadomy tego, co zawierasz. Ważne jest, aby dostarczyć wszystkich informacji, których odbiorcy będą potrzebować, bez zagracania strony i przytłaczania ich. Wszystko, co dodajesz do swojej strony, powinno być tam z jakiegoś powodu.

Oto niektóre z istotnych elementów, jeśli chcesz stworzyć jednostronicową stronę internetową:

• Wyraźne wezwanie do działania (CTA), takie jak przycisk rejestracji, kontaktu lub zakupu.
• Sekcja Informacje wyjaśniająca, kim jesteś ty, twoja firma lub organizacja.
• Elementy brandingowe, takie jak logo i tagline.
• Lista produktów lub usług, jeśli dotyczy.
• Linki do innych miejsc i treści w sieci, w tym profili w mediach społecznościowych.
• Informacje kontaktowe, w tym różne kanały, jeśli to możliwe.

Ważne jest również zwrócenie uwagi na kolejność tych elementów. Ogólnie rzecz biorąc, najbardziej kluczowe informacje i CTA powinny być umieszczone na początku, a dane kontaktowe i linki bliżej dołu strony. Zastanów się, co Twoja publiczność będzie potrzebowała zobaczyć i w jakiej kolejności, a to pomoże Ci określić, jakie elementy zawrzeć i jak je ułożyć.

Na koniec – tylko dlatego, że używasz projektu strony internetowej typu one-page, nie oznacza to, że nie możesz mieć bloga. Jeśli nadal chcesz włączyć blog, WordPress nadal pozwoli Ci link do swojego bloga od strony głównej one-page.

Jak stworzyć stronę internetową one-page (EXACT STEPS)

Teraz, porozmawiajmy o tym, jak faktycznie przejść o projektowaniu witryny. Pierwszą rzeczą, którą będziesz chciał zrobić, to sprawdzić kilka istniejących przykładów stron internetowych typu one-page dla inspiracji. Następnie przejdź do pierwszego kroku.

Krok 1: Określ punkt ciężkości witryny

Jak już mówiliśmy, wybór tworzenia witryny one-page oznacza, że będziesz musiał być bardzo świadomy jej projektu. Dotyczy to również jasnego określenia jej celów. Kiedy jesteś ograniczony do jednej strony, będziesz chciał wybrać jedną lub dwie kluczowe rzeczy, na których chcesz się skupić.

Aby to zrobić, zastanów się nad podstawowym CTA, wokół którego będzie zaprojektowana Twoja strona. Co chcesz, aby odwiedzający zrobili – zapisali się na członkostwo, kupili produkt, wzięli udział w wydarzeniu, czy zatrudnili cię do pracy? Wszystko na Twojej stronie powinno zachęcać ludzi do podjęcia tego działania. Oznacza to dostarczenie informacji, których będą potrzebować, wyjaśnienie korzyści i uczynienie kolejnych kroków jasnymi.

Krok 2: Wybierz wysokiej jakości motyw strony jednostronicowej

Jeśli zdecydowałeś się stworzyć stronę jednostronicową w WordPress, możesz użyć dowolnego motywu. Jednak często mądrą strategią jest wybór motywu one-page, który został zbudowany specjalnie po to, aby pomóc Ci zaprojektować ten typ strony. Te motywy ułatwiają zawarcie wszystkich niezbędnych informacji przy zachowaniu atrakcyjnego wyglądu.

Podczas wybierania motywu one-page, oto czego będziesz chciał szukać:

• Konstruktor stron z wstępnie zbudowanymi elementami, których będziesz potrzebował, takimi jak sekcja kontaktowa.
• Metoda rozbicia strony na wiele sekcji, które mogą być wizualnie wyróżnione.
• Nawigacja, która umożliwia odwiedzającym przeskakiwanie do różnych sekcji na twojej stronie.
• Łatwy sposób na dodanie przycisków CTA i ich personalizację.

Dostępnych jest wiele motywów typu one-page. Neve, na przykład, jest wielozadaniowym motywem, który jest idealny dla zwięzłych, ale wszechstronnych stron typu one-page. Jest kompatybilny z wieloma popularnymi kreatorami stron, zawiera live customizer i pomaga szybko skonfigurować stronę one-page. Zawiera również wstępnie wbudowane sekcje dla informacji kontaktowych, Twojego bio, sklepu i wiele więcej.

Krok 3: Zaprojektuj swoją stronę

Gdy już wiesz, co chcesz zawrzeć w swojej witrynie, masz jasność co do jej ostrości i wybrałeś silny motyw, możesz zacząć faktycznie projektować stronę. Będziesz chciał, aby była ona odpowiednia dla twojej publiczności, odzwierciedlała twój styl i była zoptymalizowana, aby spełnić twoje cele – co oznacza, że nie powinieneś po prostu podążać za formułą.

Jednakże, oto kilka sugestii, o których warto pamiętać, gdy układasz swoją witrynę:

• Zachowaj prostotę swojej strony i nie umieszczaj na niej niczego, co nie służy wyraźnemu celowi
• Wyraźnie rozróżniaj różne sekcje za pomocą różnych nagłówków, teł i tak dalej.
• Twórz nawigację, która szybko przeskoczy odwiedzających do sekcji, których potrzebują.
• Uczyń swoje główne CTA widocznymi i przekonującymi.

Podążając za tymi radami, będziesz w stanie stworzyć niesamowitą witrynę one-page w mgnieniu oka.

Teraz porozmawiajmy o narzędziach. Więc jak możesz zbudować świetną stronę one-page w najbardziej efektywny i najszybszy sposób?

Zbuduj swoją stronę one-page za pomocą Elementora

Elementor to łatwy w użyciu, bogaty w funkcje kreator stron, który ułatwia tworzenie dowolnej liczby stron w witrynie WordPress. To czyni go idealnym narzędziem do tworzenia wspaniałych stron typu one-page.

W kolejnych sekcjach pokażemy ci, jak to zrobić. Przykład, którego używamy, to strona sklepu z owocami i warzywami. Witryna będzie miała:

• jedną stronę z wieloma sekcjami mieszczącymi treść
• menu, które odwiedzający mogą kliknąć, aby przejść bezpośrednio do odpowiednich sekcji
• nagłówek, w którym znajduje się logo i menu
• stopkę

Oto podgląd tego, jak witryna będzie wyglądać na końcu:

Przejdziemy przez każdy krok w szczegółach, ale oto podstawowy proces:

1. Zainstaluj darmowy motyw Neve.
2. Zainstaluj wtyczkę Elementor, jeśli jeszcze tego nie zrobiłeś.
3. Ustaw „płótno” swojej witryny – nagłówek, stopkę i menu.
4. Dodaj swoją zawartość za pomocą Elementora.
5. Połącz menu z różnymi sekcjami w swoim projekcie, aby stworzyć efekt nawigacji na jednej stronie.
6. Ustaw swój projekt jako stronę główną witryny.

Zainstaluj darmowy motyw Neve

• Przejdź do Wygląd → Motywy → Dodaj nowy w pulpicie nawigacyjnym WordPress.
• Wyszukaj „Neve”
• Kliknij przycisk Zainstaluj
• Gdy WordPress zainstaluje motyw, kliknij przycisk Aktywuj, aby go uruchomić

Zainstaluj darmową wtyczkę Elementor

• Go to Plugins → Add New
• Search for „Elementor”
• Zainstaluj i aktywuj darmową wtyczkę Elementor Page Builder.

Teraz, z czystą instalacją WordPress, aktywnym motywem Neve i Elementor page builder, jesteś gotowy do zbudowania swojej strony internetowej typu one page.

Ustaw nagłówek, stopkę i menu

Użyjesz motywu Neve, aby ustawić nagłówek, stopkę i menu twojej strony internetowej.

Nagłówek

Przejdź do pulpitu nawigacyjnego WordPress i kliknij Wygląd → Motywy → Dostosuj, aby dostosować motyw Neve:

Najpierw wybierzesz kolory i tło dla witryny

Następnie w panelu Customizer kliknij Nagłówek → Zmień logo i dodaj logo swojej witryny. Dostosuj szerokość logo, dodaj tytuł witryny, ikonę witryny i tagline. Wybierz, czy nazwa witryny i tagline mają być wyświetlane czy ukrywane w nagłówku.

Na karcie Układ wybierz układ dla nagłówka, a także kolor oraz ustaw padding i marginesy. Ewentualnie wybierz jeden z gotowych nagłówków.

Menu

Następnie musisz utworzyć menu nawigacyjne, które będzie wyświetlane w nagłówku. Aby to zrobić, kliknij na Menu → Utwórz nowe menu. Nadaj mu nazwę i ustaw jego Menu Location równe Primary Menu.

Kliknij Next i Add items. Tutaj dodaj nazwy sekcji, które będziesz tworzyć. Na przykład Main, About Us, Products i Contact. Aby to zrobić, kliknij na przycisk Custom Links.

W polu URL wpisz hashtag, a następnie nazwę tej sekcji. Później, gdy skonfigurujesz Elementor, skonfigurujesz go tak, aby te linki przechodziły do konkretnych sekcji w twoim projekcie. Na przykład:

• #about-us
• #products
• #contact

Stopka

Przejdź do Stopki i dodaj tekst oraz kolor tła. Możesz dodać tutaj dowolną treść:

Hit Publish to save all the changes

Na tym etapie, twoja strona ma nagłówek, stopkę i menu. Powinna wyglądać tak jak poniżej. Teraz, jesteś gotowy do użycia Elementora, aby dodać zawartość, która znajduje się pomiędzy nagłówkiem a stopką:

Utwórz nową stronę i dodaj zawartość za pomocą Elementora

Aby zacząć, przejdź do Strony → Dodaj nowy, aby utworzyć nową stronę. Nadaj stronie nazwę. Jeśli motyw zawiera paski boczne, one również się pojawią. Ale możesz wyciąć paski boczne, ustawiając atrybuty strony na pełną szerokość.

Na nowej stronie, która się otworzy, kliknij Edytuj za pomocą Elementora. Otworzy się panel po lewej stronie. Po prawej stronie znajduje się obszar edycji, w którym zobaczysz, jak strona nabiera kształtów.

Szybkie wprowadzenie do interfejsu Elementora

Zanim przejdziemy dalej, spójrzmy na panel Elementora. Posiada on wiele kreatywnych elementów lub widżetów, takich jak nagłówki, akapity, obrazy lub filmy. Możesz je dodać do swoich treści, przeciągając je nad nie.

W lewej górnej części panelu znajduje się menu hamburger, które otwiera wiele opcji. Tutaj, będziesz w stanie dostosować kolory, czcionki i styl motywu na poziomie globalnym. Nie trzeba dodawać, że oszczędza to wiele czasu podczas dodawania nowych stron.

Z tej zakładki możesz również wyjść do pulpitu nawigacyjnego WordPress w dowolnym momencie.

Na dole panelu znajdują się opcje dostosowania ustawień strony, nadania nazwy stronie, wyświetlenia historii edycji i przełączania między trybami responsywnymi. Jest tam również nawigator, który pokazuje zorganizowany widok strony.

Klikając ikonę oka, możesz wyświetlić podgląd strony, a kiedy będzie gotowa do wejścia na żywo, naciśnij przycisk Publikuj.

Teraz, nadszedł czas, aby zacząć dodawać treść.

Dwa sposoby tworzenia strony one page z Elementorem

Na tym etapie, możesz wybrać, aby przejść do budowania strony one page z Elementorem na dwa sposoby:

1. Wstawić jeden z gotowych szablonów Elementora, a następnie dostosować go do własnych potrzeb. W tym celu kliknij na ikonę folderu w podglądzie na żywo swojego projektu, a otworzy się szereg szablonów, niektóre darmowe, a wiele pro. W zakładce Strony, znajdziesz całkowicie gotowe projekty całych stron. W zakładce Bloki, znajdziesz gotowe szablony dla konkretnych sekcji większej strony (jest to najbardziej przydatne dla stron typu one page).

Możesz wstawić dowolny szablon, klikając na niego. Wtedy będziesz mógł w pełni dostosować każdy element.

2. Alternatywnie, możesz zacząć od zera, klikając przycisk plusa, aby dodać sekcję i budować swój projekt od pustego płótna.

Dla celów tego poradnika, przyjmiemy połączenie obu metod – zbudujemy pierwszą sekcję naszej strony od podstaw, a następnie wybierzemy z bloków szablonów, aby wypełnić pozostałe sekcje.

Jak utworzyć sekcje witryny one page za pomocą Elementora

Elementor używa sekcji, kolumn i widżetów do tworzenia układu dowolnej strony. Sekcje są największymi blokami konstrukcyjnymi i możesz dodać kolumny wewnątrz nich. Wewnątrz tych sekcji lub kolumn, będziesz mógł dodać widżety, które chcesz.

Kliknij na znak '+’, aby dodać sekcję i wybrać strukturę kolumny.

Po najechaniu kursorem myszy na sekcję pojawia się niebieska ramka z uchwytem u góry. Ten uchwyt pozwala dodać nową pustą sekcję nad istniejącą sekcją lub edytować/usunąć sekcję. Kliknięcie kropek na środku umożliwia dostęp do elementów sterujących sekcją – układu, stylu i zaawansowanych. Ponadto możesz przesuwać sekcje w górę lub w dół, przeciągając je na kropki, a także kliknąć prawym przyciskiem myszy, aby wyświetlić więcej opcji, takich jak duplikowanie lub usuwanie.

Podobnie, możesz kliknąć uchwyt z ikoną kolumny w górnym rogu, aby wybrać układ kolumn w sekcji. Możesz również dostosować szerokość kolumn i przestrzeń między nimi. Kliknij prawym przyciskiem myszy na pola, aby dodać więcej kolumn, zduplikować istniejące, usunąć je i inne.

Z panelu Elementor, możesz przeciągnąć dowolny element (zwany widgetem) do kolumny. Po dodaniu elementu do kolumny lub sekcji, w prawym górnym rogu pojawia się ikona ołówka. Kliknij na tę ikonę, aby wyświetlić zawartość, stylizację i zaawansowane opcje edycji w panelu Elementor.

Jak stworzyć pierwszą sekcję

Pierwszą sekcję wykorzystamy do tego, aby odwiedzający poznali charakter firmy i dowiedzieli się czegoś o niej. W tym celu możesz wykorzystać całą szerokość sekcji do umieszczenia obrazu tła. Podczas edycji układu sekcji można dostosować szerokość zawartości i rozciągnąć sekcję na całą szerokość strony, po prostu przełączając przycisk.

Aby dodać obraz tła, wybierz opcję edycji sekcji, klikając kropki w uchwycie. Przejdź do zakładki Styl, która pojawi się w panelu i załaduj obraz z Biblioteki mediów. Dostosuj rozmiar obrazu, jak również nakładki.

W ramach sekcji dodamy pojedynczą kolumnę i wyśrodkujemy ją w sekcji. Wewnątrz kolumny użyjemy trzech widżetów – Nagłówka, który informuje odwiedzających, że sprzedajesz świeże owoce i warzywa, edytora tekstu, który zwraca uwagę na opcje dostawy do domu, oraz przycisku, za pomocą którego odwiedzający mogą złożyć zamówienie.

Dodanie widżetu Nagłówek:

Przeniesienie widżetu tekstowego:

Dodanie widżetu Przycisk:

Teraz możesz dostosować każdy widżet za pomocą opcji edycji.

Jeśli chcesz, możesz również dodać widżety w trzech oddzielnych kolumnach, dodając kolumny poprzez kliknięcie ikony kolumny. Ważne jest to, że każdy widget może być dostosowany do układu, stylu i innych elementów.

Twórz pozostałe sekcje

Teraz, gdy pierwsza sekcja jest gotowa, możesz przejść do pozostałych trzech – O nas, Produkty i Kontakt.

Jak wspomniano wcześniej, użyjemy gotowych bloków szablonów z biblioteki Elementora do zbudowania tych trzech sekcji. Elementor posiada wiele darmowych bloków szablonów w każdej z tych kategorii, a biblioteka jest przeszukiwalna.

Dla sekcji O nas, wybierzemy prosty blok szablonu z nagłówkiem, edytorem tekstu i widżetem wideo. Możesz zastąpić to wszystko swoją własną treścią.

Blok szablonu z podstawioną treścią:

W ten sam sposób możesz wykorzystać bloki szablonów dla sekcji Produkty i Kontakt. Szablon użyty dla sekcji Kontakt jest wyposażony w ikony mediów społecznościowych. Kliknij zakładkę Styl, aby kontrolować kolor ikony, rozmiar, padding i inne.

Ponieważ Elementor pozwala na duże możliwości dostosowywania, możesz sprawić, że te sekcje będą wyglądały inaczej niż zaimportowane szablony.

Kiedy skończysz wprowadzać pożądane zmiany, kliknij zielony przycisk Opublikuj, a zmiany będą dostępne na stronie.

Połącz menu z sekcjami strony

Aby mieć klikalne menu nawigacyjne, musisz połączyć różne sekcje w projekcie Elementora z menu nawigacyjnym, które utworzyłeś w kroku #3. Aby to zrobić, otwórz identyfikator sekcji i przejdź do zakładki Zaawansowane. W polu CSS ID w panelu Elementor w odpowiedniej sekcji, wpisz właściwą nazwę sekcji bez hashtagu.

Na przykład, jeśli Twoje menu łączy się z #about-us, dodasz CSS ID jako about-us. Następnie powtórz ten proces dla wszystkich sekcji, do których chcesz utworzyć odnośniki:

Ustaw swój projekt jako stronę główną

Jako ostatni krok, możesz ustawić stronę, którą właśnie utworzyłeś jako stronę główną witryny one page stworzonej za pomocą Elementora. Aby to zrobić, przejdź do Ustawienia → Czytanie. Kliknij przycisk Wybierz stronę statyczną w sekcji Wyświetlanie strony głównej i wybierz utworzony przez siebie projekt. Na koniec kliknij Zapisz zmiany.

Jeśli jesteś zdezorientowany przez któryś z kroków, mamy pełny przewodnik na temat konfigurowania statycznej strony głównej WordPress.

Wreszcie, twoja witryna one-page jest teraz gotowa. Oto przykład tego, jak może ona wyglądać:

Zakończenie

Oto trzy proste kroki, które pozwolą Ci stworzyć witrynę typu one-page już dziś:

1. Zdefiniuj cel swojej witryny.
2. Wybierz wysokiej jakości motyw one-page, taki jak Neve.
3. Zaprojektuj swoją witrynę przy użyciu Elementora, jeśli to konieczne.

.