Cum se creează o opțiune de e-mail lipicioasă în Divi care atrage atenția

Opțiunile de poziție lipicioasă ale lui Divi vă permit să faceți orice element de pe pagina dvs. lipicios. Acest lucru vă permite să fixați elemente de pe pagină la anumite intervale pe măsură ce utilizatorul derulează pagina în jos, astfel încât să rămână vizibile mai mult timp. Și pentru voi bloggeri, este foarte logic să adăugați o opțiune de e-mail lipicioasă la șablonul dvs. de postare pentru o subtilitate, dar eficientă, pentru a păstra acea formă importantă în prim plan.

În acest tutorial, vă vom arăta cum să adăugați o opțiune de e-mail lipită la șablonul dvs. de postare pe blogul Divi, care atrage mai multă atenție și, sperăm, atrage mai mulți clienți potențiali. Vă vom arăta chiar și cum să adăugați un efect de hover popup la opțiunea de e-mail lipicioasă!

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

Descărcați GRATUIT șablonul de postare pentru e-mailuri lipicioase

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Cum să încărcați șablonul de postare cu opțiunea de e-mail Sticky pe site-ul dvs.

Pentru a încărca șablonul, navigați la Divi Theme Builder în backend-ul site-ului dvs. WordPress.

Apoi, în colțul din dreapta sus, veți vedea o pictogramă cu două săgeți. Faceți clic pe pictogramă.

Navigați la fila de import, încărcați fișierul JSON pe care ați putut să-l descărcați în această postare și faceți clic pe „Importați șabloane Divi Theme Builder”.

După ce ați încărcat fișierul, veți observa un nou șablon cu o nouă zonă de corp care a fost atribuită tuturor postărilor. Salvați modificările Divi Theme Builder imediat ce doriți ca șablonul să fie activat.

Să trecem la tutorial, nu-i așa?

Partea 1: Importați șablonul de postare pentru blogul Premade

Pentru acest tutorial vom folosi șablonul de postare pe blog pentru pachetul de layout al consultanților de afaceri Divi pe care îl puteți descărca din această postare pe blog.

După ce descărcați fișierul zip, va trebui să îl dezarhivați și să importați fișierul în Divi Theme Builder.

Iată cum să o faci ...

1. navigați la Divi> Theme Builder.
2. Faceți clic pe pictograma de portabilitate din partea dreaptă sus.
3. Selectați fila de import în fereastra pop-up de portabilitate.
4. Alegeți fișierul json din fișierul pe care l-ați descărcat.
5. Faceți clic pe butonul Import.

Partea 2: Adăugarea opțiunii Sticky Email Optin la șablon

Odată ce fișierul JSON a fost importat, faceți clic pe pictograma de editare pentru a edita aspectul șablonului corpului personalizat.

În partea de jos a aspectului șablonului de postare, veți găsi secțiunea cu formularul de înscriere la e-mail pe care îl vom folosi pentru înscrierea la e-mail.

Pentru acest exemplu, dorim poziția lipicioasă a opțiunii de e-mail la o secțiune, astfel încât utilizatorul să nu vadă opțiunea de e-mail până când nu derulează la secțiunea cu opțiunea de e-mail lipicioasă. Cu toate acestea, deoarece opțiunea de e-mail este în propria secțiune, opțiunea de e-mail nu va avea suficient spațiu pentru mutare. Prin urmare, trebuie să îl aducem în secțiunea de mai sus, care conține secțiunea de comentarii, astfel încât opțiunea de e-mail să treacă peste acea secțiune înainte de a se odihni în locul său original.

Adăugați un rând nou în secțiunea de mai sus

Pentru a face acest lucru, creați un nou rând cu o coloană direct sub rândul care conține modulul de comentarii.

Adăugați Row Styling

Apoi deschideți setările noului rând și adăugați o culoare de fundal după cum urmează:

• Culoare fundal: # 282828

Sub fila de proiectare, actualizați următoarea dimensiune și spațiere a rândului:

• Lățime: 100%
• Lățime maximă: 100%
• Marja: top 15vw
• Căptușeală: 0 px sus, 0 px jos

Mutați opțiunea de e-mail în rândul nou

Odată ce stilul rândului este în poziție, mutați opțiunea de e-mail din secțiunea de jos în noul rând pe care tocmai l-ați creat.

Ștergeți secțiunea de jos (nu mai avem nevoie de ea).

Actualizați opțiunea de e-mail cu poziția lipită

Apoi deschideți setările pentru înscrierea la e-mail acum în noul rând și actualizați opțiunile de poziție a stick-ului după cum urmează:

• Poziție lipicioasă: lipiți-vă de partea de jos
• Limită superioară lipicioasă: secțiune

Acest lucru va face ca opțiunea de e-mail să rămână în partea de jos a ferestrei browserului atunci când parcurgeți secțiunea înainte de a vă opri în rândul său părinte.

Actualizați stilul de înscriere prin e-mail

Sub fila Proiectare, actualizați aspectul înscrierii prin e-mail după cum urmează:

• Aspect: corp pe partea de sus, formă pe partea de jos

Apoi actualizați următorul stil:

• Dimensiune text titlu: 32 px
• Lățime maximă: 600 px
• Alinierea modulului: centru

Apoi setați stilul de animație la nici unul.

Rezultat

În acest moment, putem verifica rezultatul vizualizând o postare în altă fereastră a browserului.

Adăugarea unui stil de poziție lipicios

Când opțiunea de e-mail este în poziția lipicioasă, putem adăuga un stil specific modulului care se va aplica numai stării lipicioase. Acest lucru ne permite să adăugăm diferite scheme de culori pentru a compensa fundalul alb, pentru a-l scoate în evidență un pic mai mult.

Pentru a adăuga o culoare de fundal diferită pentru starea lipicioasă, deschideți setările de înscriere prin e-mail și selectați pictograma miniatură (pictogramă lipicioasă) de lângă opțiunea de fundal. Apoi faceți clic pe fila lipicioasă și adăugați următoarea culoare de fundal:

• Culoare fundal (lipicios): # 282828

Continuați același proces pentru a adăuga un stil lipicios la următoarele opțiuni din fila Design:

• Culoare text titlu (lipicios): #ffffff
• Culoarea textului corpului (lipicios): #ffffff
• Lățime maximă (lipicioasă): 500 px
• Căptușeală (lipicioasă): 18 px sus, 30 px jos, 30 px stânga, 30 px dreapta

Rezultat

Acum, să verificăm rezultatul pe o postare live.

Adăugați Efect pop-up Hover la opțiunea de e-mail Sticky

Pentru a adăuga un efect de fereastră pop-up la opțiunea de înscriere a e-mailului lipicios, deschideți setările de înscriere la e-mail și actualizați transformarea stick-ului după cum urmează:

• Transformă axa Y tradusă (lipicios): 85%

Acest lucru va aduce opțiunea de e-mail în jos (în afara ecranului) cu 85% din propria înălțime, expunând suficient din opțiunea de e-mail, astfel încât utilizatorul să poată trece peste titlu.

Apoi adăugați o stare de deplasare la opțiunea de transformare, astfel încât poziția de traducere a transformării să revină la poziția sa inițială la trecere:

• Transformă axa Y tradusă (plasați cu mouse-ul): 0%

Rezultat

Iată rezultatul final.

Rezultate finale

Iată cele trei versiuni ale antetului nostru lipicios pe care le-am construit.

Gânduri finale

Din fericire, Divi simplifică adăugarea de înscrieri lipsite de e-mail pe site-ul dvs. Acest lucru vă eliberează mai mult timp pentru modificarea designului elementului dvs. lipicios pentru modalități mai unice de afișare a formularului. Sperăm că această tehnică vă servește bine în viitoarele proiecte de blog.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!