Vai al contenuto principale

Come aggiungere un modulo di contatto a discesa all'intestazione globale

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Quando crei un'intestazione personalizzata per il tuo sito web, utilizzando il generatore di temi di Divi, ti troverai a cercare il modo perfetto per aggiungere un AAL (call to action). Un modo per farlo è aggiungere un modulo di contatto a discesa. Questo ti aiuterà a mantenere pulito l'aspetto generale della tua intestazione fornendo la possibilità di metterti in contatto con te senza dover scorrere verso il basso. In questo tutorial, ti mostreremo come creare un modulo di contatto a discesa utilizzando Divi e codice JQuery e CSS. Puoi anche scaricare il file JSON gratuitamente!

Andiamo.

Panoramica

Prima di immergerci nel tutorial, diamo un'occhiata al risultato su schermi di dimensioni diverse.

Menu a discesa Divi

1. Vai a Divi Theme Builder e inizia a creare un'intestazione globale

Vai a Divi Theme Builder

Inizia andando su Divi Theme Builder nel backend del tuo sito WordPress.

Intestazione divi globale

Crea un'intestazione globale

Fai clic su "Aggiungi intestazione globale" e seleziona "Crea intestazione globale" per iniziare a creare un'intestazione globale personalizzata.

Costruisci intestazione divi globale

2. Costruisci il design dell'intestazione

Impostazioni della sezione

Colore di sfondo

Una volta all'interno del modello di intestazione generale, noterai una sezione. Apri questa sezione e usa un colore di sfondo bianco.

  • Colore di sfondo: #FFFFFF
Regolazione dello sfondo

spaziatura

Quindi rimuovere l'imbottitura superiore e inferiore predefinita dalla sezione.

  • Imbottitura superiore: 0px
  • Imbottitura inferiore: 0px
Configurazione imbottitura

Scatola delle ombre

Applicare anche una leggera tonalità di scatola.

  • Resistenza della sfocatura dell'ombra della scatola: 50px
  • Colore dell'ombra: rgba (0,0,0,0,15)
Configurazione Divi shadow

Aggiungi una nuova linea

Struttura a colonne

Continua ad aggiungere una nuova riga alla sezione utilizzando la seguente struttura di colonne:

Scegli un layout

dimensionamento

Senza aggiungere più moduli, aprire i parametri di linea e modificare i parametri di dimensionamento come segue:

  • Usa una larghezza della grondaia personalizzata: Sì
  • Larghezza della grondaia: 1
  • Equalizza le altezze delle colonne: Sì
  • Larghezza: 95%
  • Larghezza massima: 100%
Configura la quota della linea divi

spaziatura

Quindi aggiungi un'imbottitura superiore e inferiore personalizzata.

  • Imbottitura superiore: 1vw
  • Imbottitura inferiore: 1vw
Configurazione della spaziatura delle sezioni

Elemento principale

E allinea tutto il contenuto della colonna aggiungendo una singola riga di codice CSS all'elemento principale della riga.

align-items: center;

CSS personalizzato

Colonna 2 Z Index

Ci assicuriamo inoltre che la seconda colonna abbia un valore z-index più alto per scopi reattivi.

  • Indice Z: 12
Parametro della colonna

Aggiungi un modulo immagine alla colonna 1

Scarica il logo

È ora di iniziare ad aggiungere moduli! Inizia con un modulo immagine nella colonna 1. Carica un logo.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Modulo immagine divi

allineamento

Quindi modificare l'allineamento del modulo.

  • Allineamento dell'immagine: centro
Modulo immagine allineamento

dimensionamento

Cambia anche la larghezza.

  • Larghezza: 3vw (desktop), 5vw (tablet), 7vw (telefono)
modulo di contatto a discesa

Aggiungi un modulo menu alla colonna 2

Seleziona il menu

Nella seconda colonna, aggiungeremo un modulo di menu.

Personalizzazione del modulo divi menu

Fornitura

Passa alla scheda di progettazione del modulo e modifica lo stile del layout.

  • Stile: centrato
Stile del modulo menu

Impostazioni del testo del menu

Quindi modificare le impostazioni del testo nel menu del modulo.

  • Carattere menu: Apri senza
  • Peso carattere menu: Semi grassetto
  • Colore testo menu: # 000000
  • Dimensione testo menu: 0.8vw (desktop), 2vw (tablet), 3vw (telefono)
  • Spaziatura lettere menu: 1px
Testo del menu Divi

Impostazioni del testo del menu a discesa

Quindi cambia il colore della linea nel menu a discesa.

  • Colore della riga del menu a discesa: # 007dff
Menu a discesa Divi

Icone

Con il colore dell'icona del menu hamburger.

  • Colore icona menu hamburger: # 007dff
Icone dei menu divi

Aggiungi il modulo di testo 1 alla colonna 3

Aggiungi una copia

Passiamo al terzo modulo! Aggiungi un modulo di testo con una copia a tua scelta.

Contattaci modulo divi

Colore di sfondo

Quindi aggiungi un colore di sfondo.

  • Colore di sfondo: # 007dff
Sfondo Divi

Impostazioni del testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:

  • Carattere testo: Apri Sans
  • Carattere del testo: grassetto
  • Colore del testo: #ffffff
  • Dimensioni del testo: 0.8vw (desktop), 2vw (tablet), 3vw (telefono)
  • Allineamento del testo: centro
Colore carattere Divi

dimensionamento

Quindi modificare i parametri di dimensionamento del modulo.

  • Larghezza: 33%
  • Allineamento del modulo: centro
Dimensionamento testo sezione divi

spaziatura

Quindi aggiungi un'imbottitura superiore e inferiore personalizzata.

  • Imbottitura superiore: 0.8vw (desktop), 2vw (tablet e telefono)
  • Imbottitura inferiore: 0.8vw (scrivania), 2vw (tablet e telefono)
Configurazione della spaziatura del modulo di testo

confine

E completa i parametri del modulo aggiungendo un raggio del bordo.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

  • Tutti gli angoli: 100 px
Configurazione del bordo del modulo di testo

Aggiungi il modulo di testo 2 alla colonna 3

Aggiungi un simbolo all'area del contenuto

Passiamo al modulo successivo, che è un altro modulo di testo. Aggiungi la seguente freccia nell'area dei contenuti: "▼".

Modulo di testo Divi fleche

Impostazioni del testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:

  • Carattere testo: Apri Sans
  • Colore del testo: # 007fff
  • Dimensione del testo: 3vw
  • Altezza della riga di testo: 0em
  • Allineamento del testo: centro
Modulo di testo font divi

Z Index

Aumentiamo anche l'indice z del modulo.

  • Indice Z: 11
Posizione del modulo di testo Divi

Aggiungi il modulo del modulo di contatto alla colonna 3

Ora puoi aggiungere un modulo di contatto proprio nella parte inferiore del modulo di testo che contiene la freccia. Questo modulo è abbastanza semplice da usare, quindi dovrai personalizzare i campi che vuoi rendere visibili.

Modulo modulo di contatto

3. Personalizza gli elementi per creare un modulo di contatto con un clic

Aggiungi l'altezza della colonna 3

Una volta che tutte le mod sono a posto, è il momento di creare l'effetto. Il primo passo per ottenere il risultato desiderato è aprire le impostazioni nella colonna 3 e aggiungere un'altezza personalizzata reattiva nella scheda avanzata.

Ufficio:

height: 3vw;

tablet:

height: 5vw;

Telefono:

height: 6vw;

Modulo di contatto del volantino di esempio

Aggiungi una classe CSS al pulsante e alla freccia

Quindi aggiungeremo la stessa classe CSS ai primi due moduli di testo nella colonna 3.

  • Classe CSS: mostra-contatto
Aggiungi la sezione contatti dello spettacolo

Aggiungi una classe CSS al modulo di contatto

Avremo anche bisogno di una classe CSS personalizzata per il modulo Modulo di contatto.

  • Classe CSS: modulo di contatto
Aggiungi una classe al modulo divi

Nascondi il modulo del modulo di contatto

Continua aggiungendo un'ulteriore riga di codice CSS all'elemento principale del modulo Modulo di contatto. Questo ci permetterà di nascondere il modulo prima di fare clic.

display: none;

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Style css modulo divi

Aggiungi un modulo di codice alla colonna 3 con JQuery e codice CSS

E per creare la funzione clic, avremo bisogno di un po 'di codice JQuery. Useremo anche codice CSS personalizzato. Aggiungi un nuovo modulo di codice alla colonna 2 con il codice. Assicurati di inserire il codice JQuery tra i tag di script e il codice CSS tra i tag di stile.

jQuery(function($){$(".show-contact").click(function() {$('.contact-form-module').slideToggle();});});

.show-contact {cursor: pointer;} .et-menu>li {padding-left: 0.7vw !important;padding-right: 0.7vw !important;}

Aggiungi codice javascript

Panoramica

Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.

ufficio

Esempio di design

Cosa ricordare

In questo articolo, ti abbiamo mostrato come aggiungere un modulo di contatto a discesa alla tua intestazione personalizzata. È un ottimo modo per attivare subito l'azione. 

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
4 azioni
quota4
Tweet
Enregistrer