Utwórz witrynę jednostronicową z nawigacją na 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 zaangażować się w długoterminową konserwację witryny?

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

Na tym blogu dowiesz się nie tylko, jak to zrobić utwórz witrynę jednostronicową z nawigacją na 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, zatem ta dodatkowa wskazówka naprawdę doda Twojej witrynie niezwykłej wartości.

Nie marnujmy więcej czasu i rozpocznijmy proces tworzenia oszałamiająco wyglądającej strony internetowej z rozszerzeniem Nawigacja po jednej stronie Elementora. Ostateczny wygląd witryny możesz sprawdzić klikając poniższy przycisk:

Co to jest nawigacja na jednej stronie?

Nawigacja na jednej stronie, jak sama nazwa wskazuje, to menu nawigacyjne zaprojektowane specjalnie do nawigacji do różnych części pojedynczej strony internetowej. Nawigacja na jednej stronie z płynnym efektem przewijania sprawia, że nawigacja do różnych sekcji jest łatwa i przyjazna dla użytkownika.

"Prostota jest szczytem wyrafinowania." - Leonardo da Vinci

Ta prostota zapewnia witrynom jednostronicowym przewagę, której potrzebują nad innymi. Jednostronicowa witryna internetowa jest świetna dla małych firm, takich jak organizatorzy wesel, fotografia, mały salon, restauracja itp.   

Jeśli jednak prowadzisz dużą firmę e-commerce, która sprzedaje zbyt wiele produktów lub świadczy wiele usług i musi zaspokoić potrzeby większej liczby odbiorców, witryna jednostronicowa nie jest dla Ciebie.

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

Nie powinieneś myśleć o stworzeniu jednostronicowej witryny internetowej dla swojej firmy tylko dlatego, że Twoja firma jest mała. Posiadanie jednostronicowej witryny internetowej ma wiele innych zalet, zwłaszcza jednostronicowej witryny WordPress. Rzućmy okiem na niektóre zalety:

• Po pierwsze, jest przyjazny dla urządzeń mobilnych. Jest to kluczowa rzecz do rozważenia, jeśli chodzi o SEO witryny internetowej (optymalizacja pod kątem wyszukiwarek). Od 2021 r. 70% obywatela USA korzysta z urządzenia mobilnego do wyszukiwania w Internecie. Takie dane są tego przyczyną Google priorytetowo traktuje witrynę przyjazną urządzeniom mobilnym. Dzięki projektowi pojedynczej strony Twoja witryna od samego początku znajdzie się w dobrych książkach Google.

• Większość ludzi wolisz stronę internetową, która jest prosta, piękna i na temat zamiast niepotrzebnie długiego. 
• Google się liczy Na poziomie domeny i strony władza łącza do stopnia 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 obecnie ludzie mają nieograniczone możliwości, posiadanie szybko ładującej się witryny naprawdę nie podlega negocjacjom.
• Witryny jednostronicowe są łatwe w utrzymaniu.
• Ponieważ witryna z jedną stroną zawiera wszystkie informacje na jednej stronie, przewijana nawigacja znacznie ułatwia nawigację, a płynny efekt przewijania sprawia, że użytkownik czuje się kojąco.

Mógłbym tak długo wymieniać, ale myślę, że powyższe informacje rzeczywiście niosą ze sobą przesłanie, że jeśli Twoja firma jest mała, naprawdę możesz stać się duża duże korzyści z korzystania z małej strony internetowej z nawigacją po jednej stronie. Przejdźmy więc do głównego procesu, nie marnując czasu.

Jak utworzyć pojedynczą witrynę internetową z nawigacją na jednej stronie W WordPressie

Na tym blogu pokażę Ci nie tylko, jak zbudować stronę internetową, ale także nowoczesną, jednostronicową nawigację w WordPressie, która zrobi wrażenie na Twoich potencjalnych klientach. W tym samouczku użyję narzędzia do tworzenia popularnych stron internetowych WordPress (wiem, że jest napisane w tytule!).

 Więc zacznijmy…

Krok #1: Zainstaluj wymagane wtyczki WordPress aby utworzyć Elementor One Page Scroll

Po zainstalowaniu WordPressa w swoim systemie. Aby utworzyć, musisz zainstalować następujące wtyczki WordPress

strona internetowa Elementor przewiń jedną stronę:

• Elementora (Darmowa wersja)
• Zestaw elementów (Zarówno wersja darmowa, jak i Pro)
• MetForm (Darmowa wersja)

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

Krok #2: Utwórz witrynę internetową, korzystając z gotowej strony ElementsKit

ElementsKit zapewnia wiele gotowe strony i szablony i sekcje, dzięki czemu ludzie mogą zbudować witrynę internetową o dowolnym projekcie, układzie i stylu, bez konieczności kodowania. Na tym blogu zamierzam używać Strona docelowa organizatora ślubu przez ElementsKit.

Aby utworzyć witrynę internetową, z panelu WordPress przejdź do Strony ⇒ Dodaj nowe

• Dać tytuł np. Dom, wybierz Pełna szerokość Elementora z opcji szablonu
• Kliknij, aby opublikować i po opublikowaniu kliknij Edytuj za pomocą Elementora

• Kliknij przycisk ElementsKit (EK) po otwarciu okna Elementor Builder

• Idź do Strona zakładka Szukaj Ślub Stronę i kliknij wstawić

Teraz Kliknij podczas aktualizacji, aby zapisać

Krok #3: Jak dodać nawigację po jednej stronie Elementora przy użyciu ElementsKita

Skoro mamy już naszą stronę internetową, czas na zabawną część, czyli dodanie nawigacji przewijanej po jednej stronie w Elementorze. Nawigacja przewijana w ElementsKit Onepage jest łatwiejsza w użyciu i nadaje Twojej witrynie oszałamiający wygląd. Jest bardzo mało prawdopodobne, że znajdziesz inny dodatek do Elementora z przewijaniem jednej strony, tak dobry jak ElementsKit.

Przyjrzyjmy się teraz krok po kroku procesowi dodawania linku nawigacyjnego przewijania jednej strony do witryny WordPress:

3.1 Włącz moduł przewijania jednej strony

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

• Iść do: Panel WordPress ⇒ ElementsKit ⇒ Moduły 
• Włączyć coś Przewiń jedną stronę
• Kliknij Zapisz zmiany aktualizować

3.2 Włącz przewijanie jednej strony z ustawień strony

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

Notatka: Jeśli nie możesz znaleźć opcji Ustawienia przewijania jednej strony, prawdopodobnie jej nie masz aktywowałeś swój ElementsKit Pro

3.3 Wybierz styl nawigacji

Teraz czas wybrać styl nawigacji. ElementsKit zapewnia wiele opcji nawigacji. Na przykład pod okręgiem znajdziesz opcję Skaluj, wypełnij, wypełnij itp. W przypadku wzoru kwadratowego będziesz mieć opcje takie jak skalowanie, a w ramach opcji Linia otrzymasz opcje takie jak powiększanie linii, wypełnianie linii , kurczenie się linii itp.

Możesz wybrać dowolny styl, który ci się podoba, na tym blogu wybiorę niestandardową ikonę. Po wybraniu ikony niestandardowej dostępna będzie opcja wyboru ikony dla opcji stylu nawigacji z przewijaniem jednej strony. Możesz wybrać ikonę z biblioteka ikon lub prześlij plik niestandardowy Ikona SVG. 

Aby wybrać niestandardową ikonę

• Wybierz ikonę niestandardową opcję z listy rozwijanej stylu nawigacji
• Unosić się na ikonie nawigacji i Kliknij w bibliotece ikon
• Wyszukaj i wstaw Ikona, którą lubisz

3.4 Skonfiguruj inne ustawienia nawigacji

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

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

3.5 Dodaj sekcje strony do łączy nawigacyjnych

Teraz, gdy wszystkie ustawienia są już gotowe, czas dodać sekcje, które mają być wyświetlane w nawigacji. Aby to zrobić

• Unosić się w sekcji i kliknij przycisk Edytuj sekcję Ikona
• Idź do Zakładka Zaawansowane
• Zwiększać Opcja przewijania strony ElementsKit
• Włącz opcję Włącz sekcję aby sekcja była widoczna
• Włącz opcję „zrób”.możliwość dodania tej sekcji jako jednego z linków nawigacyjnych
• Podaj nazwę dla tekst podpowiedzi. Tekst podpowiedzi pojawi się, gdy ktoś najedzie kursorem na link
• Na koniec kliknij aktualizację, aby zapisać

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

Notatka:  Do nawigacji możesz dodać sekcję, a nie sekcję wewnętrzną. Zatem nie znajdziesz opcji przewijania strony ElementsKit w zakładce Zaawansowane dla sekcji wewnętrznej ani żadnego innego widżetu.

Po wykonaniu całej nawigacji, zaktualizuj i kliknij aby zobaczyć zapowiedź nawigacji po jednej stronie w WordPress, a także do sprawdzania linków menu nawigacji.

Krok #4: Dodaj stopkę nagłówka, korzystając z gotowej sekcji stopki nagłówka w ElementsKit

Cóż, masz teraz nawigację po jednej stronie witryny w WordPress, ale nadal potrzebujesz stopki nagłówka, aby ukończyć witrynę. Sekcje nagłówka i stopki witryny internetowej są bardzo ważne, ponieważ wyświetlają Twoje logo i ważne informacje, aby klienci mogli je łatwo zobaczyć.

ElementsKit zapewnia wiele gotowy nagłówek I Sekcje stopki do wybrania z. Aby użyć stopki nagłówka ElementsKit:

• Iść do ElementsKit ⇒ Stopka nagłówka ⇒ Kliknij Dodaj nowe

• Wybierz opcję Wpisz jako nagłówek, Warunki jak Cała strona, Włączyć coś opcję Aktywuj/Dezaktywuj i na koniec kliknij Zapisz zmiany.

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

Możesz skorzystać z poniższego filmu, aby utworzyć piękną stopkę nagłówka dla swojej witryny.

Notatka: Możesz wykonać te same kroki, co w przypadku nagłówka, aby utworzyć sekcję stopki w swojej witrynie internetowej, korzystając z gotowych sekcji autorstwa ElementsKit.

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

Czas dodać do swojej witryny formularz kontaktowy, dzięki któremu potencjalni klienci będą mogli łatwiej komunikować się z Tobą. Dodanie formularza kontaktowego za pomocą wyskakującego okienka nada Twojej jednostronicowej witrynie bardziej atrakcyjny wygląd wraz z niezbędnym formularzem, którego potrzebujesz.

Aby dodać modalne wyskakujące okienko, zamierzam zastąpić plik Odpowiedź przycisk z wyskakującym okienkiem i dodaj do niego formularz kontaktowy.

• Przejdź do ElementsKit ⇒ Widgety ⇒ Włącz moduł wyskakujący ⇒ Kliknij Zapisz zmiany

• Przejdź do strony głównej Wszystkie strony ⇒ (lub jakkolwiek nazwiesz stronę) i kliknij Edytuj za pomocą Elementora

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

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

• Przejdź do karty Styl ⇒ Przycisk przełączania, aby zmienić kolor tła przycisku, kolor tekstu, promień obramowania i inne ustawienia zarówno w widoku normalnym, jak i po najechaniu myszką.

• 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 korpusie, 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ć

Notatka: Utworzyłem już formularz RSVP za pomocą Metform, a także zmieniłem nieco kolor i styl, aby pasowały do szablonu strony docelowej, którego używamy. Możesz zajrzeć na bloga jak tworzyć i stylizować formularze kontaktowe za pomocą Metform. 

Możesz także sprawdzić poniższy film z instrukcjami o tym, jak zbudować niestandardowy formularz kontaktowy za pomocą Metform.

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

Cóż, wszystko zostało zrobione. Przejdźmy teraz do ostatniego kroku, najłatwiejszego i najbardziej ekscytującego. Po zakończeniu wszystkich dostosowań i kroków wymienionych powyżej kliknij przycisk Przycisk Aktualizuj aby zapisać wszystko i kliknij Przycisk podglądu aby zobaczyć Twoją witrynę.

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

Ostatnie słowa na stronie internetowej Elementor One Page Scroll

Poklep się po plecach! Ponieważ udało Ci się stworzyć nowocześnie wyglądającą, piękną witrynę internetową z nawigacją na jednej stronie przy użyciu Elementora i ElementsKit. Korzystając z jednostronicowej witryny, klienci mogą z łatwością przechodzić do różnych sekcji witryny, aby poznać Twoją firmę. A to modalne wyskakujące okienko z formularzem kontaktowym umożliwiające komunikację jednym kliknięciem! 

Jeśli jesteś pod wrażeniem tego, co zbudowałeś, przygotuj się na jeszcze większe zaskoczenie, ponieważ ElementsKit otwiera przed użytkownikami WordPress i Elementor nieograniczone możliwości eksperymentowania i tworzenia niesamowicie wyglądającej strony internetowej. Więc poświęć trochę czasu, aby sprawdzić inne zaawansowane widżety i moduły z ElementsKit.

Aby dowiedzieć się więcej na temat tworzenia stron internetowych za pomocą WordPress, Elementor i magicznego ElementsKit, śledź nas na naszych kontach w mediach społecznościowych.