Crea una barra promozione l'animazione per il tuo modello di pagina in Divi può essere un ottimo modo per pubblicizzare prodotti e offerte eleganti senza dover fare affidamento su un plug-in. Utilizzando le potenti funzionalità di progettazione di Divi, puoi creare visivamente il file promozione quando modifichi un modello in Divi Theme Builder. Poi, una volta pronto il modello, la barra promozione apparirà su qualsiasi pagina assegnata a questo modello. 

Ti mostreremo anche come rendere fissa (o appiccicosa) la barra della promozione.

Cosa ti serve per iniziare

Per cominciare, devi per installare e attivare il tema Divi . Assicurati di avere l'ultima versione di Divi.

Sarà inoltre necessaria almeno una pagina creata con Divi Builder a scopo di test, che sarà influenzata dal modello della barra della promozione.

Crea una barra di promozione animata nella parte superiore di un modello di pagina

Crea un nuovo modello

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

Aggiungi un nuovo modello divi

Assegna il modello alle pagine su cui deve essere visualizzata la barra della promozione.

Home page di Divi

Sul nuovo modello, fai clic sulla casella "Aggiungi corpo personalizzato" e seleziona "Crea corpo personalizzato".

NOTA: stiamo aggiungendo la barra di promozione all'area del corpo del modello (non l'intestazione) in modo che possa funzionare con l'intestazione predefinita Divi e tutte le intestazioni personalizzato che puoi aggiungere in seguito.

Aggiungi un modello del corpo

Quindi selezionare l'opzione "Build From Scratch".

Scegli un layout in scala divi

Aggiunta della barra di promozione al modello

Nell'editor del layout del modello, possiamo iniziare a creare la barra di promozione utilizzando Divi Builder.

Inizia aggiungendo una riga di una colonna alla sezione normale.

Aggiungi riga a una colonna su divi

Impostazioni linea

Prima di aggiungere un modulo, aggiorna i parametri Row come segue:

  • Sfumatura dello sfondo a sinistra: # 4a42ec
  • Gradiente di sfondo destro: # 521d91
  • Direzione sfumatura: 90deg
  • Utilizzare una larghezza della grondaia personalizzata: SÌ
  • Larghezza della grondaia: 1
  • Larghezza: 100%
  • Larghezza massima: 100%
  • Tappezzeria: 0px nella parte superiore, 0px nella parte inferiore
Scegli un layout in scala divi 1

Questo supporta il colore di sfondo e la larghezza della barra di promozione che creiamo.

Parametri della colonna

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

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

Personalizzazione del codice css

Questo CSS utilizza la proprietà flex per allineare il file contenuto (o moduli) nella colonna da impilare orizzontalmente (affiancati). Inoltre centra i moduli nella colonna verticalmente e orizzontalmente. Il motivo per cui lo facciamo in questo modo è evitare di dover utilizzare più strutture di righe di colonne che si impileranno una sull'altra sui dispositivi mobili. Con questa configurazione, il contenuto rimarranno allineati orizzontalmente su tutte le larghezze del browser.

Ora siamo pronti per aggiungere contenuto al bar della promozione.

Aggiungi il modulo Blurb

Per il contenuto di questo esempio di promozione, includeremo un modulo di presentazione con una piccola icona e un blog di testo con un pulsante sulla destra (molto simile alla barra di promozione su Elegantthemes.com).

Fare clic sul cerchio grigio più l'icona all'interno della riga e aggiungere un modulo di presentazione.

Aggiungi una seconda sezione del modulo di riepilogo

Per il contenuto del testo di presentazione, inserisci le seguenti informazioni:

  • Titolo: [inserisci il testo della promozione]
  • Usa l'icona: SI
  • Icona: icona regalo (vedi screenshot)
Configurazione del modulo di riepilogo divi

Aggiorna le impostazioni di progettazione della presentazione come segue:

  • Colore icona: # ff4a9e
  • Immagine / posizione delle icone: a sinistra
  • Usa dimensione carattere icona: SÌ
  • Dimensione carattere icona: 16px
  • Dimensione titolo testo: 16px (desktop), 14px (telefono)
  • Riga del titolo Hewight: 1.3em
  • Larghezza massima: 230px (solo telefono)
  • Imbottitura: Top 10px
  • Stile animazione: diapositiva
  • Direzione dell'animazione: destra
  • Ritardo dell'animazione: 250 ms
Modulo di riepilogo divi personalizzazione

Aggiunta del modulo pulsanti

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

Modulo pulsanti Divi

Aggiorna i parametri di progettazione del pulsante come segue:

  • Usa stili personalizzati per Button: SÌ
  • Dimensione testo pulsante: 15px (desktop), 13px (telefono)
  • Colore testo pulsante: #ffffff
  • Larghezza del bordo del pulsante: 0px
  • Raggio del bordo del pulsante: 20px
  • Peso carattere: semi-grassetto
Personalizza il modulo del pulsante divi
  • Margine (desktop): 20px a sinistra
  • Margine (telefono): 10px a sinistra
  • Tappezzeria (ufficio): 0px nella parte superiore, 0px nella parte inferiore
  • Imbottitura (telefono): 2px in alto, 2px in basso, 8px a sinistra, 8px a destra
  • Stile di animazione: rimbalzo
  • Ritardo dell'animazione: 1000 ms
Personalizza la spaziatura del modulo dei pulsanti divi

Impostazioni della sezione

Per completare la progettazione della barra di promozione, aggiornare la sezione contenente la barra di promozione come segue:

  • Tappezzeria: 0px nella parte superiore, 0px nella parte inferiore
  • Stile di animazione: rimbalzo
  • Direzione dell'animazione: Giù
  • Durata dell'animazione: 500 ms
  • Ritardo dell'animazione: 250 ms
  • Animazione Avvio opacità: 100%
  • Indice Z: 999
Personalizza il modulo divi di animazione

Aggiunta del modulo di pubblicazione del contenuto a larghezza intera

A questo punto, la barra delle promozioni è pronta. Ma poiché questo è un modello, dobbiamo assicurarci di aggiungere il modulo di pubblicazione del contenuto per visualizzare il contenuto delle pagine utilizzando questo modello.

Per le pagine create (o che verranno 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 una mod di contenuto del post standard in una sezione normale per ottenere una larghezza massima simile di 1080px per impostazione predefinita.)

Aggiungi una sezione a larghezza intera

Nella sezione contenente la barra della promozione, aggiungi una sezione a larghezza intera.

Crea una sezione Div Builder a tutta larghezza

Aggiungi un modulo di contenuto in formato Fullwidth

Quindi selezionare il modulo Contenuto post di Fullwidth.

Contenuto articolo a larghezza intera divi

È più o meno quello. Ora assicurati di salvare il layout prima di uscire dall'editor.

Salva layout divi

Quindi salvare le modifiche per il generatore di temi.

Generatore di temi divi

Risultato finale

Prima

Ora ecco la pagina prima di assegnare al modello la barra di promozione.

Esempio di risultato prima

Dopo

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

Esempio risultato dopo

Rendi la barra promozionale appiccicosa

Affinché la barra della promozione si adatti all'intestazione predefinita di Divi, possiamo aggiungere un semplice frammento CSS alla sezione contenente la barra promozionale.

position: fixed;width: 100%;

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

Entra nella sezione fissa

Quindi aggiungi il seguente codice CSS all'elemento principale del tablet:

position: relative;

Aggiungi un codice css alla sezione divi

Ora controlla il risultato.

Risultato animato Divi

Per le conversioni precedenti, puoi anche aggiungere l'URL del collegamento all'intera riga, sotto l'opzione di collegamento Impostazioni riga.

Considerazioni finali

In questo tutorial, ti abbiamo mostrato come progettare una barra promozionale (da zero) utilizzando Divi Theme Builder. La barra promozionale è completa di molteplici animazioni e design per renderla veramente visibile Visitatori. Puoi persino correggere la barra della promozione mentre scorri la pagina verso il basso per una visibilità ancora maggiore. E con la possibilità di controllare dove è posizionata la barra della promozione sul tuo sito, l'app è estremamente conveniente.