Chcete zmeniť štýl niekoľkých prvkov divi pri umiestnení kurzora myši alebo po kliknutí?
V tomto návode vám ukážeme, ako zmeniť štýl viacerých prvkov po umiestnení kurzora myši alebo kliknutí divi.
Po prvé, využijeme možnosti vstavaného dizajnu divi navrhnúť rozloženie sekcie.
Ďalej predstavíme jednoduchý úryvok jQuery, ktorý môžete použiť v kombinácii s vlastným CSS na úpravu štýlu ľubovoľného prvku v tejto sekcii, keď umiestnite kurzor myši na tlačidlo alebo kliknete na tlačidlo.
Môže to znieť komplikovane (najmä pre začiatočníkov), ale možno budete prekvapení, aké jednoduché je to urobiť.
Začnime!
prehľad
Tu je stručný prehľad dizajnu, ktorý dosiahneme v tomto návode.
Zmena prvkov pri umiestnení kurzora myši
Úprava prvkov po kliknutí na tlačidlo
Začnime vytvorením stránky pomocou Divi Builder
Pozri tiež: Divi: Ako vytvoriť ponuku rotujúceho kolesa pri umiestnení kurzora myši
Na hlavnom paneli WordPress prejdite na Stránky> Pridať nové vytvoriť novú stránku.
Dajte tomu názov, ktorý vám dáva zmysel, a kliknite Použite Divi Builder
potom kliknite na tlačidlo Začnite stavať (Stavať od nuly)
Potom budete mať prázdne plátno, aby ste mohli začať navrhovať v Divi.
Časť 1: Návrh usporiadania rezu
Ak chcete začať, vytvorte nový riadok s dvoma stĺpcami.
Nastavenia sekcií
Pred pridaním modulov otvorte nastavenia sekcie a aktualizujte nasledovné:
- Pozadie: #ffffff
Pridajme oddeľovač sekcií
- Oddeľovač (hore)
- Štýl: pozri snímku obrazovky
- Farba: #ffffff
- Výška: 5vw
- Rozdeľovač (dole)
- Štýl: pozri záber
- Farba: #ffffff
- Výška: 5vw
- Polstrovanie (hore a dole): 6vw
Obrázok (pred umiestnením kurzora myši)
V ľavom stĺpci riadku s dvoma stĺpcami pridajte nový modul obrázka.
Potom nahrajte obrázok, ktorý chcete zvýrazniť.
Pod záložkou dizajn, aktualizujte zarovnanie a povoľte možnosť Sila Plná šírka.
- Zarovnanie obrázka: na stred
- Sila Plná šírka: ÁNO
Obrázok (pri umiestnení kurzora myši alebo po kliknutí)
Ďalej vytvoríme ďalší obrázok, ktorý zobrazíme, keď podržíme kurzor myši/klikneme na tlačidlo.
Ak chcete vytvoriť obrázok, duplikujte predchádzajúci modul obrázka.
Potom nahrajte nový obrázok. Obrázok musí mať rovnakú veľkosť ako druhý obrázok, pretože po umiestnení kurzora myši/kliknutí nahradí druhý obrázok.
Tomuto obrázku dáme absolútnu polohu. To spôsobí, že obrázok bude sedieť priamo nad druhým obrázkom bez toho, aby na stránke zaberal nejaké skutočné miesto.
- Pozícia: Absolútna
Pod záložkou dizajn, zmeňte krytie pod možnosťami filtra tak, aby bol obrázok úplne neviditeľný.
- Nepriehľadnosť: 0 %
Pridajte textový modul
V pravom stĺpci pridajte nový modul Text.
Potom do poľa vložte nasledujúci kód HTML obsah z tela:
<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>
Všimnite si, že niektoré slová v texte sú obklopené značkami rozpätie. Takto môžeme tieto slová neskôr zacieliť a prispôsobiť pomocou vlastného CSS.
Pod záložkou dizajn, aktualizujte možnosti štýlu H3 takto:
- Nadpis 3:
- Písmo: Montserrat
- Hmotnosť písma Hmotnosť písma: Ultra Bold
- Štýl: TT
- Veľkosť textu: 60 px (počítač a tablet), 40 px (telefón)
- Vzdialenosť medzi písmenami: 0,06 em
- Výška riadku: 2 em
V ďalšej časti pridáme tlačidlo, ktoré použijeme na spustenie zmien štýlu.
Vytvorte sekciu pre tlačidlo
Najprv musíme vytvoriť novú pravidelnú sekciu pod aktuálnou sekciou.
Potom pridajte riadok do stĺpca do sekcie.
pridanie tlačidla
V stĺpci pridajte nový modul gombík.
Zmeňte text tlačidla na „Pokračovanie...“.
Prepnúť na kartu dizajn a aktualizujte dizajn tlačidla takto:
- Použiť vlastné štýly pre tlačidlo: ÁNO
- Veľkosť textu: 16px
- Farba textu: #ffffff
- Pozadie tlačidla (počítač): #4b4baf
- Pozadie tlačidla (umiestnenie myši): #67ddc1
- Šírka okraja: 0 pixelov
Čítajte tiež: Divi: Ako pridať ikonu hamburgeru do modulu Menu
- Medzera medzi písmenami tlačidla: 4px
- Písmo: Montserrat
- Hmotnosť písma: polotučné
- Štýl písma tlačidla: TT
- Okraj (dole): 0px
- Polstrovanie (hore a dole): 1.5 em
- Polstrovanie (vľavo a vpravo): 4em
Časť 2: Pridanie tried CSS do prvkov
Teraz, keď je náš návrh na mieste, vykonáme zvyšok zmien dizajnu pomocou vlastného kódu (CSS a JQuery).
Ale predtým, než začneme pridávať náš vlastný kód, musíme pridať triedy CSS ku všetkým prvkom, ktoré chceme zmeniť, keď na tlačidlo umiestnime kurzor myši.
Pridajte do sekcie triedu CSS
Ak chcete do sekcie pridať triedu CSS, otvorte nastavenia sekcie a kliknite na kartu pokročilý. Potom zadajte nasledujúcu triedu CSS:
- CSS Trieda: et-change-style_section
Pridajte triedu CSS do obrázkových modulov
Ďalej otvorte nastavenia pre prvý obrázok v ľavom stĺpci a pridajte nasledujúcu triedu CSS:
- CSS trieda: et-before-image
Toto bude obrázok, ktorý sa zobrazí „pred“ umiestnením kurzora myši/kliknutím na tlačidlo.
Pomocou modálu vrstvy otvorte nastavenia pre druhý obrázok (skrytý s filtrom nepriehľadnosti) a pridajte nasledujúcu triedu CSS:
- CSS trieda: et-after-image
Toto bude obrázok, ktorý sa zobrazí „po“ umiestnení kurzora myši/kliknutí na tlačidlo.
Pridajte triedu CSS do modulu Text
Ďalej pridajte nasledujúcu triedu CSS do textového modulu v pravom stĺpci:
- CSS trieda: et-style-text
Pridajte triedu CSS do modulu Button
Nakoniec pridajte vlastnú triedu CSS do tlačidla v spodnej časti takto:
- CSS trieda: et-toggle-button
Potrebujeme túto triedu, aby sme neskôr zacielili na tlačidlo pre funkciu ukazovania/kliknutia v kóde.
Časť 3: Pridajte vlastný kód na zmenu štýlov umiestnením kurzora myši alebo kliknutím
Teraz, keď sú všetky naše triedy CSS na svojom mieste, môžeme pridať potrebný kód na zmenu štýlu všetkých týchto prvkov, keď umiestnite kurzor myši/kliknete na tlačidlo.
Pridajte modul kódu
Ak chcete pridať kód, pridajte modul Kód pod tlačidlo v spodnej časti.
Prilepte kód jQuery
Potom prilepte nasledujúci JQuery. Pri pridávaní kódu do dokumentu HTML (nie do súboru JS) nezabudnite zabaliť kód do značiek skriptu.
(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 );
Zmeňte štýl prvkov pomocou vlastného CSS
Otvorte modul Kód a prilepte nasledujúci vlastný CSS nad skript JQuery, pričom ho zabaľte do potrebných značiek štýlu.
.et_pb_section.et-change-style_section.et-change-style_active {
background-color:#484db0 !important;
}
Potom prilepte nasledujúci dodatočný CSS do značiek štýlu.
.et-change-style_active .et-after-image {
filter: opacity(100%);
}
.et-change-style_active .et-before-image {
filter: opacity(0%);
} 
Potom prilepte zvyšok CSS do značiek štýlu:
.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;
}Tieto úryvky CSS používajú rovnaký koncept na zmenu štýlu prvku, keď má sekcia (alebo tlačidlo) novú triedu.
Konečný výsledok (prehľad)
Po pridaní kódu uložte zmeny a otvorte stránku, aby ste videli výsledok. Všimnite si, ako sa zmenia položky, na ktoré sme zacielili, keď umiestnite kurzor myši na tlačidlo.
Zmeňte štýly kliknutím
Ak chcete pridať funkciu kliknutia, nahraďte aktuálny JQuery nasledujúcim (znova sa uistite, že je zabalený do značiek skriptu):
(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 );
Toto je konečný výsledok.
Stiahnite si DIVI teraz!!!
záver
Schopnosť zacieliť a upraviť viacero prvkov na stránke, keď na niečo umiestnite kurzor myši alebo na niečo kliknete, je užitočná zručnosť vo webdizajne.
Túto techniku môžete použiť v rôznych prípadoch použitia (pred a po, CTA atď.)
Samozrejme pomôže poznať trochu CSS a JS/JQuery. Ako ste však videli v tomto návode, na dosiahnutie úžasných výsledkov nepotrebujete hlboké znalosti kódovania!
Dúfame, že vás tento návod inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
