Divi: Najlepšia WordPress tému všetkých čias!

viac Stahovanie 901.000, Divi je najobľúbenejšia WordPress tému na svete. Je kompletný, ľahko použiteľný a je dodávaný s viac než 62 bezplatnými šablónami.

Souhaitez vous changer le style de plusieurs éléments divi lors du survol ou après un clic ?

Dans ce tutoriel, nous allons vous montrer comment changer le style de plusieurs éléments au survol ou au clic dans divi

Najprv využijeme možnosti vstavaného dizajnu Divi na návrh rozloženia 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.

Ľahko vytvorte svoje webové stránky pomocou Elementoru

Elementor vám umožňuje vytvárať Jednoducho a zadarmo akýkoľvek dizajn webovej stránky alebo blogu s profesionálnym vzhľadom. Prestaňte platiť veľa za webovú stránku, ktorú môžete urobiť sami.

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 prilepte nasledujúci kód HTML do oblasti obsahu 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

Chcete predávať svoje produkty na internete?

Stiahnite si zadarmo WooCommerce, najlepšie doplnky elektronického obchodu na predaj vašich fyzických a digitálnych produktov na WordPress a jednoduché vytvorenie vášho online obchodu. Ideálne pre začiatočníkov.

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.

...

%d bloggerov sa páči táto stránka: