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:

  • 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ę:

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

Przejdź do elementu nawigacji nowej strony WordPress na jednej stronie
  • Dać tytuł np. Dom, wybierz Pełna szerokość Elementora z opcji szablonu
  • Kliknij, aby opublikować i po opublikowaniu kliknij Edytuj za pomocą Elementora
Utwórz stronę za pomocą narzędzia do tworzenia stron Elementor, elementu nawigacji na jednej stronie
  • Kliknij przycisk ElementsKit (EK) po otwarciu okna Elementor Builder
Kliknij przycisk ElementsKit
  • Idź do Strona zakładka Szukaj Ślub Stronę i kliknij wstawić
Wyszukaj i wstaw ślubną stronę główną według nawigacji ElementsKit na jednej stronie w WordPress

Teraz Kliknij podczas aktualizacji, aby zapisać

Kliknij Aktualizuj, aby zapisać zmiany Elementor nawigacji po jednej stronie

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ć
Turnon Onepage Przewiń według ElementsKit element nawigacji na jedną stronę lub Elementor przewiń na jedną stronę elementor przewijania na jedną stronę

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
Włącz jedną stronę Przewiń z ustawień Elementor Nawigacja na jednej stronie w WordPress

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.

Opcja stylu nawigacji z przewijaniem jednej strony

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
Wybierz niestandardową ikonę nawigacji Nawigacja na jednej stronie w WordPress

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.
Inne ustawienia stylu nawigacji Element przewijania jednej stronylub Nawigacja po jednej stronie

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ć
Dodaj sekcję strony do przewijania nawigacji na jednej stronie

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.

Nawigacja po jednej stronie w WordPress przy użyciu nawigacji Elementor po jednej stronie

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
Dodaj nowy nagłówek ElementsKit One Page Nawigacja w WordPress
  • Wybierz opcję Wpisz jako nagłówek, Warunki jak Cała strona, Włączyć coś opcję Aktywuj/Dezaktywuj i na koniec kliknij Zapisz zmiany.
Utwórz nagłówek za pomocą ElementsKit
  • 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 
Wstaw sekcję nagłówka za pomocą ElementsKit

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.

Pobierz gif 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
Włącz i zapisz wyskakujący widget modalny autorstwa ElementsKit
  • Przejdź do strony głównej Wszystkie strony ⇒ (lub jakkolwiek nazwiesz stronę) i kliknij Edytuj za pomocą Elementora
Edytuj stronę główną 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
Przeciągnij i upuść wyskakujące okienko modalne z ElementsKit i usuń przycisk Nawigacja na jednej stronie w WordPress
  • Aby zmienić tekst przycisku modalnego, przejdź do Treść ⇒ Przycisk przełączający ⇒ Etykieta i zmień „Otwórz modalne” na RSVP (lub cokolwiek chcesz)
Zmień tekst przycisku modalnego w wyskakującym okienku
  • 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ą.
Zmień styl wyskakującego przycisku modalnego za pomocą ElementsKit Elementor Przewiń jedną stronę Elementor przewiń jedną stronę
  • 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
Włącz szablon i kliknij, aby otworzyć panel Elementora
  • 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ć
Dodaj Metform do modalnego wyskakującego okienka w Elementorze, przewiń jedną stronę, przewiń stronę elementora

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:

Witryna jednostronicowa z elementem nawigacji na jednej stronie lub elementem nawigacji na jednej stronie. Elementor przewijania jednej strony. Element przewijania jednej strony
Zapowiedź

Chcesz wiedzieć więcej o ElementsKit? Sprawdź najnowszą aktualizację ElementsKit wiedzieć więcej o tym niesamowitym dodatku do Elementora.

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.


Uwagi

Dodaj komentarz

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