Jak utworzyć stronę główną nawigacji za pomocą Divi

Istnieje mnóstwo podejść, które możesz zastosować na swojej stronie głównej, ale jeśli chcesz dodać trochę dodatkowego akcentu do swojej witryny, wybierz stronę nawigacyjną jako stronę główną. Nie będziesz go widywał tak często, a to daje odwiedzającym jasny obraz tego, czego mogą oczekiwać od Twojej witryny. Poza tym pomoże to również odwiedzającym nawigować wizualnie po różnych stronach pełnych niesamowitych treści, które dostarczasz.

Aby pokazać Ci, jak możesz to zrobić z Divi, w stylowy i elegancki sposób, stworzyliśmy projekt, który pokażemy Ci, jak odtworzyć w tym poście. Będą dwie wersje; wersja komputerowa i odpowiednia na tablet i telefon. Zanim zagłębimy się w samouczek, spójrzmy na końcowy wynik.

Wynik na pulpicie

Wynik, który zamierzamy odtworzyć, wygląda tak na komputerze:

Wynik na urządzeniu mobilnym

Wynik na telefonie jest nieco inny i wygląda tak:

Jak utworzyć stronę główną nawigacji za pomocą Divi

Subskrybuj nasz kanał YouTube

Odtwórz wersję na komputery stacjonarne

Stworzymy dwie wersje strony nawigacyjnej; wersja desktopowa oraz wersja na tablet i telefon. W ten sposób będziemy mieć pewność, że strona nawigacyjna będzie dobrze wyglądać na wszystkich urządzeniach. Jak zwykle zaczniemy od stworzenia wersji desktopowej.

Dodaj nową sekcję

Zacznij od stworzenia nowej strony i dodania do niej zwykłej sekcji. W tym samouczku użyjemy tylko jednej sekcji, która będzie zawierać wszystkie wiersze z potrzebną zawartością (zarówno w wersji na komputery, jak i urządzenia mobilne). Możesz jednak również podzielić wersję na komputery i urządzenia mobilne na dwie sekcje.

Odtwórz pierwszy wiersz nawigacji

Jak widać na powyższym podglądzie wyników, każdy z elementów nawigacyjnych ma mniej więcej ten sam projekt z różnymi szczegółami. Większość ustawień dla każdego elementu nawigacji, który chcesz utworzyć, jest taka sama. Dlatego pokażemy Ci szczegółowo, jak utworzyć pierwszy wiersz, a następnie pokażemy, jak wprowadzić modyfikacje innych elementów nawigacji, które chcesz dodać do strony.

Struktura kolumny

Przede wszystkim wybierz kolumnę o pełnej szerokości dla właśnie dodanego wiersza. Zanim dodamy do niego jakiekolwiek moduły, upewnimy się, że ustawienia wierszy są na miejscu, więc otwórz ustawienia wierszy.

Zdjęcie w tle

Będąc na karcie Treść, pierwszą rzeczą, którą zrobimy, jest dodanie obrazu tła do wiersza. Zalecamy użycie obrazu o szerokości „1400px” i wysokości „934px”, ponieważ zapewni to najlepszy wynik. Upewnij się również, że ustawiłeś obraz na „bez powtórzeń”.

Wyrównanie

Następnie przejdź do karty Projekt i dodaj odpowiednie wyrównanie do swojego wiersza. W ten sposób utworzysz wystarczająco dużo miejsca po lewej stronie ekranu, aby dodać opis i link.

Rozmiary

Następnie otwórz podkategorię Rozmiar, włącz opcję „Użyj niestandardowej szerokości” i użyj procentowej szerokości „100%”.

Rozstaw

Idąc dalej, chcemy dodać trochę odstępu między każdym elementem nawigacji, dlatego dodamy górny i dolny margines '5px' do wiersza.

Widoczność

Na koniec chcemy wyłączyć ten wiersz na telefonie i tablecie, ponieważ zamierzamy utworzyć kolejny wiersz, który będzie pasował do tabletu i telefonu później w tym poście.

Moduł tekstowy opisu strony

Ustawienia tekstu

Po skonfigurowaniu ustawień wiersza możesz dodać pierwszy moduł tekstowy do kolumny wiersza i użyć następujących ustawień dla podkategorii Tekst na karcie Projekt:

• Czcionka tekstu: Andika
• Grubość czcionki tekstu: Regularna
• Rozmiar tekstu: 13px
• Kolor tekstu: #000000
• Wysokość linii tekstu: 1,1 em
• Orientacja tekstu: w lewo

Rozmiary

Przewiń w dół, otwórz podkategorię Rozmiar i dodaj szerokość „18%”. Ta szerokość zapewni, że nasz moduł tekstowy nie będzie przecinał obrazu tła naszego wiersza po dodaniu do niego ujemnego lewego marginesu.

Rozstaw

Jak wspomniano w poprzednim kroku, chcemy, aby moduł tekstowy znajdował się po lewej stronie naszego wiersza bez nakładania się na tło wiersza. Chcemy również mieć trochę miejsca między górną krawędzią obrazu wiersza a początkiem modułu tekstowego, dlatego używamy również górnego marginesu.

• Górny margines: 150px
• Lewy margines: -20px
• Górna wyściółka: 10px
• Dolna wyściółka: 10px

Moduł rozdzielający

Widoczność

Następnie przejdź dalej i dodaj moduł dzielnika tuż pod modułem tekstowym. W podkategorii Widoczność włącz opcję „Pokaż dzielnik”.

Kolor

Następnie przejdź do zakładki Projekt i dodaj „#FFFFFF” jako kolor rozdzielacza.

Style

Idąc dalej, wybierz „Solidny” jako styl dzielnika i „Góra” jako pozycję dzielnika.

Rozmiary

Na koniec wprowadź następujące ustawienia dla podkategorii Rozmiar:

• Waga dzielnika: 5px
• Wysokość: 23px
• Szerokość: 47%
• Wyrównanie modułu: do lewej

Moduł tekstowy dla pozycji menu

Tekst łącza w polu treści

Gdy skończysz z modułem dzielnika, dodaj kolejny moduł tekstowy tuż pod nim. Ten moduł tekstowy będzie naszym elementem nawigacyjnym. Otwórz ustawienia, wprowadź tekst i dodaj do niego link.

Gradientowy kolor tła

Pozostając na karcie Treść, użyj następujących ustawień gradientu tła:

• Pierwszy kolor: #FFFFFF
• Drugi kolor: rgba (12 113 195, 0,62)
• Typ gradientu: liniowy
• Kierunek gradientu: 108 stopni
• Pozycja startowa: 31%
• Pozycja końcowa: 21%

Ustawienia tekstu łącza

Następnie przejdź do zakładki Projekt i wprowadź następujące ustawienia dla zakładki linków podkategorii Tekst:

• Czcionka łącza: Andika
• Grubość czcionki łącza: pogrubiona
• Styl czcionki łącza: wielkie litery i podkreślenie
• Styl podkreślenia łącza: Jednolity
• Rozmiar tekstu linku: 100px
• Kolor tekstu łącza: #000000
• Wysokość linii łącza: 1 em

Rozstaw

Ten moduł tekstowy będzie musiał pojawić się również po lewej stronie ekranu, dlatego dodajemy lewy margines. Chcemy również, aby przestrzeń między modułem dzielnika a tym modułem tekstowym była mniejsza, to jest miejsce, w którym wchodzi ujemny margines górny. Aby utworzyć to centralne wyrównanie w poziomie, dodamy również dolny margines. I na koniec, chcemy, aby tło gradientowe było większe, dlatego używamy dopełnienia górnego i dolnego.

• Górny margines: -33px
• Margines dolny: 250px
• Lewy margines: -20px
• Górna wyściółka: 80px
• Dolna wyściółka: 80px

Klonuj pierwszy wiersz nawigacyjny tyle razy, ile potrzeba

Różne elementy nawigacji na stronie nawigacji będą miały mniej więcej takie same ustawienia. Dlatego zalecamy klonowanie rzędu tyle razy, ile potrzebujesz, a następnie wprowadzanie zmian w szczegółach. Są trzy rzeczy, które musisz zmienić, spójrzmy.

Zmień tło wiersza

Pierwszą rzeczą, którą musisz zrobić, to zmienić obrazy tła duplikatów wiersza. Ponownie upewnij się, że używasz obrazu o szerokości „1400px” i wysokości „943px”, aby uzyskać najlepszy wynik.

Zmień moduł tekstowy dla pozycji menu

Zmień łącze

Następnie otwórz element nawigacji Moduł tekstowy i zmień tekst wraz z linkiem.

Zmień tło gradientowe zgodnie z długością tekstu

Na koniec musisz również zmienić tło gradientowe tego modułu tekstowego. Zmień drugi kolor gradientu na „rgba(224,43,32,0.62)” i zmień wartość Pozycja początkowa zgodnie z długością nowego elementu nawigacji. Jeśli masz dość długi element nawigacji, warto zmienić procent pozycji początkowej na wyższą wartość, dopóki nie zobaczysz, że będzie pasować.

Odtwórz wersję mobilną

Teraz, gdy stworzyliśmy wersję na komputery, stworzymy również wersję na tablety i urządzenia mobilne. Styl różnych modułów jest prawie taki sam jak w wersji na komputery, ale za kulisami struktura naszych wierszy jest zupełnie inna. Ze względu na wiele modyfikacji, które musiałbyś wprowadzić w każdym module, jeśli miałbyś je sklonować, po prostu pokażę ci, jak stworzyć go od podstaw bez klonowania żadnego modułu z wersji Desktop.

Odtwórz pierwszy wiersz nawigacji

Zacznij od dodania kolejnego wiersza do sekcji, którą utworzyliśmy na początku tego posta.

Struktura kolumny

Ta kolumna, podobnie jak wersja na komputery, również będzie wymagała tylko jednej kolumny.

Rozmiary

Rozmiary tego rzędu są następujące:

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Te ustawienia sprawią, że nasz wiersz zajmie całą szerokość ekranu.

Widoczność

I na koniec wyłącz ten wiersz na pulpicie, ponieważ zamiast tego mamy inne wiersze, które będą wyświetlane na pulpicie.

Moduł tekstowy opisu strony

Ustawienia tekstu

Śmiało i dodaj pierwszy moduł tekstowy do wiersza. Wprowadź następujące ustawienia dla podkategorii Tekst:

• Czcionka tekstu: Andika
• Grubość czcionki tekstu: Regularna
• Rozmiar tekstu: 13px
• Kolor tekstu: #000000
• Wysokość linii tekstu: 1,1 em
• Orientacja tekstu: Środek

Rozmiary

Następnie otwórz podkategorię Sizing i użyj szerokości '71%' i środkowego Wyrównania Modułu.

Rozstaw

Na koniec, ten moduł tekstowy będzie wymagał wypełnienia górnego i dolnego „10px”. Jak widać, nie ma potrzeby podawania wartości marginesów w wersji na tablety i komórki, ponieważ zamiast tego decydujemy się na wyrównanie do środka.

Moduł tekstowy dla pozycji menu

Tekst łącza w polu treści

W wersji mobilnej nie potrzebujemy modułu rozdzielającego, więc pominiemy ten krok. Zamiast tego natychmiast dodamy element nawigacji Moduł tekstowy tuż pod poprzednim utworzonym przez nas modułem tekstowym. Gdy to zrobisz, dodaj tekst z łączem do pola zawartości w zakładce Zawartość.

Gradientowy kolor tła

Tło gradientowe, którego użyjemy w tym module tekstowym, jest takie samo jak w wersji na komputery stacjonarne:

• Pierwszy kolor: #FFFFFF
• Drugi kolor: rgba (12 113 195, 0,62)
• Typ gradientu: liniowy
• Kierunek gradientu: 108 stopni
• Pozycja startowa: 31%
• Pozycja końcowa: 21%

Ustawienia tekstu łącza

Skorzystaj z następujących ustawień podkategorii Tekst:

• Czcionka łącza: Andika
• Grubość czcionki łącza: pogrubiona
• Rozmiar tekstu: 65px
• Kolor tekstu: #000000
• Wysokość linii tekstu: 1em
• Orientacja tekstu: w lewo

Rozstaw

Podobnie jak wersja na komputery, ten element nawigacyjny modułu tekstowego będzie wymagał wypełnienia górnego i dolnego o wielkości „80px”, aby powiększyć tło gradientowe.

Moduł obrazu

Załaduj obrazek

Na koniec dodaj moduł obrazu jako ostatni moduł w swoim wierszu i prześlij wybrany obraz.

Klonuj pierwszy wiersz nawigacyjny tyle razy, ile potrzeba

To samo dotyczy wersji mobilnej; możesz sklonować właśnie utworzony wiersz tyle razy, ile potrzeba, aby dodać również inne elementy nawigacji. Są trzy rzeczy, które musisz zmodyfikować za każdym razem, gdy dodasz nowy element nawigacji, spójrzmy.

Zmień moduł tekstowy dla pozycji menu

Zmień łącze

Pierwszą rzeczą, którą musisz zmienić, jest tekst i łącze w polu treści na karcie Treść modułu tekstowego elementu nawigacyjnego.

Zmień tło gradientowe zgodnie z długością tekstu

Następnie możesz również zmienić drugi kolor gradientu na „rgba(224,43,32,0.62)” i zmienić wartość pozycji początkowej zgodnie z długością tekstu.

Zmień moduł obrazu

Na koniec możesz również zmienić obraz modułu obrazu w tym wierszu.

Wynik

Po utworzeniu zarówno wersji komputerowej, jak i mobilnej, otrzymasz oszałamiającą stronę nawigacyjną, która dobrze wygląda na komputerze, tablecie i telefonie. Przyjrzyjmy się końcowemu wynikowi.

Wynik na pulpicie

Wynik na urządzeniu mobilnym

Końcowe przemyślenia

Stworzenie strony nawigacyjnej jako strony głównej z pewnością pozostawi ślad na odwiedzających. Nie tylko pomaga odwiedzającym nawigować wizualnie, ale także pozwala im zobaczyć bardziej dopracowaną zapowiedź tego, co ma do zaoferowania Twoja witryna. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!

Polecane zdjęcie autorstwa LanKogal / shutterstock.com