Modul kódu je prázdne plátno, ktoré vám umožňuje pridať na stránku kód, napríklad krátke kódy doplnkov alebo statický kód HTML. Ak chcete použiť doplnok tretej strany, napríklad vysúvací doplnok tretej strany, môžete jednoducho vložiť krátky kód doplnku do štandardného alebo úplného modulu kódu a zobraziť prvok bez obmedzenia.
Ako pridať kódový modul na svoju stránku
Pred pridaním modulu kódu na svoju stránku musíte najskôr vstúpiť do Divi Builder. Raz Divi téma nainštalovaný na vašom webové stránky, všimnete si tlačidlo Použite nástroj Divi Builder nad vydavateľom pri každom vytvorení novej stránky.
Kliknutím na toto tlačidlo aktivujete program Divi Builder, ktorý vám umožní prístup ku všetkým modulom Divi Builder. Potom kliknite na tlačidlo Použite Visual Builder na spustenie generátora vo vizuálnom režime.
Môžete tiež kliknúť na tlačidlo Použite Visual Builder keď si prezeráte svoje webové stránky upstream, ak ste prihlásení do svojho hlavného panela WordPress.
Po zadaní do programu Visual Builder môžete kliknutím na sivé tlačidlo plus pridať nový modul na svoju stránku. Nové moduly je možné pridávať iba do riadkov. Ak začínate novú stránku, nezabudnite najskôr na svoju stránku pridať riadok.
Vyhľadajte modul kódu v zozname modulov a kliknutím naň ho pridajte na svoju stránku. V zozname modulov je možné prehľadávať, čo znamená, že môžete tiež napísať slovo „kód“ a potom stlačiť kláves Enter, aby ste automaticky našli a pridali modul kódu! Po pridaní modulu vás privíta zoznam možností modulu. Tieto možnosti sú rozdelené do troch hlavných skupín: Obsah , Koncepcia et pokročilý .
Prípad pridáte pridaním matnej šablóny so štýlmi na animáciu obsahu na samostatnej stránke
V tomto príklade pridám skript odkazu na importovanie súboru Animate.css na pridanie efektov animácie k prvkom stránky. Pretože súbor Animate.css obsahuje veľa kódu, má zmysel načítať ho iba na stránku, ktorú potrebujem.
Stačí pridať bežnú časť a riadok s plnou šírkou (stĺpec 1) a pridať modul kódu.
V textovom poli obsah, pridajte útržok kódu.
Všetko, čo musíte urobiť, je pridať niekoľko tried CSS na animáciu ľubovoľného prvku stránky triedy CSS na vašej stránke. V tomto príklade odrazím tlačidlo, keď sa stránka načíta.
V nastaveniach modulu tlačidiel na karte Spresnenie zadajte do textového poľa triedy CSS dve triedy „animované“ a „odskakujúce“.
Teraz sa tlačidlo stane, keď sa načíta stránka.
Tip: Niekedy pridanie kódu s prerušením riadku spôsobí, že kód prestane fungovať. Je lepšie vytvoriť si kód v textovom editore a vložiť ho do modulu kódu.
Možnosti obsahu kódu
Na karte obsah, nájdete všetky obsahové prvky modulu, ako sú text, obrázky a ikony. Všetko, čo ovláda čo Vo vašom module sa vždy zobrazí táto karta.
Obsah
Tu môžete umiestniť ľubovoľný kód HTML, CSS alebo JavaScript, ktorý chcete zobraziť na stránke na aktuálnom mieste. Iba editori a správcovia môžu uverejňovať nefiltrované HTML, čo znamená, že kód môže byť z kurzu odstránený, ak ho použije autor alebo prispievateľ. Do modulu môžete umiestniť aj krátke kódy. Tieto kódy kurzov (skrátené kódy) sa zobrazia v nadradenom stĺpci bez akýchkoľvek ďalších obalov modulu Divi.
Administračný štítok
Toto zmení štítok modulu v generátore pre ľahšiu identifikáciu. Pri použití pohľadu WireFrame vo Visual Builderi sa tieto štítky zobrazia v modulovom bloku rozhrania Divi Builder.
Možnosti návrhu kódu
Na karte Dizajn nájdete všetky možnosti štýlov modulu, ako sú písma, farby, veľkosť a medzery. Táto karta umožňuje upraviť vzhľad vášho modulu. Každý modul Divi má dlhý zoznam nastavení dizajnu, pomocou ktorých môžete vyladiť takmer čokoľvek.
Maximálna šírka
Akákoľvek tu zadaná hodnota obmedzuje šírku všetkého obsahu vykresleného v kódovom module na nastavenú hodnotu. Napríklad zadanie 50% do vstupného poľa zníži obsah kódového modulu na 50% stĺpca, ktorý ho obsahuje.
Kód Rozšírené možnosti Kód
Na karte Pokročilé nájdete možnosti, ktoré sa môžu hodiť skúsenejším webovým dizajnérom, napríklad vlastné atribúty CSS a HTML. Tu môžete použiť vlastné CSS na ktorýkoľvek z mnohých prvkov modulu. Na modul môžete tiež použiť vlastné triedy a ID CSS, ktoré sa dajú použiť na prispôsobenie modulu v súbore style.css vašej detskej témy.
CSS ID
Zadajte pre tento modul ľahko použiteľné ID CSS. Identifikátor je možné použiť na vytvorenie vlastného štýlu CSS alebo na prepojenie s konkrétnymi sekciami vašej stránky.
Triedu CSS
Zadajte voliteľné triedy CSS, ktoré sa majú použiť pre tento modul. Na vytvorenie vlastného štýlu CSS možno použiť triedu CSS. Môžete pridať viacero tried oddelených medzerou. Tieto triedy môžu byť použité vo vašom Divi téma Child alebo vo vlastnom CSS, ktoré pridáte na svoju stránku alebo na svoju stránku webové stránky pomocou možností témy Divi alebo nastavení stránky Divi Builder.
Vlastné CSS
Vlastné CSS možno použiť aj na modul a na ktorékoľvek z vnútorných prvkov modulu. V sekcii Vlastné CSS nájdete textové pole, kde môžete pridať CSS priamo ku každému prvku. Položky CSS v týchto nastaveniach sú už vložené so značkami štýlov. Musíte teda iba zadať pravidlá CSS oddelené bodkočiarkami.
viditeľnosť
Táto možnosť vám umožňuje ovládať zariadenia, na ktorých sa modul zobrazuje. Môžete sa rozhodnúť deaktivovať svoj modul na tabletoch, smartfónoch alebo stolových počítačoch jednotlivo. To je užitočné, ak chcete používať rôzne módy na rôznych zariadeniach alebo ak chcete zjednodušiť mobilný dizajn odstránením určitých prvkov zo stránky.
To je pre tento návod všetko.
