Come creare un popup ad angolo del modulo di contatto fisso con le opzioni di dimensionamento 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 aggiungere un popup d'angolo del modulo di contatto fisso alla tua pagina utilizzando le opzioni di dimensionamento di Divi. Questo approccio ti aiuterà a impostare un modulo di contatto che segue i visitatori durante la loro permanenza sul tuo sito Web, senza la necessità di un plug-in aggiuntivo!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

1. Carica la pagina di destinazione del pacchetto di layout del chiropratico

Aggiungi nuova pagina

Inizia creando una nuova pagina. Dopo aver nominato la pagina e averla pubblicata, passa a Visual Builder.

Carica la pagina di destinazione del pacchetto di layout del chiropratico

Carica successivamente la pagina di destinazione del pacchetto di layout del chiropratico. Sebbene utilizzeremo questo layout specifico, puoi far funzionare la tecnica su qualsiasi pagina su cui stai lavorando.

2. Iniziamo a ricreare!

Aggiungi nuova sezione in fondo alla pagina

Dedicheremo una sezione completamente nuova al modulo di contatto fisso pop-up al clic. Aggiungi questa sezione in fondo alla pagina.

Colore di sfondo

Apri le impostazioni della sezione e usa un colore di sfondo completamente trasparente. Più avanti in questo post, correggeremo l'intera sezione. L'utilizzo di un colore di sfondo trasparente assicurerà che tutto ciò che appare sotto il contenitore della sezione venga visualizzato.

• Colore di sfondo: rgba (255,255,255,0)

Dimensionamento

Passa alla scheda Design e modifica la larghezza della sezione su diverse dimensioni dello schermo.

• Larghezza: 37% (Desktop), 95% (Tablet), 100% (Telefono)
• Allineamento della sezione: a destra

Spaziatura

Successivamente, rimuovi l'imbottitura superiore predefinita.

• Imbottitura superiore: 0px

Classe CSS

Dovremo anche dare alla nostra nuova sezione una classe CSS personalizzata. Più avanti nel post, useremo questa classe CSS per aggiungere del codice JQuery e CSS.

• Classe CSS: section-open

Indice Z predefinito

Per assicurarci che la sezione appaia in cima a tutto il contenuto della pagina, aumenteremo l'indice della sezione z nelle impostazioni di visibilità.

• Indice Z: 99

Indice Z al passaggio del mouse

Aggiungi anche lo stesso valore dell'indice z al passaggio del mouse.

• Indice Z: 99

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Aggiungi modulo Blurb

Lascia le caselle dei contenuti vuote

Il primo e unico modulo di cui abbiamo bisogno in questa riga è un modulo Blurb. Assicurati di lasciare vuote le caselle del titolo e del contenuto.

Seleziona icona

Seleziona un'icona successiva.

Colore di sfondo

Cambia anche il colore di sfondo del blurb.

• Colore di sfondo: #FFFFFF

Impostazioni icona

Passa alla scheda Design e applica le seguenti impostazioni dell'icona:

• Colore icona: #ff5f24
• Posizionamento delle icone: in alto
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 46 px (desktop), 30 px (tablet), 25 px (telefono)

Dimensionamento

Successivamente, modifica le impostazioni di ridimensionamento su schermi di diverse dimensioni.

• Larghezza: 140 px (desktop), 105 px (tablet), 80 px (telefono)
• Allineamento del modulo: a destra

Spaziatura

Aggiungeremo anche alcuni valori di riempimento superiore e inferiore personalizzati su diverse dimensioni dello schermo.

• Imbottitura superiore: 50 px (desktop), 35 px (tablet), 25 px (telefono)
• Imbottitura inferiore: 20px (desktop), 10px (tablet), 0px (telefono)

Frontiera

Per creare una forma circolare, dovremo aggiungere un valore alto a ciascuno degli angoli nelle impostazioni del bordo. Stiamo usando '500px'.

Scatola ombra

Aggiungeremo anche un'ombra sottile per consentire la visualizzazione della forma circolare.

• Intensità della sfocatura dell'ombra della scatola: 80 px

Animazione

Apri le impostazioni dell'animazione e rimuovi l'animazione dell'icona.

• Animazione icona: nessuna animazione

Classe CSS

Ultimo ma non meno importante, aggiungi una classe CSS al Modulo Blurb. Più avanti in questo post, useremo questa classe CSS per far funzionare la funzione click.

• Classe CSS: contact-open

Aggiungi riga #2

Struttura della colonna

In seconda fila! Utilizzare la seguente struttura a colonne:

Colore di sfondo

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi un colore di sfondo bianco.

• Colore di sfondo: #FFFFFF

Frontiera

Aggiungi il raggio del bordo di '39 px' a ciascuno degli angoli successivi.

Scatola ombra

E completa le impostazioni della riga aggiungendo un'ombra sottile.

• Intensità della sfocatura dell'ombra della scatola: 80 px

Aggiungi modulo di contatto

Elementi

L'unico modulo di cui abbiamo bisogno in questa riga è un modulo di contatto. Una volta aggiunto il modulo, disabilita il captcha nelle impostazioni degli elementi.

• Mostra Captcha: No

Campi

Passa alla scheda Design e cambia il colore di sfondo dei campi nelle impostazioni dei campi.

• Colore di sfondo dei campi: rgba (0,126,255,0.13)

Pulsante

Continua stilizzando il pulsante.

• Usa stili personalizzati per il pulsante: Sì
• Dimensione del testo del pulsante: 16 px
• Colore del testo del pulsante: #FFFFFF
• Colore di sfondo del pulsante: #ff5f24
• Larghezza bordo pulsante: 2px
• Colore bordo pulsante: rgba (0,0,0,0)
• Raggio bordo pulsante: 0px
• Carattere pulsante: Karla
• Peso del carattere del pulsante: grassetto
• Imbottitura superiore del pulsante: 14px
• Imbottitura fondo pulsante: 14px
• Imbottitura pulsante sinistro: 20px
• Imbottitura pulsante destro: 20px

Spaziatura

E aggiungi alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 30px
• Imbottitura inferiore: 30px
• Imbottitura sinistra: 40px
• Imbottitura destra: 40px

Aggiungi modulo codice

Inserisci codice JQuery

Una volta completato il modulo Modulo di contatto, è il momento di far funzionare la funzione clic! Aggiungi un modulo di codice alla seconda riga della sezione e inserisci le seguenti righe di codice JQuery tra i tag di script come puoi vedere nella schermata di stampa qui sotto:

jQuery(function($){
$(".contact-open").click(function() {
 $('.section-open').toggleClass('section-open-active');
});
});

Modifica le impostazioni della sezione

Altezza

Continua aprendo le impostazioni della sezione. Modifica l'altezza tra diverse dimensioni dello schermo.

• Altezza: 190 px (desktop), 140 px (tablet), 125 px (telefono)

Elemento principale predefinito

Aggiungi del codice CSS personalizzato all'elemento principale della sezione successiva per fissarlo nell'angolo in basso a destra.

bottom: 0;
right: 0;
position: fixed;

Elemento principale al passaggio del mouse

Assicurati di aggiungere la posizione fissa anche all'elemento principale al passaggio del mouse.

position: fixed;

Aggiungi codice CSS personalizzato alla pagina

Apri le impostazioni della pagina

Per completare l'effetto di commutazione, dovremo aggiungere anche un po' di codice CSS alla pagina. Apri le impostazioni della pagina.

Aggiungi CSS personalizzato

Vai alla scheda Avanzate e aggiungi le seguenti righe di codice CSS:

.section-open-active {
height: auto !important;
}

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come aggiungere un modulo di contatto fisso alle tue pagine utilizzando le impostazioni di dimensionamento di Divi. Puoi far funzionare questo approccio su qualsiasi tipo di sito web che stai costruendo. Questo tutorial fa parte della nostra iniziativa di progettazione Divi in ​​corso, in cui ogni settimana cerchiamo di aggiungere qualcosa in più alla tua cassetta degli attrezzi di progettazione. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto.

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.