Cum să creați o bară promoțională animată pentru șabloanele dvs. de pagină din Divi

Publicat: 2019-11-23

Crearea unei bare promoționale animate pentru șablonul paginii dvs. în Divi poate fi o modalitate excelentă de a face publicitate produselor și ofertelor în stil, fără a fi nevoie să vă bazați pe un plugin. Folosind funcțiile puternice de design ale Divi, puteți construi vizual bara promoțională atunci când editați un șablon în Divi's Theme Builder. Apoi, odată ce șablonul este gata, bara promoțională va apărea pe orice pagină care a fost alocată șablonului respectiv. Uşor!

Să sărim și să începem!

Trage cu ochiul

Iată o privire rapidă la bara promoțională pe care o vom crea în acest tutorial.

De asemenea, vă vom arăta cum să faceți bara promoțională fixă ​​(sau lipicioasă).

Descărcați GRATUIT șablonul paginii Promo Bar

Pentru a pune mâna pe șablonul de pagină al barei promoționale 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 în listă, pur și simplu introduceți adresa de e-mail de 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

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.

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!

Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și adăugați unul dintre fișierele json în Divi Theme Builder folosind opțiunea Theme Builder Portability.

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

Abonați-vă la canalul nostru Youtube

Ce trebuie să începeți

Pentru a începe, va trebui să instalați și să activați tema Divi. Asigurați-vă că aveți cea mai recentă versiune de Divi.

De asemenea, veți avea nevoie de cel puțin o pagină creată cu Divi Builder în scopul testării pentru a atribui șablonul barei promoționale acelei pagini pentru a afișa rezultatul.

După aceea, sunteți gata să plecați.

Crearea unei bare promoționale animate în partea de sus a unui șablon de pagină

Crearea unui șablon nou

Din tabloul de bord WordPress, navigați la Divi> Theme Builder. Apoi faceți clic pe caseta „Adăugați un șablon nou” pentru a crea un șablon nou.

Atribuiți șablonul paginilor pentru care doriți să fie afișată bara promoțională.

În noul șablon, faceți clic pe zona „Adăugați corp personalizat”, apoi selectați „Construiți corp personalizat”.

NOTĂ: Adăugăm bara promoțională în zona corpului șablonului (nu antetul), astfel încât să poată funcționa cu antetul implicit al Divi, precum și cu orice antet personalizat pe care îl puteți adăuga în viitor.

Apoi selectați opțiunea „Build From Scratch”.

Adăugarea barei promoționale la șablon

În Editorul de machetare a șabloanelor, putem începe să construim bara promoțională folosind Divi Builder.

Începeți cu adăugarea unui rând cu o coloană la secțiunea obișnuită.

Setări rând

Înainte de a adăuga un modul, actualizați setările Row după cum urmează:

  • Culoarea din stânga a gradientului de fundal: # 4a42ec
  • Culoarea dreaptă a gradientului de fundal: # 521d91
  • Direcția gradientului: 90 grade
  • Utilizați lățimea personalizată a jgheabului: DA
  • Lățimea jgheabului: 1
  • Lățime: 100%
  • Lățime maximă: 100%
  • Căptușeală: 0 px sus, 0 px jos

Aceasta are grijă de culoarea de fundal și lățimea barei promoționale pe care o creăm.

Setări coloană

Înainte de a părăsi setările rândului, faceți clic pentru a deschide setările coloanei. Apoi adăugați următorul CSS personalizat în Elementul principal al coloanei: 

display: flex;
align-items: center;
justify-content: center;

Acest CSS folosește proprietatea flex pentru a alinia conținutul (sau modulele) din coloană pentru a stiva orizontal (unul lângă altul). De asemenea, centrează modulele din coloană atât pe verticală, cât și pe orizontală. Motivul pentru care o facem în acest fel este să evităm să folosim mai multe structuri de rânduri de coloane care se vor stiva una peste alta pe mobil. Cu această configurare, conținutul va rămâne într-o aliniere orizontală pe toate lățimile browserului.

Acum suntem gata să adăugăm conținut la bara promoțională.

Adăugarea modulului Blurb

Pentru conținutul acestui exemplu promoțional, vom include un modul blurb cu o pictogramă mică și un blog de text cu un buton în dreapta (la fel ca bara promoțională de pe Elegantthemes.com).

Faceți clic pe pictograma cerc gri plus din interiorul rândului și adăugați un modul de blurb.

Pentru conținutul textului, introduceți următoarele:

  • Titlu: [introduceți textul promoțional]
  • Utilizați pictograma: DA
  • Pictogramă: pictogramă cadou (vezi captura de ecran)

Actualizați setările de design pentru blurb după cum urmează:

  • Culoare pictogramă: # ff4a9e
  • Plasare imagine / pictogramă: stânga
  • Utilizați dimensiunea fontului pictogramei: DA
  • Pictogramă Dimensiune font: 16 px
  • Dimensiune text titlu: 16 px (desktop), 14 px (telefon)
  • Linia de titlu Hewight: 1.3em
  • Lățime maximă: 230 px (numai telefon)
  • Căptușeală: partea superioară de 10 px
  • Stil de animație: Slide
  • Direcția animației: Corect
  • Întârziere animație: 250 ms

Adăugarea modulului Buton

Apoi adăugați un modul buton sub modulul blurb. Datorită proprietății flex, modulul va apărea în dreapta blurbului în loc de sub el.

Actualizați setările de proiectare a butoanelor după cum urmează:

  • Utilizați stiluri personalizate pentru buton: DA
  • Dimensiune text buton: 15 px (desktop), 13 px (telefon)
  • Culoarea textului butonului: #ffffff
  • Lățimea chenarului butonului: 0 px
  • Raza chenarului butonului: 20 px
  • Buton Font Greutate: Semi Bold

  • Marja (desktop): 20 px stânga
  • Marja (telefon): 10 px stânga
  • Umplutură (desktop): 0 px în partea de sus, 0 px în partea de jos
  • Căptușeală (telefon): 2 px sus, 2 px jos, 8 px stânga, 8 px dreapta
  • Stil de animație: Bounce
  • Întârziere animație: 1000 ms

Setări secțiune

Pentru a finaliza designul barei promoționale, actualizați secțiunea care conține bara promoțională după cum urmează:

  • Căptușeală: 0 px sus, 0 px jos
  • Stil de animație: Bounce
  • Direcția animației: Jos
  • Durata animației: 500 ms
  • Întârziere animație: 250 ms
  • Animație Opacitate de pornire: 100%
  • Z-Index: 999

Adăugarea modulului FullWidth Post Content

În acest moment, bara promoțională este pregătită. Dar, deoarece acesta este un șablon, trebuie să ne asigurăm și să adăugăm modulul pentru conținutul postării pentru a afișa conținutul paginilor folosind acest șablon.

Pentru paginile care sunt (sau vor fi) construite folosind Divi Builder, veți dori să utilizați un modul de conținut post cu lățime completă pentru a maximiza aria de conținut.

(NOTĂ: Pentru paginile care utilizează editorul implicit, veți dori să utilizați un modul obișnuit de conținut de postare într-o secțiune obișnuită, astfel încât să aveți în mod implicit o lățime maximă similară de 1080px.)

Adăugați secțiunea lățime completă

Sub secțiunea care conține bara promoțională, adăugați o secțiune cu lățime completă.

Adăugați modulul de conținut Postare pentru lățime completă

Apoi selectați Modulul de conținut Postare pentru lățime completă.

Cam asta o face. Acum asigurați-vă și salvați aspectul înainte de a ieși din editor.

Apoi salvați modificările și pentru generatorul de teme.

Rezultat final

Inainte de

Iată acum pagina înainte de a atribui șablonul cu bara promoțională.

După

Și aici este aceeași pagină cu noul șablon cu bara promoțională.

Iată-l pe mobil.

Iată animația barei promoționale la încărcarea paginii.

Făcând bara promoțională lipicioasă

Pentru ca bara promoțională să rămână sub antetul Divi implicit, putem adăuga un fragment CSS simplu la secțiunea care conține bara promoțională.

Deschideți setările secțiunii și adăugați următorul CSS la Elementul principal de pe desktop: 

position: fixed;
width: 100%;

Apoi adăugați următorul CSS la elementul principal de pe tabletă: 

position: relative;

Acum verificați rezultatul.

Nu uitați de linkuri

După ce ați creat bara promoțională, veți dori să adăugați adresa URL a linkului la oferta sau pagina promoțională. Puteți adăuga adresa URL a linkului butonului în fila conținut setări buton.

Chiar și pentru conversiile efectuate, ați putea să adăugați adresa URL a linkului pe întregul rând, sub opțiunea de legare a setărilor rândului.

Gânduri finale

În acest tutorial, v-am arătat cum să proiectați o bară promoțională (de la zero) folosind Divi Theme Builder. Bara promoțională este completă cu mai multe animații și modele pentru a face să iasă în evidență vizitatorilor. Puteți chiar să fixați bara promoțională atunci când derulați pagina în jos pentru o vizibilitate și mai mare. Și cu posibilitatea de a controla unde apare bara promoțională pe tot site-ul dvs., aplicația este extrem de practică.

Sperăm că acest lucru vă va inspira să vă creați câteva bare promoționale.

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

Noroc!