Più il CTA è visivamente accattivante, maggiori saranno le possibilità del tasso di conversione. Ci sono molti modi per progettare i tuoi CTA, ma in questo articolo, ti mostreremo come creare fantastici modelli di colonne CTA con immagini semitrasparenti e sovrapposizioni di colonne. Puoi trovare le immagini semitrasparenti nella cartella di download qui sotto, ma sentiti libero di usare altre immagini. Potrai anche scaricare il file JSON gratuitamente!
Andiamo.
anteprime
Prima di immergerci nel tutorial, diamo una rapida occhiata a come appare su schermi di dimensioni diverse.
Iniziamo a ricreare!
Aggiungi una nuova sezione
contesto
Inizia creando una nuova pagina o aggiungendo una nuova sezione normale a una pagina esistente. Quindi vai alle impostazioni della sezione e aggiungi uno sfondo sfumato.
- Sfondo: gradiente
- Gradiente di colore sfumato: #efefef grigio molto chiaro
- Colore di sfondo due: #ffffff bianco
- Tipo di gradiente: radiale
- Direzione radiale: centro
- Posizione iniziale: 52%
- Posizione finale: 50%
spaziatura
Passa alla scheda Progettazione e regola il riempimento nelle impostazioni di spaziatura.
- Imbottitura superiore e inferiore
- Ufficio: 0vw
- Tappezzeria In Calze
- Tablet + telefono: 70vw
Aggiungi una nuova linea
Struttura a colonne
Continua ad aggiungere una nuova riga usando la seguente struttura di colonne:
dimensionamento
Quindi regolare la larghezza e la larghezza massima della linea.
- Larghezza: 100%
- Larghezza massima 100%
Aggiungi un modulo di testo
Aggiungi H2 e contenuti testuali
È ora di aggiungere moduli! Innanzitutto, aggiungi un modulo di testo e inseriscine uno contenuto H2 e paragrafi a tua scelta.
Testo
Passa alla scheda Progettazione e applica uno stile al testo come segue:
- Testo carattere: Apri Sans
- Allineamento del testo: centro
- Colore del testo: Verde #5bba1b
- Dimensione del testo:
- Ufficio: 1.2vw
- Tablet: 2.8vw
- Telefono: 3.6vw
- Spaziatura di lettere di testo: 0.2vw
- Altezza della riga di testo: 1.8em
Titolo 2 Testo
Dopo aver disegnato il testo del paragrafo, modellare anche il testo H2.
- Sezione: H2
- H2 Peso carattere: Doppio One
- Allineamento del testo H2: al centro
- Colore del testo H2: #3d3d3d
- H2 Dimensioni testo:
- Ufficio: 4.4vw
- Tablet: 5.9vw
- Telefono: 6.9vw
spaziatura
E aggiungi una piccola imbottitura in alto.
- Riempimento superiore: 212px
Aggiungi un modulo di divisione
visibilità
Sotto il modulo di testo, aggiungi un modulo di divisione e imposta la visibilità su "Sì".
- Visibilità: si
Linea
Cambia quindi il colore del separatore.
- Colore della linea: grigio scuro #545454
dimensionamento
Ora, regola le dimensioni del separatore in modo che appaia più piccolo.
- Peso del separatore: 4px
- Larghezza: 9%
- Allineamento del modulo: centro
spaziatura
Aggiungi anche un margine superiore negativo.
- Margine superiore:
- Ufficio: -40px
- Tablet + Telefono: -15px
Aggiungi una nuova linea
Struttura a colonne
Continua aggiungendo una nuova riga con tre colonne di uguale dimensione. Questa sarà la base per la progettazione della colonna CTA.
contesto
Prima di aggiungere moduli, aggiungi una sfumatura allo sfondo dei parametri della linea.
- Sfondo: gradiente
- 1 gradiente di colore di sfondo: bianco #ffffff
- Colore di sfondo sfumato due: trasparente
- Tipo di gradiente: radiale
- Centro di governo radiale
- Posizione iniziale: 42%
- Posizione finale: 50%
dimensionamento
Ora regola la dimensione della linea.
- Larghezza: 100%
- Larghezza massima: 100%
spaziatura
Quindi vai alle impostazioni di spaziatura e aggiungi valori di riempimento personalizzati.
- rivestimento superiore: 22vw
- Imbottitura inferiore: 10vw
- Imbottitura sinistra e destra: 10vw
Impostazioni colonna 1
contesto
Continuare aprendo la colonna 1 e aggiungendo uno sfondo sfumato.
- Sfondo: gradiente
- Colore di sfondo sfumato: Blu #2a4eed
- Colore di sfondo sfumato due: azzurro #91f5f7
- Tipo di gradiente: lineare
- Direzione sfumatura: 38deg
- Posizione iniziale: 23%
confine
Quindi definire gli angoli arrotondati delle colonne nelle impostazioni del bordo.
- Angoli arrotondati: 2vw in tutti gli angoli
Scatola delle ombre
Aggiungi anche una leggera sfumatura di scatola.
- Shadow box: seconda opzione
- Ombra della scatola Posizione orizzontale: 6px
- Posizione verticale casella ombreggiata: -10px
- Box Shadow Blur Force: 50px
overflow
Assicurarsi che anche gli overflow della colonna siano visibili.
- Troppopieno orizzontale e verticale: visibile
Impostazioni colonna 2
contesto
Vai alla seconda colonna e aggiungi il seguente sfondo sfumato:
- Sfondo: gradiente
- Colore gradiente di sfondo uno: #1ba038
- Gradiente di sfondo a due colori: #c6f727
- Tipo di gradiente: lineare
- Direzione sfumatura: 38deg
- Posizione iniziale: 23%
confine
Aggiungi anche un raggio del bordo alla colonna.
- Angoli arrotondati: 2vw ai quattro angoli
Scatola delle ombre
Con una sottile tonalità di scatola.
- Shadow box: seconda opzione
- Ombra della scatola Posizione orizzontale: 6px
- Posizione verticale casella ombreggiata: -10px
- Box Shadow Blur Force: 50px
trasformatore
Questa colonna è un po 'più alta delle altre. Per creare questo effetto, regoleremo le impostazioni di conversione della trasformazione per la colonna 2.
- Trasformatore Traduci:
- Ufficio: -8vw, asse y
- Tablet + Telefono: 30vw, asse Y.
overflow
Rendi anche visibili gli overflow di questa colonna.
- Overflow orizzontali e verticali: visibili
Impostazioni colonna 3
contesto
Passiamo all'ultima e all'ultima colonna! Aggiungi uno sfondo sfumato.
- Sfondo: gradiente
- Colore di sfondo sfumato uno: #f0562c
- Gradiente di sfondo a due colori: #f1a526
- Tipo di gradiente: lineare
- Direzione sfumatura: 38deg
- Posizione iniziale: 23%
confine
Passa alla scheda Progettazione e aggiungi un raggio del bordo a ogni angolo.
- Angoli arrotondati: 2vw su tutti gli angoli.
Scatola delle ombre
Aggiungi anche un paralume.
- Shadow box: seconda opzione
- Ombra della scatola Posizione orizzontale: 6px
- Posizione verticale casella ombreggiata: -10px
- Box Shadow Blur Force: 50px
trasformatore
Su schermi di dimensioni inferiori, dovremo riposizionare la colonna utilizzando valori di conversione di trasformazione personalizzati.
- Trasformatore Traduci:
- Tablet + telefono: 60vw
overflow
Infine, regola le impostazioni di overflow.
- Overflow orizzontali e verticali: visibili
Aggiungi moduli immagine
Importa un'immagine semi-trasparente ritagliata
Dopo aver creato tutti i parametri della colonna, è il momento di aggiungere i moduli. Aggiungi un modulo immagine alla colonna 1 e carica un'immagine semitrasparente di tua scelta. Puoi trovare le immagini che abbiamo usato nella cartella zippata che sei riuscito a scaricare all'inizio di questo articolo.
dimensionamento
Rendi il modulo a tutta larghezza.
- Passa alla modalità a larghezza intera: Sì
spaziatura
Quindi aggiungere margini personalizzati e valori di riempimento.
- Margine superiore:
- Ufficio: -11vw
- Tablet + Telefono: -24vw
- Imbottitura sinistra e destra:
- Ufficio: 5vw
- Tablet + telefono: 20vw
Trasforma la scala in un hover
Aggiungiamo un sottile effetto al passaggio del mouse all'immagine utilizzando l'opzione di scala di trasformazione nelle impostazioni di trasformazione.
- Trasforma scala al passaggio del mouse: 120% su entrambi gli assi.
Z-Index
Per assicurarsi che l'immagine venga visualizzata nella parte superiore della colonna, aumentare il valore dell'indice z nella scheda Avanzate.
- Indice Z: 1
Duplica e trascina i moduli immagine
Ora clona due volte il modulo immagine e posiziona i duplicati nelle restanti due colonne. Questo processo è più semplice in modalità cablata.
- Inizia duplicando due volte il modulo immagine
- Quindi trascina i nuovi moduli immagine nelle colonne 2 e 3.
- Scarica immagini diverse
Aggiungi moduli di testo
Aggiungi contenuto H3
Sotto l'immagine nella colonna 1, aggiungi un modulo di testo e inseriscine uno contenuto H3 a tua scelta.
Titolo 3 Testo
Passa alla scheda Design e applica uno stile alle impostazioni del testo H3.
- Titolo del testo: H3
- Carattere H3: Doppio One
- H3 Peso carattere: grassetto
- Allineamento H3: al centro
- Colore testo H3: bianco #ffffff
- H3 Dimensioni testo:
- Ufficio: 1.8vw
- Tablet: 5vw
- Telefono: 6vw
Duplica e trascina i moduli di testo
Clonare il modulo di testo due volte e posizionare i duplicati nelle due colonne rimanenti.
- Inizia duplicando due volte i moduli di testo.
- Quindi trascinali sotto i moduli immagine nelle colonne 2 e 3.
- Cambiare il contenuto in ogni nuovo modulo di testo
Aggiungi moduli di testo
Aggiungi contenuto
Sotto il modulo del titolo, aggiungi un nuovo modulo di testo. Aggiungi il contenuto del paragrafo nell'area del contenuto.
Testo
Ora, disegna il testo come segue.
- Testo carattere: Apri Sans
- Colore del testo: #ffffff bianco
- Dimensione del testo:
- Ufficio: 0.6vw
- Tablet: 2vw
- Telefono: 2.8vw
- Altezza della riga di testo: 2.2em
spaziatura
Per centrare il testo, regolare la spaziatura del modulo come segue.
- Margine inferiore:
- Ufficio: 5vw
- Tablet + telefono: 10vw
- Imbottitura sinistra e destra
- Ufficio: 5vw
- Tablet + telefono: 14vw
Duplica e trascina i moduli di testo
Clonare il modulo di testo due volte e trascinare i duplicati sulle restanti due colonne.
- Inizia duplicando due volte i moduli di testo
- Quindi posizionare i duplicati nelle colonne 2 e 3
- Modifica il contenuto di ciascun duplicato
Aggiungi moduli pulsanti
Aggiungi contenuto
Andiamo all'ultimo modulo! Aggiungi un modulo pulsanti alla colonna 1 con una copia a tua scelta.
Aggiungi un collegamento
Inserire un collegamento nelle opzioni di collegamento del modulo.
allineamento
Ora allinea il modulo pulsanti.
- Allineamento: centro
Stili dei pulsanti
Quindi, chiamare il pulsante come segue.
- Dimensione del testo del pulsante:
- Ufficio: 1vw
- Tablet: 2vw
- Telefono: 3vw
- Colore testo pulsante: Blu brillante #2a4eed
- Colore di sfondo del pulsante: bianco #ffffff
- Raggio del bordo del pulsante: 50vw
- Carattere pulsante: Double One
- Peso carattere: grassetto
- Il colore dei pulsanti: Blu brillante #2a4eed
spaziatura
Modella il pulsante e crea una sovrapposizione nella parte inferiore aggiungendo margini personalizzati e valori di riempimento nelle impostazioni di spaziatura.
- Margine inferiore:
- Ufficio: -1.7vw
- Tablet: -4vw
- Telefono: -6vw
- Tappezzeria superiore e inferiore:
- Ufficio: 1vw
- Tablet + telefono: 3vw
- Imbottitura sinistra e destra
- Ufficio: 4vw
- Tablet + telefono: 10vw
Scatola delle ombre
Ultimo ma non meno importante, aggiungi una leggera sfumatura al pulsante.
- Ombra della scatola: prima opzione
- Posizione orizzontale dell'ombra della scatola: 0px
- Posizione verticale dell'ombra della scatola: 2px
- Box Shadow Blur Force: 50px
Duplica e trascina i moduli dei pulsanti
Come con i moduli precedenti, clona il pulsante due volte e posiziona i duplicati nelle restanti due colonne della linea.
- Clonare il modulo pulsanti due volte
- Posiziona i duplicati nelle colonne 2 e 3
Pulsante 2 Testo e colore dell'icona
Modificare il colore dell'icona del pulsante e del modulo pulsanti nella colonna 2.
- Colore testo pulsante: Verde # 1ba038
- Colore icona: # 1ba038
Pulsante 3 Testo e colore dell'icona
Fai la stessa cosa con il pulsante nell'ultima colonna e il gioco è fatto!
- Colore del testo dei pulsanti: Arancione #f0562c
- Colore icona: # f0562c
Per finire
In questo articolo, ti abbiamo mostrato come utilizzare immagini semitrasparenti per creare uno straordinario design della colonna CTA. Abbiamo usato le impostazioni di overflow della colonna Divi in modo che immagini e pulsanti si sovrappongano perfettamente. Prova a utilizzare questo design nel tuo prossimo progetto Divi e facci sapere come va nella sezione commenti!
