Come creare sovrapposizioni e passaggi al mouse di Flipbox in WordPress 

Quando si tratta di progettare un sito WordPress attraente e coinvolgente, l'aggiunta di elementi interattivi può migliorare notevolmente l'esperienza dell'utente. Il Flipbox è uno di questi elementi che ti consente di mostrare i contenuti in modo dinamico e interattivo. 

In questo post del blog, esploreremo cos'è Flipbox, il ruolo degli overlay e degli hover Flipbox nei siti WordPress e ti forniremo una guida passo passo su come aggiungere overlay e hover Flipbox in WordPress.

Cos'è Flipbox?

Un Flipbox è una funzionalità di progettazione che ti consente di fornire materiale come una scatola che si capovolge o ruota quando l'utente ci passa sopra. Di solito comprende due lati, il fronte e il retro, con contenuti diversi su ciascun lato. 

Ruolo degli overlay e degli elementi al passaggio del mouse di Flipbox nel sito WordPress

Gli overlay e gli hover di Flipbox possono aiutarti a migliorare l'esperienza utente e l'attrattiva visiva del tuo sito WordPress. Ti consentono di attirare l'attenzione su dettagli importanti, evidenziare funzionalità o mostrare foto e video in modo dinamico. Puoi rendere il tuo sito più attraente, stimolare il coinvolgimento degli utenti e migliorare l'estetica complessiva del design includendo sovrapposizioni e hover di Flipbox. 

Una guida passo passo per aggiungere Flipbox al sito WordPress 

Per aggiungere overlay e hover di Flipbox al tuo sito WordPress, avrai bisogno di un plugin adatto che offra questa funzionalità. Sono disponibili diversi plugin Flipbox, ma due sono le scelte più popolari Elementor E Flipbox di ElementsKit plugin. Questi plugin forniscono opzioni facili da usare e una varietà di impostazioni di personalizzazione per creare straordinari effetti Flipbox. Installazione e attivazione di un plugin non è scienza missilistica. Puoi farlo facilmente seguendo alcuni passaggi. 

Ora torniamo ad aggiungere Flipbox al tuo sito. Ecco 4 modi facili e semplici per farlo:

Passaggio 1: abilitazione del widget Flip Box

Per fare ciò, accedi alla dashboard dell'amministratore di WordPress e vai a ElementsKit ⇒ widget ⇒ widget della casella sfogliabile, attiva il widget, E fare clic su Salva modifiche.

Passaggio 2: trascina e rilascia il widget

Modifica la pagina selezionando l'opzione Modifica con Elementor. Poi, ricerca per il widget flip box con un'icona Ekit e semplicemente trascina e rilascia il widget sulla pagina.

Passaggio 3: personalizza le impostazioni

Espandi il menu della casella Flip per modificare le impostazioni: 

0. Opzioni di capovolgimento: Puoi scegliere l'aspetto dell'animazione di rotazione. Sono disponibili quattro opzioni: Capovolgi, Zoom avanti, Scorri avanti e 3D. Ognuno ha uno stile diverso.

• Direzione di capovolgimento: Ciò determina la direzione in cui andrà l'animazione di ribaltamento. A seconda del tipo di capovolgimento che hai scelto, vedrai diverse opzioni per la direzione in cui può capovolgersi.

• Attivazione del capovolgimento: Ecco come si realizza il ribaltamento. Puoi scegliere tra tre opzioni: Passaggio del mouse (quando passi il mouse su di essa), Clic sulla casella (quando fai clic sulla casella) o Clic sul pulsante (quando fai clic su un pulsante specifico).

• Altezza della scatola ribaltabile: È possibile modificare l'altezza della casella ribaltabile. All'interno di questa impostazione sono presenti due schede: FRONT e BACK. Puoi personalizzare il contenuto su ciascun lato separatamente.

Per ciascun lato della scatola ribaltabile, puoi personalizzare quanto segue:

• Tipo di supporto: Scegli se desideri utilizzare un'icona, un'immagine o nessuna (se non desideri aggiungere alcuna immagine).

• Icona/Scegli file: Se hai scelto un'icona o un'immagine, puoi selezionare quale desideri utilizzare da un elenco o scegliere un file dal tuo computer.

• Titolo: Assegna un titolo o un nome a quel lato della casella ruotabile.

• Sottotitolo: Aggiungi un testo più piccolo sotto il titolo per fornire maggiori informazioni.

• Descrizione dell'inversione: Scrivi una descrizione o una spiegazione per quel lato della scatola ribaltabile.

• Allineamento: Decidi se vuoi che il contenuto sia sul lato sinistro, al centro o sul lato destro.

Una volta terminata la personalizzazione del contenuto per entrambi i lati della scatola ribaltabile, puoi modificare lo stile per farlo apparire come desideri.

Passaggio 4: formalizza la tua flip box

Ora vai alla scheda Stile ed espandi ciascuna sezione alle opzioni di stile corrispondenti:

Involucro: Qui puoi modificare Tipo di sfondo, Colore, Posizione, Secondo colore, Posizione, Tipo, Angolo e così via sotto il wrapper. È possibile personalizzare le opzioni sia per il lato anteriore che per quello posteriore della flip box. 

Icona: Espandendo questa opzione. Puoi modificare il colore, il tipo di sfondo, l'ombra della casella, il tipo di bordo e altre impostazioni sia per la visualizzazione normale che per quella al passaggio del mouse. Sia l'estremità anteriore che quella posteriore della flip box possono avere stili di icone personalizzati.  

Titolo: Da qui puoi cambiare la tipografia, Colore del titolo e margine del titolo per entrambi i lati della casella ruotabile.

Sottotitolo: Modifica questa opzione per personalizzare la tipografia, il colore del titolo e il margine del titolo del sottotitolo per entrambi i lati della casella ruotabile.

Descrizione: Qui puoi personalizzare la tipografia, il colore della descrizione e il margine della descrizione per entrambi i lati della casella sfogliabile.

Pulsante: Espandi la sezione dei pulsanti per modificare il colore del testo, il colore dello sfondo, il tipo di bordo, il raggio del bordo, la casella del bordo e altre impostazioni. È possibile personalizzare lo stile del pulsante sia per la visualizzazione normale che per quella al passaggio del mouse. 

Infine, fai clic su pubblica/aggiorna per salvare le modifiche e visualizzare l'anteprima della casella sfogliabile di Elementor:

Grafico facile da consultare

I migliori plugin Flipbox Overlay e Hover per WordPress 

Ecco la mia panoramica di due popolari plug-in overlay e hover di Flipbox per WordPress, uno accanto all'altro. Questi sono Elementor E Flipbox di ElementsKit plugin. Dare un'occhiata

Plugin Elementor Flipbox

Elementor è un plugin per la creazione di pagine ampiamente utilizzato e apprezzato per WordPress. Offre un widget Flipbox che ti consente di creare straordinarie animazioni flip sul tuo sito web. Con Elementor, puoi aggiungere facilmente effetti di rotazione interattivi a immagini, icone, titoli e descrizioni. Il plug-in fornisce un'interfaccia intuitiva in cui è possibile personalizzare la direzione di rotazione, lo stile di animazione, l'evento di attivazione (passaggio del mouse, clic) e vari elementi di design. Elementor è noto per la sua flessibilità, le ampie opzioni di stile e la compatibilità con temi diversi.

Plug-in Flipbox ElementsKit

ElementsKit è un pacchetto aggiuntivo completo per Elementor che ne migliora le funzionalità. All'interno è presente un modulo Flipbox dedicato ElementsKit. Aggiunge funzionalità ed effetti Flipbox più avanzati al tuo sito Web basato su Elementor. Questo plugin offre una vasta libreria di modelli Flipbox predefiniti. Ciò ti consente di creare rapidamente animazioni di ribaltamento visivamente accattivanti. Flipbox di ElementsKit il plugin fornisce anche ulteriori opzioni di personalizzazione. Puoi avere diversi stili Flipbox, effetti di sovrapposizione, effetti al passaggio del mouse e vari eventi di attivazione. Si integra perfettamente con Elementor e fornisce un'esperienza utente fluida per la progettazione di accattivanti elementi Flipbox.

Sia il plugin Elementor Flipbox che il plugin ElementsKit Flipbox possono essere la scelta migliore per te. Questi portano animazioni flip interattive e coinvolgenti sui siti web. Questi plugin hanno interfacce intuitive e ampie opzioni di personalizzazione. Inoltre, sono compatibili con il page builder Elementor. Non è necessario scrivere codici. Pertanto, questi plugin semplificano la creazione di elementi Flipbox visivamente accattivanti e interattivi.

Domande frequenti (FAQ)

Come si aggiunge un effetto hover su WordPress?

Per aggiungere un effetto hover in WordPress, puoi utilizzare CSS o plugin che offrono funzionalità di effetto hover. Molti page builder e plugin di personalizzazione forniscono opzioni per aggiungere effetti al passaggio del mouse a vari elementi, inclusi i Flipbox.

Come si crea una casella sfogliabile in WordPress?

Puoi creare una flip box in WordPress utilizzando plugin Flipbox dedicati come ElementsKit. Questi plugin ti consentono di creare e personalizzare facilmente gli elementi Flipbox senza richiedere conoscenze di codifica.

Come si aggiunge un'immagine al passaggio del mouse in WordPress?

Per aggiungere un'immagine al passaggio del mouse in WordPress, puoi utilizzare CSS o plugin che forniscono effetti al passaggio del mouse sull'immagine. Questi plugin di solito hanno opzioni per specificare un'immagine diversa o modificare l'aspetto quando si passa sopra un elemento dell'immagine.

Come si mostrano i contenuti al passaggio del mouse in WordPress?

Puoi mostrare il contenuto al passaggio del mouse in WordPress utilizzando vari metodi. Un modo è utilizzare i CSS per visualizzare il contenuto nascosto quando si passa con il mouse su un elemento specifico. In alternativa, i plugin Flipbox spesso offrono opzioni per visualizzare contenuti diversi sui lati anteriore e posteriore del Flipbox, visibili al passaggio del mouse.

Incartare

L'aggiunta di overlay e hover Flipbox al tuo sito WordPress può migliorare significativamente l'esperienza dell'utente e rendere i tuoi contenuti più coinvolgenti. Seguendo la guida passo passo delineata in questo post del blog e utilizzando i popolari plugin Flipbox come ElementsKit, puoi facilmente creare straordinari effetti Flipbox senza alcuna conoscenza di programmazione. Quindi vai avanti per ravvivare il tuo sito web con sovrapposizioni e hover Flipbox e affascina i visitatori del tuo sito con contenuti interattivi e visivamente accattivanti.