Divi: il miglior tema WordPress di tutti i tempi!

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

Crea una barra di promozione animata 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 design di Divi, puoi creare visivamente la barra promozionale quando modifichi un modello in Divi's Theme Builder. Quindi, una volta che 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.

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.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare Facile e gratuito qualsiasi sito web o blog design con un aspetto professionale. Smetti di pagare molto per un sito web che puoi fare da solo.

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 usa la proprietà flex per allineare il contenuto (o i moduli) nella colonna per impilarli orizzontalmente (affiancati). Centra anche 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 accumuleranno l'una sull'altra sui dispositivi mobili. 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.

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:

Scopri i migliori strumenti per il tuo sito web

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

  • 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%;

Oltre 11 milioni di strumenti da scaricare

Envato Elements offre le migliori risorse per creare e sviluppare tutti gli aspetti del tuo sito web. Troverai milioni di modelli WordPress, grafica, risorse audio e molto altro. Perfetto per i principianti.

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 ai visitatori. Puoi persino correggere la barra delle promozioni mentre scorri la pagina per una visibilità ancora maggiore. E con la possibilità di controllare dove è posizionata la barra della promozione sul tuo sito, l'app è estremamente conveniente.

%d ai blogger piace questa pagina: