Costruire banner reattivi con le nuove opzioni di sfondo di Divi

Nel mio ultimo post, ti ho mostrato come modellare i pulsanti utilizzando l'interfaccia delle opzioni di sfondo di Divi sovrapponendo il modulo pulsante su sfondi di colonne e righe. Oggi ti mostrerò come progettare banner cliccabili reattivi utilizzando l'interfaccia delle opzioni di sfondo di Divi.

Utilizzeremo le stesse tecniche utilizzate per gli sfondi dei pulsanti con alcune modifiche minori. Fondamentalmente ti mostrerò come creare pulsanti davvero grandi e disegnarli un po' più come banner. Il fattore importante qui è che l'intera superficie del banner rimane cliccabile. Tuttavia, dovresti sapere fin dall'inizio che possiamo realizzare solo semplici banner usando questo metodo. Poiché siamo limitati dall'input di testo del modulo pulsante, possiamo creare solo banner con una stringa di testo. Tuttavia, utilizzando le opzioni di sfondo della colonna, possiamo creare banner dall'aspetto piuttosto interessante in pochissimo tempo utilizzando Visual Builder.

Banner HTML e banner immagine

Ci sono molti vantaggi nell'usare banner html (banner creati usando elementi html) rispetto ai banner immagine (banner costruiti come una singola immagine senza elementi html). Per i banner html, il testo viene riconosciuto dai browser web (essenziale per traduttori di pagine e screen reader). Si adattano alle dimensioni delle finestre del browser in modo che appaiano sempre nitidi, a differenza delle immagini che possono risultare distorte o illeggibili. E forse il mio aspetto preferito dell'utilizzo di banner html su banner di immagini è che l'html è davvero facile da cambiare. Posso cambiare il testo con pochi tasti invece di cercare nelle profondità del mio disco rigido un file originale che dovrò modificare in un editor di foto. E posso creare rapidamente un'altra versione del banner per eseguire un test diviso utilizzando Divi Leads.

Questo metodo per trasformare i pulsanti in banner apre le porte ad alcune utili applicazioni come la creazione di un post, una categoria o una serie personalizzata in primo piano per il tuo blog (o podcast).

Iniziamo.

Sbirciata

Prima di essere ufficialmente espulsi. Ecco un'anteprima dei banner che costruiremo in questo post.

Implementazione del design con Divi

Iscriviti al nostro canale Youtube

Esempio n. 1: logo banner

Utilizzando Visual Builder, aggiungi una sezione regolare con una colonna e una riga.

Quindi aggiungi un modulo pulsante alla riga.

Quindi aggiornare le impostazioni del modulo pulsanti come segue:

Opzioni di contenuto

Testo del pulsante: [inserisci il testo che desideri utilizzare per il tuo messaggio banner]
URL pulsante: [inserisci URL]

Opzioni di progettazione

Allineamento dei pulsanti: Centro
Colore del testo: chiaro
Usa stili personalizzati per il pulsante: S
Dimensione del testo del pulsante: 32 px
Larghezza bordo pulsante: 0px
Carattere pulsante: Arvo
Icona pulsante: [aggiungi icona. Sto usando l'icona del cursore]
Mostra solo l'icona al passaggio del mouse per il pulsante: NO

Opzioni avanzate

Dobbiamo impostare la larghezza del pulsante al 100% per riempire la larghezza della colonna. Abbiamo anche bisogno di espandere l'altezza del nostro pulsante per fornire spazio sufficiente per il nostro contenuto del banner. Per fare ciò, inserisci il seguente CSS personalizzato nella casella Elemento principale:

 Width: 100%;
padding: 20px 0 200px; 

Nota : il riempimento personalizzato qui è la chiave per regolare la posizione in cui si desidera visualizzare il testo del banner. Poiché l'allineamento del pulsante è già centrato, tutto ciò che devo fare è regolare il testo verticalmente. Pertanto, dando al testo del pulsante un'imbottitura più corta nella parte superiore e una più lunga nella parte inferiore, il testo verrà regolato verso la parte superiore del banner.

Salva le impostazioni

Le cose sono ancora tutte bianche e invisibili in questo momento, ma va bene così. Aggiungeremo uno sfondo per il modulo pulsante all'interno delle impostazioni di riga e colonna.

Vai alle Impostazioni riga in cui si trova il modulo pulsante e aggiorna quanto segue:

Opzioni di contenuto

Nella scheda immagine di sfondo

Immagine di sfondo: [inserisci immagine]
Posizione immagine di sfondo: [usa questa opzione per regolare l'immagine per il tuo banner. Volevo che la parte inferiore della mia immagine venisse mostrata, quindi ho selezionato "Bottom Center".]

Ora scorri un po' verso il basso per aggiornare le opzioni di sfondo della colonna 1.

Selezionare la scheda Gradiente sfondo colonna 1 e quindi fare clic sul pulsante circolare grigio con un simbolo più bianco.

Aggiorna quanto segue:

Colori sfumati di sfondo: rgba (131,0,233,0.92), rgba (0,0,0,0.69)
Direzione gradiente colonna: 180 gradi
Posizione di partenza della colonna: 50%
Posizione di fine colonna: 0%

Salva le impostazioni

Quindi aggiungeremo un logo al banner. Fare clic sulla scheda Immagine di sfondo e aggiornare quanto segue:

Sfondo della colonna 1 Dimensioni dell'immagine: Dimensioni reali (il mio logo è un 120 x 120 png)

Colonna 1 Posizione immagine di sfondo: Centro

Questo è tutto. Ora hai un semplice banner cliccabile e reattivo. Puoi utilizzare le impostazioni del modulo pulsanti per aggiungere gli effetti al passaggio del mouse che desideri per rendere il banner eccezionale.

Facciamo un altro esempio.

Esempio n. 2: banner di testo semplice

Per questo prossimo banner, duplichiamo l'intera sezione che contiene il primo banner che hai appena progettato. Ciò farà risparmiare un po' di tempo per la configurazione.

Quindi vai alle impostazioni della riga e aggiorna quanto segue:

Opzioni di contenuto

Immagine di sfondo: [inserisci nuova immagine]
Posizione immagine di sfondo: Centro
Colori sfumati di sfondo della colonna 1: rgba (0,0,0,0.41), rgba (12,113,195,0.66)
Direzione del gradiente della colonna: 270 gradi

Quindi fare clic sulla scheda dell'immagine di sfondo della colonna 1 ed eliminare l'immagine/logo.

Salva le impostazioni

Vai alle Impostazioni modulo pulsanti e aggiorna quanto segue:

Opzioni di contenuto

Testo del pulsante: [inserisci il testo per il tuo banner]
URL pulsante: [inserisci l'URL per il banner]

Opzioni di progettazione

Dimensione del testo del pulsante: 42px
Larghezza bordo pulsante: 19 px
Colore bordo pulsante: rgba(0,0,0,0.17)
Spaziatura delle lettere dei pulsanti: 8px
Carattere pulsante: Montserrat, grassetto (B)
Icona del pulsante Aggiungi: NO
Colore bordo al passaggio del mouse del pulsante: rgba(0,0,0,0.46)
Raggio del bordo al passaggio del mouse del pulsante: 0px
Spaziatura delle lettere al passaggio del mouse del pulsante: 12px

Come puoi vedere, questo banner di esempio ha un effetto hover unico che cambia il colore del bordo e aumenta la spaziatura delle lettere:

Come rendere il tuo banner a tutta larghezza

Per rendere questo banner a tutta larghezza, tutto ciò che devi fare è aggiornare le impostazioni della sezione nella scheda Design come segue:

Imbottitura personalizzata: 0px in alto, 0px a destra, 0px in basso, 0px a sinistra

Salva le impostazioni

Ora vai alle Impostazioni riga e aggiorna le opzioni di progettazione come segue:

Rendi questa riga a larghezza intera: S
Usa larghezza grondaia personalizzata: S
Larghezza grondaia: 1

Ora il banner si estende per l'intera larghezza dello schermo su tutti i dispositivi.

Come fare uno striscione appiccicoso

Se lo desideri, puoi facilmente fissare questo banner (appiccicoso) e fissarlo nella parte superiore della finestra del browser. Suggerirei di diminuire l'imbottitura per renderla molto più corta in modo che non blocchi troppo la finestra.

Per diminuire l'altezza, vai alle Impostazioni modulo pulsante nella scheda Avanzate e aggiungi il seguente CSS nella casella Elemento principale :

padding: 0px 0px !important;

Ora per rendere permanente l'intera sezione, vai alle Impostazioni della sezione e aggiorna la scheda Avanzate Opzioni con il seguente CSS personalizzato nella casella Elemento principale :

position: fixed;
top: 0;
width: 100%;
z-index: 9999;

Ora l'intera sezione si attaccherà alla parte superiore della pagina e rimarrà lì quando si scorre la pagina verso il basso.

Questo tipo di banner funzionerebbe bene per gli articoli promozionali su una pagina di destinazione senza barra di navigazione, poiché il banner appiccicoso finirebbe per nascondere la barra di navigazione.

Aggiunta di banner a layout di più colonne

Puoi anche creare banner su una struttura di righe a più colonne. Questo sarebbe utile se volessi mettere in evidenza alcuni elementi nella parte inferiore della tua pagina o del tuo blog.

Diamo un colpo.

Aggiungi un'altra sezione regolare con una struttura di righe di 1/2 1/2 colonne.

Per motivi di tempo, vai avanti e copia o duplica un modulo pulsante che abbiamo appena creato e incollalo o trascinalo nella prima colonna.

Per ottenere il design dello sfondo del banner, utilizzeremo gli sfondi delle colonne nelle Impostazioni riga. Vai alle Impostazioni riga e aggiorna quanto segue:

Opzioni di contenuto

Sotto la scheda Immagine di sfondo

Colonna 1: Sfondo: [inserisci l'immagine di sfondo]
Colonna 1 Posizione immagine di sfondo: [regola la posizione dell'immagine a tuo piacimento]
Colonna 1 Immagine di sfondo Miscela: Moltiplica

Sotto la scheda Sfumatura di sfondo

Colori sfumati della colonna 1: rgba (255,255,255,0), #e02b20
Colonna 1 Direzione gradiente: 180 gradi
Colonna 1 Posizione iniziale: 70%
Posizione finale della colonna 1: 0%

L'ultimo passaggio consiste nell'aggiornare le impostazioni del modulo pulsanti :

Opzioni di contenuto

Testo del pulsante: serie da viaggio

Opzioni di progettazione

Dimensione del testo del pulsante: 32 px
Larghezza bordo pulsante: 2px
Spaziatura lettere pulsanti: 0px
Colore bordo al passaggio del mouse del pulsante: #edf000
Spaziatura delle lettere al passaggio del mouse del pulsante: 0px

Opzioni avanzate

CSS personalizzato nella casella Elemento principale:

padding: 350px 0px 50px;
width: 100%;

Questo CSS personalizzato regola il riempimento del modulo Button in modo che il testo si trovi in ​​basso appena dietro il gradiente di sfondo.

Sentiti libero di duplicare questo processo per il banner nella colonna successiva e aggiorna il contenuto come preferisci.

Controlla il risultato.

Nota : non utilizzerei l'altezza della colonna equalizza quando si utilizza questa funzionalità. La colonna si estenderà oltre il modulo pulsante. Se vuoi che le altezze del banner corrispondano perfettamente, potresti dover giocare con l'imbottitura sul modulo dei pulsanti per farlo bene.

Reattivo?

Sì. Poiché i pulsanti sono costruiti all'interno della struttura a colonne di Divi, i pulsanti risponderanno bene su tutti i dispositivi. Per i banner orizzontali, starei attento al posizionamento del tuo logo e del tuo testo poiché potrebbero sovrapporsi sui dispositivi mobili.

Ecco un esempio di come appaiono quando si ridimensionano a dimensioni dello schermo più piccole:

Compatibilità browser

Attualmente, la proprietà CSS in modalità blending in background non è supportata da Internet Explorer o Edge e Safari ha opzioni di fusione limitate. Tuttavia il fallback non è considerevole nella mia esperienza per la maggior parte dei casi.

Pensieri finali

Spero che ti sia piaciuto questo piccolo ma utile trucco di design per creare banner reattivi. Finché comprendi le limitazioni coinvolte e mantieni le cose semplici, puoi creare dei banner piuttosto interessanti. Inoltre, questa soluzione è sia facilmente implementabile che rapidamente personalizzata.

E sono sicuro che ci sono altre applicazioni utili per questo. Aspetto le vostre idee nei commenti.

Saluti!