[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885px0px !important;border-bottom-width: 0px !important;padding-bottom: 0px !important;}"][vc_column_text]

Divi: nejjednodušší téma WordPress k použití

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] STÁHNOUT [/vcex_button][/ vc_column][/vc_row]

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.

Výzva k akci na vašem webu je jedním z nejméně rušivých způsobů, jak upoutat pozornost návštěvníků. Většinu času CTA prostě ignorují nebo zavírají, aby mohli stránku dále procházet, ale někdy si je vyděláte. Prezentace s výzvou k akci bude skvěle fungovat při propagaci téměř všeho na vstupní stránce.

V tomto tutoriálu navrhneme uzavíratelnou výzvu k akci, kterou lze přidat do kteréhokoli rohu stránky pomocí nástroje Divi Theme Builder. Po dokončení budete moci propagovat své produkty a speciality kdekoli na stránce, aniž byste museli používat plugin.

Začněme!

přehled

Zde je rychlý pohled na čtyři vložené CTA, které přidáme do čtyř rohů šablony stránky. Samozřejmě nebudete muset nasadit všechny čtyři najednou. Všimněte si, jak lze každý z nich zavřít kliknutím na ikonu „x“. Poté můžete kliknout na ikonu „plus“ znovu povolit CTA.

Co potřebujete, abyste mohli začít

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

Budete také potřebovat alespoň jednu stránku vytvořenou pomocí nástroje Divi Builder pro účely testování, abyste této stránce přiřadili novou šablonu pro zobrazení výsledku.

Vytvoření posuvné výzvy k akci se šablonou stránky v Divi

Vytvoření nového modelu

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.

Vytvořte šablonu stránky

Přiřaďte šablonu ke stránce nebo ke stránkám, na kterých chcete zobrazit reklamní panel.

Přiřaďte šablonu stránky stránkám

Na novém modelu klikněte na oblast „Přidat vlastní tělo“ a poté vyberte „Vytvořit vlastní tělo“.

Přidejte vlastní tělo

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

Vytvoření sekce obsahu publikace

Sekce obsahu příspěvku je nezbytnou součástí jakékoli šablony stránky, aby bylo možné zobrazit skutečný obsah stránky nebo vloženého příspěvku ve formátu Divi nebo WordPress. Před vytvořením naší první výzvy k akci, kterou vložíme, ji přidáme do našeho modelu.

Přidejte řádek do sloupce

Nejprve přidejte řádek sloupce do normální sekce.

Jednořádkový úsek

Přidejte modul pro publikování obsahu

Poté do řádku přidejte modul publikování obsahu.

Obsah položky

Nastavení linky

Poté aktualizujte parametry linky následovně:

  • Šířka: 100%
  • Maximální šířka: 100%
  • Výplň: 0px vysoká, 0px nízká
Konfigurace divi linky

Vytváření výzvy k akci vlevo nahoře

Nyní, když máme zaveden náš modul obsahu příspěvku, jsme připraveni začít přidávat naši první výzvu k akci, kterou chceme vložit do levého horního rohu šablony stránky.

Přidejte sekci

Každá nová výzva k akci bude vytvořena ve zcela nové sekci. To vám umožní přidat jakékoli rozvržení nebo modul potřebný k návrhu výzvy k akci.

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.

Přidejte do rozvržení šablony novou pravidelnou sekci.

Výběr nové divi sekce

Přidejte řádek do sloupce

Poté dejte sekci řádek sloupce.

Vyberte divi sloupec

Nastavení sekce

Přetáhněte (nebo přesuňte) sekci nad sekci obsahu příspěvku a aktualizujte nastavení sekce takto:

  • Přechod levého barevného pozadí:
  • Přechod na pravé pozadí:
  • Zobrazit přechod nad obrázkem: ANO
  • Obrázek na pozadí: [vložte obrázek]
  • Šířka: 320px
  • Marže: zbývá 320 pixelů
  • Výplň: 0px vysoká, 0px nízká
  • Styl animace: Snímek
  • Směr animace: vpravo
  • Zpoždění animace: 2000 XNUMX ms

Poté přejděte na kartu Upřesnit a přidejte následující třídu CSS a index Z:

  • Třída CSS: slide-in-cta
  • Z Index: 999

A přidejte vlastní fragment CSS za hlavním prvkem:

position: fixed;top: 80px;left: -320px;

Třída CSS je nutná, abychom mohli později zacílit sekci s kódem. Vlastní CSS umístí levou horní část šablony stránky na pevnou (nebo lepivou) pozici. Poloha „vlevo: -320 pixelů“ by měla přesunout celou část (která je široká 320 pixelů) mimo okno prohlížeče (tedy mimo náš pohled). Ale máme levý okraj 320 pixelů, abychom jej vrátili zpět k zobrazení. Důvod, proč je konstruován tímto způsobem, je ten, že můžeme hodnotu okraje zapnout nebo vypnout, když kliknete na ikonu „x“. To způsobí, že CTA sklouzne dovnitř a ven z dohledu.

Nastavení linky

Nyní aktualizujte parametry řádku následujícím způsobem:

  • Použijte vlastní šířku okapu: ANO
  • Šířka okapu: 1
  • Šířka: 100%
  • Výplň: 0px vysoká, 0px nízká
Parametr Divi Line

Přidejte modul výzvy k akci

Do řádku přidejte modul Výzva k akci.

Přidejte modul výzvy k akci

Nastavení výzvy k akci

Poté aktualizujte nastavení výzvy k akci.

Obsah
  • Název: [zadejte požadovaný text]
  • Tlačítko: [zadejte požadovaný text]
  • Tělo: [zadejte požadovaný text]
  • URL odkazu na tlačítko: [zadejte skutečnou adresu URL nebo #]
Přizpůsobte si nabídku modulu divi

Poté odeberte výchozí barvu pozadí a odhalte pozadí sekce, kterou jsme přidali dříve.

Odstraňte barvu pozadí
Parametry návrhu (text, tlačítko a výplň)

Na kartě Návrh aktualizujte následující:

  • Písmo názvu: Lato
  • Titulek písma: těžký
  • Výška řádku nadpisu: 1,3 em
  • Body Police: Lato
  • Hmotnost písma: tučné
  • Pro tlačítko použijte vlastní styly: ANO
  • Velikost textu tlačítka: 15px
  • Šířka ohraničení tlačítka: 0px
  • Mezery mezi tlačítky: 1px
  • Tlačítko písmo: Lato
  • Hmotnost tlačítka: těžká
  • Styl písma tlačítka: TT
  • Polstrování tlačítek: 12 pixelů nahoře, 12 pixelů dole, 32 pixelů vlevo, 32 pixelů vpravo
  • výplň: 40 pixelů nahoře, 40 pixelů na dně, 40 pixelů vlevo, 40 pixelů napravo

Přidejte ikonu pro otevření a zavření pomocí modulu Blurb

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.

Jakmile je výzva k akci hotová, musíme vytvořit tlačítko s ikonou, které slouží k otevírání a zavírání posuvné výzvy k akci. Chcete-li to vytvořit, přidejte modul reklamy pod modulem výzvy k akci.

Informační modul Divi Bubble

Nastavení textu prezentace

Aktualizujte následující konstrukční parametry.

Obsah
  • odeberte výchozí název a základní text
  • Použijte ikonu: ANO
  • Ikona: více (viz screenshot)
Přidejte ikonu divi
Design
  • Barva ikony: # 000000
  • Použijte velikost písma ikony: ANO
  • Velikost písma ikony: 40 pixelů
  • Šířka: 40px
  • Výška: 40px
  • Zaoblené rohy: 50%
  • Otočení osy Z transformace: 135 stupňů
Přizpůsobte ikonu divi
Pokročilá nastavení

Na kartě Upřesnit přidejte následující třídu CSS:

  • Třída CSS: slide-in_target

Poté přidejte tento vlastní CSS do hlavního prvku.

position: absolute;bottom: 0px;right: -40px;

Přidejte následující vlastní CSS do obrazu Blurb.

margin-bottom: 0px;

Přizpůsobte si styl css divi modul

Výsledek

Zde je zatím výsledek.

Výsledek nyní dosažen

Mějte na paměti, že stále musíme přidat nějaký kód, abychom přidali funkci zavření a otevření po kliknutí na ikonu „x“. Kód přidáme po vytvoření výzvy k akci v každém ze čtyř rohů modelu.

Vytvoření výzvy k akci vpravo nahoře

Díky první integrované výzvě k akci můžeme urychlit proces vytváření zbytku CTA duplikováním již vytvořené sekce. Dále vytvoříme výzvu k akci v pravém horním rohu.

Duplicitní sekce

Nasaďte režim zobrazení drátového modelu a poté duplikujte sekci CTA vlevo nahoře.

Aktualizujte nastavení sekce

Poté aktualizujte nové parametry sekce takto:

  • okraj: 320px vpravo
  • směr animace: vlevo

Poté aktualizujte vlastní CSS v hlavním prvku tak, že nahradíte výraz „left“ výrazem „right“. Zde je celý výňatek:

position: fixed;top: 80px;right: -320px;

Upravit zarovnání divi sekce

Aktualizujte parametry modulu Blurb

Poté otevřete nastavení modulu Blurb a aktualizujte vlastní fragment CSS v hlavním prvku nahrazením slova „right“ slovem „left“. Zde je celý výňatek:

position: absolute;bottom: 0px;left: -40px;

Přidejte divi kód

Výsledek

Nyní uvidíte výzvu k akci jako snímek v pravém horním rohu šablony stránky.

Posuvník vpravo nahoře

Stejné operace proveďte pro zbývající části „Pravá dolní část“, „Levá dolní část“. Budete také muset upravit kód CSS pro každý z modulů, aby měl výsledek podobný následujícímu.

Konečný výsledek divi

Přidávání vlastních úryvků jQuery a CSS pomocí modulu kódu

V posledním kroku musíme přidat nějaké vlastní jQuery a CSS, abychom mohli získat funkce otevírání a zavírání každé z CTA snímků.

Přidejte modul kódu

Přidejte modul kódu do jedné z částí prezentace.

Přidejte divi kód js

Vložte kód

Potom otevřete nastavení kódu a vložte následující kód do oblasti kódu.

<style>.slide-in-cta, .slide-in_target, .slide-in-toggle-active {transition: all 400ms ease-in-out;} .slide-in-toggle-active {margin: 0px 0px 0px 0px !important;}.slide-in-toggle-active .slide-in_target  {transform: none !important;background: rgba(0,0,0,0.2);}  .slide-in_target {cursor: pointer;}</style><script>(function($) {$(document).ready(function(){$('.slide-in_target').click(function(){$(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); });    });})( jQuery );   </script>

Přidejte kód jQuery

Závěrečné myšlenky

S Divi není vůbec těžké vytvořit výzvu k akci. A protože můžete použít nástroj pro tvorbu motivů k přidání výzvy k akci do šablony stránky, budete mít větší kontrolu nad tím, které stránky tyto výzvy k akci zobrazují. 

4 akcie
podíl4
tweet
Zadat