Vytvořte bar podpora animace pro vaši šablonu stránky v Divi může být skvělý způsob, jak inzerovat elegantní produkty a nabídky, aniž byste se museli spoléhat na plugin. Pomocí výkonných designových funkcí Divi můžete vizuálně vytvořit podpora když upravujete šablonu v Divi Theme Builder. Poté, jakmile je model připraven, lišta podpora se zobrazí na jakékoli stránce přiřazené k této šabloně. 

Ukážeme vám také, jak nastavit reklamní pruh (nebo lepit).

Co potřebujete, abyste mohli začít

Chcete-li začít, musíte nainstalovat a aktivovat téma Divi . Ujistěte se, že máte nejnovější verzi Divi.

Pro účely testování budete také potřebovat alespoň jednu stránku vytvořenou v aplikaci Divi Builder, která bude ovlivněna šablonou propagačního pruhu.

V horní části šablony stránky vytvořte animovaný pruh propagace

Vytvořte novou šablonu

Na řídicím panelu WordPress přejděte na Divi> Generátor motivů. Poté klikněte na pole „Přidat novou šablonu“ a vytvořte novou šablonu.

Přiřaďte šablonu ke stránkám, na kterých by se měla zobrazit propagační lišta.

Na nové šabloně klikněte na pole „Přidat vlastní tělo“ a vyberte „Sestavit vlastní tělo“.

POZNÁMKA: přidáváme propagační lištu do oblasti těla modelu (nikoli do záhlaví), aby mohla fungovat s výchozím záhlavím Divi i se všemi záhlavími zvyk, který můžete přidat později.

Poté vyberte možnost „Sestavit od začátku“.

Přidání propagační lišty do modelu

V editoru rozložení šablony můžeme začít vytvářet propagační lištu pomocí nástroje Divi Builder.

Začněte přidáním řádku jednoho sloupce do běžné sekce.

Nastavení linky

Před přidáním modulu aktualizujte parametry řádku následovně:

• Levý přechod na pozadí: # 4a42ec
• Pravý gradient pozadí: # 521d91
• Směr přechodu: 90deg
• Použijte vlastní šířku okapu: ANO
• Šířka okapu: 1
• Šířka: 100%
• Maximální šířka: 100%
• Čalounění: 0px nahoře, 0px na dně

To podporuje barvu pozadí a šířku propagační lišty, kterou vytváříme.

Parametry sloupce

Před ukončením nastavení řádku kliknutím otevřete nastavení sloupce. Poté přidejte do prvku hlavního sloupce následující vlastní CSS:

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

Tento CSS používá vlastnost flex k zarovnání obsah (nebo moduly) ve sloupci ke stohování vodorovně (vedle sebe). Také vystředí moduly ve sloupci svisle a vodorovně. Důvodem, proč to děláme tímto způsobem, je vyhnout se nutnosti používat více sloupcových řádkových struktur, které se na mobilu naskládají na sebe. S touto konfigurací, obsah zůstane vodorovně zarovnána přes všechny šířky prohlížeče.

Nyní jsme připraveni přidat obsah do propagačního baru.

Přidejte Blurb modul

K obsahu tohoto propagačního příkladu přidáme prezentační modul s malou ikonou a textový blog s tlačítkem vpravo (podobně jako propagační panel na Elegantthemes.com).

Klikněte na šedý kruh plus ikonu uvnitř řádku a přidejte modul prezentace.

K obsahu prezentačního textu zadejte následující informace:

• Název: [zadejte text propagace]
• Použijte ikonu: ANO
• Ikona: ikona dárku (viz screenshot)

Aktualizujte nastavení návrhu prezentace následujícím způsobem:

• Barva ikony: # ff4a9e
• Obrázek / umístění ikon: vlevo
• Použijte velikost písma ikony: ANO
• Ikona Velikost písma: 16px
• Velikost nadpisu textu: 16px (desktop), 14px (telefon)
• Řádkový řádek Hewight: 1.3em
• Maximální šířka: 230px (pouze telefon)
• Výplň: Nejlépe 10px
• Styl animace: Snímek
• Směr animace: vpravo
• Zpoždění animace: 250 XNUMX ms

Přidání modulu tlačítek

Poté přidejte knoflíkový modul pod modul Blurb. Kvůli vlastnosti flex se modul bude zobrazovat napravo od reklamy, nikoli níže.

Aktualizujte parametry návrhu tlačítka následujícím způsobem:

• Pro tlačítko: ANO použijte vlastní styly
• Velikost textu tlačítka: 15px (desktop), 13px (telefon)
• Barva textu tlačítka: #ffffff
• Šířka okraje tlačítka: 0px
• Poloměr ohraničení tlačítka: 20px
• Hmotnost písma: polotučné

• Margin (desktop): 20px vlevo
• Marže (telefon): 10px vlevo
• Čalounictví (kancelář): 0px nahoře, 0px na dně
• Výplň (telefon): 2px v horní části, 2px v dolní části, 8px vlevo, 8px vpravo
• Styl animace: Bounce
• Zpoždění animace: 1000 XNUMX ms

Nastavení sekce

Chcete-li dokončit návrh propagační lišty, aktualizujte sekci obsahující propagační lištu takto:

• Čalounění: 0px nahoře, 0px na dně
• Styl animace: Bounce
• Směr animace: Dolů
• Délka animace: 500 XNUMX ms
• Zpoždění animace: 250 XNUMX ms
• Animace Počáteční krytí: 100%
• Z-Index: 999

Přidání modulu publikování obsahu v plné šíři

V tomto okamžiku je panel promoakcí připraven. Jelikož se však jedná o šablonu, musíme se ujistit, že přidáme modul pro odesílání obsahu, aby se obsah této stránky zobrazil pomocí této šablony.

U stránek vytvořených (nebo vytvořených) pomocí nástroje Divi Builder budete chtít použít modul příspěvku s plnou šířkou a maximalizovat tak oblast obsahu.

(POZNÁMKA: U stránek, které používají výchozí editor, budete chtít použít standardní mod post content v běžné sekci, abyste ve výchozím nastavení dosáhli podobné maximální šířky 1080px.)

Přidejte sekci s plnou šířkou

V sekci obsahující váš propagační pruh přidejte celou šířku.

Přidejte modul obsahu ve formátu Fullwidth

Poté vyberte modul Fullwidth Post Content.

Je to víceméně to. Nyní se ujistěte a uložte rozložení před ukončením editoru.

Poté uložte změny pro tvůrce motivu.

Konečný výsledek

Před

Nyní je zde stránka před přiřazením modelu k pruhu propagace.

Po

A tady je stejná stránka s novou šablonou s promo barem.

Propagujte reklamní pruh

Aby se propagační pruh vešel do výchozí záhlaví Divi, můžeme do části obsahující promo panel přidat jednoduchý úryvek CSS.

position: fixed;width: 100%;

Otevřete nastavení sekce a přidejte následující kód CSS do hlavního prvku plochy:

Pak přidejte následující kód CSS do hlavního prvku tabletu:

position: relative;

Nyní zkontrolujte výsledek.

U předchozích konverzí můžete také přidat adresu URL odkazu do celého řádku pod možností odkazu Nastavení řádku.

Závěrečné myšlenky

V tomto tutoriálu jsme vám ukázali, jak navrhnout promo panel (od začátku) pomocí Divi Theme Builder. Propagační lišta je doplněna mnoha animacemi a návrhy, aby byla skutečně viditelná Návštěvníci. Pro ještě větší viditelnost můžete dokonce opravit propagační lištu, když posouváte stránku dolů. A díky možnosti ovládat umístění propagačního pruhu na vašem webu je aplikace mimořádně pohodlná.