Come modificare lo stile di più elementi al passaggio del mouse o fare clic in Divi

Alla fine, nel mondo del web design, programmatori e non programmatori cercheranno di aggiungere personalizzazioni e funzionalità più avanzate ai loro siti Web Divi. Di solito, ciò comporta l'utilizzo di Javascript/JQuery per modificare lo stile degli elementi nella pagina per diversi motivi. Si consiglia di visualizzare un modulo di contatto quando si fa clic su un pulsante. Oppure potresti voler cambiare un'immagine quando passi con il mouse su un link.

In questo tutorial, ti mostreremo come modificare lo stile di più elementi al passaggio del mouse o fare clic su Divi. Innanzitutto, sfrutteremo le opzioni di progettazione integrate di Divi per progettare un layout di sezione. Quindi introdurremo un semplice frammento di jQuery che puoi utilizzare in combinazione con CSS personalizzato per regolare lo stile di qualsiasi elemento in quella sezione quando passi con il mouse o fai clic su un pulsante. Questo può sembrare complicato (soprattutto per i principianti) ma potresti essere sorpreso di quanto sia semplice da realizzare.

Iniziamo!

Sbirciata

Ecco una rapida occhiata al design che costruiremo in questo tutorial.

Ecco il design del layout della sezione che viene modificato quando si passa con il mouse sul pulsante.

Ed ecco lo stesso design del layout della sezione che viene modificato facendo clic sul pulsante. Notare che anche il testo del pulsante cambia al clic.

Scarica il layout GRATUITAMENTE

Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.

Fare clic sul pulsante Importa.

Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.

Quindi fare clic sul pulsante di importazione.

Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.

Passiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non l'hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Crea 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 a due colonne.

Impostazioni della sezione

Prima di aggiungere qualsiasi modulo, apri le impostazioni per la sezione e aggiorna quanto segue:

• Colore di sfondo: #ffffff

• Stile divisore superiore: vedi screenshot
• Colore divisorio superiore: #ffffff
• Altezza divisore superiore: 5vw

• Stile del divisore inferiore: lo stesso
• Colore divisore inferiore: #ffffff
• Altezza divisore inferiore: 5vw

• Imbottitura: 6vw superiore, 6vw inferiore

Prima dell'immagine

Nella colonna di sinistra della riga a due colonne, aggiungi un nuovo modulo immagine.

Quindi carica l'immagine che vuoi mostrare. Per questo tutorial, stiamo usando un'immagine del Pacchetto di layout Learning Management (LMS) che è approssimativamente 800 px per 550 px.

Nella scheda Progettazione, aggiorna l'allineamento e abilita l'opzione Forza a larghezza intera.

• Allineamento immagine: centro
• Forza intera larghezza: S

Dopo l'immagine

Successivamente, creeremo un'altra immagine che mostreremo quando passiamo il mouse / clicchiamo su un pulsante.

Per creare l'immagine, duplica il modulo immagine precedente.

Quindi carica una nuova immagine. L'immagine dovrebbe avere le stesse dimensioni dell'altra immagine poiché sostituirà l'altra immagine al passaggio del mouse/clic.

Per questa immagine, gli daremo una posizione assoluta. Ciò farà sì che l'immagine si trovi direttamente sopra l'altra immagine senza occupare spazio effettivo sulla pagina.

• Posizione: Assoluta

Nella scheda Design, modifica l'opacità sotto le opzioni del filtro in modo che l'immagine sia completamente invisibile.

• Opacità: 0%

Aggiungi intestazione di testo

Nella colonna di destra, aggiungi un nuovo modulo di testo.

Quindi incolla il seguente codice HTML nell'area del contenuto del corpo:

<h3><span>Design</span> Anything You Want <span>with Divi</span></h3>

Notare che alcune parole nel testo sono racchiuse tra tag span. Questo è così che possiamo indirizzare e modellare quelle parole in seguito con alcuni CSS personalizzati.

Nella scheda Design, aggiorna le opzioni di stile H3 come segue:

• Intestazione 3 Carattere: Montserrat
• Intestazione 3 Peso del carattere: Ultra grassetto
• Intestazione 3 Stile carattere: TT
• Intestazione 3 Dimensioni testo: 65 px (desktop e tablet), 40 px (telefono)
• Intestazione 3 Spaziatura lettere: 0.8em
• Altezza della linea di intestazione 3: 1,3 em

Questo si prende cura del layout della sezione che contiene gli elementi di design che cambieremo quando si passa con il mouse / si fa clic su un pulsante. In questa prossima sezione, aggiungeremo il pulsante che utilizzeremo per avviare le modifiche allo stile.

Crea sezione per pulsante

Crea una nuova sezione regolare sotto la sezione corrente.

Quindi aggiungi una riga di una colonna alla sezione.

Pulsante Aggiungi

Nella colonna, aggiungi un nuovo modulo pulsante.

Modificare il testo del pulsante per leggere "Vedi dopo".

Passa alla scheda Design e aggiorna il design del pulsante come segue:

• Usa stili personalizzati per il pulsante: S
• Dimensione del testo del pulsante: 16 px
• Colore del testo del pulsante: #ffffff
• Sfondo del pulsante: #4b4baf
• Sfondo del pulsante (al passaggio del mouse): #67ddc1
• Larghezza bordo pulsante: 0px
• Spaziatura lettere pulsanti: 4px
• Carattere pulsante: Montserrat
• Peso del carattere del pulsante: semi grassetto
• Stile carattere pulsante: TT

Parte 2: Aggiunta di classi CSS agli elementi

Ora che il nostro design è a posto, realizzeremo il resto delle modifiche al design utilizzando il codice personalizzato (CSS e JQuery). Ma prima di iniziare ad aggiungere il nostro codice personalizzato, dobbiamo aggiungere le classi CSS a tutti gli elementi che desideriamo modificare quando si passa con il mouse o si fa clic sul pulsante.

Aggiungi la classe CSS alla sezione

Per aggiungere una classe CSS alla sezione, apri le impostazioni della sezione e fai clic sulla scheda Avanzate. Quindi inserisci la seguente classe CSS:

• Classe CSS: et-change-style_section

Aggiungi la classe CSS alle immagini

Quindi, apri le impostazioni per la prima immagine nella colonna di sinistra e aggiungi la seguente Classe CSS:

• Classe CSS: et-before-image

Questa sarà l'immagine che viene mostrata "prima" del passaggio del mouse/clic sul pulsante.

Usando i livelli modali, 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 viene mostrata "dopo" il passaggio del mouse/clic sul pulsante.

Aggiungi la classe CSS al testo

Quindi, aggiungi la seguente classe CSS al modulo di testo nella colonna di destra:

• Classe CSS: et-style-text

Aggiungi la classe CSS al pulsante

Infine, aggiungi una classe CSS personalizzata il 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 clic

Ora che tutte le nostre classi CSS sono a posto, ora possiamo aggiungere il codice necessario per cambiare lo stile di tutti quegli elementi quando si passa con il mouse o si fa clic sul pulsante.

Aggiungi modulo codice

Per aggiungere il codice, aggiungi un modulo di codice sotto il pulsante nella sezione inferiore.

Incolla codice jQuery

Quindi incolla il seguente JQuery. Assicurati di racchiudere il codice in tag di script perché stiamo aggiungendo 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 );

Se dai un'occhiata al codice, dovresti riconoscere le classi CSS che abbiamo aggiunto al pulsante e alla sezione.

La classe pulsante (".et-toggle-button") viene utilizzata per indirizzare l'elemento che avvierà una funzione al passaggio del mouse.

Al passaggio del mouse, la funzione troverà l'elemento con la classe di sezione ".et-change-style_section" e alterna/aggiunge una nuova classe (".et-change-style-active") quando il cursore passa sopra il pulsante.

Anche il pulsante viene preso di mira (tramite "$this") per attivare una nuova classe (".et-toggle-button_active") nello stato al passaggio del mouse.

La chiave per cambiare gli stili di questi elementi al passaggio del mouse è aggiungere/attivare queste nuove classi CSS aggiuntive alla sezione e al pulsante.

Ad esempio, una volta assegnata alla sezione con la classe ".et-change-style_section" quella classe aggiuntiva (".et-change-style_active"), possiamo usare Custom CSS per modificare lo stile della sezione originariamente assegnatale tramite le opzioni Divi integrate.

Modifica dello stile degli elementi con CSS personalizzati

Apri il modulo del codice e incolla il seguente CSS personalizzato sopra lo script JQuery, assicurandoti di avvolgerlo nei tag di stile necessari.

 .et_pb_section.et-change-style_section.et-change-style_active {
   background-color:#484db0 !important;
 }

Notare che la classe della sezione iniziale è combinata con la nuova classe come selettore. Il CSS che segue si applicherà solo alla sezione quando quella nuova classe è allegata. Quando non è collegato, verrà visualizzato il design originale. In questo esempio, il colore di sfondo della sezione cambierà quando si passa con il mouse sul pulsante.

Quindi, incolla il seguente CSS aggiuntivo all'interno dei tag di stile.

  .et-change-style_active .et-after-image {
    filter: opacity(100%);
  }
  .et-change-style_active .et-before-image {
    filter: opacity(0%);
  }  

Poiché alla sezione padre viene assegnata una classe al passaggio del mouse, puoi scegliere come target gli elementi figlio della sezione (come le immagini) utilizzando la stessa classe CSS. Ma poiché è una classe in un contenitore/sezione padre, la classe CSS dovrebbe precedere la classe dell'elemento che si sta cercando di modificare. In questo esempio, la classe CSS (".et-change-style_active") data alla sezione genitore viene prima della classe data le immagini figlio (".et-after-image" e ".et-before-image").

Il CSS per l'immagine successiva mostrerà l'immagine al passaggio del mouse. E il CSS per l'immagine precedente nasconderà l'immagine al passaggio del mouse. Il risultato è che l'immagine iniziale viene modificata in una nuova al passaggio del mouse.

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 (Hover)

Una volta aggiunto il codice, salva le modifiche e apri la pagina per visualizzare il risultato. Nota come gli elementi che abbiamo preso di mira vengono modificati quando passi il mouse sopra il pulsante.

Modifica degli stili al clic anziché al passaggio del mouse

Se vuoi cambiare lo stile di quegli stessi elementi quando fai clic sul pulsante (piuttosto che al passaggio del mouse), tutto ciò che devi fare è apportare alcune modifiche a JQuery. La maggior parte del codice rimarrà lo stesso. La differenza principale è che il metodo "hover" viene sostituito con "click". E abbiamo aggiunto un utile frammento di codice che cambia il testo del pulsante al clic.

Per aggiungere la funzionalità di clic, sostituisci il JQuery corrente con il seguente (assicurati di nuovo che sia racchiuso nei 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('See Before');
            } else {
                $this.text('See After');
            }
        });
    });
})( jQuery );

Questo è il risultato finale.

Pensieri finali

Essere in grado di scegliere come target e modificare lo stile di più elementi su una pagina quando si passa con il mouse o si fa clic su qualcosa è un'abilità utile nel web design. Puoi usare questa tecnica per una varietà di casi d'uso (prima e dopo, CTA, ecc...) Certo, aiuta a conoscere un po' di CSS e JS/JQuery. Ma, come hai visto in questo tutorial, non è necessario conoscere un tono di codice per ottenere risultati sorprendenti!

Non vedo l'ora di sentirti nei commenti.

Saluti!