Vuoi cambiare lo stile di più elementi Divi al passaggio del mouse o dopo il clic?
In questo tutorial, ti mostreremo come modificare lo stile di più elementi al passaggio del mouse o facendo clic Divi.
Innanzitutto, sfrutteremo le opzioni di progettazione integrate di Divi per progettare un layout di sezione.
Successivamente, presenteremo un semplice snippet jQuery che puoi utilizzare in combinazione con CSS personalizzato per regolare lo stile di qualsiasi elemento in questa sezione quando passi il mouse sopra o fai clic su un pulsante.
Potrebbe sembrare complicato (soprattutto per i principianti), ma potresti essere sorpreso di quanto sia semplice da fare.
Cominciamo!
Panoramica
Ecco una breve panoramica del design che realizzeremo in questo tutorial.
Modifica degli elementi al passaggio del mouse
Modifica degli elementi dopo aver cliccato sul pulsante
Iniziamo creando una pagina con Divi Builder
Guarda anche: Divi: come creare un menu a ruota che gira al passaggio del mouse
Dalla dashboard di WordPress, vai a Pagine> Aggiungi nuovo per creare una nuova pagina.
Dagli un titolo che abbia senso per te e fai clic Usa Divi Builder
quindi fare clic su Inizia a costruire (Costruisci da zero)
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Parte 1: Progettazione del layout della sezione
Per iniziare, crea una nuova riga con due colonne.
Impostazioni della sezione
Prima di aggiungere moduli, apri le impostazioni della sezione e aggiorna quanto segue:
- Sfondo: #ffffff
Aggiungiamo un separatore di sezione
- Divisorio (superiore)
- Stile: vedi screenshot
- Colore: #ffffff
- Altezza: 5vw
- Divisorio (in basso)
- Stile: vedi cattura
- Colore: #ffffff
- Altezza: 5vw
- Imbottitura (superiore e inferiore): 6vw
Immagine (prima del passaggio del mouse)
Nella colonna di sinistra della riga a due colonne, aggiungi un nuovo modulo immagine.
Quindi, carica l'immagine che desideri evidenziare.
Sotto la scheda Design, aggiorna l'allineamento e abilita l'opzione Forza a tutta larghezza.
- Allineamento immagine: centrato
- Larghezza intera forza: SÌ
Immagine (al passaggio del mouse o dopo il clic)
Successivamente, creeremo un'altra immagine che visualizzeremo quando passiamo con il mouse o clicchiamo su un pulsante.
Per creare l'immagine, duplica il modulo immagine precedente.
Quindi carica una nuova immagine. L'immagine deve avere le stesse dimensioni dell'altra immagine perché sostituirà l'altra immagine al passaggio del mouse/clic.
Per questa immagine, le daremo una posizione assoluta. Ciò farà sì che l'immagine si trovi direttamente sopra l'altra immagine senza occupare spazio reale sulla pagina.
- Posizione: Assoluta
Sotto la scheda Design, cambia l'opacità nelle opzioni del filtro in modo che l'immagine sia completamente invisibile.
- Opacità: 0%
Aggiungi un modulo di testo
Nella colonna di destra, aggiungi un nuovo modulo Testo.
Quindi incolla il seguente codice HTML nella casella contenuto dal corpo:
<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>
Nota che alcune parole nel testo sono circondate da tag campata. Questo è il modo in cui possiamo indirizzare e personalizzare queste parole in seguito con CSS personalizzati.
Sotto la scheda Design, aggiorna le opzioni di stile H3 come segue:
- Titolo 3:
- Fonte: Montserrat
- Peso del carattere Peso del carattere: Ultra grassetto
- Stile: TT
- Dimensione testo: 60 px (computer e tablet), 40 px (telefono)
- Spaziatura lettere: 0,06 em
- Altezza della linea: 2 em
Nella prossima sezione, aggiungeremo il pulsante che utilizzeremo per avviare le modifiche allo stile.
Crea una sezione per il pulsante
Per prima cosa dobbiamo creare una nuova sezione regolare sotto la sezione corrente.
Quindi aggiungi una riga a una colonna della sezione.
Aggiungere un pulsante
Nella colonna, aggiungi un nuovo modulo Pulsante.
Cambia il testo del pulsante in "Continua...".
Passa alla scheda Design e aggiorna il design del pulsante come segue:
- Usa stili personalizzati per pulsante: SÌ
- Dimensione del testo: 16px
- Colore del testo: #ffffff
- Sfondo pulsante (desktop): #4b4baf
- Pulsante Backround (al passaggio del mouse): #67ddc1
- Larghezza bordo: 0 pixel
Leggi anche: Divi: come aggiungere l'icona di un hamburger al modulo Menu
- Spaziatura lettere pulsanti: 4px
- Fonte: Montserrat
- Peso del carattere: semigrassetto
- Stile carattere pulsante: TT
- Margine (inferiore): 0px
- Imbottitura (superiore e inferiore): 1.5 em
- Imbottitura (sinistra e destra): 4em
Parte 2: aggiungi classi CSS agli elementi
Ora che il nostro design è a posto, apporteremo il resto delle modifiche al design utilizzando codice personalizzato (CSS e JQuery).
Ma prima di iniziare ad aggiungere il nostro codice personalizzato, dobbiamo aggiungere classi CSS a tutti gli elementi che vogliamo modificare quando passiamo con il mouse/clic sul pulsante.
Aggiungi una classe CSS alla sezione
Per aggiungere una classe CSS alla sezione, apri le impostazioni della sezione e fai clic sulla scheda Tecnologia. Quindi inserisci la seguente classe CSS:
- Classe CSS: et-change-style_section
Aggiungi una classe CSS ai moduli Immagine
Quindi, apri le impostazioni per la prima immagine nella colonna di sinistra e aggiungi la seguente classe CSS:
- Classe CSS: et-prima-immagine
Questa sarà l'immagine che verrà visualizzata "prima" del passaggio del mouse/clic del pulsante.
Usando il layer modale, apri le impostazioni per la seconda immagine (quella nascosta con il filtro di opacità) e aggiungi la seguente classe CSS:
- Classe CSS: et-after-image
Questa sarà l'immagine che verrà visualizzata "dopo" passare il mouse sopra/fare clic sul pulsante.
Aggiungi una classe CSS al modulo Testo
Quindi, aggiungi la seguente classe CSS al modulo di testo nella colonna di destra:
- Classe CSS: et-style-text
Aggiungi una classe CSS al modulo Button
Infine, aggiungi una classe CSS personalizzata al pulsante nella sezione inferiore come segue:
- Classe CSS: et-toggle-button
Abbiamo bisogno di questa classe per indirizzare il pulsante per la funzionalità di passaggio del mouse/clic nel codice in un secondo momento.
Parte 3: aggiungi codice personalizzato per modificare gli stili al passaggio del mouse o fai clic
Ora che tutte le nostre classi CSS sono a posto, possiamo aggiungere il codice necessario per cambiare lo stile di tutti questi elementi quando passi il mouse o fai clic sul pulsante.
Aggiungi un modulo Codice
Per aggiungere il codice, aggiungi un modulo Codice sotto il pulsante nella sezione inferiore.
Incolla il codice jQuery
Quindi incolla il seguente JQuery. Assicurati di racchiudere il codice nei tag di script mentre aggiungiamo il codice a un documento HTML (non un file 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 );
Cambia lo stile degli elementi con CSS personalizzati
Apri il modulo Codice e incolla il seguente CSS personalizzato sopra lo script JQuery, assicurandoti di racchiuderlo nei tag di stile necessari.
.et_pb_section.et-change-style_section.et-change-style_active {
background-color:#484db0 !important;
}
Quindi incolla il seguente CSS aggiuntivo nei tag di stile.
.et-change-style_active .et-after-image {
filter: opacity(100%);
}
.et-change-style_active .et-before-image {
filter: opacity(0%);
} 
Quindi incolla il resto del CSS all'interno dei tag di stile:
.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;
}Questi frammenti CSS utilizzano lo stesso concetto per modificare lo stile dell'elemento quando la sezione (o il pulsante) ha la nuova classe.
Risultato finale (panoramica)
Una volta aggiunto il codice, salva le modifiche e apri la pagina per visualizzare il risultato. Nota come cambiano gli elementi che abbiamo preso di mira quando passi il mouse sopra il pulsante.
Cambia stili al clic
Per aggiungere la funzionalità di clic, sostituisci l'attuale JQuery con quanto segue (di nuovo, assicurati che sia racchiuso in tag di script):
(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 );
Ecco il risultato finale.
Scarica DIVI ora!!!
Conclusione
Essere in grado di indirizzare e definire lo stile di più elementi su una pagina quando si passa il mouse sopra o si fa clic su qualcosa è un'abilità utile nel web design.
Puoi utilizzare questa tecnica per una varietà di casi d'uso (prima e dopo, CTA, ecc.)
Naturalmente, aiuta a conoscere un po' di CSS e JS/JQuery. Ma, come hai visto in questo tutorial, non hai bisogno di una profonda conoscenza del codice per ottenere risultati sorprendenti!
Speriamo che questo tutorial ti ispiri per i tuoi prossimi progetti Divi. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
