Come creare un CTA unico con il motivo di sfondo e le opzioni della maschera di Divi

Il nuovo motivo di sfondo e le opzioni di maschera di Divi semplificano la creazione di sezioni di invito all'azione (CTA) accattivanti e uniche sul tuo sito web. Puoi combinare immagini, sfumature, motivi e maschere con molte opzioni di personalizzazione per creare sfondi unici che attireranno l'attenzione dei tuoi visitatori.

In questo tutorial, ti mostreremo come creare una sezione CTA unica con il nuovo motivo di sfondo e le opzioni della maschera di Divi.

Iniziamo!

Sbirciata

Ecco un'anteprima della sezione CTA che progetteremo in questo tutorial.

Cosa ti serve per iniziare

Prima di iniziare, installa e attiva il tema Divi e assicurati di avere l'ultima versione di Divi sul tuo sito web.

Entriamo.

Come creare un CTA unico con il motivo di sfondo e le opzioni della maschera di Divi

Crea una nuova pagina con un layout predefinito

Per il nostro tutorial, utilizzeremo un layout predefinito dalla libreria Divi. Per questo design, utilizzeremo la pagina di destinazione della gelateria dal pacchetto di layout della gelateria.

Crea una nuova pagina, aggiungi un titolo, quindi seleziona l'opzione Usa Divi Builder.

Utilizzeremo un layout predefinito dalla libreria Divi per questo esempio, quindi seleziona Sfoglia layout.

Cerca e seleziona il layout della pagina di destinazione della gelateria.

Seleziona Usa questo layout per aggiungere il layout alla tua pagina.

Ora siamo pronti per costruire il nostro design.

Modifica del layout per il motivo di sfondo e la maschera

Modificheremo il sapore della sezione CTA del mese da questo layout. Apportiamo alcune modifiche al nostro layout per il motivo di sfondo e il design della maschera.

Impostazioni di riga

Apri Impostazioni riga, quindi seleziona Design.

In Ridimensionamento equalizzare le altezze delle colonne.

• Equalizza le altezze delle colonne: Sì

In Spaziatura, rimuovere l'imbottitura superiore per portare il cono in cima alla sezione.

• Imbottitura superiore: 0px

Impostazioni della colonna 1

Nella scheda Contenuto per le impostazioni della riga, seleziona le impostazioni della Colonna 1. In Sfondo, elimina lo sfondo arancione.

Impostazioni della colonna 2

Ora, seleziona le impostazioni della Colonna 2. Il design originale ha una spaziatura che non ci serve, quindi liberiamocene. In Design, vai a Spaziatura ed elimina il riempimento superiore.

Quindi seleziona Avanzate e aggiungi il seguente CSS personalizzato all'elemento principale in modo che il nostro testo "sapore del mese" sia centrato verticalmente.

margin:auto;

Impostazioni della sezione

Apri la sezione Impostazioni. In Design, seleziona Padding. Regola l'imbottitura della sezione in modo che il cono superiore si allinei alla parte superiore della pagina.

• Imbottitura: 0px

Aggiunta di un motivo di sfondo e di una maschera alla sezione CTA

Ora che il nostro layout è stato modificato, possiamo aggiungere il nostro motivo di sfondo e la maschera. Ci sono infinite opzioni per motivi di sfondo e maschere con le nuove opzioni di Divi, il che significa che puoi creare design unici per la tua sezione CTA con pochi clic. Segui insieme per imparare come progettare uno sfondo accattivante con queste impostazioni.

Impostazioni colore di sfondo, motivo e maschera

Passa alle impostazioni dello sfondo della sezione.

Sotto la scheda del colore, aggiungi uno sfondo arancione

• Colore: #FFA256

Nella scheda Motivo, imposta la forma e il colore del motivo.

• Forma: coriandoli
• Colore: #FF7D14

Ora aggiungiamo la maschera. Seleziona la scheda maschera, quindi aggiungi le impostazioni come segue:

• Forma: Blob d'angolo
• Colore maschera: #FFFFFF
• Trasformazione maschera: orizzontale
• Proporzioni maschera: paesaggio
• Dimensione maschera: copertina

Regolazioni di progettazione

Ora che il nostro background è a posto, apportiamo alcune modifiche finali al design.

Apri le impostazioni del pulsante "Acquista" e modifica l'allineamento nella scheda Design.

• Allineamento pulsanti: sinistra

Modifica il colore di sfondo dello stato al passaggio del mouse per il pulsante "Acquista" in modo che risalti sullo sfondo arancione.

• Sfondo del pulsante al passaggio del mouse: #FF7D14

Regoleremo anche il layout delle righe per aggiungere più spazio tra lo sfondo arancione e la sezione "Sapore del mese" sulla destra. Modificare il layout da 1:1 a 3:2.

E ora il design del desktop è completo e hai imparato come creare una sezione CTA unica con il motivo di sfondo e le opzioni di maschera di Divi!

Rendere reattiva la sezione CTA

Quando la nostra sezione CTA viene visualizzata su un telefono o tablet, il contenuto nella colonna 2 viene impilato sotto la colonna 1. Ciò può causare alcuni problemi di leggibilità con il nostro design. Apportiamo alcune modifiche per ottimizzare i nostri contenuti e il design per schermi più piccoli utilizzando le impostazioni reattive integrate di Divi.

Dal momento che vogliamo che il testo venga prima dei pulsanti, copia il testo "Evidenzia sapore del mese" nel modulo di testo "Cioccolato all'arancia di luglio". Assicurati di aggiungere questo testo solo alle versioni per telefono e tablet.

• Cambia il testo "Cioccolato all'arancia" in H3.

Successivamente, apporteremo alcune modifiche al testo in modo che risalti su questo sfondo. Vai alla scheda Design e apporta le seguenti modifiche:

• Colore testo H2 (telefono e tablet): #000000
• Dimensioni testo H2 (telefono e tablet): 30px
• Colore testo H3 (telefono e tablet): #000000
• Colore testo H4 (telefono e tablet): #000000

Ora vai alle impostazioni del modulo di testo originale "Flavor of the Month" e modifica la visibilità in modo che sia visibile solo sui dispositivi desktop. Ciò farà nascondere il modulo di testo originale sui dispositivi più piccoli. Il testo Sapore del mese apparirà sopra il pulsante, con l'altro testo sulla pagina.

• Disattiva su: Telefono e Tablet

Quindi, apri le impostazioni della riga, quindi apri le impostazioni della colonna 1. Rimuovere l'imbottitura destra e sinistra.

• Imbottitura destra: 0px
• Imbottitura sinistra: 0px

Vai alle impostazioni della sezione, quindi Sfondo, quindi modifica le impostazioni della maschera

• Trasformazione maschera: inverti
• Proporzioni maschera: Ritratto

E ora hai creato una sezione CTA completamente reattiva con uno sfondo unico grazie alle opzioni Motivo di sfondo e Maschera di Divi.

Risultato finale

Diamo un'occhiata al risultato finale.

Pensieri finali

Progettare una sezione di invito all'azione unica e accattivante è molto semplice, grazie al potente motivo di sfondo e alle opzioni di maschera di Divi. Scatena la tua creatività sperimentando diversi colori, motivi, maschere e combinazioni di ambientazioni. È facile da progettare e puoi regolare le impostazioni fino a trovare l'aspetto perfetto con pochi clic. Soprattutto, è integrato direttamente in Divi! Non è più necessario progettare grafica di sfondo in un altro programma. Puoi applicare le impostazioni di sfondo ad altre sezioni, righe e moduli per design ancora più unici. Se vuoi saperne di più sul motivo di sfondo e sulle funzioni della maschera di Divi, dai un'occhiata al nostro tutorial per una sezione dell'eroe con maschere e motivi di sfondo e impara come combinare il generatore di sfumature di Divi con maschere e motivi di sfondo.

Come hai utilizzato il motivo di sfondo e le opzioni della maschera di Divi sul tuo sito web? Facci sapere cosa hai creato nei commenti qui sotto!