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ą.
<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.
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)
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.
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
Telefon komórkowy
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
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.
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.
Przyklejony rozmiar
Następnie przejdź do ustawień rozmiaru i zastosuj następujące wartości rozmiaru:
Szerokość (przyklejony): 80 vw
Wysokość (przyklejony): 90vh
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.
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.
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.
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:
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.
Ostateczny wynik
Teraz, gdy przeszliśmy przez wszystkie kroki, zobaczmy efekt końcowy.
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.
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ę.
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.
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.
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.
Ostateczne wyniki
Teraz, gdy nasze trzy projekty są gotowe, przyjrzyjmy się końcowym wynikom naszych projektów nakładek obrazów.
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.
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.
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.
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”
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:
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.
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ąć.
Z pulpitu WordPress przejdź do Strony> Dodaj nowy aby utworzyć nową stronę.
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.
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.
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)
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:
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:
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.
Poufność i pliki cookie: ta witryna używa plików cookie. Kontynuując przeglądanie tej strony, zgadzasz się na jej użycie.
Aby dowiedzieć się więcej, w tym jak kontrolować pliki cookie, zobacz:
Polityka plików cookie
