Modul kódu je prázdné plátno, které umožňuje přidat na stránku kód, například krátké kódy pluginů nebo statický kód HTML. Pokud chcete použít zásuvný modul jiného výrobce, například zásuvný modul jiného výrobce, můžete jednoduše umístit zkratkový kód zásuvného modulu do standardního nebo úplného modulu kódu, aby se prvek zobrazil bez omezení.
Jak přidat modul kódu na vaši stránku
Než budete moci na svou stránku přidat modul kódu, musíte nejprve otevřít Divi Builder. Jednou Divi téma nainstalovaný na vašem Webové stránky, všimnete si tlačítka Použijte nástroj Divi Builder nad vydavatelem pokaždé, když vytvoříte novou stránku.
Kliknutím na toto tlačítko aktivujete Divi Builder, který vám umožní přístup ke všem modulům Divi Builder. Poté klikněte na tlačítko Použijte Visual Builder pro spuštění generátoru v vizuálním režimu.
Můžete také kliknout na tlačítko Použijte Visual Builder když si prohlížíte své Webové stránky upstream, pokud jste přihlášeni do svého řídicího panelu WordPress.
Po zadání do Visual Builderu můžete kliknutím na šedé tlačítko plus přidat na stránku nový modul. Nové moduly lze přidávat pouze do řádků. Pokud začínáte novou stránku, nezapomeňte nejprve přidat na stránku řádek.
Vyhledejte modul kódu v seznamu modulů a kliknutím na něj jej přidejte na svou stránku. Seznam modulů je prohledávatelný, což znamená, že můžete také zadat slovo „kód“ a poté stisknout klávesu Enter pro automatické vyhledání a přidání modulu kódu! Jakmile je modul přidán, budete uvítáni seznamem možností modulu. Tyto možnosti jsou rozděleny do tří hlavních skupin: Obsah , Design et pokročilý .
Použijte případ přidáním matné šablony stylů k animaci obsahu na jednotlivé stránce
V tomto příkladu přidám skript odkazu k importu Animate.css pro přidání efektů animace k prvkům na stránce. Protože soubor Animate.css obsahuje hodně kódu, má smysl jej načíst pouze na stránku, kterou potřebuji.
Stačí přidat běžný řez a řádek plné šířky (sloupec 1) a přidat modul kódu.
V textovém poli obsah, přidejte fragment kódu.
Jediné, co musíte udělat, je přidat několik tříd CSS k animaci libovolného prvku stránky třídy CSS na vaší stránce. V tomto příkladu odrazím tlačítko, když se stránka načte.
V nastavení modulu Button na kartě Upřesnit zadejte do textového pole třídy CSS dvě třídy „animované“ a „odrazit“.
Tlačítko se vrací, když se stránka načte.
Tip: Někdy přidání kódu s zalomením řádku způsobí, že kód přestane fungovat. Je lepší vytvořit svůj kód v textovém editoru a vložit jej do modulu kódu.
Možnosti obsahu kódu
V záložce obsah, najdete všechny obsahové prvky modulu, jako jsou text, obrázky a ikony. Vše, co ovládá co Ve vašem modulu se vždy zobrazí tato karta.
Obsah
Zde můžete umístit libovolný kód HTML, CSS nebo JavaScript, který chcete zobrazit na stránce v aktuálním umístění. Pouze redaktoři a administrátoři mohou zveřejňovat nefiltrované HTML, což znamená, že kód může být z kurzu odstraněn, pokud jej použije autor nebo přispěvatel. Do modulu můžete také umístit krátké kódy. Tyto kódy kurzů (zkrácené kódy) se zobrazí v nadřazeném sloupci bez jakýchkoli dalších obalů modulu Divi.
Administrační štítek
Tím se změní štítek modulu v generátoru pro snadnou identifikaci. Při použití pohledu WireFrame ve Visual Builderu se tyto štítky objeví v bloku modulu rozhraní Divi Builder.
Možnosti návrhu kódu
Na kartě Návrh najdete všechny možnosti stylingu modulu, například písma, barvy, velikost a mezery. Tato karta umožňuje upravit vzhled vašeho modulu. Každý modul Divi má dlouhý seznam nastavení designu, pomocí kterého můžete vyladit téměř cokoli.
Maximální šířka
Jakákoli zde zadaná hodnota omezuje šířku veškerého obsahu vykresleného v modulu kódu na nastavenou hodnotu. Například zadání 50% do vstupního pole sníží obsah modulu kódu na 50% sloupce, který jej obsahuje.
Kód Rozšířené možnosti Kód
Na kartě Upřesnit najdete možnosti, které mohou zkušenější weboví designéři považovat za užitečné, například vlastní atributy CSS a HTML. Zde můžete použít vlastní CSS na kterýkoli z mnoha prvků modulu. Na modul můžete také použít vlastní třídy a ID CSS, které lze použít k přizpůsobení modulu v souboru style.css vašeho podřízeného motivu.
CSS ID
Zadejte pro tento modul snadno použitelné ID CSS. ID lze použít k vytvoření vlastního stylu CSS nebo k propojení s konkrétními částmi vaší stránky.
CSS třídy
Zadejte volitelné třídy CSS, které chcete pro tento modul použít. Třídu CSS lze použít k vytvoření vlastních stylů CSS. Můžete přidat více tříd oddělených mezerou. Tyto třídy lze použít ve vašem Divi téma Child nebo ve vlastním CSS, které přidáte na svou stránku nebo na vaši stránku Webové stránky pomocí možností motivu Divi nebo nastavení stránky Divi Builder.
Vlastní CSS
Vlastní CSS lze také použít na modul a kterýkoli z interních prvků modulu. V sekci Vlastní CSS najdete textové pole, kde můžete přidat CSS přímo ke každému prvku. Položky CSS v tomto nastavení jsou již vloženy do značek stylů. Musíte tedy zadat pravidla CSS oddělená středníky.
viditelnost
Tato možnost umožňuje ovládat zařízení, na kterých se váš modul zobrazuje. Můžete se rozhodnout deaktivovat svůj modul na tabletech, chytrých telefonech nebo stolních počítačích jednotlivě. To je užitečné, pokud chcete použít různé moduly na různých zařízeních nebo pokud chcete zjednodušit mobilní design odstraněním určitých prvků ze stránky.
To je pro tento tutoriál vše.
