Jak stworzyć 4-rożną stałą nawigację za pomocą Divi

Unikalny projekt nawigacji może nadać każdej witrynie nieco przewagi. Na przykład stała nawigacja w czterech narożnikach to dobry sposób na zapewnienie widzom większej liczby opcji interakcji z projektem witryny. W rzeczywistości dodaje kolejną warstwę do projektu UX w całej witrynie.

W tym poście pokażemy, jak stworzyć własną, stałą nawigację z 4 narożnikami. Wyjaśnimy, jak stworzyć dwa nieco różne style, ale to tylko wierzchołek góry lodowej. Ponieważ nawigacja jest tworzona za pomocą wbudowanych elementów Divi, możliwości dostosowywania są nieograniczone.

Mamy nadzieję, że ten pomysł zainspiruje Cię do stworzenia niesamowitych 4-narożnych projektów stałej nawigacji dla nadchodzących projektów Divi.

Zacznijmy.

Zapowiedzi

Rzućmy okiem na 4-rożną nawigację, którą dziś stworzymy. Pierwszy styl umieszcza przyciski na krawędzi ekranu, a drugi ma pływak wewnętrzny.

Styl #1

Styl #2

Subskrybuj nasz kanał YouTube

Utwórz nową pustą stronę

Otwórz nową stronę i przed edycją w Divi wybierz „Puste strony” w atrybutach strony. Następnie włącz Divi Builder.

Prześlij układ strony docelowej kryptowalut

W Divi Visual Builder prześlij stronę docelową pakietu Cryptocurrency Layout Pack z zakładki Premade Layouts.

2. Utwórz nową sekcję z 4-kolumnowym rzędem

Dodaj nową zwykłą sekcję z 4-kolumnowym rzędem

Aby utworzyć 4 elementy nawigacyjne, potrzebujemy nowej sekcji z 4-kolumnowym wierszem. Przewiń do samego dołu strony i dodaj nową zwykłą sekcję. Następnie wybierz wiersz z 4 kolumnami o jednakowej wielkości.

Usuń domyślne wypełnienie sekcji

Przed dodaniem modułów usuń dopełnienie sekcji, dodając „0px” na górze i na dole. Sprawdź również, czy sekcja nie ma koloru tła ani tła gradientowego.

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

Zwiększ indeks Z

Chcemy, aby ta sekcja była ponad wszystkimi innymi podczas przewijania. Dlatego musimy zwiększyć wartość indeksu Z sekcji. W tym celu otwórz zakładkę Zaawansowane, przejdź do ustawień widoczności i zwiększ Indeks Z.

• Indeks Z: 10

3. Dostosuj rozmiar rzędu

Następnie musimy dostosować ustawienia rozmiaru wiersza. Otwórz kartę projektu i odpowiednio dostosuj ustawienia:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Nie
• Szerokość: 100%
• Maksymalna szerokość: 100%

Usuń domyślne wypełnienie wiersza

Aby upewnić się, że na dole naszej strony nie pozostało żadne miejsce, usuń domyślne wypełnienie wiersza. Na karcie Projekt zmień dane wejściowe Odstępy na „0px” dla dopełnienia górnego i dolnego.

Dodaj moduły do ​​kolumn.

Teraz nadszedł czas, aby dodać kilka modułów do każdej kolumny, zaczynając od lewej do prawej.

• Kolumna #1: Obraz
• Kolumna #2: Przycisk
• Kolumna #3: Śledź w mediach społecznościowych
• Kolumna #4: Przycisk

4. Styl każdej kolumny

Kolumna #1 – Moduł obrazu

Dodaj logo firmy

Otwórz moduł obrazu w kolumnie #1. Prześlij swoje logo (szerokość 220px i wysokość 100px). Upewnij się, że jest to przezroczysty obraz, w którym logo jest wyśrodkowane.

Wyrównaj moduł

Chcemy, aby logo znajdowało się w lewym górnym rogu naszej strony, dlatego musimy wyrównać moduł do lewej. Otwórz kartę Projekt w module obrazu i wybierz lewe wyrównanie obrazu.

• Wyrównanie: lewe

Dodaj niestandardowy CSS, aby naprawić pozycję modułu

Aby upewnić się, że pozycja modułu pozostaje stała, przejdź do zakładki Zaawansowane i dodaj niestandardowy CSS do elementu głównego.

position: fixed;
top: 0;
left: 0;

Kolumna #2 – Przycisk

Dodaj przycisk

Teraz w kolumnie #2 dodaj moduł przycisku.

Stylizuj przycisk

Na karcie Treść dodaj tekst do przycisku.

• Content-Text: Kopalnia Bitcoin

Następnie na karcie Projekt wybierz opcję Wyrównanie lewego przycisku.

• Wyrównanie: lewe

Następnie przesuń niestandardowe style przycisków na tak i odpowiednio dostosuj wartości:

• Niestandardowe style przycisków: tak
  • Rozmiar tekstu przycisku: Pulpit; 25px, tablet: 20px, telefon: 20px
  • Kolor tekstu przycisku: biały, #ffffff
  • Kolor tła przycisku: Gradient
    • Kolor górny: #1c076d, kolor dolny: #185475
    • Typ gradientu: liniowy
  • Promień obramowania przycisku: 7 pikseli
  • Czcionka przycisku: Tantillium Web (taka sama jak układ)
  • Pokaż ikonę przycisku: Tak
  • Ikona przycisku: Stożek ruchu
  • Kolor ikony przycisku: biały, #ffffff
  • Umieszczenie ikony przycisku: w prawo

Dodaj niestandardowy CSS, aby naprawić pozycję modułu

Na koniec otwórz kartę Zaawansowane i dodaj niestandardowy CSS, aby naprawić pozycję modułu w lewym dolnym rogu strony.

position: fixed;
bottom: 0;
left: 0;

Kolumna #3 – Śledź w mediach społecznościowych

Dodaj moduł śledzenia w mediach społecznościowych

Do trzeciej kolumny. Tym razem będziemy potrzebować modułu śledzącego w mediach społecznościowych. Dodaj trzy wybrane przez siebie sieci społecznościowe.

Następnie w zakładce Projekt wybierz odpowiednie Wyrównanie modułu.

• Wyrównanie: w prawo

Stylizuj ikony mediów społecznościowych

Otwórz indywidualne ustawienia pierwszej sieci społecznościowej, przejdź do zakładki projektowania i odpowiednio zmień ustawienia ikon:

• Kolor ikony: biały #ffffff
• Użyj niestandardowego rozmiaru ikony: Tak
  • Rozmiar czcionki ikony: Pulpit; 25px, tablet: 20px, telefon: 20px
• Tło: Brak

Skopiuj i wklej style przedmiotów

Wróć do głównego okna Śledź w mediach społecznościowych, kliknij prawym przyciskiem myszy pierwszy element i wybierz „Kopiuj style elementów”. Następnie kliknij prawym przyciskiem myszy dwie pozostałe sieci społecznościowe i wklej style.

Dodaj niestandardowy CSS do modułu

Na koniec na karcie Zaawansowane dodaj następujący kod CSS, aby moduł przykleił się do prawego górnego rogu strony:

position: fixed; 
top: 0; 
right: 0;

Kolumna #4 – Przycisk

Skopiuj style modułów z modułu nr 2 i dostosuj

Aby przycisk w module nr 4 wyglądał dokładnie tak samo jak przycisk w module nr 2, użyjemy opcji „Kopiuj style modułu”. Najpierw kliknij prawym przyciskiem myszy moduł przycisku w kolumnie 2, kliknij „Kopiuj style modułu”, a następnie wklej go do modułu przycisku w kolumnie 4.

Teraz nadszedł czas na zmianę ustawień w zakładce Treść. Najpierw zmień treść tekstu.

• Tekst: od „Kopalnia Bitcoina” do „Przeczytaj nasz blog”

Następnie zmień Wyrównanie przycisków.

• Wyrównanie: od lewej do prawej

Na koniec zmień niestandardowy kod CSS na karcie Zaawansowane:

• Zmień kod na:

position: fixed; 
bottom: 0; 
right: 0;

Wynik

5. Zmień niestandardowy CSS, aby uzyskać drugi przykład stylu

W pierwszym przykładzie stylu rogi są przyczepione do rogów. Aby uzyskać drugi styl, wystarczy dostosować kod CSS, aby moduły narożne unosiły się trochę do wewnątrz.

Po prostu dostosuj niestandardowy CSS w zakładce Zaawansowane wszystkich czterech modułów

Moduł 1

position: fixed; 
top: 1vw; 
left: 1vw;

Moduł nr 2

position: fixed; 
bottom: 2vw; 
left: 2vw;

Moduł #3

position: fixed; 
top: 3vw; 
left: 2vw;

Moduł #4

position: fixed; 
bottom: 2vw; 
right: 2vw;

Ostateczny wynik

Wniosek

Ten samouczek tylko przegląda powierzchnię tego, co możesz zrobić dzięki stałej nawigacji w 4 narożnikach za pomocą Divi. Ostatecznie możesz wybrać dowolny moduł dla każdej kolumny, o ile zachowasz dostarczony przez nas niestandardowy CSS. Mamy nadzieję, że ten kreatywny samouczek zainspiruje Cię do stworzenia własnej, stałej nawigacji w 4 narożnikach. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!