Jak zaprojektować niestandardowe nakładki obrazów w Divi

Nakładki graficzne są stosowane od dawna w projektowaniu stron internetowych. Świetnie nadają się do angażowania odwiedzających, ujawniając dodatkowe treści i elementy projektu po najechaniu kursorem na obraz. Ponieważ jest to tak popularna funkcja projektowania, istnieje wiele wtyczek dedykowanych do tworzenia nakładek graficznych. Jednak, w zależności od wtyczki, mogą one być dość ograniczające lub mogą być nieco przesadą dla tego, czego możesz potrzebować. Dlatego warto mieć wiedzę na temat samodzielnego budowania w Divi.

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 na obraz. Najlepsze jest to, że masz pełną kontrolę nad projektowaniem nakładek graficznych za pomocą wbudowanych opcji projektowania Divi. A dzięki kilku fragmentom niestandardowego CSS możesz mieć wspaniałe nakładki graficzne, które przeniosą Twoją witrynę na wyższy poziom. Nie jest wymagana żadna wtyczka.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

Pobierz układ nakładek graficznych Divi ZA DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.

Kliknij przycisk Importuj.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

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

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

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

Tworzenie niestandardowych nakładek obrazów w Divi

Budowanie sekcji, rzędu i kolumn

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

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

• Kolor tła: #3a0ca3

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

• Klasa CSS: et-overlay-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 bardziej portretem niż krajobrazem. Używam takiego, który ma około 800 na 1050 pikseli. Upewnij się, że jest wystarczająco szeroki, aby obejmował całą szerokość kolumny we wszystkich rozmiarach przeglądarki.

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

Na karcie projekt zaktualizuj następujące elementy:

• Margines: 0px dół

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

• Klasa CSS: et-overlay-image

Dodawanie koloru nakładki obrazu za pomocą modułu rozdzielacza

Aby stworzyć kolor nakładki obrazu, użyjemy modułu dzielnika. Pomysł polega na stworzeniu osłony nad obrazem, dzięki czemu przegroda obejmuje całą wysokość i szerokość kolumny, tak aby idealnie przylegała do obrazu. Po ustawieniu możesz dostosować kolor tła modułu dzielnika, aby uzyskać żądany kolor nakładki.

Najpierw dodaj moduł rozdzielający pod obrazem.

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

• Pozycja: bezwzględna

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

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

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

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

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

• element-nakładka-et

(UWAGA: Tę klasę należy dodać do wszystkich elementów projektu nakładki, które mają być pokazywane 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ł rozdzielacza („kolor nakładki”).

Dodawanie tekstu nagłówka nakładki

Pod modułem rozdzielającym dodaj nowy moduł tekstowy. Będzie to służyć jako nasz nakładkowy tekst nagłówka, który pojawi się u góry obrazu po najechaniu myszą.

Zaktualizuj treść o nagłówek H2:

<h2>Coaching</h2>

Następnie zaktualizuj etykietę modułu tekstowego, aby móc się do niego odwoływać później.

W ustawieniach projektu tekstu zaktualizuj następujące elementy:

• 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 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 „et-overlay-item”, dodajemy dodatkową klasę „move-down”, aby użyć niestandardowego CSS do lekkiego przesunięcia nagłówka w dół po najechaniu myszą.

Tworzenie tekstu głównego nakładki

Aby utworzyć tekst treści nakładki, możemy zduplikować moduł tekstowy używany do nagłówka nakładki. Zanim zaktualizujemy ustawienia duplikatu, zmień etykietę na „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 zmianą 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.

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 do przycisku została dodana dodatkowa klasa, aby po najechaniu kursorem nieznacznie przesunąć go w górę. Ma to na celu uzupełnienie ruchu 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

Dodawanie niestandardowego CSS za pomocą modułu kodu

Zanim utworzymy kilka innych wersji tego projektu nakładki, dodajmy niestandardowy CSS potrzebny do efektów najazdu nakładki. 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>
 @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żna zrozumieć, gdzie można dostosować CSS w razie potrzeby.

Powielanie kolumny w celu uzyskania większej liczby projektów

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.

Tworzenie projektu nakładki obrazu #2

Teraz, gdy mamy już wszystkie elementy projektu w każdej z kolumn, możemy dostosować projekt, aby utworzyć dodatkowe nakładki obrazów. W tym kolejnym projekcie umieścimy przycisk na środku obrazu (zawsze widoczny). Następnie przeniesiemy nagłówek i tekst główny do widoku z góry i dołu obrazu.

Dostosuj położenie tekstu podstawowego 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 o następujące elementy:

• 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 Centrum

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

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

• Kolor tła: rgba (67,97,238,0.8)

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

• Kolor tła przycisku: #f72585

Dostosuj obraz i klasę CSS

Następnie otwórz ustawienia obrazu i prześlij nowy obraz (jeśli chcesz).

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 spowoduje zwiększenie rozmiaru obrazu, tworząc efekt powiększenia po najechaniu myszą.

Tworzenie projektu nakładki obrazu nr 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 tekstowego nakładki w kolumnie 3 i dodaj nagłówek H2 nad tekstem akapitu. Teraz dwa będą wewnątrz jednego modułu zamiast dwóch.

Następnie wyjmij klasę CSS, aby tekst pozostał widoczny na górze obrazu.

Dostosuj przesunięcie przycisku i klasę CSS

Otwórz ustawienia modułu przycisków i zaktualizuj pionowe przesunięcie pozycji:

• Przesunięcie w pionie: 5%

Usuń nagłówek nakładki

Następnie usuń moduł tekstu nagłówka nakładki.

Dostosuj kolor nakładki i klasę CSS

Otwórz ustawienia modułu rozdzielającego (kolor nakładki) i zaktualizuj tło za pomocą następujących elementów:

• Kolor gradientu tła po lewej stronie: rgba (67,97,238,0.8)
• Prawy gradient tła: rgba (247,37,133,0.8)
• Pozycja startowa: 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 będzie zarówno skalować, jak i obracać obraz po najechaniu myszą.

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

Ostatnie poprawki

Zanim sprawdzimy nasze ostateczne wyniki, musimy wprowadzić kilka poprawek.

Wyjmij domyślny dolny margines dla wszystkich modułów

Domyślnie każdy moduł ma dolny margines 30px ze względu na domyślną szerokość rynny (3) w ustawieniach wiersza. Może to zepsuć położenie modułów w naszym projekcie nakładki. Aby je wyjąć, otwórz ustawienia modułu obrazu dla jednego z obrazów w projekcie. Ponieważ zaktualizowaliśmy już margines o dolny margines 0px, możemy rozszerzyć ten margines na wszystkie moduły.

Kliknij prawym przyciskiem myszy ustawienie marginesu i wybierz „rozszerz margines”.

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 podczas duplikowania pierwszej kolumny. Powinieneś mieć tylko jeden. Możesz to łatwo zrobić z modalnych warstw.

Ostateczne rezultaty

Teraz, gdy nasze trzy projekty są gotowe, sprawdźmy ostateczne wyniki naszych projektów nakładek obrazów.

A oto projekt na telefon komórkowy. Efekty najazdu nakładki mają zastosowanie tylko do komputerów stacjonarnych za pośrednictwem niestandardowego zapytania o media CSS w module kodu. Dlatego nakładki będą zawsze widoczne na urządzeniach mobilnych.

Końcowe przemyślenia

Tworzenie niestandardowych nakładek graficznych to naprawdę świetna zabawa. Istnieje niezliczona liczba projektów, które można przetestować wizualnie za pomocą konstruktora Divi, a zastosowanie efektów najechania wymaga tylko niewielkiej ilości niestandardowego CSS. Nawet efekty najechania na elementy nakładki wymagają niestandardowego CSS, nadal możesz skorzystać z wbudowanych opcji najechania, aby kierować każdy element nakładki indywidualnie.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!