Divi je rozhodně jedním z nich Témata WordPress v dnešní době nejoblíbenější. Jedním z prvků, které tvoří sílu tohoto tématu, je jeho tvůrce (Divi Builder), který nám hodně připomíná Vizuální skladatel.

Divi Builder má dvě podoby: standardní „Back-end Builder“ a „Visual Builder“. Obě rozhraní vám umožňují vytvářet přesně stejné typy webů se stejným obsahem a stejnými parametry designu. Jediným rozdílem je rozhraní. Back-end Builder žije uvnitř řídicího panelu WordPress a je přístupný se všemi ostatními standardními nastaveními WordPress.

Sedí uvnitř uživatelského rozhraní WordPress a nahrazuje standardní editor příspěvků WordPress. Je to skvělé pro rychlé změny, když jste uvnitř řídicího panelu, ale také je omezeno řídicím panelem a je vykreslen jako bloková reprezentace vašeho webu. Tento kurz se zaměří pouze na vizuální builder.

Stáhnout téma DIVI WordPress

divi builder.jpeg

Zcela nový Visual Builder vám na druhé straně umožňuje vytvářet stránky na přední straně vašeho webu! Je to úžasný zážitek a umožňuje mnohem rychlejší design. Když přidáte obsah nebo upravíte nastavení designu uvnitř vizuálního nástroje, změny se zobrazí okamžitě.

Můžete kliknout na stránku a začít psát. Můžete zvýraznit text a upravit jeho písmo a styl. Můžete přidat nový obsah, vytvořit stránku a vidět vše, co se děje před vašimi očima.

použití-visual-builder.jpg

Jak povolit Visual Builder

Když jste přihlášeni k řídicímu panelu WordPress, můžete přejít na libovolnou stránku na předním konci vašeho webu a kliknutím na tlačítko „Aktivovat Visual Builder“ na liště administrátora WordPress spustit tento nástroj. vizuální.

jak povolit vizuální builder.jpeg

Pokud upravujete svou stránku na řídicím panelu, můžete přepnout na vizuální stavitel kliknutím na tlačítko „Povolit vizuální stavitel“, které je v horní části back-endového rozhraní Divi Builderu (všimněte si, že musíte nejprve aktivujte Divi Builder, než se zobrazí tlačítko vizuálního builderu).

použijte vizuální tvůrce Divi.jpeg

Základy Visual Builder

Síla Divi spočívá ve Visual Builderu, nástroji pro tvorbu stránek, který pracuje s funkcí „Drag and Drop“, která vám umožňuje vytvářet téměř jakýkoli typ webu kombinací a uspořádáním jednotlivých částí obsahu.

Tvůrce používá tři hlavní stavební bloky: sekce, řádky a moduly. Jejich společné použití vám umožňuje vytvořit nespočetné množství rozvržení. Sekce jsou největší stavební kameny a jsou v nich skupiny řad. Řádky jsou uvnitř sekcí a slouží k umístění modulů. Moduly jsou umístěny uvnitř řad. Toto je struktura každé webové stránky Divi.

Sekce

Nejzákladnější a největší stavební bloky používané při navrhování rozvržení pomocí Divi jsou sekce. Používají se k vytváření velkých skupin obsahu a toto je první věc, kterou na svou stránku přidáte. Existují tři typy sekcí: Pravidelná, Speciální a Plná šířka.

Pravidelné sekce jsou tvořeny řádky sloupců, zatímco sekce s plnou šířkou jsou tvořeny moduly o celé šířce, které rozšiřují celou šířku obrazovky. Speciální sekce umožňují pokročilejší boční rozvržení.

řádek

Řádky jsou uvnitř sekcí a do sekce můžete umístit libovolný počet řádků. Existuje mnoho různých typů sloupců, ze kterých si můžete vybrat. Jakmile definujete strukturu sloupců pro svůj řádek, můžete poté umístit moduly do požadovaného sloupce. Počet modulů, které můžete umístit do sloupce, není nijak omezen.

moduly

Moduly jsou části obsahu, které tvoří váš web. Každý modul Divi se dokáže přizpůsobit libovolné šířce sloupce a všechny jsou plně citlivé.

Vytvořte svou první stránku

K vytvoření stránky se používají tři základní stavební bloky (sekce, čáry a moduly).

výstavba stránky Divi.jpg

Přidání první sekce

Než budete moci na stránku cokoli přidat, musíte nejprve přidat sekci. Sekce lze přidávat kliknutím na modré tlačítko (+). Když umístíte ukazatel myši nad část, která již na stránce existuje, níže se zobrazí modré tlačítko (+). Když kliknete, přidá se nová sekce pod sekci, na kterou aktuálně vznášíte.

Pokud spustíte novou stránku, automaticky se přidá první část.

seznam sekcí divi.jpg

Přidání prvního řádku

Po přidání první sekce můžete začít přidávat řádky sloupců dovnitř. Sekce může obsahovat libovolný počet řádků a můžete kombinovat řádky z různých typů sloupců a vytvářet tak různá rozvržení.

Chcete-li přidat řádek, klikněte na zelené tlačítko (+) uvnitř prázdné sekce nebo klikněte na zelené tlačítko (+), které se zobrazí, když umístíte ukazatel myši na aktuální řádek, a přidejte nový řádek níže. Jakmile kliknete na zelené tlačítko (+), budete uvítáni seznamem typů sloupců. Vyberte sloupec podle vašeho výběru a jste připraveni přidat svůj první modul.

jak vložit řádek Divi.jpeg

Přidání prvního modulu

Moduly lze přidat do řádků a každý řádek může obsahovat libovolný počet modulů. Moduly jsou prvky obsahu vaší stránky a Divi přichází s více než 40 různými prvky, které můžete použít k sestavení.

Můžete použít základní moduly, jako jsou texty, obrázky a tlačítka, nebo pokročilejší moduly, jako jsou posuvníky, galerie portfolií a eCommerce Obchody.

Chcete-li přidat modul, klikněte na šedé tlačítko (+), které existuje uvnitř prázdného sloupce, nebo klikněte na šedé (+) tlačítko, které existuje, když umístíte ukazatel myši na modul na stránce a přidáte nový modul níže. . Jakmile kliknete na tlačítko, budete uvítáni seznamem modulů.

Vyberte modul podle vašeho výběru a bude přidán na vaši stránku a objeví se ovládací panel modulu. Pomocí tohoto ovládacího panelu můžete začít konfigurovat svůj modul.

vložte modul DIVI.jpeg

To je pro tento tutoriál vše. S tím, co jste se dnes naučili, budete moci vytvořit rozvržení s Divi. Vrátíme se s pokročilými tutoriály na toto téma. Již si můžete stáhnout Divi téma.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" rozšířené "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] STÁHNOUT TÉMA DIVI [/ vcex_button] [/ width_column] [»v] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right " TEM DOWNLOOWN DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Ostatní výukové programy Divi