Divi: Jak stworzyć lepkie i rozwijalne menu podręczne

Divi: Jak stworzyć lepkie i rozwijalne menu podręczne

Czy chcesz być kreatywny, tworząc rozwijalne lepkie menu po najechaniu myszą za pomocą Divi?

W tym samouczku pokażemy, jak utworzyć rozwijalne lepkie menu po najechaniu myszą za pomocą od Divi's Mechanic Layout Pack . 

Zajmiemy się dwoma różnymi przykładowymi projektami, które możesz odtworzyć od podstaw i zastosować do dowolnego rodzaju tworzonej witryny! 

Menu zostanie wyświetlone po najechaniu kursorem na pulpicie i aktywowane po kliknięciu na urządzeniach mobilnych.

Chodźmy!

badanie

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

Przykład 1

Komputer stacjonarny

rozwijalne lepkie menu po najechaniu z Divi

Telefon komórkowy

rozwijalne lepkie menu po najechaniu z Divi

Pobierz DIVI teraz !!!

Przykład 2

Komputer stacjonarny

rozwijalne lepkie menu po najechaniu z Divi

Telefon komórkowy

rozwijalne lepkie menu po najechaniu z Divi

Pobierz DIVI teraz !!!

Ogólne kroki

Wyłącz naprawioną nawigację

Uzyskaj dostęp do opcji motywu Divi

Zaczniemy od kilku ogólnych kroków. Te kroki są takie same dla obu przykładów i są niezbędne do osiągnięcia pożądanego rezultatu.

Jeśli planujesz używać rozwijanego przyklejonego menu u dołu strony, możesz pominąć główny pasek menu u góry. 

Czytaj także: Jak tworzyć niestandardowe nakładki obrazów w Divi

Do tego będziesz musiał iść Divi >> Opcje motywu z pulpitu WordPress

Wyłącz naprawioną nawigację

Tam będziesz musiał dezaktywować „Stały pasek nawigacji” aby upewnić się, że u góry strony nie ma już wolnego miejsca.

  • Naprawiono pasek nawigacji: wyłączony

Ukryj główny pasek menu na stronie

Otwórz ustawienia strony

Przejdź do strony, do której chcesz dodać rozwijane menu przyklejone i otwórz ustawienia strony.

Dodaj niestandardowy CSS

Ukryj menu główne, dodając do swojej strony następujące wiersze kodu CSS.

#main-header {
display: none;
}

Dodaj nową sekcję na końcu strony

Bez względu na przykład, który chcesz odtworzyć, niektóre podstawowe kroki pozostają takie same. Pierwszym krokiem jest dodanie zwykłej sekcji na dole strony.

rozstaw

Otwórz ustawienia sekcji i zmień następujące ustawienia w zakładce Designu pod opcją Rozstaw.

  • Dopełnienie (góra i dół): 0px

Dodaj nową linię

Struktura kolumny

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

zaklejania

Nie dodając jeszcze żadnych modułów, otwórz ustawienia linii i zmień następujące ustawienia, w zakładce Designu pod opcją Dobór

  • Użyj niestandardowej szerokości rynny: TAK
  • Szerokość rynny: 1
  • Szerokość: 100%
  • Maksymalna szerokość: 100%

rozstaw

Następnie usuń domyślnie całą górną i dolną wyściółkę, pod opcją Rozstaw.

  • Dopełnienie (góra i dół): 0px

Główny element

Pozwalamy, aby cały wiersz przyklejał się do dołu naszej strony, dodając dwie proste linie kodu CSS do głównego elementu wiersza.

bottom: 0px;
position: fixed;

Indeks Z

I upewnimy się, że wiersz (i moduł tekstowy, który dodamy w kolejnych krokach) pozostaje nad całą zawartością strony, zwiększając indeks Z, opcję rozwijaną Pozycja.

  • Indeks Z: 99

Dodaj moduł kodu do kolumny

Dodaj kod CSS między tagami stylu

Ostatnią częścią ogólnych kroków jest dodanie modułu Code do nowego wiersza. Kod CSS, który dodamy w tym module Code, pomoże nam osiągnąć efekt odsłaniający po najechaniu myszą. 

Zobacz także: Jak utworzyć menu obracającego się koła po najechaniu kursorem w Divi

Wklej następujące wiersze kodu CSS do modułu:

<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>

Przykładowy projekt #1

Dodaj moduł tekstowy do kolumny

Dodaj treść

Teraz, gdy wykonaliśmy już wszystkie kroki, możemy zacząć koncentrować się na dwóch różnych przykładach projektowych, zaczynając od pierwszego! 

Dodaj moduł tekstowy do kolumny wiersza. W polu zawartości używamy stylu akapitu do wyświetlania tekstu „≡Menu”

Następnie umieszczamy wszystkie pozycje menu na nieuporządkowanej liście. Dodamy również link do każdego tytułu strony z osobna.

Domyślny kolor tła

Przejdź do ustawień tła modułu i zmień kolor tła.

  • Tło: #ffffff

Kolor tła po najechaniu myszą

Zmień ten kolor tła po najechaniu myszą.

  • Tło (najechanie): rgba (255,255,255,0.83)

Tło gradientowe

A także dodaj domyślne tło gradientowe.

  • Kolor po lewej: rgba (255,255,255,0)
  • Właściwy kolor: #ffffff
  • Pozycja prawa: 60%

Domyślne ustawienia tekstu

Kontynuuj przechodząc do zakładki Designu i zmiana ustawień tekstu.

  • Czcionka tekstu: Khand
  • Waga czcionki: pogrubiona
  • Kolor tekstu: #021827
  • Rozmiar tekstu: 3vh
  • Orientacja: Centrum

Wskaż ustawienia tekstu

Zmień niektóre ustawienia tekstu po najechaniu kursorem.

  • Kolor tekstu (najechanie: rgba (255,255,255,0)
  • Rozmiar tekstu (najechanie): 0vh

Ustawienia tekstu linku

Następnie przejdź do ustawień tekstu linku i zmień kolor tekstu linku.

  • Kolor tekstu łącza: #000000

Lista wartości domyślnych (komputer)

Przełącz się na domyślne ustawienia tekstu listy i dostosuj je według własnego uznania. Upewnij się, że używasz „0px” jako rozmiaru tekstu w stanie domyślnym.

  • Nieuporządkowana czcionka listy: Khand
  • Styl czcionki listy: TT
  • Wyrównanie tekstu listy: wyśrodkowane
  • Nieuporządkowany kolor tekstu: rgba (255,255,255,0)
  • Nieuporządkowany rozmiar tekstu listy: 0px
  • Waga tekstu listy: 0em
  • Pozycja stylu listy nieuporządkowanej: Wewnątrz

Ustawienia listy podręcznej

Następnie zmień niektóre wartości po najechaniu kursorem, aby umożliwić wyświetlanie elementów menu.

  • Kolor tekstu listy (najechanie): #000000
  • Rozmiar tekstu listy nieuporządkowanej (najechanie kursorem): 2vh
  • Nieuporządkowana wysokość tekstu listy (najechanie): 2,1 em

Domyślne odstępy (komputer)

Następnie przejdź do ustawień odstępów (opcja Rozstaw) i nadaj kształt modułowi Text.

  • Margines (lewy i prawy): 45vw (komputer), 39vw (tablet), 33vw (telefon)
  • Wypełnienie (góra i dół): 2vw (komputer), 4vw (tablet), 6vw (telefon)

Odstępy najechania

Zmodyfikuj te same wartości po najechaniu myszą.

  • Margines (lewy i prawy): 14vw
  • Wyściółka (góra i dół): 8vw

Domyślna ramka (komputer)

Przejdź do ustawień obramowania i upewnij się, że każdy z zaokrąglonych rogów ma wartość „0px”.

Obramowanie po najechaniu

Włącz opcje najechania na zaokrąglone rogi i zmień wartości na lewy górny i prawy górny.

  • U góry po lewej: 50vw
  • U góry po prawej: 50vw

Pole cienia

Kontynuuj, nadając głębi modułowi za pomocą cienia pudełkowego. Dzięki temu menu nie pozostanie niezauważone na stronie.

  • Siła rozmycia cieni w pudełku: 1000px
  • Kolor cienia: rgba (0,0,0,0.68 XNUMX)

Klasa CSS

Do modułu dodajemy również klasę CSS.

  • Klasa CSS: dt-menu

Przejścia

Na koniec zmniejsz czas trwania przejścia w ustawieniach przejść.

  • Czas trwania przejścia: 100ms

Przykładowy projekt #2

Dodaj moduł tekstowy do kolumny

Dodaj treść

Przejdźmy do drugiego przykładu! Tutaj ponownie dodamy „≡Menu” za pomocą stylu tekstu akapitowego i elementów menu za pomocą nieuporządkowanej listy. Dodamy również link do każdej pozycji menu z osobna.

Domyślny kolor tła (komputer)

Przejdź do ustawień tła i zmień kolor tła.

  • Tło: #ffffff

Kolor tła po najechaniu myszą

Zmień kolor tła po najechaniu myszą.

  • Tło (najechanie): #f71535

Domyślne ustawienia tekstu (komputer)

Następnie przejdź do zakładki Designu i wprowadź pewne zmiany w wyglądzie tekstu.

  • Czcionka tekstu: Khand
  • Waga czcionki: pogrubiona
  • Kolor tekstu: #021827
  • Rozmiar tekstu: 3vh

Umieszczaj ustawienia tekstu

Zmień te ustawienia po najechaniu myszą.

  • Kolor tekstu (najechanie): rgba (255,255,255,0)
  • Rozmiar tekstu (najechanie): 0vh

Ustawienia tekstu linku

Przejdź do ustawień tekstu i zmień kolor tekstu linku.

  • Kolor tekstu linku: #ffffff

Domyślne ustawienia tekstu listy

Zmień także ustawienia projektu nieuporządkowanych elementów listy.

  • Nieuporządkowana czcionka listy: Khand
  • Styl czcionki nieuporządkowanej listy: TT
  • Wyrównanie tekstu listy: do środka
  • Kolor tekstu listy nieuporządkowanej: rgba (255,255,255,0)
  • Rozmiar tekstu listy: 0px
  • Nieuporządkowana wysokość linii listy: 0em
  • Pozycja stylu listy nieuporządkowanej: Wewnątrz

Ustawienia listy podręcznej

I zmień niektóre z tych wartości po najechaniu kursorem.

  • Kolor tekstu nieuporządkowanej listy: #ffffff
  • Rozmiar tekstu listy: 2vh
  • Nieuporządkowana wysokość linii listy: 2,1 em

Domyślne odstępy (komputer)

Następnie przejdź do ustawień odstępów i daj modułowi trochę miejsca.

  • Margines (po prawej): 88 vw (komputer stacjonarny i tablet), 71 vw (telefon)
  • Wypełnienie (góra): 6 vw (komputer)), 10 vw (tablet), 18 vw (telefon)
  • Wypełnienie (u dołu): 4 vw (komputer), 10 vw (tablet), 12 vw (telefon)
  • Lewa wyściółka: 1vw

Odstępy najechania

Zmień wartości po najechaniu.

  • Margines (Prawy): 59vw
  • Wyściółka: (góra)13vw, (dół)8vw, (lewo)1vw, (prawo)13vw
lepkie rozwinięcie menu

Granica

Aby stworzyć ten projekt kwadrantu, zmienimy prawą górną ramkę w ustawieniach obramowania.

  • U góry po prawej: 50vw

Pole cienia

Dodamy również cień pudełka, aby stworzyć głębię na stronie.

  • Siła rozmycia cieni w pudełku: 1000px
  • Kolor cienia: rgba (0,0,0,0.68 XNUMX)

Klasa CSS

Następnie dodamy klasę CSS w zakładce Zaawansowane.

  • Klasa CSS: dt-menu

Przejścia

I skróć czas trwania przejścia w zakładce Zaawansowane aby stworzyć szybkie przejście.

  • Czas trwania przejścia: 100ms

badanie

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.

Przykład nr 1

Biuro

Rozwijanie przyklejonego menu

Telefon komórkowy

Rozwijanie przyklejonego menu

Pobierz DIVI teraz !!!

Przykład nr 2

Komputer stacjonarny

Telefon komórkowy

Pobierz DIVI teraz !!!

Wnioski

W tym artykule pokazaliśmy, jak stworzyć rozwijalne lepkie menu za pomocą pakietu Divi Mechanic Layout Pack. Omówiliśmy dwa różne przykładowe projekty, które możesz modyfikować i używać na dowolnym typie tworzonej witryny!

Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.

Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...

Divi: Jak stworzyć lepką maskę tła

Divi: Jak stworzyć lepką maskę tła

Czy chcesz nadać swojej witrynie inny wymiar za pomocą przyklejonej maski tła Divi?

Przyklejone opcje Divi pozwalają tworzyć mnóstwo różnych projektów dla twoich stron internetowych. Dzisiejszy samouczek dodaje listę rzeczy, które możesz zrobić. Mam nadzieję, że pomoże to pobudzić twoją kreatywność. 

Pokażemy Ci, jak stworzyć lepką maskę tła.

Ten samouczek łączy przyklejone opcje Divi z trybami mieszania filtrów. 

badanie

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

Biuro

Przyklejona maska ​​​​tła Divi

Telefon komórkowy

Przyklejona maska ​​​​tła Divi

Utwórz projekt w Divi

Dodaj nową sekcję

Obraz tła

Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. 

  • Prześlij wybrany obraz tła.
  • Rozmiar obrazu tła: okładka
Divi

rozstaw

Przejdź do karty Projekt przekroju i usuń domyślne ustawienia odstępów poniżej:

  • Dopełnienie (góra i dół): 0px

Przepełnienia

Następnie ukryj przepełnienia sekcji w zakładce Zaawansowane.

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

Dodaj wiersz #1

Struktura kolumny

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

zaklejania

Bez dodawania żadnych modułów otwórz ustawienia linii i odpowiednio zmień ustawienia wymiarowania:

  • Szerokość: 100%
  • Maksymalna szerokość: 100%

rozstaw

Usuń także wszystkie marginesy domyślne.

  • Dopełnienie (góra i dół): 0px

Filtry

Do tej linii dodajemy również tryb mieszania. Ten tryb mieszania pomoże nam stworzyć maskę w dalszej części samouczka.

  • Tryb mieszania: ekran

Indeks Z

Aby upewnić się, że ten wiersz pozostaje poniżej drugiego wiersza, który dodamy do sekcji, zmieniamy indeks Z na karcie Zaawansowane.

  • Indeks Z: 9

Parametry kolumny

Następnie otworzymy ustawienia kolumn.

Kolor tła

Używamy całkowicie białego koloru tła.

  • Kolor tła: #ffffff

Główny element CSS

Dodajemy również wartość wysokości do głównego elementu w zakładce Zaawansowane.

height: 100vh;

Dodaj moduł „Tekst” do wiersza

Pozostaw pole zawartości puste

Gdy skończysz z ustawieniami wiersza, dodaj moduł Tekst do jego kolumny. 

Pole zawartości pozostaw puste. Zamiast tego używamy tego modułu do tworzenia kształtu, który odsłania część obrazu tła sekcji.

Kolor tła

W tym module użyjemy ciemniejszego koloru tła.

  • Kolor tła: #0b3835

zaklejania

Następnie uzyskamy dostęp do zakładki Designu i zmodyfikuj parametry doboru w następujący sposób:

  • Szerokość:
    • Komputer stacjonarny: 20vw
    • Tablet i telefon: 70 vw
  • Wysokość :
    • Komputer stacjonarny: 30vh
    • Tablet i telefon: 10vh

rozstaw

Dodajemy również górny margines.

  • Marża (górna): 3vh

Granica

I uwzględnimy zaokrąglone rogi.

  • Zaokrąglone rogi: 15px

Dodaj wiersz 2

Struktura kolumny

Kontynuuj, dodając kolejny wiersz do sekcji, korzystając z następującej struktury kolumn:

zaklejania

Otwórz ustawienia linii i dokonaj następujących zmian w opcjach Dobór następny:

  • Szerokość: 100%
  • Maksymalna szerokość: 100%

Indeks Z

Zwiększ także indeks Z wiersza. Pomoże to zapewnić, że zawartość wiersza pozostanie powyżej poprzedniego wiersza.

  • Indeks Z: 12

Dodaj moduł „Tekst” do wiersza

Dodaj zawartość H2

Czas dodać moduły, zaczynając od pierwszego modułu tekstowego zawierającego wybrane przez Ciebie treści H2.

Ustawienia tekstu H2

Dostosuj ustawienia tekstu H2 w następujący sposób:

  • Czcionka: Wyświetlacz Playfair
  • Wyrównanie tekstu: wyśrodkowane
  • Kolor tekstu: #0b3835
  • Rozmiar:
    • Pulpit: 150px
    • Tablet i telefon: 45px
  • Wysokość linii: 1,2 em

zaklejania

Następnie przejdź do ustawień rozmiaru i zastosuj następujące ustawienia:

  • Maksymalna szerokość: 980px
  • Moduł wyrównania: Środek

rozstaw

Uwzględnij również ujemny margines górny.

Dodaj moduł „Przycisk” do linii

Dodaj treść do przycisku

Następnym i ostatnim modułem, którego potrzebujemy w tym wierszu, jest moduł Button. Dodaj wybrane przez siebie treści.

Wyrównanie przycisków

Przełącz na kartę Designu modułu i zmodyfikuj ustawienie przycisku.

  • Wyrównanie przycisków: środek

Ustawienia przycisków

Następnie przejdź do ustawień przycisku i zastosuj następujące style:

  • Użyj niestandardowych stylów dla przycisku: Tak
  • Rozmiar tekstu przycisku: 15px
  • Kolor tekstu przycisku: #ffffff
  • Kolor tła przycisku: #000000
  • Szerokość obramowania przycisku: 0 pikseli
  • Promień obramowania przycisku: 100px
  • Czcionka przycisku: Montserrat
  • Grubość czcionki przycisku: pół pogrubiona
  • Styl czcionki: TT

rozstaw

Do ustawień odstępów dodajemy również niestandardowe wartości marginesów i dopełnienia.

  • Marża (dolna): 60vh
  • Dopełnienie (góra i dół): 15px
  • Dopełnienie (lewy i prawy): 40px

Zastosuj lepkie efekty

Linia otwarta #1

Teraz, gdy zbudowaliśmy podstawę naszego projektu, nadszedł czas na zastosowanie stylów lepkich. Otwórz ustawienia pierwszego wiersza.

lepka maska ​​dolna

Zastosuj lepkie opcje

Przejdź do zakładki Zaawansowane i zastosuj następujące trwałe ustawienia:

  • Lepka pozycja: przyklej do góry
  • Dolny limit lepkości: sekcja
  • Odsunięcie od otaczających lepkich elementów: TAK
  • Domyślne i trwałe style przejścia: TAK

Opcje przyklejenia modułu tekstowego

Teraz, gdy linia jest przyklejona, możemy zastosować style do modułu Text wewnątrz linii. Otwórz ustawienia modułu.

lepka maska ​​dolna

Przyklejony rozmiar

Następnie przejdź do ustawień rozmiaru i zastosuj następujące wartości rozmiaru:

  • Szerokość (przyklejony): 80 vw
  • Wysokość (przyklejony): 90vh
Divi

Czas przejścia

Na koniec przejdź do zakładki Zaawansowane i wydłuż czas trwania przejścia.

  • Czas trwania przejścia: 500ms

badanie

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.

Biuro

Przyklejona maska ​​​​tła Divi

Pobierz DIVI teraz !!!

Telefon komórkowy

Przyklejona maska ​​​​tła Divi

Pobierz DIVI teraz !!!

Wnioski

W tym artykule po raz kolejny pokazaliśmy, jak wykazać się kreatywnością dzięki lepkim opcjom Divi. 

W szczególności pokazaliśmy, jak połączyć ustawienia filtrów Divi i lepkie opcje.

Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.

Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...

Divi: Jak stworzyć responsywny suwak akordeonu

Divi: Jak stworzyć responsywny suwak akordeonu

Czy chcesz stworzyć responsywny suwak akordeonu Divi?

Suwak akordeonowy to zabawny i atrakcyjny sposób wyświetlania treści na małej przestrzeni. 

Suwaki akordeonowe zwykle składają się z kilku elementów (lub paneli) ułożonych poziomo jak fałdy zasłony. A kiedy najedziesz kursorem na jeden z paneli, rozwinie się, aby odsłonić zawartość, podczas gdy inne panele harmonijkowe się kurczą. Tutaj uzyskujemy efekt akordeonu rozszerzania i kurczenia.

W tym samouczku pokażemy, jak stworzyć responsywny suwak akordeonu w Divi, używając tylko CSS. W tym celu użyjemy kilku modułów Divi, które posłużą jako panele akordeonowe. 

badanie

Oto krótki przegląd tego, co osiągniemy w tym samouczku.

Pobierz DIVI teraz !!!

Tworzenie nowej strony za pomocą Divi Builder

Aby rozpocząć, musisz wykonać następujące czynności:

  • Z pulpitu WordPress przejdź do Strony> Dodaj nowy aby utworzyć nową stronę.
responsywny suwak akordeonu Divi
  • Nadaj mu tytuł, który ma dla Ciebie sens i kliknij Użyj Divi Builder
  • Następnie kliknij przycisk Rozpocznij budowę (Twórz od podstaw)
responsywny suwak akordeonu Divi

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Stworzenie responsywnego suwaka akordeonu w Divi

Utworzenie linii

Aby rozpocząć, dodaj jednokolumnowy wiersz do zwykłej sekcji.

Następnie otwórz ustawienia linii i zaktualizuj następujące elementy:

  • Użyj niestandardowej szerokości rynny: TAK
  • Szerokość rynny: 1
  • Szerokość: 100%
  • Maksymalna szerokość: 800px
  • Wysokość: 400px (komputer stacjonarny); 700px (tablet i telefon)

Wartości szerokości i maksymalnej szerokości można dostosować do własnych potrzeb. Akordeon będzie pasował i działał w dowolnej szerokości linii.

Parametry kolumny

Teraz, gdy mamy zdefiniowaną wysokość wiersza, otwórz ustawienia kolumny i dodaj następujący kod CSS do głównego elementu:
stacjonarny

display:flex;
flex-direction: row;
align-items:center;
height: 100%;

tabletka

display:flex;
flex-direction: column;
align-items:center;
height: 100%;

Tworzenie panelu akordeonowego z modułami Blurb

Suwak akordeonowy może być zbudowany przy użyciu dowolnego typu modułu (modułów). Gdybyśmy chcieli, moglibyśmy wykorzystać kombinację różnych modułów do działania jako panel akordeonowy. Ale w tym projekcie użyjemy modułów Blurb.

Zacznij od dodania modułu Blurb do linii.

Projekt modów Blurb

Otwórz ustawienia modułu prezentacji i zaktualizuj następujące elementy:

Zachowaj fikcyjny tytuł i treść. Zawsze możemy to zmienić później.

Następnie zaktualizuj ikonę prezentacji w następujący sposób:

  • Ikona (pulpit): Ikona poziomej linii strzałki (patrz zrzut ekranu)
  • Ikona (najechanie): (patrz zrzut ekranu)
  • Ikona (Tablet i Telefon): (patrz zrzut ekranu)

Tło

Następnie nadaj notce obraz tła i nakładkę gradientową po najechaniu kursorem w następujący sposób:

  • Dodaj obraz tła o szerokości co najmniej 1000 pikseli
  • Pozycja obrazu tła: Środek po lewej

Następnie dodaj gradientową nakładkę tła.

Wahać się

  • Gradient tła w lewo (najechanie kursorem): #3e215b
  • Prawy (najechanie) gradientem tła: rgba(0,0,0,0)
  • Kierunek gradientu: 90 stopni
  • Kwadratowy gradient nad obrazem tła : TAK

ikona

  • Kolor ikony: #ffffff
  • Umieszczenie obrazu/ikony: w prawo

Następnie przejdź do karty Projekt i zaktualizuj następujące elementy:

Tytuł i treść tekstu

  • Czcionka tytułu: Poppins
  • Grubość czcionki: pół pogrubiona
  • Kolor tekstu tytułu: przezroczysty (komputer), #ffffff (najechanie)
  • Rozmiar tekstu tytułu: 22px
  • Kolor tekstu treści: przezroczysty (komputer), #ffffff (najechanie)

Wysokość i cień pudełka

Po dostosowaniu tekstu nadaj modułowi wysokość 100% i cień w następujący sposób:

  • Wzrost: 100%
  • Cień pudełka: Zobacz zrzut ekranu
  • Pozycja pozioma: -12px
  • Pozycja pionowa: 0px

Niestandardowy CSS

Aby nasze panele akordeonowe (lub moduł Blurb) rosły i kurczyły się z pozostałymi modułami, musimy dodać niestandardowy CSS, aby zmienić rozmiar modułu za pomocą flex-grow. 

Ponieważ będziemy mieć w sumie 5 modułów składających się na akordeon, dodajemy „flex:1” dla stanu domyślnego, a następnie zmieniamy go na „flex:5” w stanie najechania.

Na karcie Zaawansowane dodaj następujący niestandardowy kod CSS do głównego elementu Blurb:

Biuro

flex:1;
position: relative !important;
transition: flex 800ms !important;

Po najechaniu

flex:5;
position: relative !important;
transition: flex 800ms !important;

Następnie dodaj następujący niestandardowy kod CSS do kodu CSS treści Blurb:

Biuro

position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;
utwórz responsywny suwak akordeonu Divi

tabletka

position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;
utwórz responsywny suwak akordeonu Divi

Przepełnienie i przejście

  • Przepełnienie poziome: ukryte
  • Przepełnienie pionowe: ukryte
  • Czas trwania przejścia: 400ms
  • Krzywa prędkości przejścia: liniowa
utwórz responsywny suwak akordeonu Divi

Bardzo dobrze! To była poważna modyfikacja modułu Blurb. Ale dobrą wiadomością jest to, że wszystko, co musimy zrobić, to zduplikować je, aby stworzyć pozostałe panele akordeonowe.

Powiel układy, aby uzyskać więcej paneli akordeonowych

Najedź kursorem na moduł prezentacji i kliknij podwójną ikonę cztery razy, aby utworzyć łącznie pięć paneli (lub modułów) akordeonu.

Następnie zaktualizuj obrazy tła dla każdej z nowych powielonych notatek.

utwórz responsywny suwak akordeonu Divi

Ostateczny wynik

Teraz, gdy przeszliśmy przez wszystkie kroki, zobaczmy efekt końcowy.

Pobierz DIVI teraz !!!

Wnioski

Ten responsywny suwak akordeonowy ma naprawdę wyjątkowe elementy, które sprawiają, że korzystanie z niego jest przyjemne. Panele akordeonowe rozwijają się i kurczą płynnie po najechaniu myszą bez żadnych nieoczekiwanych usterek. 

Ikony prezentacji zmieniają się po najechaniu kursorem i na urządzeniu mobilnym, aby poprawić UX. Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.

Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...

Divi: jak tworzyć niestandardowe nakładki graficzne

Divi: jak tworzyć niestandardowe nakładki graficzne

Czy chcesz dowiedzieć się, jak projektować niestandardowe nakładki obrazów za pomocą Divi?

Nakładki graficzne są stosowane w projektowaniu stron internetowych od dłuższego czasu. Świetnie nadają się do angażowania odwiedzających, ujawniając dodatkowe treści i elementy projektu po najechaniu kursorem na obraz. 

W tym samouczku pokażemy, jak zaprojektować niestandardowe nakładki obrazów w Divi. Te nakładki zmienią się i odsłonią elementy po najechaniu kursorem na obraz. 

Żadne wtyczki nie są potrzebne.

Zacznijmy!

badanie

Oto krótkie spojrzenie na projekt, który będziemy tworzyć w tym samouczku.

Utwórz nową stronę za pomocą Divi Builder

Z pulpitu WordPress przejdź do Strony> Dodaj nowy aby utworzyć nową stronę.

Divi Builder

Nadaj mu tytuł, który ma dla Ciebie sens i kliknij Użyj Divi Builder

Następnie kliknij przycisk Rozpocznij budowę (Twórz od podstaw)

Divi Builder

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Tworzenie niestandardowych nakładek obrazów w Divi

Zaprojektuj sekcję, wiersz i kolumny

Aby rozpocząć, utwórz wiersz z trzema kolumnami w sekcji domyślnej.

Otwórz ustawienia sekcji i dodaj następujący kolor tła:

  • Tło: #3a0ca3

Następnie otwórz ustawienia kolumny 1 i zaktualizuj następujące elementy:

  • Klasa CSS: et-overlay-container
  • Przepełnienie poziome: ukryte
  • Przepełnienie pionowe: ukryte

Dodaj obraz

Teraz, gdy sekcja, wiersz i kolumna są gotowe, dodaj nowy moduł obrazu do kolumny 1. Będzie to główny obraz za naszymi projektami nakładek.

Prześlij obraz, który bardziej przypomina portret niż krajobraz. Upewnij się, że jest wystarczająco szeroki, aby pokryć pełną szerokość kolumny we wszystkich rozmiarach przeglądarki.

UWAGA: Możesz użyć obrazów poziomych, ale może być konieczne odpowiednie dostosowanie położenia elementów nakładki, aby się nie nakładały.

Pod zakładką Designu, zaktualizuj następujące informacje:

  • Margines (dolny): 0px

Pod zakładką Zaawansowane, dodaj następującą klasę CSS:

  • Klasa CSS: et-overlay-image

Dodawanie koloru nakładki obrazu za pomocą modułu „Divider”

Aby utworzyć kolor nakładki obrazu, użyjemy modułu Divider.

Najpierw dodaj moduł rozdzielacza pod obrazem.

Następnie umieść separator w pozycji bezwzględnej, tak aby znajdował się nad obrazem:

  • Pozycja: bezwzględna

Pod zakładką Treść, zaktualizuj następujące informacje:

  • Pokaż dzielnik: NIE
  • Kolor tła: rgba (247,37,133,0.8)

Następnie zaktualizuj wysokość i szerokość separatora:

  • Szerokość: 100%
  • Wzrost: 100%

Gdy projekt jest już gotowy, dodaj do rozdzielacza następującą klasę CSS:

  • i-nakładka-element

UWAGA: Tę klasę należy dodać do wszystkich elementów projektu nakładki, które mają być wyświetlane tylko po najechaniu myszą. Jeśli nie chcesz, aby element był początkowo ukryty, pomiń go.

Aby ułatwić śledzenie elementów/modułów projektu, otwórz modalne warstwy i oznacz moduł Przegroda („Kolor nakładki”).

Dodano tekst nagłówka nakładki

W module Dzielnik dodaj nowy moduł Tekst. Będzie to tekst nagłówka nakładki, który pojawi się nad obrazem po najechaniu myszą.

Zaktualizuj zawartość o tytuł H2:

<h2>Coaching</h2>

Następnie zaktualizuj etykietę modułu tekstowego, aby móc z niej skorzystać w przyszłości.

Pod zakładką Designu, zaktualizuj następujące informacje:

  • Wyrównanie tekstu: wyśrodkowane
  • Kolor tekstu: jasny
  • Czcionka: Kormoran Garamond
  • Waga czcionki: pogrubiona
  • Rozmiar tekstu: 40px
  • Szerokość: 100%
  • Maksymalna szerokość: 85%

Pod zakładką Zaawansowane, zaktualizuj pozycję w następujący sposób:

  • Pozycja: bezwzględna
  • Lokalizacja: górne centrum
  • Przesunięcie w pionie: 10%

UWAGA: Przesunięcie pionowe może wymagać dostosowania w zależności od rozmiaru proporcji obrazu. Na przykład obraz typu poziomego może wymagać mniejszego przesunięcia

Następnie dodaj następujące klasy CSS do modułu tekstowego:

  • Klasa CSS: et-overlay-item move-down

Oprócz klasy „i-nakładka-pozycja”, dodajemy dodatkową klasę "padnij" aby użyć niestandardowego CSS, aby przesunąć nagłówek nieco w dół po najechaniu myszą.

Tworzenie nałożonego tekstu głównego

Aby utworzyć nakładkę tekstu głównego, możemy zduplikować moduł Tekst używany do nakładki nagłówka. Przed aktualizacją zduplikowanych parametrów zmień etykietę na „Overlay Body”.

Otwórz ustawienia tekstu nowego modułu Tekst i zaktualizuj zawartość treści kilkoma zdaniami tekstu akapitowego.

Pod zakładką Zaawansowane, zmień bezwzględną lokalizację modułu na środek.

Ponieważ nie chcemy, aby to przesuwało się po najechaniu kursorem (tylko pojawia się), zaktualizuj klasę CSS, aby zawierała tylko następujące elementy:

  • Klasa CSS: et-overlay-item

Tworzenie przycisku nakładki

Ostatnią nakładką na tym obrazie będzie przycisk. Aby utworzyć przycisk, dodaj nowy moduł Button poniżej drugiego modułu Text.

Przed modyfikacją projektu zaktualizuj położenie przycisku w następujący sposób:

  • Pozycja: bezwzględna
  • Przesunięcie w pionie: 10%

Teraz przycisk powinien być wyśrodkowany w dolnej części obrazu.

W zakładce Zaawansowane, zaktualizuj klasę CSS i dodaj niestandardowy fragment kodu CSS do głównego elementu w następujący sposób:

  • Klasa CSS: et-overlay-item move-up
  • Główny element CSS:
min-width: 15em;

Zwróć uwagę, że do przycisku została dodana dodatkowa klasa, aby po najechaniu kursorem przesunąć go nieco w górę. Ma to uzupełnić ruch w dół tekstu nagłówka po najechaniu myszą.

Następnie zaktualizuj następujące ustawienia projektu:

  • Wyrównanie przycisków: wyśrodkowane
  • Użyj niestandardowych stylów dla przycisku: TAK
  • Rozmiar tekstu przycisku: 14px
  • Kolor tła: #4361ee
  • Szerokość obramowania przycisku: 0 pikseli
  • Odstępy między literami przycisków: 0,1 em
  • Waga czcionki: pogrubiona
  • Styl czcionki przycisku: TT
  • Padding: 0,8em (góra i dół), 0px (lewy i prawy)

Dodawanie własnego CSS za pomocą modułu Code

Dodaj moduł kodu poniżej przycisku.

Następnie wklej następujący kod CSS do treści kodu. Nie zapomnij opakować kodu w niezbędne znaczniki skryptu.

<style>
 @media all and (min-width: 981px) {
   
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }
 
}
</style>

Kod jest skomentowany, dzięki czemu możesz zrozumieć, gdzie możesz dostosować CSS do swoich potrzeb.

Powiel kolumnę, aby uzyskać więcej projektów

Otwórz warstwę modalną, najpierw usuń dwie puste kolumny.

Następnie dwukrotnie zduplikuj kolumnę zawierającą projekt nakładki obrazu. Powinieneś mieć w sumie trzy kolumny o identycznych wzorach.

Tworzenie projektu nakładki obrazu #2

W następnym projekcie umieścimy przycisk na środku obrazu (zawsze widoczny). Następnie przeniesiemy nagłówek i treść do widoku z góry i dołu obrazu.

Dostosuj położenie tekstu głównego i klasę CSS

Otwórz ustawienia modułu tekstu nakładki w kolumnie 2 i zaktualizuj pozycję:

  • Lokalizacja: dolny środek
  • Przesunięcie w pionie: 5%

Następnie zaktualizuj klasę CSS w następujący sposób:

  • Klasa CSS: et-overlay-item move-up

Dostosuj położenie przycisku i klasę CSS

Następnie otwórz ustawienia przycisku w kolumnie 2 i zaktualizuj następującą lokalizację pozycji:

  • Lokalizacja: Centrum

Następnie usuń klasę CSS, ponieważ chcemy, aby przycisk był zawsze widoczny.

Otwórz ustawienia modułu Przegroda (kolor nakładki) i zmień tło w następujący sposób:

  • Tło: rgba (67,97,238,0.8)

Następnie otwórz ustawienia przycisku i zmień kolor tła:

  • Kolor tła: #f72585

Dostosuj obraz i klasę CSS

Następnie otwórz ustawienia obrazu i prześlij nowy obraz (w razie potrzeby).

Następnie dodaj następującą klasę CSS do obrazu:

  • Klasa CSS: et-overlay-image et-scale

Zwróć uwagę, że oprócz klasy „et-overlay-image” istnieje dodatkowa klasa o nazwie „et-scale”, która zwiększa rozmiar obrazu, tworząc efekt powiększenia po najechaniu myszą.

Tworzenie projektu nakładki obrazu #3

Teraz nadszedł czas, aby utworzyć trzeci projekt nakładki obrazu w kolumnie 3.

Dostosuj zawartość tekstu nakładki i klasę CSS

Zacznij od otwarcia ustawień modułu tekstu nakładki w kolumnie 3. Następnie dodaj nagłówek H2 nad tekstem akapitu. Teraz oba będą w module.

Nakładki obrazu Divi

Następnie usuń klasę CSS, aby tekst pozostał widoczny nad obrazem.

Dostosuj przesunięcie przycisku i klasę CSS

Otwórz ustawienia modułu przycisku i zaktualizuj przesunięcie pozycji pionowej:

  • Przesunięcie w pionie: 5%

Usuń nagłówek nakładki

Następnie usuń moduł Overlay Header Text.

Dostosuj kolor nakładki i klasę CSS

Otwórz ustawienia modułu Przegroda (kolor nakładki) i zaktualizuj tło do następującego:

  • Kolor gradientu lewego tła: rgba (67,97,238,0.8)
  • Prawy kolor gradientu tła: rgba (247,37,133,0.8)
  • Pozycja wyjściowa: 25%
  • Pozycja końcowa: 75%

A ponieważ chcemy, aby nakładka gradientu była widoczna przez cały czas, usuń klasę CSS.

Dostosuj klasę CSS obrazu

Na koniec dodamy dodatkową klasę CSS („et-rotate”) do głównego obrazu, która zmieni rozmiar i obróci obraz po najechaniu myszą.

  • Klasa CSS: et-overlay-image i-rotate

Ostatnie poprawki

Zanim sprawdzimy nasze ostateczne wyniki, musimy wprowadzić pewne poprawki.

Usuń domyślny dolny margines dla wszystkich modułów

Ponieważ zaktualizowaliśmy już margines o dolny margines równy 0px, możemy rozszerzyć ten margines na wszystkie moduły.

Kliknij prawym przyciskiem myszy ustawienie marginesu i wybierz „Przedłuż marginesy”.

Następnie wybierz rozszerzenie marginesu do wszystkich modułów na stronie.

Usuń zduplikowane moduły kodu

Pamiętaj, aby usunąć dodatkowe moduły kodu, które zostały przeniesione z duplikacji pierwszej kolumny. Powinieneś mieć tylko jeden. Możesz to łatwo zrobić z warstw modalnych.

Divi

Ostateczne wyniki

Teraz, gdy nasze trzy projekty są gotowe, przyjrzyjmy się końcowym wynikom naszych projektów nakładek obrazów.

niestandardowe nakładki obrazów z Divi

Pobierz DIVI teraz !!!

A oto projekt na telefon komórkowy. Efekty najazdu na nakładkę działają tylko na komputerze. Dlatego nakładki będą nadal widoczne na urządzeniach mobilnych.

niestandardowe nakładki obrazów z Divi

Pobierz DIVI teraz !!!

Wnioski

Tworzenie niestandardowych nakładek graficznych to naprawdę świetna zabawa. Istnieje niezliczona ilość projektów, które możesz przetestować wizualnie za pomocą Divi Builder. 

Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.

Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...

Divi: Jak dodać ikonę hamburgera do modułu Menu

Divi: Jak dodać ikonę hamburgera do modułu Menu

Czy chcesz dodać ikonę hamburgera do modułu Divi Menu?

Jeśli budujesz swój nagłówek w Divi, możesz to zrobić na kilka sposobów. 

Pokażemy Ci, jak dodać ikonę hamburgera do modułu Divi Menu. Ta ikona hamburgera pojawia się już domyślnie na mniejszych ekranach. Ale w tym samouczku upewnimy się, że ikona hamburgera pojawi się również na pulpicie. 

Daje to minimalistyczny wygląd nagłówkowi, a jednocześnie dodaje interakcji.

Chodźmy.

badanie

Zanim zagłębimy się w ten samouczek, rzućmy okiem na wynik.

Pobierz DIVI teraz !!!

Utwórz nowy szablon globalnego nagłówka za pomocą Divi Builder

Przejdź do kreatora motywów Divi

Z pulpitu WordPress przejdź do „Divi > Kreator motywów' następnie kliknij „Dodaj globalny nagłówek”

Kreator motywów Divi

Dodaj nowy nagłówek globalny

Pojawi się rozwijane menu. Aby rozpocząć tworzenie od zera, kontynuuj, wybierając „Zbuduj globalny nagłówek”.

Projektowanie globalnego projektu nagłówka

Ustawienia sekcji

Kolor tła

Po wejściu do edytora szablonów czas rozpocząć projektowanie nagłówka. Zauważysz, że istnieje już sekcja. Otwórz ustawienia sekcji i dodaj kolor tła.

  • Kolor tła: #f6f9fb

rozstaw

Przełącz na kartę Designu sekcji i zmodyfikuj następujące parametry.

  • Dopełnienie (góra i dół): 0px

Dodaj nową linię

Struktura kolumny

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

zaklejania

Otwórz ustawienia linii, przejdź do zakładki Designu i zmień maksymalną szerokość w ustawieniach rozmiaru.

  • Maksymalna szerokość: 1 pikseli

rozstaw

Następnie zmień górną i dolną wyściółkę w ustawieniach odstępów.

  • Dopełnienie (góra i dół): 5px

Dodaj moduł Menu do kolumny

Wybierz menu do dodania

Następnie dodaj moduł menu do kolumny wiersza i wybierz wybrane dynamiczne menu.

Pobierz logo

Prześlij logo.

Usuń kolor tła

Następnie usuń z modułu domyślny biały kolor tła.

Ustawienia tekstu menu

Przełącz na kartę Designu modułu i odpowiednio zmodyfikuj parametry tekstowe menu:

  • Menu czcionek: Poppins
  • Grubość czcionki menu: pół pogrubiona
  • Kolor tekstu: #003e51
  • Rozmiar tekstu menu: 16px
  • Wyrównanie tekstu: do prawej

Ustawienia menu rozwijanego

Następnie zmień ustawienia z menu rozwijanego.

  • Kolor linii menu rozwijanego: #7159c8

Ustawienia ikon

Zmień również ustawienia ikon.

  • Kolor ikony koszyka na zakupy: #670fff
  • Kolor ikony wyszukiwania: #670fff
  • Kolor ikony menu Hamburger: #670fff

zaklejania

Następnie przejdź do ustawień rozmiaru i przypisz maksymalną szerokość logo.

  • Maksymalna szerokość logo: 280 pikseli

rozstaw

Usuń również domyślny dolny margines z modułu.

  • Margines (dolny): 0px

Uczyń sekcję lepką

Teraz, gdy nasze menu jest na swoim miejscu, sprawimy, że sekcja będzie przyklejona. Otwórz ustawienia sekcji, przejdź do zakładki Zaawansowane i zastosuj następujące ustawienia:

  • Lepka pozycja: przyklej do góry
  • Odsunięcie od otaczających lepkich elementów: TAK
  • Domyślne i trwałe style przejścia: TAK

Kolor tła w stanie lepkim

Następnie zmień kolor tła sekcji na przyklejony.

  • Kolor tła: #ffffff

Przyklejony cień pola stanu

Zastosuj również cień do sekcji.

  • Kolor cienia (komputer): rgba(0,0,0,0)
  • Kolor cienia (przyklejony): rgba (0,0,0,0.04)

Dodano ikonę hamburgera do modułu Menu

Dodaj identyfikator CSS do modułu menu

Najpierw otwórz ustawienia modułu Menu, przejdź do zakładki Zaawansowane i przypisz identyfikator CSS.

  • Identyfikator CSS: divi-menu

Dodaj moduł Kod w module Menu

Następnie dodaj moduł Kod w module Menu.

Dodaj tagi skryptu i stylu

Użyjemy kodu CSS i JQuery. Aby się do tego przygotować, dodamy tagi stylu i skryptu.

Dodaj kod CSS

Wklejmy następujące wiersze kodu CSS między tagami stylu:

.toggle-icon:after {
content: "\61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
 
#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
   
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
   
transform: translateY(50%);  
}
   
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
   
.icon-switch:after {
content: '\4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;    
}

Dodaj JQuery

Dodaj linie otwierania kodu JQuery

Dalej będziemy mieli kod JQuery. Dodaj następujące wiersze kodu JQuery między tagami skryptu:

jQuery(function($){
$(document).ready(function(){
 
});
});

Utwórz zmienne

Następnie utwórz kilka zmiennych.

var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');

Umieść ikonę przełączania w module Menu

Następnie umieść zmienną toggle icon w module Menu, używając następującego wiersza kodu:

toggleIcon.insertAfter(desktopMenu);

Dodaj funkcję kliknięcia!

Dodajemy również funkcję kliknięcia.

toggleIcon.click(function(){
    desktopMenu.toggleClass('reveal-menu-items');
  $(this).toggleClass('icon-switch');
});

Zapisz zmiany w Kreatorze motywów Divi

Teraz, gdy wszystko jest na swoim miejscu, pozostaje tylko zapisać wszystkie modyfikacje Divi Theme Builder i wyświetlić wynik!

Kreator motywów Divi

badanie

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się po raz ostatni efektowi końcowemu.

ikona hamburgera w module Divi Menu

Pobierz DIVI teraz !!!

Wnioski

W tym artykule pokazaliśmy, jak wykazać się kreatywnością za pomocą globalnego nagłówka w Divi Theme Builder. 

W szczególności pokazaliśmy, jak dodać ikonę menu hamburgera również na pulpicie. Domyślnie na tablecie i telefonie komórkowym wyświetlana jest ikona hamburgera.

Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.

Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do ukończenia projektów tworzenia stron internetowych. Lub zobacz także nasz przewodnik na Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...

Divi: Jak stworzyć menu z obracającym się kołem po najechaniu myszą

Divi: Jak stworzyć menu z obracającym się kołem po najechaniu myszą

Czy chciałbyś stworzyć oryginalne menu Divi w postaci obracającego się koła po najechaniu myszą?

Tworzenie obracającego się koła menu po najechaniu myszą to świetny sposób na zaprezentowanie przydatnych linków w Twojej witrynie. Byłby to świetny sposób na umieszczenie w nagłówku wielu wezwań do działania skierowanych do użytkowników, do których muszą się udać. Byłoby to również fajne menu podkategorii dla twojego bloga.

W tym samouczku pokażemy, jak utworzyć obrotowe kółko menu po najechaniu kursorem w Divi. Można to zrobić za pomocą kombinacji wbudowanych opcji Divi i niektórych niestandardowych fragmentów kodu css.

badanie

Zanim przejdziemy do tego samouczka, spójrzmy na rezultat, jaki chcemy osiągnąć.

Pobierz DIVI teraz !!!

Utwórz nową stronę za pomocą Divi Builder

Aby rozpocząć, będziesz potrzebować:

Z pulpitu WordPress przejdź do Strony> Dodaj nowy aby utworzyć nową stronę.

oryginalne menu Divi w postaci obracającego się koła po najechaniu kursorem

Nadaj mu tytuł, który ma dla Ciebie sens i kliknij Użyj Divi Builder

Następnie kliknij przycisk Rozpocznij budowę (Twórz od podstaw)

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Projekt obracającego się koła menu w Divi

Utwórz sekcję i linię 1

W sekcji obecnej domyślnie dodaj wiersz o następującej strukturze kolumn.

Następnie dodaj do wiersza moduł tekstowy o następującej treści.

Następnie zaktualizuj projekt tekstu w następujący sposób:

  • Czcionka tekstu: udostępnij technologię
  • Odstępy między literami tekstu: 1px
  • Rozmiar tekstu nagłówka 2: 8vw

Dodaj linię 2, aby zbudować koło

Następnie musimy dodać nowy wiersz do kolumny poniżej wiersza 1.

Zanim zaczniemy dodawać nasze moduły tekstowe do naszych linków, musimy zaprojektować naszą linię jako koło. Potrzebujemy wielu optymalizacji w rzędzie, aby zaprojektować nasz projekt koła.

Czytaj także: Jak odsłonić zawartość na dzielniku sekcji Hover w Divi 

Aby rozpocząć, otwórz ustawienia wiersza 2 i zaktualizuj następujące elementy:

  • Kolor tła: #02366b
  • Kolor gradientu lewego tła: rgba(0,0,0,0.45)
  • Prawy kolor gradientu tła: #02366b
  • Typ gradientu: Okrągły
  • Kierunek promieniowy: Środek
  • Pozycja wyjściowa: 36%
  • Pozycja końcowa: 0%
  • Użyj niestandardowej szerokości rynny: TAK
  • Szerokość rynny: 1
  • Szerokość: 500px
  • Maksymalna szerokość: 500px (komputer), auto (tablet i telefon)
  • Wysokość: 500px (komputer stacjonarny), auto (tablet i telefon)
  • Wypełnienie (pulpit): 0px (góra i dół)
  • Wypełnienie (tablet i telefon): 20px (góra, dół i lewo)
  • Marża (telefon): -10% (prawo)

Musimy ustawić zarówno wysokość, jak i szerokość linii na 500 pikseli, aby była to idealny kwadrat. To pozwoli nam nadać mu idealny okrągły kształt przy użyciu opcji zaokrąglonych rogów Divi (promień obramowania).

  • Zaokrąglone rogi: 50%

Następnie możemy dodać kolejny poziom projektu koła za pomocą cienia pudełkowego w następujący sposób:

  • Siła rozmycia cieni w pudełku: 0px
  • Siła rozprzestrzeniania się cieni w pudełku: 210px
  • Kolor cienia: rgba (2,54,107,0.66 XNUMX)

Następnie dodamy mały fragment kodu CSS, aby wyśrodkować zawartość naszego wiersza w pionie. Pod zakładką Zaawansowane, dodaj następujący niestandardowy kod CSS w głównym elemencie.

display:flex;align-items:center;

Dodawanie linków

Każdy link w kole zostanie utworzony za pomocą modułu Tekst. Stworzymy w sumie sześć modułów Tekst. Pięć modułów Tekst będzie zawierał linki do koła, a drugi będzie zawierał tytuł menu.

Zacznij od stworzenia nowego modułu „Tekst”.

Następnie zaktualizuj ustawienia tekstu w następujący sposób:

  • Body: „Element 1”
  • Czcionka tekstu: udostępnij technologię
  • Kolor tekstu: #ffffff
  • Rozmiar: 16px (domyślnie), 20px (najechanie)
  • Odstępy między literami: 1px
  • Wysokość linii tekstu: 60px
  • Szerokość: 250px (komputer), auto (tablet i telefon)
  • Wysokość: 60px
  • Dopełnienie (po lewej): 20px

Zapisz na razie ustawienia. Następnie zduplikuj moduł tekstowy 4 razy, aby utworzyć łącznie 5 modułów tekstowych.

Pozycjonowanie linków/modułów tekstowych

Jesteśmy teraz gotowi do umieszczenia naszych linków na obwodzie koła. W tym celu zaktualizujemy każdy moduł Tekst z opcjami transformacji, które przesuwają/tłumaczą i obracają moduł w miejscu.

Odkryj również: Jak utworzyć płynną siatkę słupów po najechaniu myszą w divi

Aby to ułatwić, wdróż tryb wyświetlania modelu krawędziowego i oznacz moduły tekstowe, zaczynając od łącza 1 u góry do łącza 5 na dole.

Link 1

Zaczniemy od edycji Link 1. Otwórz ustawienia modułu Tekst dla Link 1 i zaktualizuj następujące elementy:

  • Transform Translate (oś Y): 120 px (komputer), 0 px (tablet i telefon)
  • Transformacja Obrót (oś Z): 60 stopni (komputer), 0 pikseli (tablet i telefon)
  • Pochodzenie: 50% (w środku po prawej)

Link 2

Otwórz ustawienia modułu tekstowego dla łącza 2 i zaktualizuj następujące elementy:

  • Przekształcać
    • Translacja (oś Y): 60px (Desktop), 0px (Tablet i Telefon)
    • Obrót osi Z: 30 stopni (komputer stacjonarny), 0 pikseli (tablet i telefon)
    • Pochodzenie: 50% (w środku po prawej)

Link 3

Ponieważ moduł tekstowy dla łącza 3 znajduje się pośrodku, możemy go pozostawić na swoim miejscu.

Link 4

Otwórz ustawienia modułu tekstowego dla łącza 2 i zaktualizuj następujące elementy:

  • Przekształć :
    • Przesuń oś Y: -60px (komputer), 0px (tablet i telefon)
    • Obrót osi Z: -30 stopni (komputer), 0 pikseli (tablet i telefon)
    • Pochodzenie: 50% (w środku po prawej)

Link 5

Otwórz ustawienia modułu tekstowego dla łącza 2 i zaktualizuj następujące elementy:

  • Przekształć :
    • Przesuń oś Y: -120px (komputer), 0px (tablet i telefon)
    • Obrót osi Z: -60deg (komputer), 0px (tablet i telefon)
    • Pochodzenie: 50% (w środku po prawej)

Zobaczmy teraz wynik do tej pory. Zwróć uwagę, jak linki/tekst w modułach tekstowych przebiegają idealnie wzdłuż obwodu koła.

Dodano etykietę menu

Aby dodać etykietę menu, musimy dodać kolejny moduł tekstowy do pięciu modułów tekstowych, które już mamy. Śmiało i dodaj nowy moduł tekstowy nad łączem 1.

Następnie zaktualizuj zawartość treści w następujący sposób:

Menu

Następnie, aby przyspieszyć projektowanie, skopiuj style modułu Tekst dla łącza 3 i wklej te style modułu do nowego modułu Tekst.

Następnie zaktualizuj następujące elementy:

  • Wysokość linii tekstu: 300px (komputer), 20px (tablet i telefon)
  • Wysokość: przywróć ustawienia domyślne (automatycznie)
  • Transformacja obrotu (oś Z): 180 stopni (komputer), 0 stopni (tablet i telefon)
  • Pochodzenie transformacji: 50% (w środku po prawej)

Po zakończeniu musimy nadać modułowi Tekst etykiety menu pozycję bezwzględną. Aby to zrobić, dodaj następujący niestandardowy kod CSS do głównego elementu:

position: absolute!important;

Teraz sprawdź wynik. Powinieneś zobaczyć pozycję menu do góry nogami po prawej stronie koła.

Dodano efekt obracającego się najechania na linię/koło

Aby dodać efekt obrotowego najechania do wiersza, zaktualizuj ustawienia wiersza w następujący sposób:

  • Transformacja obrotu (oś Z): 180 stopni (komputer), 0 stopni (najechanie), 0 stopni (tablet i telefon)

Następnie zaktualizuj ustawienia przejścia w następujący sposób:

  • Czas trwania przejścia: 450 ms
  • Przejście krzywej prędkości: łatwość-w-out

Teraz obserwuj, jak koło kręci się po najechaniu na niego.

Tworzenie dwukolumnowego układu sekcji

Obecnie układ składa się z dwóch jednokolumnowych rzędów ułożonych jeden na drugim. Możemy jednak użyć właściwości flex css, aby wyrównać dwie linie w poziomie. 

Aby to zrobić, możemy dodać do sekcji mały fragment niestandardowego CSS. Gdy to zrobimy, będziemy musieli trochę dostosować odstępy, aby wszystko było w porządku.

Otwórz ustawienia sekcji i dodaj następujący niestandardowy css do głównego elementu:

display:flex;

Zaktualizuj odstępy linii 1

Następnie zaktualizuj rozmiar i odstępy linii 1 w następujący sposób:

  • Szerokość: 40% (komputer stacjonarny)
  • Margines (komputer stacjonarny): pozostało 5%

Ostateczny wynik

Zobaczmy teraz końcowy wynik.

Pobierz DIVI teraz !!!

Alternatywna konstrukcja półkoła

Fajnym alternatywnym projektem jest ukrycie prawej połowy koła na zewnątrz sekcji, aby linki były ukryte, a następnie ujawnione po najechaniu. 

Aby to zrobić, zduplikuj całą sekcję zawierającą właśnie utworzony rysunek. 

W sekcji duplikatów zaktualizuj parametry w wierszu 1 w następujący sposób:

  • Szerokość: 70% (stacjonarna)

Następnie zaktualizuj ustawienia w wierszu 2, aby wypchnąć koło z sekcji w następujący sposób:

  • Margines: -250px prawy

Musimy użyć -250px, ponieważ całkowita szerokość koła to 500px i chcemy ukryć dokładnie połowę linii.

Następnie ustaw widoczność sekcji na ukrytą w następujący sposób:

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

Oto wynik końcowy.

oryginalne menu Divi w postaci obracającego się koła po najechaniu kursorem

Pobierz DIVI teraz !!!

Wnioski

Kręcące się koło z ogniwem to jeden z tych eleganckich elementów projektu, które mogą przyciągnąć odwiedzających dzięki subtelnemu i niepowtarzalnemu efektowi zawisu. I to całkiem niesamowite, jak ten projekt można wykonać tylko z wbudowanymi ustawieniami projektowymi Divi. 

Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.

Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...