Creați un bar de promovare animația pentru șablonul de pagină în Divi poate fi o modalitate excelentă de a face publicitate produselor și ofertelor elegante, fără a fi nevoie să vă bazați pe un plugin. Folosind caracteristicile puternice de design ale Divi, puteți crea vizual de promovare atunci când editați un șablon în Divi Theme Builder. Apoi, odată ce modelul este gata, bara de promovare va apărea pe orice pagină alocată acestui șablon. 

Vă vom arăta, de asemenea, cum să faceți bara de promovare fixă ​​(sau lipicioasă).

Ce ai nevoie pentru a începe

Pentru început, trebuie pentru a instala și activa 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 pentru testare, care va fi afectată de șablonul barei de promovare.

Creați o bară de promovare animată în partea de sus a unui șablon de pagină

Creați un nou șablon

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

Alocați șablonul pe pagina / paginile pe care ar trebui să fie afișată bara de promovare.

Pe noul șablon, faceți clic pe caseta „Adăugați corp personalizat” și selectați „Construiți corpul personalizat”.

NOTĂ: adăugăm bara de promovare în zona corpului modelului (nu antetul), astfel încât să poată funcționa cu antetul implicit Divi, precum și cu toate anteturile personalizat pe care îl puteți adăuga mai târziu.

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

Adăugarea barei de promovare la model

În editorul de aspect șablon, putem începe să creăm bara de promovare folosind Divi Builder.

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

Setări de linie

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

• Gradient de fundal stânga: # 4a42ec
• Gradient de fundal drept: # 521d91
• Gradient Direcție: 90deg
• Utilizați o lățime personalizată a jgheabului: DA
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățimea maximă: 100%
• Tapițerie: 0px în partea de sus, 0px în partea de jos

Aceasta acceptă culoarea de fundal și lățimea barei de promovare create de noi.

Parametrii coloanei

Înainte de a ieși din setările rândului, faceți clic pentru a deschide setările coloanei. Apoi adăugați următorul CSS personalizat la elementul coloanei principale:

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

Acest CSS folosește proprietatea flex pentru a alinia cuprins (sau module) în coloană pentru a se stivui orizontal (ună lângă alta). De asemenea, centrează modulele din coloană vertical și orizontal. Motivul pentru care procedăm astfel este să evităm să folosim mai multe structuri de rânduri de coloane care se vor stivui unele peste altele pe mobil. Cu această configurație, cuprins va rămâne aliniat orizontal pe toate lățimile browserului.

Acum suntem gata să adăugăm cuprins la bara de promovare.

Adăugați modulul Blurb

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

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

Pentru conținutul textului de prezentare, introduceți următoarele informații:

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

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

• Culoare pictogramă: # ff4a9e
• Imagine / locația pictogramelor: stânga
• Utilizați dimensiunea fontului pictogramei: DA
• Icon Dimensiune font: 16px
• Mărimea titlului textului: 16px (desktop), 14px (telefon)
• Linie de titlu Hewight: 1.3em
• Lățime maximă: 230px (doar pentru telefon)
• Garnitură: Top 10px
• Stil de animație: Slide
• Direcția animației: dreapta
• Î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 mai degrabă în dreapta blurb decât în ​​jos.

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

• Utilizați stiluri personalizate pentru butonul: DA
• Dimensiunea butonului text: 15px (desktop), 13px (telefon)
• Culoarea textului butonului: #ffffff
• Lățimea marginii butonului: 0px
• Raza marginii butonului: 20px
• Greutatea fontului: semi-îndrăzneț

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

Setări secțiune

Pentru a completa designul barei de promovare, actualizați secțiunea care conține bara de promovare după cum urmează:

• Tapițerie: 0px în partea de sus, 0px în partea de jos
• Stil de animație: Bounce
• Direcția animației: Jos
• Durata animației: 500ms
• Întârziere animație: 250 ms
• Animatie Opacitatea de pornire: 100%
• Index Z: 999

Adăugarea modulului de publicare de conținut complet

În acest moment, bara de promoții este gata. Dar, deoarece acesta este un șablon, trebuie să ne asigurăm că adăugăm modulul de publicare a conținutului pentru a afișa conținutul paginilor folosind acest șablon.

Pentru paginile care sunt construite (sau care 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 zona de conținut.

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

Adăugați o secțiune de lățime completă

În secțiunea care conține bara de promovare, adăugați o secțiune cu lățime completă.

Adăugați un modul de conținut în format Lățime completă

Apoi selectați modulul Conținut post complet.

Este mai mult sau mai puțin asta. Acum asigurați-vă și salvați aspectul înainte de a ieși din editor.

Apoi salvați modificările pentru creatorul de teme.

Rezultat final

Înainte

Iată acum pagina înainte de a atribui modelul cu bara de promovare.

Après

Și iată aceeași pagină cu noul șablon cu bara promo.

Faceți barul promoțional lipicios

Pentru ca bara de promoție să se încadreze sub antetul implicit al Divi, putem adăuga un fragment CSS simplu la secțiunea care conține bara promo.

position: fixed;width: 100%;

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

Apoi adăugați următorul cod CSS la elementul principal al tabletei:

position: relative;

Acum verificați rezultatul.

Pentru conversiile anterioare, puteți adăuga, de asemenea, adresa URL a linkului pe întregul rând, sub opțiunea Link setări rând.

Ultimele gânduri

Î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 o face cu adevărat vizibilă vizitatori. Puteți chiar să remediați bara promoțională în timp ce derulați în jos pe pagină pentru și mai multă vizibilitate. Și cu capacitatea de a controla unde este plasată bara de promovare pe site-ul dvs., aplicația este extrem de convenabilă.