Modul koda je prazno platno koje vam omogućuje dodavanje koda na vašu stranicu, poput kratkih kodova dodatka ili statičnog HTML koda. Ako želite koristiti dodatak treće strane, na primjer dodatak klizača treće strane, možete jednostavno smjestiti kratki kôd dodatka u standardni modul koda ili pune širine kako bi se element prikazao nesmetano.
Kako dodati modul koda na svoju stranicu
Prije nego što svojoj stranici možete dodati modul koda, prvo morate pristupiti Divi Builderu. Jednom Divi tema instaliran na vašem web stranica, primijetit ćete gumb Koristite Divi Builder iznad izdavača svaki put kada stvorite novu stranicu.
Klikom na ovaj gumb aktivirate Divi Builder, koji vam daje pristup svim modulima Divi Builder. Zatim kliknite na gumb Koristite Visual Builder za pokretanje generatora u vizualnom načinu rada.
Možete kliknuti i na gumb Koristite Visual Builder kada pregledavate svoje web stranica uzvodno ako ste prijavljeni na nadzornu ploču WordPressa.
Jednom ušli u Visual Builder, možete kliknuti sivi gumb plus da biste dodali novi modul na svoju stranicu. Novi moduli mogu se dodavati samo unutar redaka. Ako započinjete novu stranicu, ne zaboravite prvo dodati redak na svoju stranicu.
Pronađite modul koda na popisu modula i kliknite ga da biste ga dodali na svoju stranicu. Popis modula je pretraživ, što znači da također možete upisati riječ "kod", a zatim pritisnuti enter za automatsko pronalaženje i dodavanje modula koda! Nakon dodavanja modula, pozdravit će vas popis mogućnosti modula. Te su opcije podijeljene u tri glavne skupine: Sadržaj , Začeće et napredan .
Slučaj upotrebe dodavanjem dosadnog lista stilova za animiranje sadržaja na pojedinoj stranici
U ovom primjeru ću dodati skriptu veze za uvoz Animate.css kako bih elementima stranice dodao efekte animacije. Budući da datoteka Animate.css sadrži puno koda, ima smisla učitati je samo na stranici koja mi treba.
Samo dodajte redoviti odjeljak i liniju pune širine (stupac 1) i dodajte kodni modul.
U tekstualnom okviru od sadržaj, dodajte isječak koda.
Sve što morate učiniti je dodati nekoliko CSS klasa za animiranje bilo kojeg elementa stranice CSS klase na vašoj stranici. U ovom primjeru prebacit ću gumb kad se stranica učita.
U postavkama modula Gumb, na kartici Napredno, u tekstualni okvir CSS klase unesite dvije klase "animirani" i "odskočiti".
Sada gumb se odbija kada se stranica učita.
Savjet: Ponekad će dodavanje koda s prijelomima reda zaustaviti rad koda. Bolje je stvoriti svoj kôd u uređivaču teksta i zalijepiti ga u modul koda.
Opcije sadržaja koda
U kartici od sadržaj, pronaći ćete sve elemente sadržaja modula, kao što su tekst, slike i ikone. Sve što kontrolira što se pojavljuje u vašem modulu uvijek će biti na ovoj kartici.
Sadržaj
Ovdje možete postaviti bilo koji HTML, CSS ili JavaScript kod koji želite prikazati na stranici na trenutnoj lokaciji. Samo urednici i administratori smiju objavljivati nefiltrirani HTML, što znači da kod može biti uklonjen iz tečaja ako ga koristi autor ili suradnik. Također možete postaviti kratke kodove u modul. Ovi kodovi tečaja (prečaci) bit će prikazani unutar nadređenog stupca bez ikakvih dodatnih omotača Divi modula.
Oznaka uprave
Ovo će promijeniti oznaku modula u generatoru radi lakše identifikacije. Kada se koristi prikaz WireFrame u Visual Builderu, ove će se oznake pojaviti u bloku modula sučelja Divi Builder.
Opcije oblikovanja koda
Na kartici Dizajn pronaći ćete sve mogućnosti oblikovanja modula, poput fontova, boja, veličine i razmaka. Ova kartica omogućuje vam izmjenu izgleda vašeg modula. Svaki Divi modul ima dugački popis postavki dizajna pomoću kojih možete prilagoditi gotovo sve.
Maksimalna širina
Bilo koja ovdje unesena vrijednost ograničava širinu bilo kojeg sadržaja prikazanog u modulu koda na zadanu vrijednost. Na primjer, unosom 50% u polje za unos smanjit ćete sadržaj modula koda na 50% stupca koji ga sadrži.
Kod Napredne mogućnosti Kod
Na kartici Napredno pronaći ćete opcije koje bi iskusnijim web dizajnerima mogle biti korisne, poput prilagođenih CSS i HTML atributa. Ovdje možete primijeniti prilagođeni CSS na bilo koji od mnogih elemenata modula. Također možete primijeniti prilagođene CSS klase i ID-ove na modul, koji se mogu koristiti za prilagodbu modula u datoteci style.css vaše dječje teme.
CSS ID
Unesite CSS ID za ovaj modul koji se lako koristi. ID se može koristiti za stvaranje prilagođenog CSS stila ili za povezivanje na određene odjeljke vaše stranice.
CSS klasa
Unesite izborne CSS klase koje ćete koristiti za ovaj modul. CSS klasa može se koristiti za stvaranje prilagođenog CSS stila. Možete dodati više klasa, odvojenih razmakom. Ovi razredi se mogu koristiti u vašem Divi tema Dijete ili u prilagođenom CSS-u koji dodajete na svoju stranicu ili svoju web stranica pomoću opcija Divi teme ili postavki stranice Divi Builder.
Prilagođeni CSS
Prilagođeni CSS također se može primijeniti na modul i bilo koji od unutarnjih elemenata modula. U odjeljku Prilagođeni CSS pronaći ćete tekstualno polje u koje možete dodati CSS izravno u svaki element. CSS unosi u ovim postavkama već su ugrađeni sa stilskim oznakama. Dakle, morate unijeti CSS pravila odvojena zarezom.
vidljivost
Ova vam opcija omogućuje upravljanje uređajima na kojima se pojavljuje vaš modul. Možete odabrati da deaktivirate svoj modul na tabletima, pametnim telefonima ili stolnim računalima pojedinačno. To je korisno ako želite koristiti različite modove na različitim uređajima ili ako želite pojednostaviti mobilni dizajn uklanjanjem nekih elemenata sa stranice.
To je sve za ovaj vodič.
