Divi: Nejlepší WordPress téma všech dob!

více Stahování 901.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma.

Vytvoření animované propagační lišty pro šablonu vaší stránky v Divi může být skvělý způsob, jak inzerovat stylové 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 lištu propagace, když upravujete šablonu ve Tvůrci motivů Divi. Až bude šablona připravena, zobrazí se lišta propagace 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řidejte nový model divi

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

Domovská stránka Divi

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.

Přidejte model těla

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.

Přidat řádek do sloupce na divi

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.

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní tvořit Snadno a zdarma jakýkoli design webových stránek nebo blogu s profesionálním vzhledem. Přestaňte platit hodně za web, který si můžete udělat sami.

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;

Přizpůsobení CSS kódu

Tento CSS používá vlastnost flex k zarovnání obsahu (nebo modulů) ve sloupci k horizontálnímu stohování (vedle sebe). Rovněž vycentruje moduly ve sloupci svisle a vodorovně. Důvod, proč to děláme, je vyhnout se nutnosti používat více struktur řádků sloupců, které se budou v mobilu skládat na sebe. S touto konfigurací zůstane obsah vodorovně zarovnaný napříč všemi šířkami prohlížeče.

Nyní jsme připraveni přidat obsah na panel propagace.

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.

Přidejte druhou část souhrnného modulu

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)
Konfigurace modulu shrnutí divi

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.

Modul tlačítka Divi

Chcete prodávat své produkty na internetu?

Stáhněte si zdarma WooCommerce, nejlepší pluginy pro e-commerce pro prodej vašich fyzických a digitálních produktů na WordPress a snadné vytvoření vašeho online obchodu. Ideální pro začátečníky.

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é
Přizpůsobte si modul tlačítka divi
  • 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
Přizpůsobte rozteč modulů tlačítka divi

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řizpůsobte animační divi modul

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.

Vytvořte sekci Tvůrce divi na celou šířku

Přidejte modul obsahu ve formátu Fullwidth

Poté vyberte modul Fullwidth Post Content.

Divi obsah obsahu celé šířky

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

Uložit divi rozložení

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

Tvůrce motivů divi

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:

Vstupte do pevné sekce

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

position: relative;

Přidejte do sekce divi kód css

Nyní zkontrolujte výsledek.

Animovaný výsledek divi

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 kurzu jsme vám ukázali, jak navrhnout propagační lištu (od nuly) pomocí nástroje Divi Theme Builder. Propagační lišta je doplněna několika animacemi a designy, aby byla návštěvníkům skutečně viditelná. Můžete dokonce opravit lištu propagace, když se posunete dolů po stránce, abyste ještě více viděli. A díky možnosti ovládat umístění propagační lišty na vašem webu je aplikace velmi pohodlná.

2 akcie
podíl2
tweet
Zadat