Come creare una barra promozionale animata per i modelli di pagina in Divi

Pubblicato: 2019-11-23

Creare una barra promozionale animata per il tuo modello di pagina in Divi può essere un ottimo modo per pubblicizzare prodotti e offerte con stile senza dover fare affidamento su un plug-in. Utilizzando le potenti funzionalità di progettazione di Divi, puoi creare visivamente la barra promozionale durante la modifica di un modello in Divi's Theme Builder. Quindi, una volta che il modello è pronto, la barra promozionale apparirà su qualsiasi pagina assegnata a quel modello. Facile!

Facciamo un salto e iniziamo!

Sbirciata

Ecco una rapida occhiata alla barra promozionale che creeremo in questo tutorial.

Ti mostreremo anche come rendere fissa (o fissa) anche la barra promozionale.

Scarica GRATUITAMENTE il modello di pagina della barra promozionale

Per mettere le mani sul modello di pagina della barra promozionale 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.

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 nella tua pagina, estrai semplicemente il file zip e aggiungi uno dei file json nel Divi Theme Builder utilizzando l'opzione Theme Builder Portability.

Andiamo al tutorial, vero?

Iscriviti al nostro canale Youtube

Cosa ti serve per iniziare

Per iniziare, dovrai installare e attivare il tema Divi. Assicurati di avere l'ultima versione di Divi.

Avrai anche bisogno di almeno una pagina creata con Divi Builder a scopo di test per assegnare il modello di barra promozionale a quella pagina per mostrare il risultato.

Dopodiché, sei pronto per partire.

Creazione di una barra promozionale animata nella parte superiore di un modello di pagina

Creazione di un nuovo modello

Dal dashboard di WordPress, vai a Divi > Generatore di temi. Quindi fare clic sulla casella "Aggiungi nuovo modello" per creare un nuovo modello.

Assegna il modello alla pagina o alle pagine in cui desideri visualizzare la barra promozionale.

Sul nuovo modello, fai clic sull'area "Aggiungi corpo personalizzato", quindi seleziona "Crea corpo personalizzato".

NOTA: stiamo aggiungendo la barra promozionale all'area del corpo del modello (non l'intestazione) in modo che possa funzionare con l'intestazione predefinita di Divi e con qualsiasi intestazione personalizzata che potresti aggiungere in futuro.

Quindi seleziona l'opzione "Crea da zero".

Aggiunta della barra promozionale al modello

All'interno del Template Layout Editor, possiamo iniziare a costruire la barra promozionale usando Divi Builder.

Inizia con l'aggiunta di una riga di una colonna alla sezione normale.

Impostazioni riga

Prima di aggiungere un modulo, aggiorna le impostazioni della riga come segue:

Colore sfondo sfumato sinistro: #4a42ec
Colore di sfondo sfumato a destra: #521d91
Direzione gradiente: 90 gradi
Usa larghezza grondaia personalizzata: S
Larghezza grondaia: 1
Larghezza: 100%
Larghezza massima: 100%
Imbottitura: 0px in alto, 0px in basso

Questo si occupa del colore di sfondo e della larghezza della barra promozionale che stiamo creando.

Impostazioni colonna

Prima di uscire dalle impostazioni della riga, fare clic per aprire le impostazioni della colonna. Quindi aggiungi il seguente CSS personalizzato all'elemento principale della colonna:

display: flex;
align-items: center;
justify-content: center;

Questo CSS utilizza la proprietà flex per allineare il contenuto (oi moduli) all'interno della colonna per impilarli orizzontalmente (affiancati). Inoltre centra i moduli all'interno della colonna sia verticalmente che orizzontalmente. Il motivo per cui lo stiamo facendo in questo modo è evitare di dover utilizzare più strutture di righe di colonne che si impileranno l'una sull'altra sui dispositivi mobili. Con questa configurazione, il contenuto rimarrà in un allineamento orizzontale su tutte le larghezze del browser.

Ora siamo pronti per aggiungere alcuni contenuti alla barra promozionale.

Aggiungere il modulo Blurb

Per il contenuto di questo esempio promozionale, includeremo un modulo blurb con una piccola icona e un blog di testo con un pulsante a destra (proprio come la barra promozionale su Elegantthemes.com).

Fai clic sul cerchio grigio più icona all'interno della riga e aggiungi un modulo blurb.

Per il contenuto del blurb, inserisci quanto segue:

Titolo: [inserisci il testo promozionale]
Usa l'icona: S
Icona: icona regalo (vedi screenshot)

Aggiorna le impostazioni del design del blurb come segue:

Colore icona: #ff4a9e
Posizionamento immagine/icona: a sinistra
Usa la dimensione del carattere dell'icona: S
Dimensione carattere icona: 16px
Dimensione del testo del titolo: 16 px (desktop), 14 px (telefono)
Altezza della riga del titolo: 1.3em
Larghezza massima: 230 px (solo telefono)
Imbottitura: 10px in alto
Stile di animazione: diapositiva
Direzione dell'animazione: destra
Ritardo animazione: 250 ms

Aggiunta del modulo pulsanti

Quindi aggiungi un modulo pulsante sotto il modulo blurb. A causa della proprietà flex, il modulo apparirà a destra del blurb invece che sotto di esso.

Aggiorna le impostazioni di progettazione del pulsante come segue:

Usa stili personalizzati per il pulsante: S
Dimensione del testo del pulsante: 15 px (desktop), 13 px (telefono)
Colore del testo del pulsante: #ffffff
Larghezza bordo pulsante: 0px
Raggio del bordo del pulsante: 20 px
Peso del carattere del pulsante: semi grassetto

Margine (desktop): 20px a sinistra
Margine (telefono): 10px a sinistra
Imbottitura (desktop): 0px in alto, 0px in basso
Imbottitura (telefono): 2px in alto, 2px in basso, 8px a sinistra, 8px a destra
Stile di animazione: rimbalzo
Ritardo animazione: 1000 ms

Impostazioni della sezione

Per completare il design della barra promozionale, aggiorna la sezione contenente la barra promozionale come segue:

Imbottitura: 0px in alto, 0px in basso
Stile di animazione: rimbalzo
Direzione animazione: Giù
Durata dell'animazione: 500 ms
Ritardo animazione: 250 ms
Opacità iniziale dell'animazione: 100%
Indice Z: 999

Aggiunta del modulo di contenuto del post a larghezza intera

A questo punto la barra promozionale è pronta per partire. Ma poiché questo è un modello, dobbiamo assicurarci di aggiungere il modulo del contenuto del post per visualizzare il contenuto delle pagine che utilizzano questo modello.

Per le pagine che sono (o saranno) create utilizzando Divi Builder, ti consigliamo di utilizzare un modulo di contenuto del post a larghezza intera per massimizzare l'area del contenuto.

(NOTA: per le pagine che utilizzano l'editor predefinito, ti consigliamo di utilizzare un normale modulo di contenuto del post all'interno di una sezione normale in modo da avere una larghezza massima simile di 1080px per impostazione predefinita.)

Aggiungi sezione a larghezza intera

Sotto la sezione contenente la tua barra promozionale, aggiungi una sezione a larghezza intera.

Aggiungi modulo contenuto post a larghezza intera

Quindi seleziona il modulo di contenuto del post a larghezza intera.

Questo lo fa. Ora assicurati di salvare il layout prima di uscire dall'editor.

Quindi salva le modifiche anche per il generatore di temi.

Risultato finale

Prima

Ora ecco la pagina prima di assegnare il template con la barra promo.

Dopo

Ed ecco la stessa pagina con il nuovo template con la barra promozionale.

Eccolo sul cellulare.

Ecco l'animazione della barra promozionale al caricamento della pagina.

Rendere appiccicosa la barra promozionale

Per fare in modo che la barra promozionale rimanga sotto l'intestazione Divi predefinita, possiamo aggiungere un semplice frammento CSS alla sezione contenente la barra promozionale.

Apri le impostazioni della sezione e aggiungi il seguente CSS all'elemento principale sul desktop:

position: fixed;
width: 100%;

Quindi aggiungi il seguente CSS all'elemento principale sul tablet:

position: relative;

Ora controlla il risultato.

Non dimenticare i link

Una volta creata la barra promozionale, vorrai aggiungere l'URL del collegamento all'offerta o alla pagina promozionale. È possibile aggiungere l'URL del collegamento del pulsante nella scheda del contenuto delle impostazioni del pulsante.

Per anche le conversioni, potresti anche aggiungere l'URL del collegamento all'intera riga, sotto l'opzione del collegamento delle impostazioni della riga.

Pensieri finali

In questo tutorial, ti abbiamo mostrato come progettare una barra promozionale (da zero) utilizzando Divi Theme Builder. La barra promozionale è completa di più animazioni e design per farla risaltare davvero ai visitatori. Puoi anche fissare la barra promozionale quando scorri verso il basso la pagina per una visibilità ancora maggiore. E con la possibilità di controllare dove appare la barra promozionale in tutto il tuo sito, l'applicazione è estremamente pratica.

Speriamo che questo ti ispiri a creare alcune tue barre promozionali.

Non vedo l'ora di sentirti nei commenti.

Saluti!