Napravite bar promocija animacija za vaš predložak stranice u Diviju može biti sjajan način za oglašavanje elegantnih proizvoda i ponuda bez potrebe za oslanjanjem na dodatak. Koristeći Divi moćne značajke dizajna, možete vizualno stvoriti promocija kada uređujete predložak u Divi Theme Builderu. Zatim, nakon što je model spreman, šipka promocija pojavit će se na bilo kojoj stranici dodijeljenoj ovom predlošku. 

Također ćemo vam pokazati kako fiksiranje (ili ljepljenje) promocijske trake.

Što trebate za početak

Za početak morate za instaliranje i aktiviranje teme Divi . Provjerite imate li najnoviju verziju Divi.

Trebat će vam barem jedna stranica stvorena s Divi Builder-om za potrebe testiranja, na što će utjecati predložak promotivne trake.

Stvorite animiranu traku za promociju na vrhu predloška stranice

Izradite novi predložak

Na nadzornoj ploči WordPressa idite na Divi> Generator tema. Zatim kliknite okvir "Dodaj novi predložak" da biste stvorili novi predložak.

Dodijelite predložak stranicama na kojima bi trebala biti prikazana promotivna traka.

Na novom predlošku kliknite okvir "Dodaj prilagođeno tijelo" i odaberite "Izgradi prilagođeno tijelo".

NAPOMENA: dodajemo traku za promociju na područje tijela modela (ne zaglavlja) kako bi moglo raditi sa zadanim zaglavljem Divi, kao i sa svim zaglavljima običaj koji možete dodati kasnije.

Zatim odaberite opciju "Build From Scratch".

Dodavanje trake za promociju modela

U uređivaču izgleda predloška možemo započeti s izradom promocijske trake pomoću Divi Builder-a.

Započnite dodavanjem retka s jednim stupcem u redoviti odjeljak.

Postavke linije

Prije dodavanja modula, ažurirajte parametre Reda na sljedeći način:

• Lijevi gradijent pozadine: # 4a42ec
• Desni pozadinski gradijent: # 521d91
• Smjer gradijenta: 90deg
• Koristite prilagođenu širinu oluka: DA
• Širina oluka: 1
• Širina: 100%
• Maksimalna širina: 100%
• Tapaciranje: 0px na vrhu, 0px na dnu

To podržava boju pozadine i širinu promotivne trake koju stvaramo.

Parametri stupca

Prije izlaska iz postavki retka, kliknite da biste otvorili postavke stupaca. Zatim dodajte sljedeći prilagođeni CSS glavnom elementu stupca:

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

Ovaj CSS koristi svojstvo flex za poravnavanje sadržaj (ili module) u stupac za vodoravno slaganje (jedan pored drugog). Također centrira module u stupcu okomito i vodoravno. Razlog zašto to činimo na ovaj način je izbjegavanje upotrebe višestrukih struktura redaka stupaca koji će se slagati jedan na drugi na mobilnom uređaju. S ovom konfiguracijom, sadržaj ostat će vodoravno poravnati u svim širinama preglednika.

Sada smo spremni za dodavanje sadržaj do promotivne trake.

Dodajte modul Blurb

Za sadržaj ovog primjera promocije uključit ćemo prezentacijski modul s malom ikonom i tekstualni blog s gumbom s desne strane (slično kao promocijska traka na Elegantthemes.com).

Kliknite sivi krug plus ikonu unutar retka i dodajte prezentacijski modul.

Za sadržaj prezentacijskog teksta unesite sljedeće podatke:

• Naslov: [unesite tekst promocije]
• Upotrijebite ikonu: DA
• Ikona: ikona poklona (pogledajte snimak zaslona)

Ažurirajte postavke dizajna prezentacije na sljedeći način:

• Boja ikone: # ff4a9e
• Slika / mjesto ikona: lijevo
• Koristite veličinu fonta ikone: DA
• Veličina fonta ikone: 16px
• Veličina naslova teksta: 16px (desktop), 14px (telefon)
• Redak naslova Hewight: 1.3em
• Maksimalna širina: 230px (samo telefon)
• Padding: Top 10px
• Stil animacije: dijapozitiv
• Smjer animacije: desno
• Kašnjenje animacije: 250 ms

Dodavanje modula gumba

Zatim dodajte modul gumba ispod modula Blurb. Zbog svojstva flex modul će se pojaviti s desne strane zamućenja, a ne ispod.

Ažurirajte parametre dizajna gumba na sljedeći način:

• Upotrijebite prilagođene stilove za gumb: DA
• Veličina teksta gumba: 15px (radna površina), 13px (telefon)
• Boja teksta gumba: #ffffff
• Širina obruba gumba: 0px
• Polumjer granice gumba: 20px
• Težina slova: polusjeda

• Margin (desktop): 20px s lijeve strane
• Margina (telefon): 10px s lijeve strane
• Tapaciranje (uredski): 0px na vrhu, 0px na dnu
• Padding (telefon): 2px na vrhu, 2px na dnu, 8px na lijevoj strani, 8px na desnoj strani
• Stil animacije: Odskakivanje
• Kašnjenje animacije: 1000 ms

Postavke odjeljka

Da biste dovršili dizajn promotivne trake, ažurirajte odjeljak koji sadrži promotivnu traku na sljedeći način:

• Tapaciranje: 0px na vrhu, 0px na dnu
• Stil animacije: Odskakivanje
• Smjer animacije: Dolje
• Trajanje animacije: 500ms
• Kašnjenje animacije: 250 ms
• Pokretanje neprozirnosti animacije: 100%
• Z-indeks: 999

Dodavanje modula objavljivanja pune širine sadržaja

U ovom je trenutku traka za promocije spremna. No budući da je ovo predložak, moramo biti sigurni da smo dodali modul za objavljivanje sadržaja da bi se prikazao sadržaj stranica (e) pomoću ovog predloška.

Za stranice izgrađene (ili koje će se izrađivati) pomoću Divi Builder, morat ćete upotrijebiti modul post sadržaja pune širine kako biste maksimizirali područje sadržaja.

(NAPOMENA: Za stranice koje koriste zadani uređivač, morat ćete upotrijebiti standardni mod za sadržaj sadržaja u redovnom odjeljku kako biste postigli sličnu maksimalnu širinu od 1080 piksela prema zadanim postavkama.)

Dodajte odjeljak pune širine

Pod odjeljak koji sadrži vašu promocijsku traku dodajte odjeljak pune širine.

Dodajte sadržajni modul u Fullwidth formatu

Zatim odaberite modul Puni širina posta.

To je više-manje to. Sada provjerite i spremite izgled prije izlaska iz uređivača.

Zatim spremite promjene za graditelj tema.

Konačni rezultat

Prije

Sada je stranica prije dodjeljivanja modela s trakom za promociju.

Après

I evo iste stranice s novim predložakom s promo trakom.

Učinite promotivni bar ljepljivim

Da bi se promotivna traka uklopila u zadano zaglavlje Divi-ja, u odjeljak koji sadrži promo traku možemo dodati jednostavan CSS isječak.

position: fixed;width: 100%;

Otvorite postavke odjeljka i dodajte sljedeći CSS kôd glavnom elementu radne površine:

Zatim dodajte sljedeći CSS kôd glavnom elementu tableta:

position: relative;

Sada provjerite rezultat.

Za prethodne pretvorbe, URL veze možete dodati i u cijeli redak, pod opcijom Veza postavki retka.

Završne misli

U ovom smo vam vodiču pokazali kako dizajnirati promo traku (od nule) pomoću Divi Theme Buildera. Promotivna traka opremljena je brojnim animacijama i dizajnom kako bi bila uistinu vidljiva posjetitelji. Možete čak popraviti promo traku dok se pomičete prema dolje na stranici za još veću vidljivost. A uz mogućnost kontroliranja mjesta na kojem se promotivna traka nalazi na vašoj web-lokaciji, aplikacija je iznimno praktična.