Jak utworzyć nakładkę obrazu z projektami animacji podzielonego tekstu migawki w Divi

Nakładki graficzne nadal są popularnym zasobem projektowym podczas wyświetlania obrazów w witrynie. Oferują nie tylko kreatywny sposób prezentowania obrazów, ale także mogą sprawić, że oglądanie obrazów będzie przyjemniejsze i bardziej angażujące dla odwiedzających, zwłaszcza gdy dodasz niestandardowe animacje po najechaniu kursorem lub kliknięciu obrazu.

W tym samouczku pokażemy, jak utworzyć nakładkę obrazu z animacją podzielonego tekstu migawki w Divi. Najpierw pokażemy, jak zbudować niestandardową nakładkę obrazu z dzielonymi okiennicami tekstowymi. Następnie pokażemy, jak wykorzystać wbudowane opcje transformacji Divi, aby stworzyć trzy całkowicie unikalne projekty animacji nakładki obrazu. Pokażemy Ci nawet kilka innych przykładowych projektów, aby pobudzić kreatywne soki.

Wskoczmy i zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekty nakładek obrazów z tego samouczka.

A oto kod pisaka, który demonstruje ten sam projekt, który został użyty w tym samouczku.

Pobierz układ za DARMO

Aby położyć ręce na projektach animacji migawki z dzielonym tekstem nakładki obrazu z tego samouczka, najpierw musisz je pobrać za pomocą poniższego przycisku. 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.

Część 1: Tworzenie nakładki obrazu za pomocą dzielonych okiennic tekstowych

W tej pierwszej części samouczka zbudujemy początkową konfigurację nakładki obrazu z dzielonymi migawkami tekstowymi. Gdy to zrobimy, możemy później dodać animację do okiennic.

Rząd

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

Przed dodaniem modułów otwórz ustawienia wierszy i zaktualizuj szerokość rynny:

• Szerokość rynny: 2

Aktualizacja kolumny

Kolumna będzie głównym kontenerem, w którym będzie przechowywany nasz obraz oraz elementy nakładki migawki. Będzie to również główny cel, który po najechaniu zainicjuje animację migawki. Innymi słowy, gdy kursor porusza się wewnątrz kolumny, animacja elementów podrzędnych (żaluzji) zostanie włączona, a gdy kursor przesunie się poza kolumnę, animacja zostanie wyłączona.

Aby oznaczyć naszą kolumnę jako „kolumnę migawki” i animować ją później „po najechaniu”, dodaj do kolumny następujące klasy CSS:

• Klasa CSS: kolumna migawki po najechaniu kursorem

Następnie zaktualizuj przepełnienia do ukrytych, abyśmy nie widzieli przekształconych elementów, gdy wyjdą poza kontener kolumny podczas animacji.

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

Dodawanie głównego obrazu

W kolumnie 1 dodaj moduł obrazu. Będzie to główny obraz, który zasiądziemy za nakładką migawki.

Prześlij obraz do modułu obrazu.

Następnie ustaw wyrównanie obrazu do środka.

Tworzenie górnej migawki z podzielonym tekstem

Teraz, gdy nasz obraz jest na swoim miejscu, dodamy górną migawkę za pomocą modułu tekstowego. Dodaj nowy moduł tekstowy pod obrazem.

Zaktualizuj zawartość modułu tekstowego, dodając tekst „divi” w obszarze ciała.

Na karcie projektu zaktualizuj styl tekstu w następujący sposób:

• Czcionka tekstu: Poppins
• Grubość czcionki tekstu: Ciężka
• Styl czcionki tekstu: TT
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 200px (komputer), 30vw (tablet i telefon)
• Odstępy między literami tekstu: -0,03 em
• Wysokość linii tekstu: 0em
• Wyrównanie tekstu: do środka

Następnie zaktualizuj opcje rozmiaru i odstępów:

• Szerokość: 100%
• Wzrost: 50%
• Margines: 0px dół

Na karcie Zaawansowane zaktualizuj następujące elementy:

• Klasa CSS: górna przesłona

Użyjemy klasy CSS, aby później włączać i wyłączać animację transformacji za pomocą naszego kodu.

Następnie dodaj ten niestandardowy kod CSS do elementu głównego:

display:flex;
align-items:flex-end;
justify-content:center;

Ten kod używa fleksa, aby upewnić się, że tekst jest wyrównany w pionie na dole modułu. Ponieważ tekst ma wysokość wiersza równą 0, tekst zostanie pokazany jako podzielony, pokazując tylko górną połowę.

Aby ustawić naszą górną przesłonę, musimy najpierw ukryć nadmiar tekstu, a następnie nadać mu pozycję bezwzględną w następujący sposób:

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte
• Pozycja: bezwzględna

Spowoduje to przesunięcie migawki nad górną połowę obrazu.

Tworzenie dolnej migawki z dopasowanym podzielonym tekstem

Teraz, gdy mamy ukończoną górną migawkę, możemy szybko rozpocząć tworzenie dolnej migawki, duplikując moduł tekstowy górnej migawki.

Następnie otwórz zduplikowany moduł tekstowy i zaktualizuj następujące elementy:

• Klasa CSS: górna przesłona

Zaktualizuj kod CSS głównego elementu, zastępując „flex-end” słowem „flex-start” we właściwości align-items. Oto ostateczny CSS:

display:flex;
align-items:flex-start;
justify-content:center;

Dzięki „flex-start” tekst jest wyrównany w pionie u góry modułu. A ponieważ tekst ma wysokość wiersza równą 0, tekst zostanie pokazany jako podzielony, pokazując tylko dolną połowę.

Następnie zaktualizuj pozycję bezwzględną o przesunięcie pionowe w następujący sposób:

• Przesunięcie w pionie: 50%

Dzięki temu moduł tekstowy migawki znajduje się nad dolną połową obrazu.

Podzielony tekst na obu żaluzjach powinien być teraz wyrównany tak, aby idealnie pasował.

W tym momencie pomyślnie stworzyliśmy konfigurację dla naszej nakładki obrazu migawki z dzielonym tekstem. Składa się z kolumny migawki jako kontenera, głównego obrazu, górnej migawki, która znajduje się w górnej połowie obrazu, oraz dolnej migawki, która znajduje się w dolnej połowie obrazu.

Wykorzystamy to jako rodzaj szablonu startowego dla kilku następnych przykładów, które będą zawierać animacje efektu migawki przy użyciu właściwości transformacji.

Część 2: Kodeks

Aby dodać funkcjonalność animacji migawki, potrzebujemy kilku fragmentów CSS i JS za pomocą modułu Code.

Dodaj nowy moduł kodu do strony. Możemy dodać go do prawej kolumny pierwszej górnej sekcji, której użyliśmy do naszej początkowej budowy nakładki.

CSS

Wklej następujący kod CSS w polu kodu, upewniając się, że jest on owinięty niezbędnymi tagami stylu :

  /* transition duration of shutter animation */
  .top-shutter,
  .bottom-shutter {
    transition: transform 1s;
  }
  /* disables all transform options created in
  Divi Builder for both shutters */
  .divi-transform-none .top-shutter,
  .divi-transform-none .bottom-shutter {
    transform: none;
  }
  .on-click {
    cursor:pointer;
  }

Ten CSS jest naprawdę prosty. Wszystko, co robi, to zastosowanie transformacji: none do żaluzji wewnątrz kolumny z klasą „divi-transform-none”. Ta klasa będzie włączana i wyłączana za pomocą JS, aby utworzyć animację. Przejście: transform 1s po prostu ustawia czas trwania przejścia (lub animacji) na 1 sekundę.

JS

Po CSS dodaj następujące JQuery do pola kodu, upewniając się, że jest ono otoczone niezbędnymi tagami skryptu :

(function ($) {
  $(document).ready(function () {
    /*
  Toggle shutter transform animation on hover.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-hover divi-transform-none".
  */
    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

    /*
  Toggle shutter transform animation on click.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-click divi-transform-none".
  */
    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });
  });
})(jQuery);

Pierwsza część kodu dodaje funkcję, która przełącza animacje transformacji migawki po najechaniu kursorem, gdy kolumna ma klasy „kolumna migawki po najechaniu kursorem divi-transform-none”.

    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

Druga część kodu dodaje funkcjonalność, która przełącza animacje transformacji migawki po kliknięciu, gdy kolumna ma klasy „kolumna migawki po kliknięciu divi-transform-none”.

    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });

Część 3: Projekty animacji podzielonego tekstu migawki

Projekt nr 1

Aby stworzyć nasz pierwszy projekt animacji migawki, zamierzamy przyspieszyć proces projektowania poprzez powielenie pierwszej sekcji. To da nam nową sekcję z gotową nakładką obrazu z podzielonymi migawkami tekstowymi gotowymi do pracy.

Dodaj właściwości transformacji do górnej migawki

Zwykle, gdy używasz CSS do animowania czegoś z właściwościami transformacji, element początkowo nie będzie miał stylu transformacji, a następnie styl transformacji zostanie zastosowany za każdym razem, gdy użytkownik najedzie kursorem lub kliknie element. W Divi odwrócimy proces i zaczniemy od dodania stylu transformacji do elementu za pomocą najpierw Divi Builder. Dzięki temu możemy korzystać z wbudowanych opcji transformacji podczas wizualnej edycji projektu. Następnie, gdy skończymy dodawać wszystkie elementy projektu transformacji, możemy je początkowo wyłączyć (za pomocą klasy CSS), a następnie włączać i wyłączać, gdy użytkownik wchodzi w interakcję z nakładką.

Aby dodać projekt transformacji do górnej migawki, otwórz ustawienia modułu tekstowego górnej migawki i zaktualizuj następujące elementy:

• Skala transformacji (X i Y): 150%
• Przekształć Przesuń oś Y: -101%
• Przekształć pochodzenie: górny środek

Jeśli zrobiłeś to dobrze, górna migawka nie będzie już widoczna, a tego właśnie chcemy, ponieważ chcemy, aby cały główny obraz został wyeksponowany po przejściu animacji.

Dodaj właściwości transformacji do dolnej migawki

W przypadku dolnej przegrody zaktualizuj następujące opcje projektu przekształcenia:

• Skala transformacji (X i Y): 150%
• Przekształć Przesuń oś Y: 101%
• Przekształć pochodzenie: dolny środek

Dodaj klasę, aby początkowo wyłączyć projekty transformacji

Jak wspomniałem wcześniej, po zakończeniu dodawania projektów transformacji potrzebnych do naszej animacji migawki, możemy początkowo wyłączyć te projekty transformacji, dodając klasę CSS.

Ze względu na niestandardowy kod CSS, który dodaliśmy wcześniej, projekt pojawi się bez żadnych projektów transformacji.

Dodaj funkcjonalność na kliknięcie z jedną klasą

Aby ta sama animacja uruchamiała się po kliknięciu, a nie po najechaniu kursorem, wystarczy zastąpić jedną klasę w kolumnie.

Najpierw zduplikuj kolumnę 1 z naszym pierwszym roboczym przykładem po najechaniu myszą. Następnie usuń pustą kolumnę. Teraz powinieneś mieć dwie identyczne kolumny z tymi samymi klasami i zawartością.

Otwórz ustawienia dla kolumny 2 i zastąp klasę „on-hover” klasą „on-click”. Oto, jakie powinny być ostatnie trzy klasy:

• Klasa CSS: kolumna migawki po kliknięciu divi-transform-none

Wynik

Odwracanie animacji migawki po najechaniu kursorem

Jeśli chcesz, aby główny obraz był początkowo wyświetlany odsłonięty, a następnie dodaj nakładkę po najechaniu kursorem na obraz (odwrotność tego, jak działa teraz), możesz usunąć klasę „divi-transform-none” w kolumnie używanej dla migawki . Daje to następujący efekt.

Projekt #2

Aby stworzyć drugą animację migawki, możemy użyć duplikatu poprzedniej sekcji z naszą pierwszą animacją migawki.

Zaktualizuj okiennice

Następnie użyj wielokrotnego wyboru, aby wybrać moduły tekstowe górnej i dolnej migawki. Następnie otwórz ustawienia elementów dla obu i zaktualizuj następujące elementy:

• Tło: #ffffff
• Kolor tekstu tekstu: #000000
• Tryb mieszania: ekran

Wynik

Projekt #3

Aby utworzyć trzeci projekt nakładki obrazu animacji migawki, zduplikuj poprzednią sekcję.

Dodaj nowy obraz

Następnie zaktualizuj moduł obrazu o nowy obraz.

Zaktualizuj okiennice

Użyj funkcji wielokrotnego wyboru, aby wybrać moduły tekstowe górnej i dolnej migawki, a następnie otwórz ustawienia elementów dla obu, aby zaktualizować następujące elementy:

• Zawartość ciała: d

• Tło: rgba(0,0,0,0.9)
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 450px (komputer), 70vw (tablet i telefon)
• Tryb mieszania: pomnóż

Otwórz górne ustawienia modułu tekstowego migawki i zaktualizuj następujące opcje transformacji:

• Skala transformacji (X i Y): 100% (domyślnie)
• Przekształć Przesuń oś Y: -101%
• Przekształć Obróć oś Z: -45 stopni
• Pochodzenie przekształcenia: u góry po lewej

Następnie zaktualizuj ustawienia modułu tekstowego dolnej migawki i zaktualizuj następujące opcje transformacji:

• Skala transformacji (X i Y): 100% (domyślnie)
• Przekształć Przesuń oś Y: 101%
• Przekształć Obróć oś Z: -45 stopni
• Przekształć pochodzenie: dolny prawy

Wynik

Więcej przykładów i możliwości

Oto kilka przykładowych projektów przy użyciu tych samych technik.

Oto taki, który jest podobny do projektu nr 2, ale bez skali transformacji na żaluzjach. Pokazuje również, jak efekt lightbox nadal działa na obrazie.

A oto kolejny przykład, który używa przekształcenia do przesuwania okiennic w poziomie.

Ostateczne rezultaty

Końcowe przemyślenia

Tworzenie nakładek obrazów z animacjami migawki podzielonego tekstu w Divi może być skutecznym podejściem do wyróżniania obrazów i przyciągania odwiedzających w nowy sposób.

Mamy nadzieję, że pobudzi to Twoją kreatywność do dodawania własnych projektów i przekształcania efektów animacji przy użyciu różnych kolorów, czcionek, trybów mieszania itp. Możliwości wydają się nieograniczone.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!