Cum să creați ferestre pop-up de colț de conținut blocat cu Divi

În fiecare săptămână, vă punem la dispoziție pachete de layout Divi noi și gratuite pe care le puteți utiliza pentru următorul dvs. proiect. Pentru unul dintre pachetele de aspect, împărtășim și un caz de utilizare care vă va ajuta să duceți site-ul web la nivelul următor.

În această săptămână, ca parte a inițiativei noastre continue de proiectare Divi, vă vom arăta cum să creați ferestre pop-up de colț blocat de conținut cu Divi și pachetul de amenajare a stațiunii. Conceptul unei forme optin de conținut blocat este simplu. Oamenii trebuie să-și introducă adresa de e-mail și imediat ce o vor face, conținutul ascuns va fi dezvăluit. De exemplu, puteți utiliza acest conținut ascuns pentru a partaja un cod de reducere. Pentru ca toate acestea să se întâmple, vom folosi pluginul Bloom și vom adăuga codul scurt al conținutului blocat în formularul optin într-un modul de text pe care îl vom stiliza ca pop-up. Modulul de text va include, de asemenea, o animație cu o întârziere a animației pentru a face ca modulul de text să apară ca și cum ar fi un pop-up.

Să ajungem la asta!

previzualizare

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

Desktop

Mobil

Instalați pluginul Bloom

Descărcați Bloom

Primul lucru pe care va trebui să-l faceți este să descărcați pluginul Bloom. Dacă sunteți deja membru Elegant Themes, puteți găsi pluginul accesând zona membrilor. Acolo, veți putea descărca fișierul zip. Dacă nu sunteți încă membru Elegant Themes, va trebui să achiziționați mai întâi un abonament.

Încărcați și instalați Bloom

După ce ați descărcat Bloom, puteți continua și încărca pe site-ul dvs. WordPress accesând Plugins> Add New și făcând clic pe „Încărcați pluginul” din partea de sus a paginii.

Apoi, încărcați fișierul comprimat și faceți clic pe „Instalați acum”.

Nu uitați să activați pluginul și după ce este încărcat.

Configurați formularul Bloom Optin

Adăugați un nou formular de conținut blocat

Acum putem începe să creăm formularul de conținut blocat pe care îl vom folosi, mai târziu în această postare, în designul nostru Divi! Accesați tabloul de bord WordPress> Bloom> Optin Forms și creați un nou formular de optin.

Continuați selectând tipul de opțiune „Conținut blocat” și continuați cu setările de configurare.

Setări Setări

Odată ce vă aflați în setările de configurare, va trebui să dați noului formular optin un nume. De asemenea, va trebui să selectați un furnizor de e-mail la alegere și să introduceți detaliile de autentificare.

Setări de proiectare

Următorul pas este proiectarea formularului. Mai târziu în postare, vom folosi codul scurt al formularului optin într-un modul de text pe care îl vom stiliza, deci nu avem nevoie de prea multe setări aplicate formularului optin în sine. Asigurați-vă că lăsați goale casetele pentru titlul optin și conținutul mesajului optin. Schimbați și orientarea imaginii.

• Orientare imagine: Fără imagine

Derulați pagina în jos și efectuați câteva modificări suplimentare în stilul optin și configurarea formularului.

• Culoare fundal: #ffffff
• Orientare formular: formular pe partea de jos

De asemenea, modificăm setările de stilare a formularului.

• Orientarea câmpului formularului: câmpuri de formular stivuite
• Culoarea fundalului formularului: # f4f4f4
• Culoare buton: #ffffff
• Culoarea textului butonului: Întunecat
• Alegeți Stilul muchiei formularului: a doua opțiune

Creați design cu Divi

Adăugați un rând nou

Structura coloanei

Acum putem trece la Divi Builder! Mergeți mai departe și creați o pagină nouă folosind pagina de pornire a pachetului Layout Resort. Odată ce aspectul este încărcat, continuați prin adăugarea unui rând nou în partea de sus a celei de-a doua secțiuni utilizând următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândurilor și efectuați unele modificări la setările de dimensionare.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Accesați setările de spațiere următoare și adăugați „0px” în partea superioară și inferioară a rândului. Acest lucru va limita spațiul ocupat de noul rând pe care l-am adăugat.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un modul de text

Adăugați conținut H3

Singurul modul de care avem nevoie pentru a crea fereastra pop-up de colț blocat este un modul de text. Adăugați un titlu H3 la alegere în caseta de conținut.

Adăugați un cod scurt pentru conținutul blocat

Apoi, reveniți la pluginul Bloom și copiați codul scurt al formularului de optimizare pe care l-ați creat în partea anterioară a acestui tutorial.

Adăugați orice conținut doriți să apară după ce oamenii completează formularul de înscriere. În exemplul de mai jos, puteți observa că partajăm un cod de cupon, dar puteți împărtăși orice tip de informații doriți.

Culoare de fundal

Mergeți la setările de fundal ale modulului următor și adăugați o culoare de fundal complet albă.

• Culoare fundal: #ffffff

Setări text

Treceți la fila de proiectare și modificați setările de text în continuare.

• Font text: Deschideți Sans
• Culoarea textului: # 0f87ff
• Dimensiune text: 15 px

Setări text H3

Schimbați și fontul care este utilizat pentru copia dvs. H3.

• Rubrica 3 Font: Gilda Display

Spațiere

Și pentru a da modulului o formă, vom adăuga câteva marje personalizate și valori de umplere. De asemenea, modificăm toate aceste valori pentru a face ca designul să corespundă oricărei dimensiuni de ecran pe care vizitatorii dvs. o utilizează.

• Marja superioară: -17vw
• Marja stângă: 65vw (desktop), 37vw (tabletă), 3vw (telefon)
• Marja dreaptă: 0 px
• Căptușeală superioară: 5vw (desktop), 11vw (tabletă), 13vw (telefon)
• Căptușeală inferioară: 5vw, 11vw (tabletă), 13vw (telefon)
• Căptușire stângă: 6vw (desktop), 11vw (tabletă), 16vw (telefon)
• Căptușeală dreaptă: 6vw (desktop), 11vw (tabletă), 16vw (telefon)

Frontieră

Continuați accesând setările de margine ale modulului de text și adăugați „500vw” la fiecare colț, cu excepția celui din dreapta jos.

Box Shadow

Adăugați o umbră de casetă lângă pentru a face ca Modulul text să apară.

• Puterea neclarității umbrei cutiei: 150 px
• Culoare umbră: rgba (0,0,0,0,3)

Animaţie

În cele din urmă, adăugăm și o animație care merge de la dreapta la stânga pentru a crea efectul popup.

• Repetați animația: o dată
• Direcția animației: Stânga
• Durata animației: 500 ms
• Întârziere animație: 1000 ms
• Intensitate animație: 16%

Clone Row

Odată ce ați terminat de creat primul pop-up colț blocat de conținut, puteți continua și clona întregul rând.

Plasați rândul duplicat chiar aici:

Îndepărtați căptușeala inferioară a secțiunii

Eliminați căptușeala inferioară a secțiunii în care ați plasat rândul.

• Căptușeală inferioară: 0 px

Modificați setările de spațiu ale modulului de text

Apoi, deschideți setările modulului text și modificați valorile de marjă personalizate.

• Marja stângă: 0vw
• Marja dreaptă: 65vw (desktop), 37vw (tabletă), 3vw (telefon)

Modificați modulul de text colțuri rotunjite

Asigurați-vă că schimbați și colțurile rotunjite. Folosim „500vw” pentru fiecare colț, cu excepția celui din stânga jos.

Modificați setările de animație ale modulului de text

Nu în ultimul rând, schimbați direcția animației la dreapta și gata!

• Direcția animației: Corect

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran!

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați ferestre pop-up de colț de conținut blocat cu Divi, pluginul Bloom și pachetul de amenajare a stațiunii. Puteți utiliza această tehnică pentru a convinge oamenii să devină parte din lista dvs. de e-mailuri, oferind un cod de cupon care apare odată ce a completat formularul. Acest tutorial face parte din inițiativa noastră continuă de proiectare Divi, unde încercăm să introducem ceva suplimentar în setul de instrumente de proiectare în fiecare săptămână. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!