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:
Quick Overview
To create a single-page website with smooth scrolling navigation in WordPress, you can use the ElementsKit One Page Scroll module for Elementor. This feature allows you to build a fixed, floating navigation menu, typically using stylized dots, lines, or icons, that automatically glides visitors to specific sections of your page without reloading the browser.
Recomended Pluign: ElementsKit supports both One page website template & one-page navigation functionality.
How to Set Up One Page Navigation:
✅ Enable the Module: Iść do ElementsKit > Modules in your WordPress dashboard, toggle the “Onepage Scroll” module to ON, and save changes.
✅ Configure Global Settings: Open your target page in Elementor, click the bottom-left gear icon to open the Page Settings, navigate to the ElementsKit Settings tab, and toggle “Onepage Scroll” to enable it.
✅ Design the Navigation Menu: Choose your visual navigation style (e.g., dots, squares, or custom icons), set the screen position (left, right, top, bottom), and customize the tooltip typography and icon colors.
✅ Link Sections to the Menu: Click on the specific Elementor sections you want to link to (like your “Services” or “Pricing” rows). Go to the section’s Advanced tab, expand the ElementsKit Onepage Scroll options, turn on “Enable dot,” and provide a tooltip name.
✅ Preview and Publish: Test the navigation on the live frontend preview to ensure the smooth scrolling effect transitions perfectly to each designated section.
Na przykład, if you are launching a landing page for a boutique wedding photography service, you do not need a massive, complex multi-page site. Instead, you can place elegant, floating navigation dots on the right side of the screen labeled “Portfolio,” “Packages,” and “RSVP.” When a bride clicks “Packages,” the screen seamlessly glides down the page directly to your pricing section, keeping her engaged without requiring a page reload.
One-page navigation simplifies the user journey by consolidating all your vital information into a single, highly visual layout. It significantly reduces bounce rates, ensures faster loading speeds by avoiding multiple page requests, and provides an effortless, app-like scrolling experience tailored perfectly for mobile users.
Or watch the One Page Navigation Video Tutorial 👇
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.
However, if you have a big eCommerce business that sells too many products or provides multiple services and needs to cater to a bigger audience then Single page website is not for you. So, let’s jump to the main process without wasting time.
In this blog, I am going to show you not just how to build a website but a modern-looking one page navigation in WordPress that will impress your potential clients. For this tutorial, I will be using the Popular Website Builder CMS – WordPress (as mentioned in the title).
Further, I am going with a visual page builder – Elementor to get the ultimate flexbility for applying one page scroll navigation in WordPress. This is a popular drag-and-drop website builder choice.
And, to apply a
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ć
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
To add Elementor scroll navigation to your WordPress site, first, we need to turn on the Onepage Scroll Module.
- 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
Now, it’s time to choose the navigation style. ElementsKit gives you multiple options for Elementor one page menu navigation. For example, under the circle, you get Scale-up, fill in, fill out, etc. For square pattern, you will have options like scale-up and as part of Line you will get options like the line to grow, line fill, line shrink, etc.
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
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.
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ć Zestaw elementów Onpage Scroll opcja
- 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.
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
Więcej szczegółów możesz sprawdzić na naszym blogu pod adresem różne sposoby wykorzystania wyskakującego widgetu modalnego autorstwa ElementsKit w witrynie WordPress
- 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.
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:
Chcesz wiedzieć więcej o ElementsKit? Sprawdź najnowszą aktualizację ElementsKit wiedzieć więcej o tym niesamowitym dodatku do Elementora.
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 with one page navigation.
Will a one-page website negatively impact my SEO?
Does the ElementsKit One Page Scroll work on mobile devices?
What is the difference between standard anchor links and the ElementsKit Onepage Scroll module?
Can I use the Onepage Scroll module alongside Elementor’s inner sections?
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.
Dodaj komentarz