Vai al contenuto principale

Come creare una barra di promozione animata su Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 701.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Creare una barra di promozione animata per il tuo modello di pagina in Divi può essere un ottimo modo per pubblicizzare prodotti e offerte alla moda senza dover fare affidamento su un plug-in. Utilizzando le potenti funzionalità di progettazione di Divi, puoi creare visivamente la barra di promozione quando modifichi un modello in Divi Theme Creator. Quindi, quando il modello è pronto, la barra della promozione apparirà su qualsiasi pagina assegnata a quel 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".

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

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

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

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 contenuto (o i moduli) nella colonna per impilarli orizzontalmente (fianco a fianco). Inoltre centra i moduli nella colonna verticalmente e orizzontalmente. Il motivo per cui lo facciamo è evitare di dover utilizzare più strutture di righe di colonne che si impileranno l'una sull'altra su un dispositivo mobile. Con questa configurazione, il contenuto rimarrà allineato orizzontalmente su tutte le larghezze del browser.

Ora siamo pronti per aggiungere contenuti alla barra 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

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:

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

  • 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.

Theme builder divi

Risultato finale

Prima

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

Dopo

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

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:

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

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 di promozione (da zero) utilizzando Divi Theme Builder. La barra promozionale è completa di più animazioni e design per renderla veramente visibile ai visitatori. Puoi anche correggere la barra della promozione mentre scorri la pagina verso il basso per una visibilità ancora maggiore. E grazie alla possibilità di controllare il posizionamento della barra di promozione sul tuo sito, l'app è estremamente conveniente.

Questo articolo contiene 1 commento

  1. Ciao,

    Articolo e tutorial superbi, davvero TOP !!!

    Vorrei fare la stessa cosa ma poiché utilizzo il menu secondario in cui si trova account, telefono e carrello sopra il menu principale (le mie categorie di prodotti), la barra promozionale non viene visualizzata all'improvviso, a meno che non mi sia perso un passaggio del tutorial? !!.

    Quello che voglio poter fare è visualizzare questa barra promozionale sopra la barra secondaria, insomma sopra ogni altra cosa mettere una promo, una svendita lampo, modificare le informazioni in base agli eventi che voglio includere

    Qualche idea su questa rotta, per favore?

    Youssef

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
2 azioni
quota2
Tweet
Enregistrer