Vytvorte bar podpora animácia pre vašu šablónu stránky v Divi môže byť skvelým spôsobom, ako inzerovať elegantné produkty a ponuky bez toho, aby ste sa museli spoliehať na doplnok. Pomocou výkonných dizajnových funkcií Divi môžete vizuálne vytvoriť podpora keď upravujete šablónu v Divi Theme Builder. Potom, keď je model pripravený, lišta podpora sa zobrazí na každej stránke priradenej k tejto šablóne. 

Ukážeme vám tiež, ako opraviť (alebo nalepiť) reklamnú lištu.

Čo potrebujete, aby ste začali

Na začiatok musíte nainštalovať a aktivovať tému Divi . Uistite sa, že máte najnovšiu verziu aplikácie Divi.

Na účely testovania budete tiež potrebovať aspoň jednu stránku vytvorenú v aplikácii Divi Builder, ktorá bude ovplyvnená šablónou propagačnej lišty.

Vytvorte animovaný propagačný panel v hornej časti šablóny stránky

Vytvorte novú šablónu

Na hlavnom paneli WordPress prejdite na ikonu Divi> Generátor tém. Potom kliknite na políčko „Pridať novú šablónu“ a vytvorte novú šablónu.

Priraďte šablónu k stránkam, na ktorých by sa mala zobraziť propagačná lišta.

Na novej šablóne kliknite na políčko „Pridať vlastné telo“ a vyberte „Zostaviť vlastné telo“.

POZNÁMKA: do oblasti tela modelu (nie do hlavičky) pridávame propagačný panel, aby mohol pracovať s predvolenou hlavičkou Divi aj so všetkými hlavičkami zvyk, ktorý môžete pridať neskôr.

Potom vyberte možnosť „Vytvoriť od začiatku“.

Pridanie propagačnej lišty k modelu

V editore rozloženia šablón môžeme začať vytvárať propagačný panel pomocou aplikácie Divi Builder.

Začnite pridaním riadku s jedným stĺpcom do bežnej sekcie.

Nastavenie linky

Pred pridaním modulu aktualizujte parametre riadka takto:

• Ľavý gradient pozadia: # 4a42ec
• Pravý gradient na pozadí: # 521d91
• Smer gradientu: 90deg
• Použite vlastnú šírku odkvapov: ÁNO
• Šírka odkvapov: 1
• Šírka: 100%
• Maximálna šírka: 100%
• Čalúnenie: 0px hore, 0px dole

To podporuje farbu pozadia a šírku propagačnej lišty, ktorú vytvárame.

Parametre stĺpca

Pred ukončením nastavenia riadku kliknutím otvorte nastavenie stĺpca. Potom pridajte do prvku hlavného stĺpca nasledujúce vlastné CSS:

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

Tento CSS používa vlastnosť flex na zarovnanie obsah (alebo moduly) v stĺpci stohovať vodorovne (vedľa seba). Tiež vycentruje moduly v stĺpci vertikálne a horizontálne. Dôvodom, prečo to robíme týmto spôsobom, je vyhnúť sa tomu, aby sme museli používať viaceré stĺpcové riadkové štruktúry, ktoré sa na mobilnom zariadení ukladajú na seba. Pri tejto konfigurácii je obsah zostanú vodorovne zarovnané vo všetkých šírkach prehliadača.

Teraz sme pripravení pridať obsah na propagačný panel.

Pridajte modul Blurb

K obsahu tohto propagačného príkladu pripojíme prezentačný modul s malou ikonou a textový blog s tlačidlom napravo (podobne ako reklamný panel na Elegantthemes.com).

Kliknite na sivý kruh a ikonu vo vnútri riadku a pridajte prezentačný modul.

Pre obsah prezentačného textu zadajte nasledujúce informácie:

• Názov: [zadajte text propagácie]
• Použite ikonu: ÁNO
• Ikona: ikona darčeka (pozri snímku obrazovky)

Aktualizujte nastavenia dizajnu prezentácie takto:

• Farba ikony: # ff4a9e
• Obrázok / umiestnenie ikon: vľavo
• Použiť veľkosť písma ikony: ÁNO
• Ikona Veľkosť písma: 16px
• Veľkosť názvu textu: 16px (desktop), 14px (phone)
• Hewight nadpis: 1.3em
• Maximálna šírka: 230px (iba telefón)
• Výplň: Najvyššia 10px
• Štýl animácie: Snímka
• Smer animácie: vpravo
• Oneskorenie animácie: 250 XNUMX ms

Pridanie modulu tlačidiel

Potom pridajte modul tlačidiel pod modul Blurb. Kvôli vlastnosti flex sa modul bude javiť napravo od reklamy, nie dole.

Aktualizujte parametre návrhu tlačidla takto:

• Použite vlastné štýly pre tlačidlo: ÁNO
• Veľkosť textu tlačidla: 15px (počítač), 13px (telefón)
• Farba textu tlačidla: #ffffff
• Šírka okraja tlačidla: 0px
• Polomer okraja tlačidla: 20px
• Hmotnosť písma: polotučné

• Marža (pracovná plocha): 20px vľavo
• Marža (telefón): 10px vľavo
• Čalúnenie (kancelária): 0px hore, 0px dole
• Výplň (telefón): 2px hore, 2px dole, 8px vľavo, 8px vpravo
• Štýl animácie: Bounce
• Oneskorenie animácie: 1000 XNUMX ms

Nastavenia sekcií

Ak chcete dokončiť návrh propagačnej lišty, aktualizujte časť obsahujúcu reklamnú lištu takto:

• Čalúnenie: 0px hore, 0px dole
• Štýl animácie: Bounce
• Smer animácie: Dole
• Trvanie animácie: 500 XNUMX ms
• Oneskorenie animácie: 250 XNUMX ms
• Začiatočná nepriehľadnosť animácie: 100%
• Z-index: 999

Pridanie modulu na publikovanie obsahu v plnej šírke

V tomto okamihu je panel promočných akcií pripravený. Pretože sa však jedná o šablónu, musíme sa uistiť, že sme pridali modul odosielania obsahu, aby sme pomocou tejto šablóny mohli zobraziť obsah stránok.

V prípade stránok vytvorených (alebo vytvorených) pomocou nástroja Divi Builder budete chcieť na zväčšenie oblasti obsahu použiť modul príspevku po celej šírke.

(POZNÁMKA: Pre stránky, ktoré používajú predvolený editor, budete chcieť v štandardnej sekcii použiť štandardný režim post content, aby ste predvolene dosiahli podobnú maximálnu šírku 1080px.)

Pridajte celú šírku sekcie

Do sekcie obsahujúcej reklamný pruh pridajte celú šírku sekcie.

Pridajte modul obsahu vo formáte Fullwidth

Potom vyberte modul Fullwidth Post Content.

Je to viac-menej to. Teraz pred zatvorením editora skontrolujte a uložte rozloženie.

Potom uložte zmeny pre tvorcu témy.

Konečný výsledok

Avant

Teraz je tu stránka pred priradením modelu k propagačnej lište.

Po

A tu je rovnaká stránka s novou šablónou s reklamným pruhom.

Vytvorte lepivú reklamnú lištu

Aby sa lišta propagácie zmestila pod predvolenú hlavičku Divi, môžeme do sekcie obsahujúcej promo panel pridať jednoduchý útržok CSS.

position: fixed;width: 100%;

Otvorte nastavenia sekcie a do hlavného prvku pracovnej plochy pridajte nasledujúci kód CSS:

Potom pridajte do hlavného prvku tabletu nasledujúci kód CSS:

position: relative;

Teraz skontrolujte výsledok.

Pri predchádzajúcich konverziách môžete tiež pridať adresu URL odkazu do celého riadku pod možnosťou odkazu Nastavenia riadku.

záverečné myšlienky

V tomto návode sme vám ukázali, ako navrhnúť promo panel (od začiatku) pomocou Divi Theme Builder. Propagačný panel je doplnený o viacero animácií a návrhov, aby bol skutočne viditeľný Návštevníci. Môžete dokonca opraviť propagačný panel, keď posúvate stránku nadol, aby ste získali ešte väčšiu viditeľnosť. A vďaka možnosti ovládať umiestnenie propagačného panela na vašom webe je aplikácia mimoriadne pohodlná.