Creazione di CTA slide-in con le impostazioni di allineamento e animazione delle righe di Divi

Ogni settimana ti forniamo pacchetti di layout Divi nuovi e gratuiti che puoi utilizzare per il tuo prossimo progetto. Per uno dei pacchetti di layout, condividiamo anche un caso d'uso che ti aiuterà a portare il tuo sito Web al livello successivo. Questa settimana, come parte della nostra iniziativa di design Divi in ​​corso, ti mostreremo come creare CTA slide-in con l'allineamento delle righe di Divi e le impostazioni di animazione utilizzando il pacchetto di layout dell'impresa di pulizie.

Per aiutarti a farlo, inizieremo rimuovendo tutte le animazioni che sono già presenti. In questo modo, possiamo evidenziare gli inviti all'azione che scorrono.

Arriviamo ad esso!

Anteprima

Diamo un'occhiata ai tre diversi esempi che tratteremo in questo post:

Carica la pagina di destinazione dell'impresa di pulizie

Aggiungi nuova pagina e passa a Visual Builder

Come accennato in precedenza, utilizzeremo il pacchetto di layout dell'impresa di pulizie per creare questo tutorial, ma sentiti libero di utilizzare questo approccio per qualsiasi sito web che stai costruendo. Aggiungi una nuova pagina, inserisci il titolo della pagina e passa subito a Visual Builder.

Carica la pagina di destinazione dell'impresa di pulizie

Una volta fatto, vedrai apparire tre opzioni sullo schermo. Puoi iniziare a costruire da zero, scegliere un layout predefinito o clonare una pagina esistente. Scegli la seconda opzione.

Cerca il Pacchetto Layout Impresa di Pulizie, seleziona il layout della pagina di destinazione e caricalo sulla tua pagina.

Rimozione di tutte le impostazioni di animazione sulla pagina

Trova la sezione sulla pagina

Una volta caricato il layout sulla tua pagina, vai avanti e individua la sezione seguente.

Rimuovi animazione

Apri le sue impostazioni e rimuovi l'animazione che è già presente.

Estendi lo stile a tutte le sezioni

Per risparmiare tempo, estenderemo questo stile di animazione a tutti gli elementi di design della pagina. Inizieremo con le sezioni della nostra pagina facendo clic con il pulsante destro del mouse, selezionando "Estendi stili di animazione". Applicalo a tutte le sezioni della pagina e fai clic su "Estendi".

Estendi lo stile a tutte le righe

Ripeti gli stessi passaggi, ma applicalo a tutte le righe della pagina.

Estendi lo stile a tutti i moduli

Infine, applicalo anche a tutti i moduli della pagina.

Creazione CTA #1

Aggiungi nuova riga

Posizione

Iniziamo a creare la prima CTA slide-in! Aggiungi una nuova riga in fondo alla sezione seguente:

Struttura della colonna

Scegli la seguente struttura di colonne per la riga che hai appena aggiunto:

Allineamento delle righe

Spingeremo la riga a sinistra per aiutare a creare l'effetto di scorrimento.

• Allineamento riga: a sinistra

Dimensionamento

Ridurremo anche la larghezza della nostra riga.

• Usa larghezza personalizzata: Sì
• Larghezza personalizzata: 500 px

Spaziatura

E per eliminare lo spazio bianco non necessario, rimuovi l'imbottitura superiore e inferiore della riga.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi il modulo di invito all'azione

Aggiungi copia

Ora possiamo aggiungere il nostro modulo Call to Action! Aggiungi alcuni contenuti a tua scelta.

Aggiungi collegamento

Aggiungi un collegamento al modulo CTA successivo. Se non hai ancora un link a cui reindirizzare, puoi semplicemente inserire '#'. Senza aggiungere qualcosa a questa casella, non sarai in grado di vedere il pulsante, quindi assicurati di non lasciarlo vuoto.

Rimuovi colore di sfondo

Il modulo CTA ha per impostazione predefinita un colore di sfondo. Vai avanti e rimuovilo nelle impostazioni in background.

Copia gradiente sezione

Apri la sezione contenente lo sfondo sfumato blu. Senza modificare nulla, fai clic con il pulsante destro del mouse e copia le impostazioni.

Incolla gradiente nel modulo CTA

Incolla questo sfondo sfumato sul modulo CTA.

Impostazioni del testo del titolo

Apri di nuovo le impostazioni del modulo CTA, vai alle impostazioni del testo del titolo e apporta alcune modifiche in modo che corrispondano al pacchetto di layout:

• Carattere del titolo: Ubuntu
• Peso del carattere del titolo: grassetto
• Dimensione del testo del titolo: 24 px (desktop e tablet), 16 px (telefono)
• Altezza della riga del titolo: 1.2em

Impostazioni del corpo del testo

Modifica anche il peso del carattere del corpo.

• Peso del carattere del corpo: semi grassetto

Impostazioni dei pulsanti

Modificare le impostazioni del pulsante successivamente.

• Usa stili personalizzati per il pulsante: Sì
• Dimensione del testo del pulsante: 18px
• Colore del testo del pulsante: #557df3
• Colore di sfondo del pulsante: #FFFFFF
• Larghezza bordo pulsante: 10 px
• Colore bordo pulsante: #FFFFFF
• Raggio bordo pulsante: 0px
• Carattere del pulsante: Ubuntu
• Peso del carattere: grassetto

Spaziatura

Aumenta anche l'imbottitura del modulo.

• Imbottitura superiore: 80px
• Imbottitura inferiore: 80 px
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Frontiera

Quindi, aggiungi un raggio di bordo in alto a destra e in basso a destra nelle impostazioni del bordo.

• In alto a destra: 100 px
• In basso a destra: 100 px

Scatola ombra

Per creare più profondità, aggiungeremo una sottile ombra a scatola.

• Intensità della sfocatura dell'ombra della scatola: 71 px
• Forza di diffusione dell'ombra della scatola: -5px

Animazione

Ultimo ma non meno importante, dai al tuo modulo CTA un effetto di animazione.

• Direzione dell'animazione: destra
• Intensità animazione: 100%
• Opacità iniziale dell'animazione: 100%
• Curva di velocità di animazione: lineare

Creazione CTA #2

Clona la riga n. 1 dell'invito all'azione e apporta modifiche

Clona riga

Per creare il secondo esempio, vai avanti e clona la prima riga.

Trascina nella sezione

Scorri la pagina e posiziona il duplicato proprio qui:

Rimuovi l'imbottitura superiore della sezione

Apri le impostazioni della sezione in cui hai inserito la riga e rimuovi l'imbottitura superiore.

• Imbottitura superiore: 0px

Rimuovi raggio bordo superiore sinistro della sezione

Vai alle impostazioni del bordo e rimuovi anche il raggio del bordo in alto a sinistra.

Rimuovi raggio bordo superiore destro CTA

Quindi, apri il modulo CTA e rimuovi il raggio del bordo in alto a destra per consentire alla sezione e al modulo di fondersi.

Cambia animazione

Per questo invito all'azione a scorrimento, utilizzeremo un'animazione diversa. Sentiti libero di giocare anche con altre opzioni di animazione.

• Direzione dell'animazione: Centro
• Opacità iniziale dell'animazione: 100%
• Curva di velocità di animazione: lineare

Creazione CTA #3

Clona la riga n. 1 dell'invito all'azione e apporta modifiche

Clona riga

Per creare l'ultimo esempio, cloneremo ancora una volta la riga.

Trascina nella sezione

Posiziona il duplicato nella sezione seguente:

Modifica allineamento righe

Apri le impostazioni di riga del modulo e modifica l'allineamento a destra.

• Allineamento riga: a destra

Rimuovi sfondo sfumato CTA

Rimuovi anche lo sfondo sfumato del modulo.

Usa invece il colore di sfondo

Usa invece un colore di sfondo.

• Colore di sfondo: #f2835a

Cambia il colore del testo del pulsante

Per abbinare il colore di sfondo, cambia anche il colore del testo del pulsante.

• Colore del testo del pulsante: #f2835a

Rimuovi raggio bordo invito all'azione

Stiamo trasformando il modulo CTA in un quadrato rimuovendo tutto il raggio di confine che gli è stato assegnato.

Cambia animazione

Modifica le impostazioni dell'animazione in seguito.

• Direzione animazione: Giù
• Intensità animazione: 100%
• Opacità iniziale dell'animazione: 100%
• Curva di velocità di animazione: lineare

Rimuovi l'imbottitura inferiore della sezione

Ultimo ma non meno importante, spingeremo il modulo in fondo alla sezione rimuovendo l'imbottitura inferiore della sezione in cui è posizionato e il gioco è fatto!

• Imbottitura inferiore: 0px

Anteprima

Diamo un'ultima occhiata ai tre esempi di CTA slide-in che abbiamo creato.

Pensieri finali

In questo post, ti abbiamo mostrato come creare CTA slide-in utilizzando Divi's Cleaning Company Layout Pack. Abbiamo iniziato rimuovendo le animazioni già presenti nella pagina. Successivamente, abbiamo creato tre CTA slide-in per attirare l'attenzione. Questo post sul blog fa parte della nostra iniziativa di design Divi in ​​cui ogni settimana cerchiamo di inserire qualcosa nella tua cassetta degli attrezzi di progettazione. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!