Tworzenie niestandardowej nawigacji po kolumnach dla stron jednostronicowych za pomocą Divi

Kiedy zdecydujesz się na stworzenie one-pagera, doświadczenie użytkownika nawigacji staje się zupełnie inne. Chociaż ludzie nie mają opuszczać strony, chcesz, aby ich pobyt był przyjazny dla użytkownika. Dlatego większość jednostronicowych stron używa linków kotwicznych na stronie. Możesz umieścić te linki do zakotwiczenia w tradycyjnym górnym menu lub zamiast tego wybrać nawigację boczną. W tym samouczku pokażemy, jak stworzyć piękny projekt nawigacji po kolumnach na swojej stronie, korzystając z nowych opcji kolumn Divi. Dopasujemy wszystkie elementy do wysokości widocznego obszaru 100, aby stworzyć wrażenia pełnoekranowe. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz układ nawigacji po stronie kolumn ZA DARMO

Aby położyć ręce na układzie nawigacji bocznej z wolną kolumną, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Zacznijmy odtwarzać!

Subskrybuj nasz kanał YouTube

Utwórz nową pustą stronę

Pierwszą rzeczą, którą musisz zrobić, to utworzyć nową pustą stronę. Gdy to zrobisz, przełącz się na Visual Builder.

Dodaj nową sekcję

Kolor tła

Zamierzamy zmieścić całą zawartość naszej strony w jednej sekcji, jednym wierszu i dwóch kolumnach. Dodaj do swojej strony nową zwykłą sekcję z białym tłem.

• Kolor tła: #FFFFFF

Rozstaw

Usuń wszystkie domyślne górne i dolne wyściółki sekcji.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i odpowiednio zmień ustawienia rozmiaru:

• Wyrównaj wysokości kolumn: Tak
• Szerokość: 100%
• Maksymalna szerokość: 100%
• Wysokość: 100vh

Rozstaw

Przejdź do ustawień odstępów i usuń wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Ustawienia kolumny 1

Po wprowadzeniu ogólnych ustawień wiersza otwórz ustawienia kolumny 1.

Kolor tła

Dodaj biały kolor tła.

• Kolor tła: #FFFFFF

Cień Pudełka

Wraz z subtelnym pudełkowym cieniem.

• Pozycja pozioma cienia pudełka: 80px
• Siła rozmycia cieni w pudełku: 75px
• Kolor cienia: rgba (0,0,0,0,07)

Skala transformacji

Zmniejszamy też rozmiar kolumny na komputerze.

• Dół: 75% (komputer stacjonarny), 100% (tablet i telefon)
• Po prawej: 75% (komputer stacjonarny), 100% (tablet i telefon)

Przekształć Tłumacz

Zmień pozycję kolumny, używając później niestandardowych ustawień tłumaczenia transformacji.

• Dół: -5vw (komputer), 0px (tablet i telefon)
• Po prawej: 0px

Ustawienia kolumny 2

Kontynuuj, otwierając ustawienia kolumny 2.

Rozstaw

Przejdź do karty projektu i dodaj następujące wartości dopełnienia lewego i prawego na różnych rozmiarach ekranu:

• Lewa wyściółka: 2vw (komputer), 4vw (tablet), 5vw (telefon)
• Prawa wyściółka: 2vw (komputer), 4vw (tablet), 5vw (telefon)

Klasa CSS

Później dodamy płynne przewijanie i ukryjemy pasek przewijania. W tym celu musimy dodać do kolumny niestandardową klasę CSS.

• Klasa CSS: scroll-column

Widoczność

Moduły, które dodamy w drugiej kolumnie, będą reprezentować zawartość naszej strony. Aby umożliwić przewijanie, zmienimy ustawienia przepełnienia.

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: Przewiń

Dodaj moduł tekstowy pozycji menu do kolumny 1

Dodaj kopię

Zacznijmy dodawać moduły! Dodaj pierwszy element menu Text Module do kolumny 1 z wybraną zawartością.

Dodaj link

Dodaj link do kotwicy do elementu menu.

• Adres URL łącza modułu: www.twojastrona.com/twojastrona/#home

Ustawienia tekstu

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Montserrat
• Wyrównanie tekstu: do środka
• Kolor tekstu: #383838
• Rozmiar tekstu: 3vw
• Odstępy między literami tekstu: -3px (komputer), -2px (tablet), -1px (telefon)

Rozstaw

Dodaj następnie niestandardowe wartości górnego i dolnego marginesu.

• Górny margines: 23vw (komputer stacjonarny), 3vw (tablet i telefon)
• Margines dolny: 3vw (komputer), 2vw (tablet), 1vw (telefon)

Dwukrotne klonowanie pozycji menu

Po ukończeniu pierwszego elementu menu sklonuj go dwukrotnie.

Zmień zawartość obu duplikatów

Zmień zawartość pozycji menu obu duplikatów.

Zmień linki obu duplikatów

Wraz z linkami do kotwicy.

• Duplikat 1: /#około
• Duplikat 2: /#usługi

Zmień odstępy obu duplikatów

Uzupełnij duplikaty, zmieniając odpowiednio wartości odstępów:

• Górny margines: 3vw (komputer stacjonarny), 2vw (tablet), 1vw (telefon)
• Margines dolny: 3vw (komputer stacjonarny), 2vw (tablet), 1vw (telefon)

Dodaj moduł rozdzielacza do kolumny 1

Widoczność

Dodaj moduł dzielnika między pierwszym a drugim modułem tekstowym w kolumnie 1. Upewnij się, że opcja 'Pokaż dzielnik' jest włączona.

• Pokaż dzielnik: tak

Linia

Następnie zmień kolor linii.

• Kolor linii: #ffebc9

Rozmiary

Wraz z ustawieniami rozmiaru.

• Waga rozdzielacza: 1vw
• Wysokość: 0px

Moduł dzielnika klonów

Sklonuj moduł rozdzielający i umieść duplikat pod drugim modułem tekstowym.

Dodaj moduł śledzenia mediów społecznościowych do kolumny 1

Dodaj sieci społecznościowe

Następnym i ostatnim modułem, którego potrzebujemy w kolumnie 1, jest moduł śledzenia w mediach społecznościowych. Dodaj wybrane sieci społecznościowe.

Wyrównanie

Następnie przejdź do zakładki projekt i zmień wyrównanie modułu.

• Wyrównanie modułu: Środek

Rozstaw

Następnie zmodyfikuj wartości marginesów.

• Górny margines: 12vw (komputer stacjonarny), 5vw (tablet i telefon)
• Margines dolny: 3vw (tablet i telefon)

Granica

I dodaj „50vw” do każdego z rogów, aby utworzyć okrągły kształt.

Dodaj moduł obrazu do kolumny 2

Załaduj obrazek

Do drugiej kolumny! Dodaj wszystkie moduły, które chcesz, ale nie zapomnij dodać identyfikatora CSS do każdego modułu, do którego ma się odwoływać link kotwicy. Jeśli chcesz odtworzyć dokładny projekt, który był pokazany na podglądzie tego posta, zacznij od dodania modułu obrazu i prześlij wybrany obraz.

Wyrównanie

Przejdź do zakładki projektu i wybierz wyrównanie obrazu do lewej.

• Wyrównanie obrazu: do lewej

Rozmiary

Następnie zmień ustawienia rozmiaru.

• Wymuś pełną szerokość: tak

Rozstaw

I dodaj trochę odpowiedniego wypełnienia.

• Prawa wyściółka: 20vw

Identyfikator CSS

Na koniec przejdź do zakładki zaawansowane i dodaj pierwszy identyfikator CSS. Upewnij się, że pasuje do linku kotwicy pierwszego elementu menu.

• Identyfikator CSS: Strona główna

Dodaj moduł tekstu tytułu do kolumny 2

Dodaj zawartość H2

Przejdźmy do następnego modułu, którym jest moduł tekstowy. Wprowadź wybrane przez siebie treści H2.

Ustawienia tekstu H2

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu H2:

• Czcionka nagłówka 2: Montserrat
• Wyrównanie tekstu nagłówka 2: do lewej
• Kolor tekstu nagłówka 2: #383838
• Rozmiar tekstu nagłówka 2: 2vw (komputer), 4vw (tablet), 5vw (telefon)
• Nagłówek 2 Odstępy między literami: -1px

Rozstaw

Następnie dodaj kilka niestandardowych wartości marginesów.

• Górny margines: 6vw (komputer stacjonarny), 10vw (tablet), 12vw (telefon)
• Margines dolny: 2vw (komputer stacjonarny), 4vw (tablet), 6vw (telefon)

Dodaj moduł rozdzielający do kolumny 2

Widoczność

Następnym modułem, którego potrzebujemy, jest moduł rozdzielający. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Linia

Zmień kolor linii.

• Kolor linii: #ffebc9

Rozmiary

I odpowiednio zmień ustawienia rozmiaru:

• Waga dzielnika: 15px
• Szerokość: 16%
• Wyrównanie modułu: do lewej

Dodaj moduł tekstu podstawowego do kolumny 2

Dodaj zawartość

Dodaj kolejny moduł tekstowy do drugiej kolumny z wybraną zawartością akapitu.

Ustawienia tekstu

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Roboto
• Wyrównanie tekstu: wyjustuj
• Kolor tekstu: #a8a8a8
• Rozmiar tekstu: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Odstępy między literami tekstu: 1px
• Wysokość linii tekstu: 2vw (komputer), 3,5vw (tablet), 4,5vw (telefon)

Rozstaw

Następnie dodaj kilka niestandardowych wartości odstępów.

• Górny margines: 3vw (komputer stacjonarny), 5vw (tablet), 7vw (telefon)
• Margines dolny: 3vw (komputer), 5vw (tablet), 7vw (telefon)
• Prawy margines: 20vw (komputer stacjonarny i tablet), 5vw (telefon)

Dodaj moduł przycisku do kolumny 2

Dodaj zawartość

Kontynuuj, dodając moduł przycisku z wybraną kopią.

Wyrównanie

Wybierz wyrównanie lewego przycisku na karcie projektu.

• Wyrównanie przycisków: w lewo

Przycisk

Zmień odpowiednio ustawienia przycisków:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #0072ff
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px
• Czcionka przycisku: Montserrat
• Grubość czcionki przycisku: pół pogrubiona

Rozstaw

Pobaw się również wartościami odstępów.

• Górny margines: 4vw (komputer stacjonarny), 6vw (tablet), 8vw (telefon)
• Margines dolny: 4vw (komputer stacjonarny), 6vw (tablet), 8vw (telefon)
• Górna wyściółka: 1,5vw (komputer stacjonarny), 3vw (tablet), 4vw (telefon)
• Dolna wyściółka: 1.5vw (komputer), 3vw (tablet), 4vw (telefon)
• Lewa wyściółka: 3vw (komputer), 6vw (tablet), 8vw (telefon)
• Prawa wyściółka: 3vw (komputer), 6vw (tablet), 8vw (telefon)

Sklonuj wszystkie moduły w kolumnie 2 dwa razy i umieść w tej samej kolejności

Po ukończeniu wszystkich modułów w kolumnie 2 możesz je sklonować dwukrotnie i umieścić we właściwej kolejności.

Zmień zduplikowany moduł obrazu nr 1 CSS ID

Zmień identyfikator CSS pierwszego zduplikowanego modułu obrazu.

• Identyfikator CSS: informacje

Zmień zduplikowany moduł obrazu nr 2 CSS ID

Zrób to samo dla drugiego zduplikowanego modułu obrazu.

• Identyfikator CSS: usługi

Ukryj pasek przewijania i dodaj płynne przewijanie

Otwórz ustawienia strony

Teraz, aby stworzyć płynny efekt przewijania i ukryć pasek przewijania kolumny 2, dodamy kilka linijek kodu CSS. Otwórz ustawienia strony.

Dodaj niestandardowy CSS

Następnie przejdź do zakładki zaawansowane i dodaj kod CSS. Po wykonaniu tego kroku gotowe!

.scroll-column::-webkit-scrollbar {
display: none;
}

.scroll-column {
scroll-behavior: smooth;
}

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak stworzyć piękną boczną nawigację po kolumnach dla swojego one-pagera z nowymi opcjami kolumn Divi. To świetny sposób na dodanie do strony linków zakotwiczonych, które pomogą poprawić komfort korzystania z witryny. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.