Nakładki graficzne to jeden ze świetnych sposobów na zaangażowanie odwiedzających poprzez pokazanie odwiedzającym dodatkowych informacji. Zwykle dzieje się tak, gdy mysz najedzie na element lub obraz. Ponieważ jest to dość popularne, być może zauważyłeś już wiele wtyczek WordPress, które pomogą Ci to osiągnąć. Jeśli kochasz Divi tak jak ja , możesz się zastanawiać, jak to zrobić z Divi? To właśnie omówimy dzisiaj.

W tym samouczku pokażemy, jak zaprojektować niestandardowe nakładki obrazów w Divi Builder . Te nakładki będą przełączać i odsłaniać elementy, gdy najedziemy na nie myszą. Interesujące może być to, że możesz mieć lepszą kontrolę nad projektem tylko za pomocą wbudowanych opcji Divi. Możemy w końcu użyć kodu CSS, który sprawi, że wszystko będzie wyglądało jeszcze lepiej.

Spodziewany wynik

Oto krótkie spojrzenie na to, co możesz uzyskać pod koniec tego samouczka.

Wymagane składniki przed rozpoczęciem

Zanim przejdziesz do samouczka, musisz spełnić pewne wymagania, ponieważ są one wymagane do odtworzenia tego samouczka. Dlatego będziesz potrzebować:

Twórz niesamowite strony internetowe

Z najlepszym darmowym kreatorem stron Elementor

Zacząć teraz

• Zainstaluj i aktywuj Divi
• Utwórz nową stronę w WordPress i użyj Divi Builder na interfejsie
• Wybierz opcję „Buduj od podstaw”.

Jeśli po tym masz pustą stronę, jesteś gotowy do pracy.

Tworzenie niestandardowych nakładek obrazów w Divi

Budowanie sekcji, rzędu i kolumn

Zaczniemy od wybrania trzykolumnowego wiersza w sekcji domyślnej.

Otwórz ustawienia sekcji i użyj następującego koloru tła:

• Kolor tła: #3a0ca3

Następnie przejdź do ustawień dla kolumny 1 i zmień następujące opcje:

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

Klasa CSS jest potrzebna do wywołania efektów najechania na elementy nakładki, które zamierzamy zbudować. Ukryte przepełnienie jest potrzebne, ponieważ będziemy mieli efekt najechania, który skaluje obraz poza kontener kolumny.

Dodawanie obrazu

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 jest w portrecie. Używam takiego, który ma mniej więcej 1280 na 1920 pikseli. Upewnij się, że jest wystarczająco szeroki, aby obejmował całą szerokość kolumny we wszystkich rozmiarach przeglądarki.

Na karcie projektu zmień następujące elementy:

• Margines: 0px dół

W zakładce Zaawansowane dodaj następującą klasę CSS:

• Klasa CSS: et-overlay-image

Wybór koloru nakładki obrazu za pomocą modułu rozdzielacza

Aby stworzyć kolor nakładki obrazu, użyjemy modułu dzielnika. Pomysł polega na stworzeniu okładki nad obrazem poprzez zdefiniowanie przegrody na pełnej wysokości i szerokości, która zakrywa kolumnę, aby idealnie pasowała do obrazu. Po ustawieniu możesz dostosować kolor tła modułu dzielnika, aby uzyskać kolor nakładki, jak chcesz.

Więc najpierw dodajmy moduł dzielnika pod obrazem.

Następnie ustaw separator jako bezwzględny, aby pojawił się na górze obrazu:

• Pozycja: bezwzględna

Na karcie treści zaktualizuj następujące elementy:

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

Następnie zmień wysokość i szerokość przegrody:

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

Po zdefiniowaniu projektu dodaj następującą klasę CSS do dzielnika:

• element-nakładka-et

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

Opcjonalnie możesz oznaczyć przegrodę zamienioną w nakładkę z czytelną nazwą. Można to zrobić z warstwy i użyć "Nakładki".

Dodawanie tekstu nagłówka nakładki

Pod modułem rozdzielającym dodaj nowy moduł tekstowy. Będzie on używany jako tekst nagłówka nakładki i pojawi się u góry obrazu po najechaniu myszą.

Zmień treść nagłówkiem H2:

>h2/h2



Możesz także zmienić etykietę modułu tekstowego w celu późniejszego odniesienia.







W ustawieniach projektu tekstu zmień to:



Wyrównanie tekstu: do środka
Kolor tekstu: jasny







Czcionka nagłówka 2: Kormoran Garamond
Grubość czcionki nagłówka 2: pogrubiona
Rozmiar tekstu nagłówka 2: 40px







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







W zakładce Zaawansowane zmień pozycję w następujący sposób:



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



Ostrzeżenie: przesunięcie pionowe może wymagać dostosowania zgodnie z rozmiarem proporcji obrazu. 







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



Klasa CSS: et-overlay-item move-down



Oprócz klasy „et-overlay-item”, dodajemy dodatkową klasę „move-down”, aby używać niestandardowego CSS do przesuwania nagłówka w dół po najechaniu myszą.







Tworzenie tekstu głównego nakładki



 Aby utworzyć tekst nakładki, możemy powielić moduł tekstowy użyty do nagłówka nakładki.  Przed zmianą ustawień nadajmy temu modułowi inną etykietę.  Tym razem użyjemy „Overlay Body”.







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







W zakładce Zaawansowane zmień bezwzględną lokalizację modułu na środek.







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



Klasa CSS: et-overlay-item







Tworzenie przycisku nakładki



 Ostatnim elementem nakładki na tym obrazie będzie przycisk.  Aby utworzyć przycisk, dodaj nowy moduł przycisku pod modułem tekstowym „body textâ€.







Przed aktualizacją projektu zmieńmy 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.



Na karcie Zaawansowane zaktualizuj klasę CSS i dodaj fragment niestandardowego 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 tutaj do przycisku została dodana dodatkowa klasa, aby po najechaniu kursorem nieznacznie przesunąć go w górę.  Uzupełni to ruch w dół tekstu nagłówka po najechaniu kursorem.







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



Wyrównanie przycisków: środek
Rozmiar tekstu przycisku: 14px
przycisk Kolor tła: #4361ee
przycisk Szerokość obramowania: 0px
Odstępy między literami przycisków: 0.1 em
Waga czcionki przycisku: pogrubiona
Styl czcionki przycisku: TT
Padding: 0.8em na górze, 0.8em na dole, 0px w lewo, 0px w prawo







Uzupełnienie o niestandardowy moduł kodu



 Zanim przejdziemy do innej wersji, dodajmy CSS, aby dodać efekt najechania.  W tym celu pod przyciskiem dodaj moduł kodu.







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



>style 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 ma kilka komentarzy, dzięki czemu możesz zrozumieć, gdzie możesz dostosować CSS w razie potrzeby.



Powielanie kolumny dla innych sekcji



 Chociaż mamy już dwie dodatkowe puste kolumny do pracy, łatwiej jest przenieść wszystkie moduły i projekt z pierwszej kolumny do nowej kolumny, duplikując całą kolumnę.  Aby to zrobić, otwórz modalne warstwy, usuń dwie puste kolumny, a następnie dwukrotnie zduplikuj kolumnę zawierającą projekt nakładki obrazu.  Powinieneś mieć w sumie trzy kolumny o identycznych wzorach.







Pozwolę ci zdecydować, jaki zestaw kolorów zastosujesz do kolumn 2 i 3. Nie patrzmy, jaki jest ostateczny wynik.



Ostateczne rezultaty



Teraz, gdy nasze trzy projekty są gotowe (mam nadzieję, że zmieniłeś projekt dla dwóch pozostałych kolumn), sprawdźmy ostateczne wyniki naszych projektów.







Streszczenie



 Tworzenie nakładki obrazu jest rzeczywiście możliwe dzięki Divi .  Istnieje niezliczona ilość projektów, które możesz stworzyć wizualnie za pomocą konstruktora Divi, a zastosowanie niektórych efektów najechania wymaga tylko niewielkiej ilości niestandardowego CSS.