Chcesz zmienić styl kilku elementów? Divi po najechaniu czy po kliknięciu?
W tym samouczku pokażemy, jak zmienić styl wielu elementów po najechaniu kursorem lub kliknięciu Divi.
Najpierw skorzystamy z wbudowanych opcji projektowania Divi zaprojektować układ sekcji.
Następnie przedstawimy prosty fragment kodu jQuery, którego możesz użyć w połączeniu z niestandardowym kodem CSS, aby dostosować styl dowolnego elementu w tej sekcji po najechaniu kursorem myszy 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 do zrobienia.
Zacznijmy!
badanie
Oto krótki przegląd projektu, który osiągniemy w tym samouczku.
Zmiana elementów po najechaniu na przycisk
Modyfikacja elementów po kliknięciu przycisku
Zacznijmy od stworzenia strony w Divi Builder
Zobacz też: Divi: Jak stworzyć menu z obracającym się kołem po najechaniu myszą
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.
Część 1: Projekt układu sekcji
Aby rozpocząć, utwórz nowy wiersz z dwiema kolumnami.
Ustawienia sekcji
Przed dodaniem modułów otwórz ustawienia sekcji i zaktualizuj następujące elementy:
- Tło: #ffffff
Dodajmy separator sekcji
- Przegroda (górna)
- Styl: patrz zrzut ekranu
- Kolor: #ffffff
- Wzrost: 5vw
- Przegroda (dół)
- Styl: patrz przechwytywanie!
- Kolor: #ffffff
- Wzrost: 5vw
- Wyściółka (góra i dół): 6vw
Obraz (przed najechaniem)
W lewej kolumnie dwukolumnowego wiersza dodaj nowy moduł obrazu.
Następnie prześlij obraz, który chcesz wyróżnić.
Pod zakładką Wnętrze, zaktualizuj wyrównanie i włącz opcję Siła pełna szerokość.
- Wyrównanie obrazu: wyśrodkowane
- Siła pełnej szerokości: TAK
Obraz (po najechaniu lub kliknięciu)
Następnie utworzymy kolejny obraz, który wyświetlimy po najechaniu/kliknięciu przycisku.
Aby utworzyć obraz, zduplikuj poprzedni moduł obrazu.
Następnie prześlij nowy obraz. Obraz musi mieć taki sam rozmiar jak inny obraz, ponieważ zastąpi inny obraz po najechaniu/kliknięciem.
W przypadku tego obrazu nadamy mu pozycję absolutną. Spowoduje to, że obraz będzie znajdował się bezpośrednio nad innym obrazem, nie zajmując żadnego miejsca na stronie.
- Pozycja: bezwzględna
Pod zakładką Wnętrze, zmień krycie pod opcjami filtra, aby obraz był całkowicie niewidoczny.
- Krycie: 0%
Dodaj moduł tekstowy
W prawej kolumnie dodaj nowy moduł Tekst.
Następnie wklej następujący kod HTML w polu treść z ciała:
<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>
Zwróć uwagę, że niektóre słowa w tekście są otoczone tagami rozpiętość. W ten sposób możemy później kierować i dostosowywać te słowa za pomocą niestandardowego kodu CSS.
Pod zakładką Wnętrze, zaktualizuj opcje stylu H3 w następujący sposób:
- Pozycja 3:
- Czcionka: Montserrat
- Grubość czcionki Grubość czcionki: Ultra Bold
- Styl: TT
- Rozmiar tekstu: 60 px (komputer i tablet), 40 px (telefon)
- Odstępy między literami: 0,06em
- Wysokość linii: 2 em
W następnej sekcji dodamy przycisk, którego użyjemy do zainicjowania zmian stylu.
Utwórz sekcję dla przycisku
Najpierw musimy utworzyć nową zwykłą sekcję poniżej bieżącej sekcji.
Następnie dodaj wiersz do kolumny do sekcji.
Dodaj przycisk
W kolumnie dodaj nowy moduł Przycisk.
Zmień tekst przycisku na „Ciąg dalszy...”.
Przełącz na kartę Wnętrze i zaktualizuj projekt przycisku w następujący sposób:
- Użyj niestandardowych stylów dla przycisku: TAK
- Rozmiar tekstu: 16px
- Kolor tekstu: #ffffff
- Tło przycisku (komputer): #4b4baf
- Tło przycisku (najechanie): #67ddc1
- Szerokość obramowania: 0 pikseli
Czytaj także: Divi: Jak dodać ikonę hamburgera do modułu Menu
- Odstępy między przyciskami: 4px
- Czcionka: Montserrat
- Grubość czcionki: pół pogrubiona
- Styl czcionki przycisku: TT
- Margines (dolny): 0px
- Wyściółka (góra i dół): 1.5 em
- Dopełnienie (lewy i prawy): 4em
Część 2: Dodaj klasy CSS do elementów
Teraz, gdy nasz projekt jest gotowy, resztę zmian w projekcie wprowadzimy 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ć, gdy najedziemy/klikniemy na przycisk.
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 modułów obrazu
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, który będzie wyświetlany „przed” najechaniem/kliknięciem przycisku.
Używając warstwy modalnej, otwórz ustawienia drugiego obrazu (tego ukrytego za pomocą filtra krycia) i dodaj następującą klasę CSS:
- Klasa CSS: et-po-obrazie
Będzie to obraz, który zostanie wyświetlony „po” najechaniu/kliknięciem przycisku.
Dodaj klasę CSS do modułu Text
Następnie dodaj następującą klasę CSS do modułu tekstowego w prawej kolumnie:
- Klasa CSS: et-style-text
Dodaj klasę CSS do modułu Button
Na koniec dodaj niestandardową klasę CSS do przycisku 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 kursorem lub kliknięciu
Teraz, gdy wszystkie nasze klasy CSS są na swoim miejscu, możemy dodać niezbędny kod, aby zmienić styl wszystkich tych elementów, gdy najedziesz kursorem na/klikniesz przycisk.
Dodaj moduł kodu
Aby dodać kod, dodaj moduł Kod pod przyciskiem w dolnej sekcji.
Wklej kod jQuery
Następnie wklej następujące JQuery. Pamiętaj, aby owinąć 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 );
Zmień styl elementów za pomocą niestandardowego CSS
Otwórz moduł Kod i wklej następujący niestandardowy kod CSS nad skryptem JQuery, upewniając się, że jest on otoczony niezbędnymi tagami stylu.
.et_pb_section.et-change-style_section.et-change-style_active {
background-color:#484db0 !important;
}
Następnie wklej następujący dodatkowy kod CSS do tagów stylu.
.et-change-style_active .et-after-image {
filter: opacity(100%);
}
.et-change-style_active .et-before-image {
filter: opacity(0%);
} 
Następnie wklej resztę kodu CSS do 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 (przegląd)
Po dodaniu kodu zapisz zmiany i otwórz stronę, aby wyświetlić wynik. Zwróć uwagę, jak wybrane przez nas elementy zmieniają się po najechaniu na przycisk.
Zmień style jednym kliknięciem
Aby dodać funkcję klikania, zastąp obecne JQuery następującym (ponownie upewnij się, że jest opakowany w tagi 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('Précédent...');
} else {
$this.text('Suite...');
}
});
});
})( jQuery );
Oto wynik końcowy.
Pobierz DIVI teraz !!!
Wnioski
Umiejętność kierowania i stylizowania wielu elementów na stronie po najechaniu na coś kursorem lub kliknięciu 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.)
Oczywiście warto znać trochę CSS i JS/JQuery. Ale, jak widziałeś w tym samouczku, nie potrzebujesz głębokiej wiedzy o kodowaniu, aby uzyskać niesamowite wyniki!
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.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
