Chcete změnit styl několika prvků divi při najetí myší nebo po kliknutí?
V tomto tutoriálu vám ukážeme, jak změnit styl více prvků při najetí myší nebo kliknutím divi.
Nejprve využijeme možnosti vestavěného designu divi navrhnout rozvržení sekce.
Dále si představíme jednoduchý úryvek jQuery, který můžete použít v kombinaci s vlastním CSS k úpravě stylu libovolného prvku v této sekci, když na něj najedete myší nebo na něj kliknete.
Může to znít složitě (zejména pro začátečníky), ale možná budete překvapeni, jak jednoduché to je.
Začněme!
přehled
Zde je stručný přehled návrhu, kterého dosáhneme v tomto tutoriálu.
Změna prvků při najetí myší
Úprava prvků po kliknutí na tlačítko
Začněme vytvořením stránky pomocí Divi Builderu
Viz také: Divi: Jak vytvořit nabídku rotujícího kolečka při vznášení
Z řídicího panelu WordPress přejděte na Stránky> Přidat nové vytvořit novou stránku.
Dejte tomu název, který vám dává smysl, a klikněte Použijte Divi Builder
poté klikněte na tlačítko Začněte stavět (Sestavte od nuly)
Poté budete mít prázdné plátno, abyste mohli začít navrhovat v Divi.
Část 1: Návrh uspořádání řezu
Chcete-li začít, vytvořte nový řádek se dvěma sloupci.
Nastavení sekce
Před přidáním modulů otevřete nastavení sekce a aktualizujte následující:
- Pozadí: #ffffff
Přidáme oddělovač sekcí
- Oddělovač (nahoře)
- Styl: viz snímek obrazovky
- Barva: #ffffff
- Výška: 5vw
- Oddělovač (dole)
- Styl: viz zachycení
- Barva: #ffffff
- Výška: 5vw
- Polstrování (nahoře a dole): 6vw
Obrázek (před umístěním kurzoru myši)
V levém sloupci řádku se dvěma sloupci přidejte nový modul obrázku.
Dále nahrajte obrázek, který chcete zvýraznit.
Na kartě Design, aktualizujte zarovnání a povolte možnost Síla Plná šířka.
- Zarovnání obrázku: na střed
- Síla Plná šířka: ANO
Obrázek (při umístění kurzoru myši nebo po kliknutí)
Dále si vytvoříme další obrázek, který zobrazíme, když najedeme/klikneme na tlačítko.
Chcete-li vytvořit obrázek, duplikujte předchozí modul obrázku.
Poté nahrajte nový obrázek. Obrázek musí mít stejnou velikost jako druhý obrázek, protože po najetí myší/kliknutí nahradí druhý obrázek.
U tohoto obrázku mu dáme absolutní pozici. To způsobí, že obrázek bude sedět přímo nad druhým obrázkem, aniž by zabíral skutečné místo na stránce.
- Pozice: Absolutní
Na kartě Design, změňte krytí pod možnostmi filtru tak, aby byl obrázek zcela neviditelný.
- Neprůhlednost: 0 %
Přidejte textový modul
V pravém sloupci přidejte nový modul Text.
Poté do pole vložte následující HTML kód obsah z těla:
<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>
Všimněte si, že některá slova v textu jsou obklopena značkami rozpětí. Takto můžeme zacílit a upravit tato slova později pomocí vlastního CSS.
Na kartě Design, aktualizujte možnosti stylu H3 následovně:
- Nadpis 3:
- Písmo: Montserrat
- Tloušťka písma Tloušťka písma: Ultra tučné
- Styl: TT
- Velikost textu: 60 px (počítač a tablet), 40 px (telefon)
- Vzdálenost mezi písmeny: 0,06 em
- Výška řádku: 2 em
V další části přidáme tlačítko, které použijeme ke spuštění změn stylu.
Vytvořte sekci pro tlačítko
Nejprve musíme vytvořit novou pravidelnou sekci pod aktuální sekcí.
Poté přidejte řádek do sloupce do sekce.
Přidání tlačítka
Ve sloupci přidejte nový modul Tlačítko.
Změňte text tlačítka na „Pokračování...“.
Přepnout na kartu Design a aktualizujte design tlačítka následovně:
- Použít vlastní styly pro tlačítko: ANO
- Velikost textu: 16px
- Barva textu: #ffffff
- Pozadí tlačítka (počítač): #4b4baf
- Pozadí tlačítka (umístění myši): #67ddc1
- Šířka okraje: 0 pixelů
Čtěte také: Divi: Jak přidat ikonu hamburgeru do modulu Menu
- Mezera mezi písmeny tlačítka: 4px
- Písmo: Montserrat
- Tloušťka písma: Polotučné
- Styl písma tlačítka: TT
- Okraj (dole): 0px
- Polstrování (nahoře a dole): 1.5 em
- Polstrování (vlevo a vpravo): 4 em
Část 2: Přidání tříd CSS do prvků
Nyní, když je náš návrh na místě, provedeme zbytek změn návrhu pomocí vlastního kódu (CSS a JQuery).
Než ale začneme přidávat náš vlastní kód, musíme přidat třídy CSS ke všem prvkům, které chceme změnit, když na tlačítko najedeme myší/klikneme na něj.
Přidejte do sekce třídu CSS
Chcete-li do sekce přidat třídu CSS, otevřete nastavení sekce a klikněte na kartu pokročilý. Poté zadejte následující třídu CSS:
- CSS Třída: et-change-style_section
Přidejte třídu CSS do obrázkových modulů
Dále otevřete nastavení pro první obrázek v levém sloupci a přidejte následující třídu CSS:
- Třída CSS: et-before-image
Toto bude obrázek, který se zobrazí "před" najetím/kliknutím na tlačítko.
Pomocí modálu vrstvy otevřete nastavení pro druhý obrázek (ten skrytý pomocí filtru krytí) a přidejte následující třídu CSS:
- Třída CSS: et-after-image
Toto bude obrázek, který se zobrazí „po“ umístění/kliknutí na tlačítko.
Přidejte třídu CSS do modulu Text
Dále přidejte následující třídu CSS do textového modulu v pravém sloupci:
- CSS třída: et-style-text
Přidejte třídu CSS do modulu Button
Nakonec přidejte vlastní třídu CSS do tlačítka ve spodní části takto:
- Třída CSS: et-toggle-button
Potřebujeme, aby tato třída později cílila na tlačítko pro funkci najetí/kliknutí v kódu.
Část 3: Přidejte vlastní kód pro změnu stylů při umístění kurzoru myši nebo kliknutí
Nyní, když jsou všechny naše třídy CSS na svém místě, můžeme přidat potřebný kód pro změnu stylu všech těchto prvků, když na tlačítko umístíte kurzor.
Přidejte modul kódu
Chcete-li přidat kód, přidejte modul Kód pod tlačítko ve spodní části.
Vložte kód jQuery
Poté vložte následující JQuery. Při přidávání kódu do dokumentu HTML (nikoli do souboru JS) nezapomeňte zabalit kód do značek 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 );
Změňte styl prvků pomocí vlastního CSS
Otevřete modul Kód a vložte následující vlastní CSS nad skript JQuery a ujistěte se, že jste jej zabalili do potřebných značek stylu.
.et_pb_section.et-change-style_section.et-change-style_active {
background-color:#484db0 !important;
}
Poté vložte následující další CSS do značek stylu.
.et-change-style_active .et-after-image {
filter: opacity(100%);
}
.et-change-style_active .et-before-image {
filter: opacity(0%);
} 
Poté vložte zbytek CSS do značek 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;
}Tyto úryvky CSS používají stejný koncept ke změně stylu prvku, když má sekce (nebo tlačítko) novou třídu.
Konečný výsledek (přehled)
Po přidání kódu uložte změny a otevřete stránku, abyste viděli výsledek. Všimněte si, jak se změní položky, na které jsme cílili, když na tlačítko najedete myší.
Změňte styly kliknutím
Chcete-li přidat funkci kliknutí, nahraďte aktuální JQuery následujícím (znovu se ujistěte, že je zabalen do značek 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 );
Zde je konečný výsledek.
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Schopnost zacílit a stylizovat více prvků na stránce, když na něco umístíte ukazatel myši nebo na něco kliknete, je užitečná dovednost ve webovém designu.
Tuto techniku můžete použít pro různé případy použití (před a po, CTA atd.)
Samozřejmě pomáhá znát trochu CSS a JS/JQuery. Ale jak jste viděli v tomto tutoriálu, nepotřebujete hluboké znalosti kódování, abyste dosáhli úžasných výsledků!
Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
