Jak zmienić styl wielu elementów po najechaniu kursorem lub kliknięciu w Divi

Ostatecznie, w świecie projektowania stron internetowych, zarówno programiści, jak i nie-programiści będą chcieli dodać bardziej zaawansowane dostosowania i funkcje do swoich witryn Divi. Zwykle wiąże się to z użyciem Javascript/JQuery do zmiany stylu elementów na stronie z różnych powodów. Możesz chcieć, aby po kliknięciu przycisku pojawił się formularz kontaktowy. Możesz też chcieć zmienić obraz po najechaniu kursorem na link.

W tym samouczku pokażemy, jak zmienić styl wielu elementów po najechaniu kursorem lub kliknięciu w Divi. Najpierw skorzystamy z wbudowanych opcji projektowych Divi, aby zaprojektować układ sekcji. Następnie przedstawimy prosty fragment jQuery, którego możesz użyć w połączeniu z niestandardowym CSS, aby dostosować styl dowolnego elementu w tej sekcji po najechaniu lub kliknięciu przycisku. Może to wydawać się skomplikowane (szczególnie dla początkujących), ale możesz być zaskoczony, jak proste jest to osiągnięcie.

Zacznijmy!

zapowiedź

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

Oto projekt układu sekcji, który zmienia się po najechaniu na przycisk.

A oto ten sam projekt układu sekcji, który zmienia się po kliknięciu przycisku. Zwróć uwagę, że tekst przycisku również zmienia się po kliknięciu.

Pobierz układ 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.

Część 1: Projektowanie układu przekroju

Aby rozpocząć, utwórz nowy wiersz z dwiema kolumnami.

Ustawienia sekcji

Przed dodaniem jakichkolwiek modułów otwórz ustawienia sekcji i zaktualizuj następujące elementy:

• Kolor tła: #ffffff

• Styl Top Divider: patrz zrzut ekranu
• Kolor górnego dzielnika: #ffffff
• Wysokość górnego rozdzielacza: 5vw

• Styl dolnego dzielnika: taki sam
• Kolor dolnej przegrody: #ffffff
• Wysokość dolnej przegrody: 5vw

• Wyściółka: góra 6vw, dół 6vw

Przed obrazem

W lewej kolumnie dwukolumnowego wiersza dodaj nowy moduł obrazu.

Następnie prześlij obraz, który chcesz zaprezentować. W tym samouczku używamy obrazu z pakietu układów zarządzania nauczaniem (LMS), który ma około 800 na 550 pikseli.

Na karcie projektu zaktualizuj linię trasowania i włącz opcję siły pełnej szerokości.

• Wyrównanie obrazu: środek
• Wymuś pełną szerokość: TAK

Po obrazie

Następnie utworzymy kolejny obraz, który pokażemy po najechaniu/kliknięciu przycisku.

Aby utworzyć obraz, zduplikuj poprzedni moduł obrazu.

Następnie prześlij nowy obraz. Obraz powinien mieć taki sam rozmiar jak inny obraz, ponieważ zastąpi inny obraz po najechaniu/kliknięciem.

W przypadku tego obrazu nadamy mu absolutną pozycję. Spowoduje to, że obraz będzie znajdował się bezpośrednio nad innym obrazem, nie zajmując rzeczywistego miejsca na stronie.

• Pozycja: bezwzględna

Na karcie Projekt zmień krycie pod opcjami filtra, aby obraz był całkowicie niewidoczny.

• Krycie: 0%

Dodaj nagłówek tekstu

W prawej kolumnie dodaj nowy moduł tekstowy.

Następnie wklej następujący kod HTML do obszaru zawartości treści:

<h3><span>Design</span> Anything You Want <span>with Divi</span></h3>

Zauważ, że niektóre słowa w tekście są otoczone znacznikami span. Dzięki temu możemy później kierować i stylizować te słowa za pomocą niestandardowego kodu CSS.

Na karcie Projekt zaktualizuj opcje stylu H3 w następujący sposób:

• Czcionka nagłówka 3: Montserrat
• Grubość czcionki nagłówka 3: Ultra Bold
• Styl czcionki nagłówka 3: TT
• Rozmiar tekstu nagłówka 3: 65px (komputer i tablet), 40px (telefon)
• Nagłówek 3 Odstępy między literami: 0.8em
• Nagłówek 3 Wysokość linii: 1,3 em

To zajmuje się układem sekcji, w której znajdują się elementy projektu, które zmienimy po najechaniu/kliknięciu przycisku. W następnej sekcji dodamy przycisk, którego użyjemy do zainicjowania zmian stylu.

Utwórz sekcję dla przycisku

Utwórz nową zwykłą sekcję poniżej bieżącej sekcji.

Następnie dodaj do sekcji wiersz z jedną kolumną.

Dodaj przycisk

W kolumnie dodaj nowy moduł przycisku.

Zmień tekst przycisku na „Zobacz po”.

Przejdź do zakładki projektu i zaktualizuj projekt przycisku w następujący sposób:

• Użyj niestandardowych stylów dla przycisku: TAK
• Rozmiar tekstu przycisku: 16px
• Kolor tekstu przycisku: #ffffff
• Tło przycisku: #4b4baf
• Tło przycisku (najechanie): #67ddc1
• Szerokość obramowania przycisku: 0px
• Odstępy między przyciskami: 4px
• Czcionka przycisku: Montserrat
• Grubość czcionki przycisku: pół pogrubiona
• Styl czcionki przycisku: TT

Część 2: Dodawanie klas CSS do elementów

Teraz, gdy nasz projekt jest gotowy, zamierzamy wprowadzić resztę zmian projektowych za pomocą niestandardowego kodu (CSS i JQuery). Ale zanim zaczniemy dodawać nasz niestandardowy kod, musimy dodać klasy CSS do wszystkich elementów, które chcemy zmienić po najechaniu/kliknięciem przycisku.

Dodaj klasę CSS do sekcji

Aby dodać klasę CSS do sekcji, otwórz ustawienia sekcji i kliknij kartę Zaawansowane. Następnie wprowadź następującą klasę CSS:

• Klasa CSS: et-change-style_section

Dodaj klasę CSS do obrazów

Następnie otwórz ustawienia pierwszego obrazu w lewej kolumnie i dodaj następującą klasę CSS:

• Klasa CSS: et-przed-obrazem

Będzie to obraz pokazany „przed” najechaniem/kliknięciem przycisku.

Korzystając z modalnych warstw, otwórz ustawienia drugiego obrazu (tego, który jest ukryty za pomocą filtra krycia) i dodaj następującą klasę CSS:

• Klasa CSS: et-po-obraz

Będzie to obraz, który pojawi się „po” najechaniu/kliknięciu przycisku.

Dodaj klasę CSS do tekstu

Następnie dodaj następującą klasę CSS do modułu tekstowego w prawej kolumnie:

• Klasa CSS: et-style-text

Dodaj klasę CSS do przycisku

Na koniec dodaj niestandardową klasę CSS przycisk w dolnej sekcji w następujący sposób:

• Klasa CSS: et-toggle-button

Potrzebujemy tej klasy, aby później wskazać przycisk dla funkcji najechania/kliknięcia w kodzie.

Część 3: Dodaj niestandardowy kod, aby zmienić style po najechaniu lub kliknięciu

Teraz, gdy wszystkie nasze klasy CSS są na swoim miejscu, możemy teraz dodać kod niezbędny do zmiany stylu wszystkich tych elementów po najechaniu/klikaniu przycisku.

Dodaj moduł kodu

Aby dodać kod, dodaj moduł kodu pod przyciskiem w dolnej sekcji.

Wklej kod jQuery

Następnie wklej następujące JQuery. Upewnij się, że owijasz kod w znaczniki skryptu, ponieważ dodajemy kod do dokumentu HTML (nie do pliku JS).

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').hover(function(){
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
        });
    });
})( jQuery );

Jeśli spojrzysz na kod, powinieneś rozpoznać klasy CSS, które dodaliśmy do przycisku i sekcji.

Klasa przycisku („.et-toggle-button”) jest używana do wskazywania elementu, który zainicjuje funkcję po najechaniu myszą.

Po najechaniu myszą funkcja znajdzie element z klasą sekcji „.et-change-style_section” i przełączy/doda nową klasę („.et-change-style-active”), gdy kursor znajduje się nad przyciskiem.

Przycisk jest również celem (przez „$this”) w celu przełączenia nowej klasy („.et-toggle-button_active”) w stanie najechania.

Kluczem do zmiany stylów tych elementów po najechaniu myszą jest dodanie/przełączenie tych dodatkowych nowych klas CSS do sekcji i przycisku.

Na przykład, gdy sekcja z klasą „.et-change-style_section” otrzyma tę dodatkową klasę („.et-change-style_active”), możemy użyć niestandardowego CSS, aby zmienić styl sekcji pierwotnie nadanej jej za pomocą wbudowane opcje Divi.

Zmiana stylu elementów za pomocą niestandardowego CSS

Otwórz moduł kodu i wklej następujący niestandardowy kod CSS nad skryptem JQuery, upewniając się, że jest on zawinięty w niezbędne tagi Style.

 .et_pb_section.et-change-style_section.et-change-style_active {
   background-color:#484db0 !important;
 }

Zauważ, że początkowa klasa przekroju jest połączona z nową klasą jako selektor. Poniższy kod CSS będzie miał zastosowanie tylko do sekcji, gdy zostanie dołączona nowa klasa. Gdy nie jest dołączony, zostanie wyświetlony oryginalny projekt. W tym przykładzie kolor tła sekcji zmieni się po najechaniu na przycisk.

Następnie wklej następujący dodatkowy kod CSS wewnątrz tagów stylu.

  .et-change-style_active .et-after-image {
    filter: opacity(100%);
  }
  .et-change-style_active .et-before-image {
    filter: opacity(0%);
  }  

Ponieważ sekcja nadrzędna otrzymuje klasę po najechaniu kursorem, możesz kierować elementy podrzędne sekcji (takie jak obrazy) przy użyciu tej samej klasy CSS. Ale ponieważ jest to klasa w kontenerze/sekcji nadrzędnej, klasa CSS powinna poprzedzać klasę elementu, który chcesz zmienić. W tym przykładzie klasa CSS („.et-change-style_active”) przypisana do sekcji nadrzędnej znajduje się przed klasą z obrazami potomnymi („.et-after-image” i „.et-before-image”).

CSS dla poobrazu pokaże obraz po najechaniu na przycisk. A CSS dla obrazu „przed” ukryje obraz po najechaniu na przycisk. W rezultacie początkowy obraz jest zmieniany na nowy po najechaniu na przycisk.

Następnie wklej resztę CSS wewnątrz tagów stylu:

  .et-change-style_active .et-style-text h3, .et-change-style_active .et-style-text p {
    color: #ffffff;
  }
  .et-change-style_active .et-style-text h3 span {
    color: #67ddc1;
  }
  .et-toggle-button_active {
    transform: scale(1.1);
    background-color: #67ddc1 !important;
  }  
  .et-change-style_active, .et-before-image, .et-after-image, .et-style-text h3  {
    transition: all 0.3s;
  }

Te fragmenty kodu CSS wykorzystują tę samą koncepcję do zmiany stylu elementu, gdy sekcja (lub przycisk) ma nową klasę.

Wynik końcowy (najechanie kursorem)

Po dodaniu kodu zapisz zmiany i otwórz stronę, aby wyświetlić wynik. Zwróć uwagę, jak elementy, na które celowaliśmy, są zmieniane po najechaniu na przycisk.

Zmiana stylów po kliknięciu zamiast najechania

Jeśli chcesz zmienić styl tych samych elementów po kliknięciu przycisku (zamiast najeżdżania kursorem), wystarczy wprowadzić kilka zmian w JQuery. Większość kodu pozostanie taka sama. Główna różnica polega na tym, że metodę „najechania” zastępuje się „kliknięciem”. Dodaliśmy też pomocny fragment kodu, który zmienia tekst przycisku po kliknięciu.

Aby dodać funkcję kliknięcia, zastąp obecne JQuery następującym (ponownie upewnij się, że jest on umieszczony w tagach skryptu):

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').click(function(e){
            e.preventDefault();
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
            if ($this.hasClass('et-toggle-button_active')){
                $this.text('See Before');
            } else {
                $this.text('See After');
            }
        });
    });
})( jQuery );

Oto ostateczny wynik.

Końcowe przemyślenia

Umiejętność kierowania i zmiany stylu wielu elementów na stronie po najechaniu na coś lub kliknięciu czegoś jest przydatną umiejętnością w projektowaniu stron internetowych. Możesz użyć tej techniki w różnych przypadkach użycia (przed i po, CTA itp.) Jasne, znajomość CSS i JS/JQuery pomaga. Ale, jak widziałeś w tym samouczku, nie musisz znać tonu kodu, aby uzyskać zaskakujące wyniki!

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!