Come aggiungere una box a fogli mobili in wordpress con elementor

La tendenza nel web design si sta evolvendo quasi ogni giorno. Per rimanere pertinenti e competitivi sul mercato, l'adattamento costantemente a questi cambiamenti è obbligatorio per tutti i proprietari di siti Web. Anche qualche anno fa, gli elementi web statici erano sufficienti per attirare l'attenzione degli utenti e dei visitatori.

Ma ora, la maggior parte dei designer costruisce i loro siti usando elementi interattivi per aumentare il coinvolgimento. Gli elementi Web interattivi sono progettati in modo da rispondere alle azioni dell'utente, come clic, hover, mosse e pergamene, per creare un'esperienza coinvolgente. Flip Box è un elemento così interattivo.

In questo post di tutorial, tratteremo una guida passo-passo su come aggiungere le scatole di ribaltamento a WordPress con Elementor. Spero che troverai questo post davvero utile e valga la pena. Inizia!

Cos'è un flip box? I suoi casi d'uso nel web design

Un flip box è un widget interattivo dell'elementoor che consente di visualizzare il contenuto su entrambi i lati anteriori di una scatola, che si lancia quando si libra o cliccata. Combina un fascino visivo con il movimento dinamico per attirare l'attenzione dell'utente mentre presenta due livelli di informazioni.

Questo widget è estremamente utile quando è necessario coprire molte informazioni in uno spazio limitato. Il widget offre molte opzioni di personalizzazione in modo da poter allineare il suo design con il marchio del tuo sito. Diamo un'occhiata a come funzionano le cassette nel breve video allegato di seguito.

Utilizzo dei casi di Flip Box in web design

• Servizio o funzionalità Highlights con icone sul davanti e descrizioni sul retro
• Il membro del team mette in mostra con una foto sul davanti e le informazioni di bio/contatto sul retro
• Confronto delle caratteristiche del prodotto in un formato compatto e interattivo
• Call-to-Actions che rivelano pulsanti o collegamenti quando vengono lanciati
• Portfolio Visualizza con le miniature del progetto sul davanti e riassunti sul retro
• Piani di prezzo con nomi di piano in anticipo e liste di funzionalità sul lato flip

Come aggiungere una box a fogli mobili in wordpress con elementor

Per avviare il processo, è necessario disporre dei seguenti plugin sul tuo sito. Ottienili facendo clic sui collegamenti allegati di seguito.

• Elemento
• HappyAddons
• HappyAddons Pro

Una volta installati e attivati ​​sul tuo sito, inizia a seguire il tutorial descritto di seguito su come utilizzare il widget Flip Box.

Passaggio 01: Apri la tela Element

Apri il post o la pagina con la tela Element in cui si desidera aggiungere il widget Flip Box.

Passaggio 02: selezionare una sezione per l'aggiunta del widget della cassetta a foglie

Crea una sezione, definendo il numero di colonne in modo da poter aggiungere il widget di flip box su di esse.

Trova il widget Flip Box sul pannello Element. Trascina e lascialo cadere nella rispettiva sezione sulla tela elementare.

Vedrai che il widget di Flip Box viene aggiunto alla tela con un contenuto fittizio.

Passaggio 03: selezionare un preimpostazione per la finestra

Un preimpostazione è uno stile di design salvato che puoi applicare rapidamente ai widget. Il widget Flip Box è dotato di diversi preset che vedrai sulla barra laterale destra.

Seleziona qualsiasi preset desiderato. Vedrai che lo stile viene immediatamente applicato al tuo widget.

Passaggio 04: Aggiungi contenuto al lato anteriore del widget

Come già detto, il widget a foglietto consente di aggiungere contenuti ad entrambi i lati. Aggiungiamo ora contenuti al lato anteriore. Espandi la sezione lato anteriore .

È possibile impostare un'immagine, una risoluzione dell'immagine, il titolo, il tag HTML per il titolo, la descrizione e l'allineamento per il widget. Fallo da solo.

Puoi vedere che abbiamo aggiunto un po 'di contenuto (un'immagine, un titolo e una descrizione) sul lato anteriore della scatola di flip.

Passaggio 05: Aggiungi contenuto sul retro del widget

Allo stesso modo, espandere la sezione sul retro del widget. Puoi aggiungere un media, un titolo, una descrizione e un pulsante, definire il loro allineamento. Fai le cose necessarie come vuoi.

Puoi vedere che abbiamo aggiunto anche alcuni contenuti qui.

Passaggio 06: configurare le impostazioni per il widget di flip box

Quindi, espandere la sezione Impostazioni . Otterrai opzioni per configurare il tipo di animazione, la direzione e la durata.

Passaggio 07: stilizzare la cassetta

Vieni alla scheda Style . Riceverai quattro sezioni qui. La prima sezione è comune .

È possibile impostare un'altezza e un raggio del bordo per il widget della cassetta della fritta dalla sezione comune.

Quindi, espandi la sezione lato anteriore . È possibile personalizzare l'imbottitura, il tipo di bordo, l'ombra della scatola, il tipo di sfondo, la spaziatura e il ridimensionamento dell'immagine da questa sezione.

Allo stesso modo, espandendo la sezione sul retro , è possibile stilizzare l'imbottitura, il tipo di bordo, l'ombra della scatola, il tipo di sfondo, il colore e la tipografia.

Spero che tu possa farli da soli. Abbiamo cambiato la tipografia e il peso del testo per il nostro widget per spiegare questo tutorial.

Passaggio 08: personalizza il pulsante

Il pulsante viene visualizzato sul lato posteriore della scatola di lancio. Espandendo la sezione sul retro - pulsante , è possibile configurare la larghezza del bordo, il colore del bordo, il raggio del bordo, l'ombra della scatola, la tipografia, il colore e il colore di sfondo del pulsante.

Fallo da solo.

Passaggio 09: Rendi reattiva il widget mobile

A meno che i widget Element non siano ottimizzati per tablet e dispositivi mobili, il tuo sito potrebbe essere rotto su schermi più piccoli, portando a una scarsa esperienza dell'utente e frequenze di rimbalzo più elevate.

Fai clic sull'opzione Modalità reattiva nella parte inferiore del pannello Element. Verrà visualizzato le opzioni Swtich Beteen diverse dimensioni dello schermo (desktop, tablet e dispositivi mobili).

Seleziona la dimensione dello schermo mobile. Quindi, personalizza il layout e gli elementi sulla box di ribaltamento in modo tale da adattarsi alle dimensioni dello schermo. Fallo anche per lo schermo del tablet.

Pertanto, allo stesso modo, crea tutte le scatole a foglietti che desideri per il tuo sito Web Element.

Bonus: cosa puoi fare di più con HappyAddons

Oltre a creare Flip Box, puoi fare molte altre cose con il plugin HappyAddons. Diamo una rapida occhiata a cosa c'è di più che puoi fare con il plug -in per il motivo per cui devi considerarlo nella tua lista.

• Building a tema

L'edificio a tema è una caratteristica gratuita di HappyAddons, che è premium in Elementor. Con il costruttore di temi HappyAddons, puoi creare intestazioni, piè di pagina, modelli di post sul blog, pagine di archivio e un'impostazione delle condizioni.

• Integrazione WooCommerce

Ha nove widget per WooCommerce. Sono griglia di prodotto, carosello di prodotto, griglia della categoria del prodotto, carosello della categoria di prodotti, prodotto singolo, mini carrello, carrello, checkout e bar di spedizione. Con loro, puoi estendere ulteriormente il potere dei tuoi siti Web di e -commerce.

• Integrazione dei social media

HappyAddons ti offre questi widget di social media: icona sociale, condivisione sociale, feed di Twitter, feed di Facebook, giostre di Twitter e feed Instagram. Con loro, puoi collegare il tuo sito Web alle famose piattaforme social per la distribuzione dei contenuti.

• Progettazione della pagina infografica

HappyAddons include vari widget, come grafico a barre, grafico delle linee, grafico a torta e ciambelle, grafico dell'area polare e grafico radar. Usandoli bene, puoi creare motosegne post e pagine di infografiche sul tuo sito Web WordPress. Controlla come creare una pagina Web infografica.

• Creativi

HappyAddons ha attualmente oltre 25 widget creativi che sono utili per creare siti Web accattivanti. Alcuni dei widget creativi più popolari sono la scheda, l'effetto del mouse dell'immagine, il fattore divertente, il gruppo di stack di immagini, la griglia giustificata, il pulsante creativo, l'immagine del liquore liquido, la pergamena di testo e la navigazione di una pagina.

Quindi, una volta che hai il plug -in HappyAddons, non solo puoi aggiungere scatole a foglietti, ma anche vari altri elementi come menzionato sopra. Quindi, sicuramente HappyAddon potrebbe davvero valere i tuoi soldi.

Close!

Spero ti sia piaciuto questo tutorial. Sebbene sia un widget semplice e facile da usare, può davvero migliorare l'appello e l'estetica del tuo sito Web. Tuttavia, per ottenere il miglior risultato, ci sono diverse migliori pratiche che devi tenere a mente durante l'utilizzo di questo widget.

Non sovraffollare la parte anteriore o posteriore. Usa icone chiare, testo conciso e abbastanza spaziatura. Prova e regola per le viste per tablet e mobili per evitare le pause del layout. Se il retro ha un pulsante o un collegamento, assicurarsi che si distingua ed è facile da toccare. Abbina lo stile Flip Box con i colori, i caratteri e il marchio del tuo sito.

Se affronti problemi durante l'utilizzo di questo plug -in, non esitare a contattarci con la casella di chat o il sistema di supporto.