Il widget Flip Box ti aiuta a creare riquadri animati che si girano dall'altra parte una volta che gli utenti eseguono un'azione. Puoi creare un flip box Elementor facendo clic e passando il mouse su entrambi. Puoi personalizzare entrambi i lati della casella sfogliabile utilizzando questo widget.

Come aggiungere la casella sfogliabile al sito WordPress utilizzando ElementsKit #

Segui i passaggi descritti di seguito per aggiungere facilmente una casella sfogliabile al tuo sito WordPress utilizzando ElementsKit e Elementor:

Passaggio 1: attiva il widget della casella sfogliabile #

Navigare verso ElementsKit ⇒ widget ⇒ widget casella sfogliabile, attiva il widget, E fare clic su Salva modifiche.

Passaggio 2: trascina e rilascia il widget  #

Modifica la pagina con l'opzione Modifica con Elementor. Poi ricerca per il widget flip box con l'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 seguenti impostazioni:

• Flip: Hai quattro opzioni per capovolgere: Capovolgi, Zoom avanti, Diapositiva e 3D.
• Direzione di capovolgimento: Sono disponibili più opzioni per la direzione di inversione. Tuttavia, l'opzione verrà visualizzata in base al valore selezionato per l'opzione Capovolgi.
• Attivazione del capovolgimento: Qui puoi scegliere l'opzione che attiverà il flip. Sono disponibili tre opzioni: passaggio del mouse, clic sulla casella e clic sul pulsante.
• Altezza della scatola ribaltabile: È possibile regolare l'altezza della casella ribaltabile utilizzando questa opzione.

Sotto Altezza casella capovolgi, troverai due schede FRONTE e RETRO. Seleziona una delle opzioni per personalizzare gli elementi della scatola ribaltabile per ciascun lato. Troverai la stessa opzione per entrambe le parti. 

Le opzioni che puoi personalizzare per ciascun lato della scatola ribaltabile includono: 

• Tipo di supporto: Puoi scegliere un'icona o un'immagine. Puoi anche scegliere l'opzione nessuna se non desideri aggiungere alcun file multimediale.
• Icona/Scegli file: A seconda dell'opzione scelta per Tipo di supporto, puoi scegliere l'icona/immagine qui. 
• Titolo: Fornisci un titolo.
• Sottotitolo: Puoi aggiungere un sottotitolo qui.
• Descrizione dell'inversione: Scrivi una descrizione pertinente utilizzando questa opzione.
• Allineamento: È possibile impostare l'allineamento a sinistra, al centro o a destra.

Dopo aver finito di preparare i contenuti per entrambi i lati della tua flip box, è il momento di modificare lo stile. 

Passaggio 4: stilizza la tua scatola a fogli mobili #

Ora passa alla scheda Stile ed espandi ciascuna sezione per modificare le opzioni di stile correlate:

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

Icona: Se espandi questa opzione puoi modificare Colore, Tipo di sfondo, Ombra riquadro, Tipo di bordo e così via sia per la visualizzazione normale che per quella al passaggio del mouse. Puoi personalizzare lo stile dell'icona sia per la parte anteriore che per quella posteriore della casella sfogliabile.

Titolo: Qui puoi personalizzare la tipografia, il colore del titolo e il margine del titolo per entrambi i lati della casella sfogliabile.

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

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 personalizzare il colore del testo, il colore dello sfondo, il tipo di bordo, il raggio del bordo, la casella del bordo e molte altre opzioni. Puoi modellare il 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: