Želite li promijeniti stil nekoliko elemenata Divi pri prelasku ili nakon klika?
U ovom vodiču pokazat ćemo vam kako promijeniti stil više elemenata kada lebdite ili kliknete Divi.
Prvo ćemo iskoristiti prednosti ugrađenih opcija dizajna Divi dizajnirati izgled odjeljka.
Zatim ćemo predstaviti jednostavan jQuery isječak koji možete koristiti u kombinaciji s prilagođenim CSS-om za prilagodbu stila bilo kojeg elementa u ovom odjeljku kada zadržite pokazivač iznad ili kliknete gumb.
Ovo može zvučati komplicirano (osobito za početnike), ali mogli biste se iznenaditi koliko je to jednostavno učiniti.
Krenimo!
pregled
Ovdje je kratki pregled dizajna koji ćemo postići u ovom vodiču.
Mijenjanje elemenata pri lebdenju gumba
Promjena elemenata nakon klika na gumb
Počnimo s izradom stranice s Divi Builderom
Vidi također: Divi: Kako stvoriti izbornik s kotačićem pri lebdenju
S WordPress nadzorne ploče idite na Stranice> Dodaj novo za stvaranje nove stranice.
Dajte mu naslov koji vam ima smisla i kliknite Koristite Divi Builder
zatim kliknite Počnite graditi (Gradi od ogrebotina)
Nakon toga imat ćete prazno platno za početak dizajniranja u Divi.
Dio 1: Dizajn izgleda odjeljka
Za početak stvorite novi redak s dva stupca.
Postavke odjeljka
Prije dodavanja modula otvorite postavke odjeljka i ažurirajte sljedeće:
- Pozadina: #ffffff
Dodajmo razdjelnik odjeljaka
- Razdjelnik (gornji)
- Stil: pogledajte snimak zaslona
- Boja: #ffffff
- Visina: 5vw
- Razdjelnik (dno)
- Stil: vidi snimanje
- Boja: #ffffff
- Visina: 5vw
- Podstava (gornji i donji dio): 6vw
Slika (prije lebdenja)
U lijevom stupcu retka s dva stupca dodajte novi modul slike.
Zatim prenesite sliku koju želite istaknuti.
Ispod kartice dizajn, ažurirajte poravnanje i omogućite opciju Snaga Puna širina.
- Poravnanje slike: centrirano
- Snaga pune širine: DA
Slika (pri lebdenju ili nakon klika)
Zatim ćemo stvoriti još jednu sliku koju ćemo prikazati kada prijeđemo/kliknemo gumb.
Da biste stvorili sliku, duplicirajte prethodni modul slike.
Zatim prenesite novu sliku. Slika mora biti iste veličine kao druga slika jer će zamijeniti drugu sliku pri lebdenju/kliku.
Za ovu sliku dat ćemo joj apsolutnu poziciju. To će uzrokovati da slika sjedi točno iznad druge slike bez zauzimanja stvarnog prostora na stranici.
- Pozicija: Apsolutna
Ispod kartice dizajn, promijenite neprozirnost pod opcijama filtra tako da slika bude potpuno nevidljiva.
- Neprozirnost: 0%
Dodajte tekstualni modul
U desnom stupcu dodajte novi tekstualni modul.
Zatim zalijepite sljedeći HTML kod u okvir sadržaj iz tijela:
<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>
Imajte na umu da su neke riječi u tekstu okružene oznakama raspon. Ovo je način na koji kasnije možemo ciljati i prilagoditi ove riječi pomoću prilagođenog CSS-a.
Ispod kartice dizajnažurirajte opcije stila H3 na sljedeći način:
- Naslov 3:
- Font: Montserrat
- Težina fonta Težina fonta: Ultra podebljano
- Stil: TT
- Veličina teksta: 60 px (računalo i tablet), 40 px (telefon)
- Razmak između slova: 0,06 em
- Visina linije: 2 em
U sljedećem odjeljku ćemo dodati gumb koji ćemo koristiti za pokretanje promjena stila.
Napravite odjeljak za gumb
Prvo moramo stvoriti novi regularni odjeljak ispod trenutnog odjeljka.
Zatim dodajte redak u stupac odjeljku.
Dodajte gumb
U stupcu dodajte novi modul Button.
Promijenite tekst gumba u "Nastavak...".
Prijeđite na karticu dizajn i ažurirajte dizajn gumba na sljedeći način:
- Koristi prilagođene stilove za gumb: DA
- Veličina teksta: 16px
- Boja teksta: #ffffff
- Pozadina gumba (radna površina): #4b4baf
- Pozadina gumba (prelazak pokazivačem): #67ddc1
- Širina obruba: 0 piksela
Pročitajte također: Divi: Kako dodati ikonu hamburgera u modul Izbornik
- Razmak između slova gumba: 4 px
- Font: Montserrat
- Težina fonta: polu podebljano
- Stil fonta gumba: TT
- Margina (donja): 0px
- Podstava (gornji i donji dio): 1.5 em
- Ispuna (lijevo i desno): 4em
Dio 2: Dodajte CSS klase elementima
Sada kada je naš dizajn postavljen, napravit ćemo ostale promjene dizajna pomoću prilagođenog koda (CSS i JQuery).
Ali prije nego počnemo dodavati naš prilagođeni kod, moramo dodati CSS klase svim elementima koje želimo promijeniti kada lebdimo/kliknemo na gumb.
Dodajte CSS klasu u odjeljak
Da biste dodali CSS klasu u odjeljak, otvorite postavke odjeljka i kliknite na karticu napredan. Zatim unesite sljedeću CSS klasu:
- CSS klasa: et-change-style_section
Dodajte CSS klasu u module slika
Zatim otvorite postavke za prvu sliku u lijevom stupcu i dodajte sljedeću CSS klasu:
- CSS klasa: et-before-image
Ovo će biti slika koja će se prikazati "prije" lebdenja/klika na gumb.
Koristeći modal sloja, otvorite postavke za drugu sliku (onu skrivenu filtrom neprozirnosti) i dodajte sljedeću CSS klasu:
- CSS klasa: et-after-image
Ovo će biti slika koja će se prikazati "nakon" lebdenja/klika na gumb.
Dodajte CSS klasu tekstualnom modulu
Zatim dodajte sljedeću CSS klasu tekstualnom modulu u desnom stupcu:
- CSS klasa: et-style-text
Dodajte CSS klasu u modul Button
Na kraju, dodajte prilagođenu CSS klasu gumbu u donjem dijelu na sljedeći način:
- CSS klasa: et-toggle-button
Ova nam je klasa potrebna za ciljanje gumba za funkciju lebdenja/klika u kodu kasnije.
3. dio: dodajte prilagođeni kod za promjenu stilova pri lebdenju ili kliku
Sada kada su sve naše CSS klase postavljene, možemo dodati potreban kod za promjenu stila svih ovih elemenata kada lebdite/kliknete gumb.
Dodajte modul koda
Da biste dodali kod, dodajte modul koda ispod gumba u donjem dijelu.
Zalijepite jQuery kod
Zatim zalijepite sljedeći JQuery. Obavezno umotajte kôd u oznake skripte dok dodajemo kôd u HTML dokument (ne JS datoteku).
(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 );
Promijenite stil elemenata pomoću prilagođenog CSS-a
Otvorite modul Code i zalijepite sljedeći prilagođeni CSS iznad JQuery skripte, pazeći da ga omotate u potrebne oznake stila.
.et_pb_section.et-change-style_section.et-change-style_active {
background-color:#484db0 !important;
}
Zatim zalijepite sljedeći dodatni CSS u stilske oznake.
.et-change-style_active .et-after-image {
filter: opacity(100%);
}
.et-change-style_active .et-before-image {
filter: opacity(0%);
} 
Zatim zalijepite ostatak CSS-a unutar oznaka stila:
.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;
}Ovi CSS isječci koriste isti koncept za promjenu stila elementa kada odjeljak (ili gumb) ima novu klasu.
Konačni rezultat (pregled)
Nakon što je kod dodan, spremite promjene i otvorite stranicu za pregled rezultata. Primijetite kako se stavke koje smo ciljali mijenjaju kada zadržite pokazivač iznad gumba.
Promjena stilova na klik
Da biste dodali funkciju klikanja, zamijenite trenutni JQuery sa sljedećim (ponovo provjerite je li omotan u oznake skripte):
(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 );
Evo konačnog rezultata.
Preuzmite DIVI odmah!!!
Zaključak
Biti u mogućnosti ciljati i stilizirati više elemenata na stranici kada zadržite pokazivač iznad ili kliknete na nešto korisna je vještina u web dizajnu.
Ovu tehniku možete koristiti za razne slučajeve upotrebe (prije i poslije, CTA, itd.)
Naravno, pomaže poznavanje CSS-a i JS/JQueryja. Ali, kao što ste vidjeli u ovom vodiču, nije vam potrebno duboko znanje kodiranja da biste dobili nevjerojatne rezultate!
Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.
Također se možete konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
