Treci la conținutul principal

Cum să adăugați un formular de contact derulant în antetul dvs. global

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

Când creați un antet personalizat pentru site-ul dvs. web, folosind generatorul de teme al lui Divi, veți găsi căutarea modului perfect de a adăuga un AAL (îndemn la acțiune). O modalitate de a face acest lucru este să adăugați un formular de contact drop-down. Acest lucru vă va ajuta să păstrați aspectul general al antetului curat, oferind în același timp posibilitatea de a intra în contact cu dvs., fără a fi nevoie să derulați în jos. În acest tutorial, vă vom arăta cum să creați un formular de contact drop-down utilizând codul Divi și JQuery și CSS. De asemenea, puteți descărca gratuit fișierul JSON!

Să mergem.

studiu

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire asupra rezultatului pe diferite dimensiuni de ecran.

Meniul derulant Divi

1. Accesați Divi Theme Builder și începeți să creați un antet global

Accesați Divi Theme Builder

Începeți accesând Divi Theme Builder în backend-ul site-ului dvs. WordPress.

Antet global divi

Creați un antet global

Faceți clic pe „Adăugați antet global” și selectați „Creare antet global” pentru a începe crearea unui antet global personalizat.

Construiți un antet divi global

2. Construiți designul antetului

Setări secțiune

Culoare de fundal

Odată ajuns în șablonul de antet general, veți observa o secțiune. Deschideți această secțiune și utilizați o culoare de fundal alb.

  • Culoare fundal: #FFFFFF
Reglarea fundalului

spaţierea

Apoi îndepărtați captusea implicită superioară și inferioară din secțiune.

  • Garnitură superioară: 0px
  • Garnitura de jos: 0px
Configurație de căptușire

Cutie de umbră

Aplicați, de asemenea, o nuanță de cutie subtilă.

  • Cutie de umbră Box Box: 50px
  • Culoare umbră: rgba (0,0,0,0,15)
Configurare umbră Divi

Adăugați o linie nouă

Structura coloanei

Continuați să adăugați o nouă linie la secțiune utilizând următoarea structură a coloanei:

Alegeți un aspect

dimensionarea

Fără a adăuga mai multe module, deschideți parametrii liniei și modificați parametrii de dimensionare după cum urmează:

  • Utilizați o lățime personalizată de jgheab: Da
  • Lățimea jgheabului: 1
  • Egalizați înălțimile coloanei: Da
  • Lățime: 95%
  • Lățime maximă: 100%
Configurați dimensiunea liniei divi

spaţierea

Apoi adăugați o umplere personalizată superioară și inferioară.

  • Căptușeală superioară: 1vw
  • Garnitura de jos: 1vw
Configurația spațierii secțiunilor

Elementul principal

Și aliniați tot conținutul coloanei adăugând o singură linie de cod CSS la elementul principal al rândului.

align-items: center;

CSS personalizat

Coloana 2 Z Index

De asemenea, ne asigurăm că a doua coloană are o valoare a indexului z mai mare în scopuri reactive.

  • Indicele Z: 12
Parametru coloană

Adăugați un modul de imagine în coloana 1

Descărcați logo-ul

Este timpul să începeți să adăugați module! Începeți cu un modul de imagine în coloana 1. Încărcați o siglă.

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

Modul de imagine divi

aliniere

Apoi schimbați alinierea modulului.

  • Aliniere imagine: centru
Modul de imagine de aliniere

dimensionarea

De asemenea, schimbați lățimea.

  • Lățime: 3vw (desktop), 5vw (tabletă), 7vw (telefon)
formular de contact derulant

Adăugați un modul de meniu la coloana 2

Selectați meniul

În a doua coloană, vom adăuga un modul de meniu.

Personalizarea modulului de meniu Divi

Dispoziţie

Treceți la fila de proiectare a modulului și schimbați stilul de aspect.

  • Stil: Centrat
Stil modul de meniu

Setări text de meniu

Apoi schimbați setările textului din meniul modulului.

  • Font de meniu: Deschideți fără
  • Greutatea fontului de meniu: Semi îndrăzneț
  • Culoarea textului meniului: # 000000
  • Dimensiunea textului meniului: 0.8vw (desktop), 2vw (tabletă), 3vw (telefon)
  • Spațiu de litere de meniu: 1px
Textul meniului Divi

Setări text meniu derulant

Apoi schimbați culoarea liniei din meniul derulant.

  • Culoarea liniei din meniul derulant: # 007dff
Meniul derulant Divi

icoane

Cu culoarea pictogramei meniului hamburger.

  • Culoarea pictogramei meniului Hamburger: # 007dff
Pictogramele meniului divi

Adăugați modulul de text 1 la coloana 3

Adăugați o copie

Să trecem la al treilea modul! Adăugați un modul text cu o copie la alegere.

Contactați-ne modulul divi

Culoare de fundal

Apoi adăugați o culoare de fundal.

  • Culoare fundal: # 007dff
Fundal Divi

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text în consecință:

  • Font text: Deschide Sans
  • Greutatea fontului textului: bold
  • Culoarea textului: #ffffff
  • Dimensiunea textului: 0.8vw (desktop), 2vw (tabletă), 3vw (telefon)
  • Alinierea textului: centru
Culoarea fontului Divi

dimensionarea

Apoi modificați parametrii de dimensionare a modulului.

  • Lățime: 33%
  • Alinierea modulului: centru
Dimensiunea textului secțiunii divi

spaţierea

Apoi adăugați o umplere personalizată superioară și inferioară.

  • Înveliș superior: 0.8vw (desktop), 2vw (tabletă și telefon)
  • Garnitură de jos: 0.8vw (birou), 2vw (tabletă și telefon)
Configurarea spațiului modulului text

frontieră

Și completați parametrii modulului adăugând o rază de frontieră.

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

  • Toate colțurile: 100px
Configurarea marginii modulului text

Adăugați modulul de text 2 la coloana 3

Adăugați un simbol în zona de conținut

Să trecem la modulul următor, care este un alt modul text. Adăugați următoarea săgeată în zona de conținut: „▼”.

Modul text Divi fleche

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text în consecință:

  • Font text: Deschide Sans
  • Culoarea textului: # 007fff
  • Dimensiunea textului: 3vw
  • Înălțimea liniei de text: 0em
  • Alinierea textului: centru
Modul text Font divi

Indicele Z

De asemenea, mărim indicele z al modulului.

  • Indicele Z: 11
Poziția modulului de text Divi

Adăugați modulul formularului de contact la coloana 3

Acum puteți adăuga un formular de contact chiar în partea de jos a modulului text care conține săgeata. Acest modul este destul de simplu de utilizat, așa că va trebui să personalizați câmpurile pe care doriți să le faceți vizibile.

Modul formular de contact

3. Personalizați elementele pentru a crea un formular de contact cu un singur clic

Adăugați înălțimea coloanei 3

Odată ce toate modificările sunt la locul lor, este timpul să creați efectul. Primul pas către obținerea rezultatului dorit este să deschideți setările din coloana 3 și să adăugați înălțimea personalizată receptivă în fila avansată.

Oficiul pentru:

height: 3vw;

tabletă:

height: 5vw;

Telefon:

height: 6vw;

Prospect formular de contact

Adăugați o clasă CSS la buton și săgeată

Apoi vom adăuga aceeași clasă CSS la primele două module de text din coloana 3.

  • Clasa CSS: show-contact
Adăugați secțiunea Afișați contactul

Adăugați o clasă CSS în formularul de contact

De asemenea, vom avea nevoie de o clasă CSS personalizată pentru modulul Formular de contact.

  • Clasa CSS: modul de contact-formular
Adăugați o clasă la formularul divi

Ascundeți modulul Formular de contact

Continuați adăugând o linie suplimentară de cod CSS la elementul principal al modulului Formular de contact. Acest lucru ne va permite să ascundem modulul înainte de a face clic.

display: none;

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

Modul css stil divi

Adăugați un modul de cod la coloana 3 cu codul JQuery și CSS

Și pentru a crea funcția de clic, vom avea nevoie de un cod JQuery. De asemenea, vom folosi cod CSS personalizat. Adăugați un nou modul de cod în coloana 2 cu codul. Asigurați-vă că plasați codul JQuery între etichetele de script și codul CSS între etichetele de stil.

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;}

Adăugați cod javascript

studiu

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.

Birou

Proiectarea probei

Ce să-ți amintești

În acest articol, v-am arătat cum să adăugați un formular de contact drop-down la antetul dvs. personalizat. Este o modalitate excelentă de a declanșa acțiune din timp. 

Acest articol conține comentarii 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top
4 acțiuni
acțiune4
tweet
Registru