Napravite bar promocija animacija za predložak vaše stranice u Diviju može biti odličan način za oglašavanje elegantnih proizvoda i ponuda bez potrebe da se oslanjate na dodatak. Koristeći Divi moćne karakteristike dizajna, možete vizualno kreirati promocija kada uređujete predložak u Divi Theme Builderu. Zatim, kada je model spreman, šipka promocija će se pojaviti na bilo kojoj stranici koja je dodijeljena ovom predlošku. 

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

Šta vam je potrebno za početak

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

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

Kreirajte novi predložak

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

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

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

NAPOMENA: dodajemo traku za promociju u 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 „Napravi iz ogrebotina“.

Dodavanje trake za promociju modela

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

Započnite dodavanjem reda u jednom stupcu u redovni odjeljak.

Postavke linije

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

• Lijevi gradijent pozadine: # 4a42ec
• Desni pozadinski gradijent: # 521d91
• Gradient Direction: 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 reda, 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žaja (ili modula) u koloni za vodoravno slaganje (jedan pored drugog). Također centrira module u stupcu okomito i horizontalno. Razlog zašto to radimo na ovaj način je da izbjegnemo korištenje višestrukih struktura redova kolona koje će se naslagati jedna na drugu na mobilnom uređaju. Sa ovom konfiguracijom, sadržaja će ostati horizontalno poravnat u svim širinama pretraživača.

Sada smo spremni za dodavanje sadržaja na promotivni trak.

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 reda i dodajte prezentacijski modul.

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

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

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

• Boja ikone: # ff4a9e
• Slika / lokacija ikona: levo
• Koristite veličinu fonta ikone: DA
• Veličina fonta ikone: 16px
• Veličina naslova teksta: 16px (radna površina), 14px (telefon)
• Naslov naslova Hewight: 1.3em
• Maksimalna širina: 230px (samo telefon)
• Padding: Top 10px
• Animacija Style: Slide
• Smjer animacije: desno
• Kašnjenje animacije: 250ms

Dodavanje modula dugmeta

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

Ažurirajte parametre dizajna dugmeta na sledeći način:

• Upotrijebite prilagođene stilove za tipku: DA
• Veličina teksta gumba: 15px (desktop), 13px (telefon)
• Dugme za tekst dugmeta: #ffffff
• Širina granice gumba: 0px
• Radijus granice gumba: 20px
• Težina slova: polu-podebljana

• 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: 1000ms

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: 250ms
• Pokretanje neprozirnosti animacije: 100%
• Z-indeks: 999

Dodavanje modula za objavljivanje sadržaja pune širine

U ovom trenutku, traka za promocije je spremna. Ali s obzirom na to da je ovo predložak, moramo osigurati da dodamo modul za objavljivanje sadržaja da bi se prikazao sadržaj stranica (a) pomoću ovog predloška.

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

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

Dodajte odjeljak pune širine

U odjeljak koji sadrži vašu promotivnu traku dodajte odjeljak pune širine.

Dodajte sadržajni modul u Fullwidth formatu

Zatim odaberite modul Puni sadržaj posta.

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

Zatim spremite promjene za graditelj tema.

Konačni rezultat

avant

Sada je stranica prije dodjeljivanja modela s trakom za promociju.

nakon

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 konverzije također možete dodati URL veze u cijeli redak, pod opcijom Veza postavki retka.

Final misli

U ovom vodiču smo vam pokazali kako dizajnirati promo traku (od nule) koristeći Divi Theme Builder. Promotivna traka je kompletirana s višestrukim animacijama i dizajnom kako bi bila zaista vidljiva posjetitelja. Možete čak popraviti promo traku dok se pomičete niz stranicu za još veću vidljivost. A s mogućnošću kontrole gdje se promotivna traka nalazi na vašoj web lokaciji, aplikacija je izuzetno zgodna.