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.
Assegna il modello alle pagine su cui deve essere visualizzata la barra della promozione.
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.
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.
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.
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;
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.
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)
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.
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
- 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
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
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.
Aggiungi un modulo di contenuto in formato Fullwidth
Quindi selezionare il modulo Contenuto post di Fullwidth.
È più o meno quello. Ora assicurati di salvare il layout prima di uscire dall'editor.
Quindi salvare le modifiche per il generatore di temi.
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:
Quindi aggiungi il seguente codice CSS all'elemento principale del tablet:
position: relative;
Ora controlla il risultato.
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.
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