Se state cercando un tutorial su come creare flip box in WordPress, abbiamo una guida completa per voi.
Quello che vi serve è seguire come crearne una da zero. Ma prima di questo, scopriamo alcuni dettagli sui flip box.
Che cos'è un Flip box in WordPress?
A scatola a ribalta in WordPress è un elemento di contenuto interattivo che combina testo e immagini con un effetto di animazione a scorrimento.
In genere ha due lati. Viene comunemente utilizzato per presentare il testo in modo creativo e con un effetto di capovolgimento ipnotico.
Le persone aggiungono i flip box perché sono un elemento coinvolgente e interattivo altamente consigliato per catturare immediatamente l'attenzione dei visitatori.
Vediamo ora alcuni altri scenari relativi alle scatole Flip.
Creare bellissimi tavoli
Con l'editor di blocchi
Perché utilizzare i Flip Box nei siti web WordPress?
I riquadri a scorrimento sono un potente elemento di design che può elevare i contenuti di WordPress in diversi modi. Ecco perché vale la pena utilizzarli:
- Attirare l'attenzione: I box a scorrimento attirano l'attenzione dei visitatori come una calamita e suscitano la loro curiosità, incoraggiandoli ad approfondire.
- Evidenziare le informazioni chiave: I riquadri a scorrimento consentono di presentare con precisione i dettagli significativi sul fronte e di offrire spiegazioni o ulteriori dettagli sul retro, rendendo i contenuti più completi.
- Presentare in modo elegante il contenuto: I flip box consentono di presentare i contenuti in modo elegante. Al posto del testo semplice o dei riquadri statici, i flip box offrono un modo elegante di presentare i servizi, i profili dei team, le CTA, ecc.
Ora che avete appreso alcuni vantaggi dell'uso dei flip box sul vostro sito web, passiamo alla nostra esercitazione principale.
Come creare Flip Box in WordPress
Poiché WordPress non dispone di un blocco centrale per creare un flip box, utilizzeremo un plugin di terze parti chiamato Flipbox.
Flipbox ha una collezione di effetti CSS3 per rendere i flipbox più accattivanti. Funziona con qualsiasi page builder ed è reattivo di default.
Fase 1: installazione del Flipbox
Il primo passo consiste nell'installare il plugin Flipbox accedendo alla dashboard del vostro sito web. Quindi navigare in Plugin (1) > Aggiungi nuovo plugin (2). Ricerca Flipbox (3) e installare il plugin (4).
Non dimenticate di attivare il plugin dopo l'installazione.
Fase 2: Creare le scatole a ribalta
Ora fate clic su Flip Box (1) e Crea nuovo dopo di che (2).
Selezionate uno stile a piacere nella pagina e fate clic su "Crea stile". Se si scorre verso il basso, si possono vedere numerosi stili.
Dare un nome alla vostra casella flip (1)e selezionare l'opzione numero di layout. Il I layout sono nella cartella Stili che avete visto in precedenza (Ogni stile ha tre layout). Infine, fare clic sul pulsante Risparmiare pulsante (3).
Fase 3: personalizzazione della scatola flip
Tutte le opzioni sono da personalizzare. Personalizzare in base alle proprie esigenze. L'anteprima è mostrata di seguito nella stessa pagina.
Selezionare la voce "Aprire le scatole a ribalta da" per inserire il contenuto.
Inserire il Titolo anteriore (1) e Icona frontale (2)e infine fare clic su Carica immagine per caricare un'immagine per la facciata (3).
Scorrete in basso nella stessa pagina e inserite il comando Informazioni sul backend o il testo dettagliato del contenuto (1) e il Testo del pulsante di backend (2). È inoltre possibile inserire il nome link al pulsante se si vuole (3). Successivamente, è necessario impostare un'immagine per l'immagine di sfondo del backend facendo clic sul pulsante "Carica immagine” (4).
Dopo aver impostato tutto, premere il pulsante "Invia"Pulsante (1).
È possibile Aggiungete altre scatole a ribalta, se volete. Seguire le linee guida del "Passo 3" ripetutamente per aggiungere altri riquadri a scorrimento al riquadro a scorrimento corrente.
È inoltre possibile modificare o eliminare anche i riquadri a ribalta. Le opzioni sono visibili portando il cursore sui riquadri a ribalta.
Dopo aver effettuato tutte le modifiche e le personalizzazioni, fare clic su "Voce per riga” (1) per definire il numero di caselle sfogliabili che si desidera visualizzare alla volta per ogni riga. Ho selezionato tre elementi, poiché voglio visualizzare tre elementi per riga. Ora, premere il tasto Invia pulsante (2).
Successivamente, è necessario salvare la Flip Box. Basta fare clic sul pulsante Salva (1).
Passo 4: Inserire lo shortcode Flip Box
Vai a Flip Box (1) e copiare il codice breve (2).
Andare ai post o alle pagine in cui si desidera visualizzare il flip box. Per farlo, andare su Messaggi (1) > Tutti i messaggi (2) e modificare quel post o quella pagina (3). N.B. Lo stesso vale per la modifica di una pagina, ma bisogna andare su Pagine > Tutte le pagine prima.
Per inserire il riquadro a ribalta, è necessario inserire il campo Blocco shortcode, fare clic sull'icona "+" (Aggiungi icona blocco) nell'editor (1) e digitare "Codice breve" nella casella di ricerca (2). Fare clic sul pulsante "Shortcode" per inserirlo nell'editor(3).
Ora incollate il codice breve (1) e salvare o pubblicare il post o la pagina.
Ecco la demo qui sotto.
Pensieri finali!
La creazione di flip box in WordPress è un modo semplice per migliorare il design e il coinvolgimento del vostro sito web. I riquadri a scorrimento sono un'aggiunta semplice che può lasciare un'impressione duratura sul vostro pubblico.
Seguendo questi passaggi, è possibile integrare facilmente elementi dinamici e visivamente accattivanti che hanno un aspetto professionale e migliorano il modo in cui i visitatori interagiscono con i contenuti.
Spero che le linee guida siano state facili da seguire. Ma se avete incontrato qualche difficoltà, fatemelo sapere nella sezione commenti qui sotto. Mi farebbe piacere assistervi.
Inoltre, non dimenticate di condividere il tutorial con i vostri amici attraverso i social media.
Per saperne di più
- Come aggiungere un box per le recensioni ai post/pagine di WordPress in 2 modi semplici
- Come rendere appiccicosa l'intestazione di una tabella in WordPress (3 semplici passaggi)
- Come cambiare il colore dei pulsanti in WordPress in 3 semplici passi
- Come creare una tabella reattiva in WordPress
- Come aggiungere un pulsante a levetta al vostro sito WordPress
