Scarica un banner di vendita multiuso GRATUITO per Divi
Pubblicato: 2018-11-18Avere un banner di vendita multiuso sarà sicuramente utile (e ti farà risparmiare tempo) durante quei periodi cruciali dell'anno in cui le promozioni sono di gran moda. Ecco perché offriamo questo banner di vendita multiuso per Divi come download GRATUITO! Questo banner di vendita può essere facilmente personalizzato per soddisfare le tue esigenze con solo alcune modifiche di testo e un'immagine di sfondo. Progettare il banner di vendita in Divi è abbastanza facile da non doverti accontentare di banner di immagine che spesso appaiono un po' sgranati sul web. Quindi, oltre al download gratuito, ti mostrerò come progettare da zero il banner di vendita in Divi.
Iniziamo!
Cosa è incluso
Ecco una sbirciatina al design del banner di vendita incluso nel download.
Scarica GRATUITAMENTE il design del banner di vendita
Per mettere le mani sul design del banner di vendita gratuitamente, dovrai prima scaricarli 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 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!
Caricamento del layout nella libreria Divi
Dopo aver scaricato il file, decomprimilo. Scoprirai che contiene un file chiamato "sales-banner-design.json". Questo è ciò che caricherai nella tua libreria Divi. Ora vai alla dashboard di wordpress e vai a Divi> Libreria Divi. Quindi fai clic sul pulsante di importazione nella parte superiore della pagina. Dalla finestra popup della portabilità, seleziona la scheda Importa e scegli il file sales-banner-design.json. Quindi fare clic sul pulsante Importa layout Divi Builder.
Ora per importare il layout nella tua pagina, crea semplicemente una nuova pagina e distribuisci il visual builder. Quindi seleziona "Scegli un layout predefinito". Dal popup di caricamento dalla libreria, seleziona la scheda "I tuoi layout salvati" e quindi fai clic sul layout Sales Banner Design dall'elenco. Questo è tutto!
Come creare il banner di vendita da zero in Divi
Aggiunta dello sfondo della sezione
Per iniziare, crea una nuova pagina. Dopo aver assegnato un titolo alla tua pagina, distribuisci il visual builder e seleziona l'opzione "Crea da zero". Quindi aggiungi una nuova sezione con una riga di una colonna.
Prima di iniziare ad aggiungere qualsiasi modulo alla riga, dai alla tua sezione un colore sfumato di sfondo (Il colore non ha importanza a questo punto. Abbiamo solo bisogno di un colore di sfondo per vedere tutti gli elementi di design bianchi che utilizzeremo per le nostre vendite bandiera.)
Personalizzazione delle righe per il banner di vendita
Prima di aggiungere i nostri moduli alla riga, diamo alla nostra riga una larghezza personalizzata di 700 px ed eliminiamo qualsiasi spaziatura superiore o inferiore in modo che la nostra riga si posizionerà bene sopra l'altra riga che aggiungeremo sotto. Vai alle impostazioni della riga e aggiorna quanto segue:
Larghezza personalizzata: 700 px
Larghezza grondaia: 1
Margine personalizzato: 0px in alto, 0px, in basso
Imbottitura personalizzata: 0px in alto, 0px in basso
Ora duplica la riga due volte in modo da avere un totale di tre righe identiche. Questi saranno usati per costruire il nostro banner di vendita.
Aggiunta della cornice del bordo superiore con testo adiacente
Per costruire il nostro banner di vendita, iniziamo con un bordo superiore con del testo a sinistra. Per fare ciò utilizzeremo un modulo divisore e un modulo testo. Innanzitutto, crea un nuovo modulo di testo e aggiungi alcune parole di contenuto nella casella del contenuto.
Contenuto: "Solo online"
Passa alla scheda Progettazione e aggiorna quanto segue:
Peso del carattere del testo: grassetto
Stile del carattere del testo: TT
Colore del testo del testo: rgba (255,255,255,0.9)
Dimensione del testo del testo: 15px
Spaziatura delle lettere del testo: 2px
Altezza riga di testo: 1em
Larghezza: 22% (desktop), 25% (tablet), 40% (smartphone)
Allineamento del modulo: a sinistra
Margine personalizzato: 0px in alto, -15px in basso
Imbottitura personalizzata: 0px in alto, 0px in basso
Questo margine personalizzato è un po' prematuro poiché il nostro divisore non è stato ancora aggiunto, ma è necessario allineare il testo in modo che sia perfettamente adiacente al divisore da aggiungere presto.
Ora aggiungi un modulo divisore sotto il modulo di testo nella stessa riga. Quindi aggiorna le impostazioni del divisore come segue:
Colore: RGB (255,255,255,0.9)
Posizione del divisore: in basso
Peso del divisore: 15px
Altezza: 15px
Larghezza: 78% (desktop), 75% (tablet), 60% (smartphone)
Allineamento del modulo: a destra
Margine personalizzato: 0px in alto, 0px in basso
Imbottitura personalizzata: 0px in alto, 0px in basso
Ovviamente, dovrai regolare la larghezza del bordo in base alla larghezza del modulo di testo quando personalizzi il design per le tue esigenze.
Quindi dobbiamo aggiungere un altro modulo divisore per collegare il nostro divisore al bordo destro della riga che progetteremo in seguito.
A tal fine, duplica il modulo divisore e aggiorna quanto segue:
Larghezza: 15px
Margine personalizzato: -1px in basso
Aggiunta della cornice del bordo inferiore con testo adiacente
Per creare la cornice del bordo inferiore, possiamo usare lo stesso elemento che abbiamo creato nella cornice del bordo superiore della nostra riga superiore. Solo che questa volta inizieremo con il modulo divisore largo 15px. Vai avanti e copia il modulo divisore 15px e incollalo nella terza riga (in basso). Quindi aggiorna l'allineamento del modulo a sinistra anziché a destra.
Quindi, copia il modulo divisore più lungo dalla riga superiore e incollalo sotto il divisore 15px nella riga inferiore. Quindi regolare quanto segue:
Larghezza: 75% (desktop), 70% (tablet), 50% (smartphone)
Allineamento del modulo: a sinistra
Infine, copia il modulo di testo nella riga superiore e incolla sotto i due moduli divisori nella riga inferiore. Quindi aggiorna quanto segue:
Contenuto: "Inizia il 1 novembre"
Larghezza: 25% (desktop), 30% (tablet), 50% (smartphone)
Allineamento del modulo: a destra
Margine personalizzato: -15px in alto, 0px in basso
Imbottitura personalizzata: 15px a sinistra
Aggiunta dei moduli di testo alla riga centrale
Ora siamo pronti per iniziare ad aggiungere i moduli di testo alla nostra riga centrale che conterrà il nostro testo principale del banner di vendita. Impileremo tre moduli di testo uno sopra l'altro. Vai avanti e aggiungi il primo modulo di testo alla riga centrale.
Quindi aggiorna quanto segue:
Contenuto: "Tutto il 20% di sconto"
Colore di sfondo: rgba (255,255,255,0.9)
Peso del carattere del testo: semi grassetto
Stile del carattere del testo: TT
Colore del testo del testo: #000000
Dimensione del testo del testo: 34 px (desktop), 20 px (smartphone)
Spaziatura delle lettere del testo: 2px
Altezza riga di testo: 1em
Orientamento del testo: al centro
Imbottitura personalizzata: 2vw in alto, 2vw in basso, 5vw a sinistra, 5vw a destra
Dare al testo un colore nero su uno sfondo bianco è essenziale per massimizzare l'effetto della modalità di fusione dello schermo che consentirà al testo di fondersi con lo sfondo della sezione. Aggiungeremo la modalità di fusione dello schermo alla riga un po' più tardi.
Ora duplica il modulo di testo per avviare il design del modulo di testo successivo. Quindi aggiorna il contenuto con il seguente html:
<h2 style="border: 7px solid #000000;">Fall Sale</h2>
Lo stile in linea aggiunge semplicemente un bordo nero attorno al testo dell'intestazione. Ancora una volta, il colore nero funzionerà con la modalità di fusione dello schermo per esporre lo sfondo della sezione con il testo.
Quindi aggiorna quanto segue:
Intestazione 2 Peso del carattere: grassetto
Stile carattere titolo 2: TT
Colore testo titolo 2: #000000
Titolo 2: Dimensione testo: 100 px (desktop), 80 px (tablet), 60 px (smartphone)
Intestazione 2 Spaziatura lettere: 2px
Margine personalizzato: 0px in alto
Imbottitura personalizzata: 0px in alto, 0px in basso
Per l'ultimo modulo di testo, duplica il primo modulo di testo in questa riga centrale e incollalo sotto il secondo modulo di testo.
Quindi aggiorna quanto segue:
Contenuto: "Acquista ora"
Stile del carattere del testo: TT, U (sottolineato)
Margine personalizzato: 0px in alto
Imbottitura personalizzata: 1vw in alto, 2vw in basso
Disegnare la riga centrale
La fase finale di questo progetto consiste nell'aggiungere un bordo alla riga centrale e un effetto di modalità di fusione dello schermo. Per fare ciò, apri le impostazioni della riga centrale e aggiorna quanto segue:
Imbottitura personalizzata: 15px a sinistra, 15px a destra
Larghezza bordo destro: 15 px
Colore bordo destro: rgba (255,255,255,0.9)
Larghezza bordo sinistro: 15 px
Colore bordo sinistro: rgba (255,255,255,0.9)
Modalità di fusione: schermo
La modalità di fusione dello schermo consente al testo di fondere l'immagine di sfondo da mostrare attraverso il testo per un effetto fantastico!
Controlla il risultato finale.
Aggiunta di un collegamento al tuo banner di vendita
Poiché si tratta di un banner di vendita, vorrai massimizzare lo spazio cliccabile sul banner per aumentare le conversioni. Per fare ciò, puoi aggiungere un collegamento all'intera riga centrale. Apri semplicemente le impostazioni della riga centrale e inserisci un URL di collegamento della riga per reindirizzare alla pagina desiderata.
Aggiunta di sfondi di sezioni differenti per design unici
Con questo nuovo design del banner di vendita, puoi facilmente aggiornare l'immagine di sfondo per creare design unici.
Ecco alcuni esempi.
Pensieri finali
Spero che questo design di banner di vendita sia utile per tutte quelle promozioni web necessarie durante tutto l'anno. Il design è progettato per fungere da banner di vendita multiuso che può essere facilmente aggiornato con nuovi testi e immagini di sfondo delle sezioni per un look completamente nuovo. Puoi anche aggiungere uno sfondo video!
Non vedo l'ora di sentirti nei commenti.
Saluti!