Utwórz witrynę jednostronicową z nawigacją po jednej stronie w WordPress (z bonusem)

Chcesz zbudować stronę internetową dla swojej firmy, ale nie masz czasu na stworzenie dużej? A może nie jesteś gotowy na długotrwałą konserwację witryny?

Następnie powinieneś wybrać witrynę jednostronicową z nawigacją po jednej stronie. Witryna jednostronicowa podaje wszystkie informacje w atrakcyjny sposób i nadaje Twojej witrynie oszałamiający wygląd, dzięki czemu Twoi użytkownicy mogą się bardziej zaangażować.

Na tym blogu dowiesz się nie tylko, jak stworzyć witrynę jednostronicową z nawigacją po jednej stronie w WordPress , ale także jak dodać formularz kontaktowy w wyskakującym okienku jako bonus.

Większość ludzi opuszcza witrynę, jeśli nie znajdą odpowiedniego sposobu na skontaktowanie się z właścicielem, więc ta dodatkowa wskazówka naprawdę doda niezwykłej wartości Twojej witrynie.

Nie traćmy więcej czasu i rozpocznij proces tworzenia oszałamiająco wyglądającej strony internetowej z jednostronicową nawigacją Elementora . Ostateczny wygląd strony możesz sprawdzić za pomocą przycisku poniżej:

Co to jest nawigacja po jednej stronie?

Nawigacja po jednej stronie, jak sugeruje nazwa, to menu nawigacyjne zaprojektowane specjalnie do nawigowania do różnych części jednej strony internetowej. Nawigacja po jednej stronie z płynnym efektem przewijania sprawia, że ​​nawigacja po różnych sekcjach jest łatwa i przyjazna dla użytkownika.

"Prostota jest szczytem wyrafinowania." - Leonardo da Vinci

Ta prostota daje stronom jednostronicowym przewagę, której potrzebują nad innymi. Jednostronicowa witryna internetowa jest idealna dla małych firm, takich jak planowanie ślubów, fotografia, mały salon, restauracja itp.

Jeśli jednak masz dużą firmę eCommerce, która sprzedaje zbyt wiele produktów lub oferuje wiele usług i musi zaspokoić większą liczbę odbiorców, witryna jednostronicowa nie jest dla Ciebie.

Jakie są zalety witryny jednostronicowej z nawigacją po jednej stronie?

Nie powinieneś myśleć o założeniu jednej strony internetowej dla swojej firmy tylko dlatego, że Twoja firma jest mała. Istnieje wiele innych korzyści z posiadania jednostronicowej witryny, zwłaszcza jednostronicowej witryny WordPress. Przyjrzyjmy się niektórym zaletom:

• Po pierwsze, jest przyjazny dla urządzeń mobilnych. Jest to kluczowa rzecz do rozważenia, jeśli chodzi o SEO witryny (optymalizacja pod kątem wyszukiwarek). Według stanu na 2021 r. 70% obywateli Stanów Zjednoczonych używa urządzenia mobilnego do wyszukiwania w internecie. Takie dane są powodem, dla którego Google priorytetowo traktuje witrynę przyjazną dla urządzeń mobilnych. Dzięki projektowi pojedynczej strony Twoja witryna od samego początku trafia do dobrych książek Google.

• Większość ludzi woli stronę internetową, która jest prosta, piękna i rzeczowa, niż niepotrzebnie długa.
• Google liczy uprawnienia do linków na poziomie domeny i strony w stopniu 40%. To kolejny obszar, w którym Twoja jednostronicowa witryna będzie miała przewagę.
• Witryny jednostronicowe ładują się szybciej niż witryny z mnóstwem stron. Biorąc pod uwagę fakt, że ludzie w dzisiejszych czasach mają nieograniczone możliwości, posiadanie szybko ładującej się strony jest naprawdę niezbywalne.
• Witryny jednostronicowe są łatwe w utrzymaniu.
• Ponieważ pojedyncza strona internetowa zawiera wszystkie informacje na jednej stronie, nawigacja z przewijaniem znacznie ułatwia nawigację, a płynny efekt przewijania sprawia, że ​​użytkownik jest kojący.

Mogę kontynuować przez jakiś czas, ale myślę, że powyższe informacje przekazują przesłanie, że jeśli Twoja firma jest mała, możesz uzyskać duże, w rzeczywistości naprawdę duże korzyści, korzystając z małej witryny z nawigacją po jednej stronie. Przejdźmy więc do głównego procesu bez marnowania czasu.

Jak stworzyć pojedynczą stronę internetową z nawigacją po jednej stronie w WordPress

W tym blogu pokażę nie tylko, jak zbudować stronę internetową, ale także nowocześnie wyglądającą nawigację po jednej stronie w WordPressie, która zrobi wrażenie na Twoich potencjalnych klientach. W tym samouczku użyję narzędzia do tworzenia popularnych witryn WordPress (wiem, że jest napisane w tytule!)

Więc zacznijmy…

Krok #1: Zainstaluj wymagane wtyczki WordPress

Po zainstalowaniu WordPressa w swoim systemie. Musisz zainstalować następujące wtyczki WordPress:

• Elementor (darmowa wersja)
• ElementsKit (zarówno w wersji bezpłatnej, jak i Pro)
• MetForm (darmowa wersja)

Po zakończeniu instalacji i aktywacji wymaganych wtyczek WordPress nadszedł czas na zbudowanie witryny.

Krok 2: Utwórz stronę internetową za pomocą gotowej strony ElementsKit

ElementsKit udostępnia wiele gotowych stron, szablonów i sekcji, dzięki czemu ludzie mogą tworzyć witrynę internetową o dowolnym projekcie, układzie i stylu, bez kodowania. Na potrzeby tego bloga użyję strony docelowej Wedding planner stworzonej przez ElementsKit.

Aby utworzyć swoją witrynę, z pulpitu WordPress przejdź do stron ⇒ Dodaj nowy

• Nadaj tytuł , taki jak Home, wybierz Elementor Full Width z opcji szablonu
• Kliknij, aby opublikować , a po opublikowaniu kliknij Edytuj za pomocą Elementora

• Kliknij przycisk ElementsKit (EK), gdy otworzy się okno Elementor Builder

• Przejdź do zakładki Strona , Wyszukaj stronę ślubną i kliknij wstaw

Teraz kliknij aktualizację, aby zapisać

Krok #3: Jak dodać nawigację do Elementora po jednej stronie za pomocą ElementsKit

Teraz, gdy mamy naszą witrynę, nadszedł czas na zabawną część, którą jest dodanie nawigacji z przewijaniem na jednej stronie. ElementsKit Nawigacja z przewijaniem na jednej stronie jest łatwiejsza w użyciu i nadaje witrynie oszałamiający wygląd. Jest bardzo mało prawdopodobne, że znajdziesz inny dodatek do nawigacji na jednej stronie Elementor tak dobry jak ElementsKit.

Teraz przyjrzyjmy się krok po kroku procesowi dodawania jednego linku nawigacyjnego przewijania strony do witryny WordPress:

3.1 Włącz moduł przewijania jednej strony

Aby dodać nawigację przewijania do swojej witryny WordPress, najpierw musimy włączyć moduł przewijania Onepage.

• Przejdź do: Pulpit nawigacyjny WordPress ⇒ ElementsKit ⇒ Moduły
• Włącz przewijanie jednej strony
• Kliknij Zapisz zmiany , aby zaktualizować

3.2 Włącz One Page Scroll z ustawieniami strony

• Kliknij ikonę Ustawienia w lewym dolnym rogu panelu Elementor
• Otwórz kartę Ustawienia ElementsKit
• Włącz opcję przewijania jednej strony

Uwaga: jeśli nie możesz znaleźć opcji Onepage Scroll Setting, prawdopodobnie nie aktywowałeś swojego ElementsKit Pro

3.3 Wybierz styl nawigacji

Teraz nadszedł czas na wybór stylu nawigacji. ElementsKit oferuje wiele opcji nawigacji. Na przykład pod kółkiem otrzymasz Skalowanie, wypełnianie, wypełnianie itp. W przypadku wzoru kwadratowego będziesz mieć opcje takie jak skalowanie w górę, a jako część linii otrzymasz opcje, takie jak linia do wzrostu, wypełnienie linii , zmniejszanie linii itp.

Możesz wybrać dowolny styl, dla tego bloga wybiorę niestandardową ikonę. Po wybraniu ikony niestandardowej pojawi się opcja wyboru ikony dla opcji Styl nawigacji z przewijaniem jednej strony. Możesz wybrać ikonę z biblioteki ikon lub przesłać niestandardową ikonę SVG .

Aby wybrać niestandardową ikonę

• Wybierz opcję Niestandardowa ikona z menu stylu nawigacji
• Najedź na ikonę nawigacji i kliknij bibliotekę ikon
• Wyszukaj i wstaw ikonę, którą lubisz

3.4 Skonfiguruj inne ustawienia nawigacji

Po wybraniu stylu nawigacji uzyskasz dostęp do następujących ustawień:

• Pozycja nawigacji: Możesz ustawić pozycję nawigacji jako górną, prawą, dolną lub lewą.
• Przesunięcie pozycji nawigacji: Tutaj możesz wybrać wartość przesunięcia pozycji nawigacji.
• Odstępy nawigacji: Wybierz żądaną przestrzeń między każdą ikoną nawigacji.
• Kolor nawigacji: wybierz kolor ikony nawigacji.
• Typografia podpowiedzi: Tutaj możesz wybrać rodzinę, rozmiar czcionki, zmianę wagi, styl, dekorację i wysokość linii dla podpowiedzi.

3.5 Dodaj sekcje strony do łączy nawigacyjnych

Teraz, gdy wszystkie ustawienia są gotowe, nadszedł czas, aby dodać sekcje, które chcesz wyświetlić w nawigacji. Aby to zrobić

• Najedź kursorem na sekcję i kliknij ikonę Edytuj sekcję
• Przejdź do zakładki Zaawansowane
• Rozwiń opcję przewijania na stronie ElementsKit
• Włącz Włącz sekcję , aby sekcja była widoczna
• Włącz opcję enable do t, aby dodać tę sekcję jako jedno z łączy nawigacyjnych
• Podaj nazwę tekstu podpowiedzi . Tekst podpowiedzi pojawi się, gdy ktoś najedzie na link
• Na koniec kliknij aktualizację, aby zapisać

Możesz powtórzyć ten sam proces, o którym mowa powyżej, aby dodać wszystkie sekcje, które chcesz do nawigacji.

Uwaga: Możesz dodać sekcję do nawigacji, a nie sekcję wewnętrzną. Tak więc nie znajdziesz opcji ElementsKit Onpage Scroll pod zakładką Zaawansowane dla sekcji wewnętrznej ani żadnego innego widżetu.

Po wykonaniu całej nawigacji zaktualizuj i kliknij , aby zobaczyć podgląd nawigacji po jednej stronie w WordPressie, a także sprawdzić linki menu nawigacyjnego.

Krok 4: Dodaj stopkę nagłówka za pomocą gotowej sekcji stopki nagłówka ElementsKit

Cóż, masz teraz nawigację po jednej stronie w WordPressie, ale nadal potrzebujesz stopki nagłówka, aby uzupełnić swoją witrynę. Sekcje nagłówka i stopki witryny są bardzo ważne, aby wyświetlać logo i ważne informacje, aby klienci mogli je łatwo zobaczyć.

ElementsKit udostępnia wiele gotowych sekcji nagłówka i stopki do wyboru. Aby użyć stopki nagłówka ElementsKit:

• Przejdź do ElementsKit ⇒ Header Footer ⇒ Kliknij Dodaj nowy

• Wybierz Typ jako nagłówek , Warunki jako cała witryna , Włącz opcję Aktywuj/Dezaktywuj i na koniec kliknij Zapisz zmiany .

• Teraz, aby dodać sekcję nagłówka, kliknij Edytuj w utworzonym menu
• Kliknij Edytuj zawartość
• Kliknij przycisk EK i przejdź do zakładki Sekcje
• Wybierz projekt nagłówka, który Ci się podoba i kliknij wstaw

Możesz śledzić poniższy film, aby stworzyć piękną stopkę nagłówka dla swojej witryny.

Uwaga: możesz wykonać te same czynności, co nagłówek, aby utworzyć sekcję stopki dla swojej witryny za pomocą sekcji Wstępnie utworzone przez ElementsKit.

Krok #5: Dodaj formularz kontaktowy jako wyskakujące okienko modalne (BONUS)

Czas dodać formularz kontaktowy do swojej witryny, aby ułatwić potencjalnym klientom komunikację z Tobą. Dodanie formularza kontaktowego za pomocą wyskakującego okienka nada Twojej witrynie typu one page bardziej atrakcyjny wygląd wraz z bardzo potrzebnym formularzem.

Aby dodać modalne wyskakujące okienko, zamierzam zastąpić przycisk RSVP wyskakującym okienkiem i dodać do niego formularz kontaktowy.

• Przejdź do ElementsKit ⇒ Widgety ⇒ Włącz wyskakujące okienko ⇒ Kliknij Zapisz zmiany

• Przejdź do strony głównej Wszystkie strony ⇒ (lub innej nazwy strony) i kliknij Edytuj za pomocą Elementora

• W trybie edycji przewiń do sekcji RSVP i usuń przycisk RSVP
• Przeciągnij i upuść wyskakujące okienko modalne w miejscu przycisku RSVP

• Aby zmienić tekst przycisku modalnego, przejdź do Treść ⇒ Przycisk przełączania ⇒ Etykieta i zmień „Otwórz modalny ” na RSVP (lub cokolwiek chcesz)

• Przejdź do zakładki Styl ⇒ Przycisk przełączania, aby zmienić kolor tła przycisku, kolor tekstu, promień obramowania i inne ustawienia zarówno dla widoku normalnego, jak i po najechaniu kursorem.

• Teraz przejdź do Treści i włącz tryb Włącz szablon, abyśmy mogli dodać nasz formularz kontaktowy.
• Kliknij przycisk wyskakujący. Po otwarciu kliknij ikonę edycji na ciele, aby otworzyć edytor Elementor

• Wyszukaj Metform, przeciągnij i upuść widżet
• Kliknij formularz Edytuj, aby wybrać formularz kontaktowy
• Wybierz żądany formularz z listy i kliknij Zapisz i zamknij
• Na koniec kliknij aktualizację, aby zapisać

Uwaga: formularz RSVP utworzyłem już za pomocą Metform, a także zmieniłem nieco kolor i styl, aby dopasować go do szablonu strony docelowej, którego używamy. Możesz sprawdzić na blogu , jak tworzyć i stylizować formularze kontaktowe za pomocą Metform .

Możesz również obejrzeć poniższy film, aby uzyskać instrukcje tworzenia niestandardowego formularza kontaktowego za pomocą Metform.

Krok #6: Zaktualizuj i zobacz podgląd Pojedyncza witryna z nawigacją po jednej stronie

Cóż, wszystko jest zrobione. Teraz przejdźmy do ostatniego kroku, najłatwiejszego i najbardziej ekscytującego. Po zakończeniu wszystkich dostosowań i kroków wymienionych powyżej kliknij przycisk Aktualizuj, aby zapisać wszystko, i kliknij przycisk Podgląd, aby zobaczyć swoją witrynę.

Pod warunkiem, że poprawnie wykonałeś wszystkie kroki, powinieneś otrzymać witrynę jednostronicową z nawigacją po jednej stronie w WordPressie, taką jak ta poniżej:

Zakończyć

Poklep się po plecach! Ponieważ z powodzeniem stworzyłeś nowocześnie wyglądającą, piękną stronę internetową z nawigacją po jednej stronie za pomocą Elementor i ElementsKit. Korzystając z jednostronicowej witryny, klienci mogą łatwo przechodzić do różnych sekcji witryny, aby dowiedzieć się o Twojej firmie. A to modalne wyskakujące okienko z formularzem kontaktowym za pomocą jednego kliknięcia sprawia, że ​​komunikacja jest naprawdę jednym kliknięciem!

Jeśli jesteś pod wrażeniem tego, co zbudowałeś, przygotuj się na jeszcze większe zaskoczenie, ponieważ ElementsKit otwiera nieograniczone możliwości dla użytkowników WordPressa i Elementora do eksperymentowania i tworzenia niesamowicie wyglądającej strony internetowej. Poświęć więc czas na zapoznanie się z innymi zaawansowanymi widżetami i modułami ElementsKit.

Aby dowiedzieć się więcej o tworzeniu stron internetowych za pomocą WordPressa, Elementora i magicznego zestawu ElementsKit, śledź nas na naszych kontach w mediach społecznościowych.