Modul koda je prazno platno koje vam omogućava 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 kod dodatka u standardni ili modul koda pune širine kako bi element bio prikazan nesmetano.
Kako dodati modul koda na svoju stranicu
Prije nego što možete dodati kodni modul na svoju stranicu, prvo morate pristupiti Divi Builder-u. Jednom Divi tema instaliran na vašem site Web, primijetit ćete dugme Koristite Divi Builder iznad izdavača svaki put kada stvorite novu stranicu.
Klikom na ovo dugme aktivirate Divi Builder, koji vam omogućava pristup svim modulima Divi Builder. Zatim kliknite na dugme Koristite Visual Builder za pokretanje generatora u vizualnom režimu.
Možete kliknuti i na dugme Koristite Visual Builder kada pregledavate svoj site Web uzvodno ako ste prijavljeni na svoju WordPress kontrolnu tablu.
Jednom ušli u Visual Builder, možete kliknuti sivo dugme plus da biste dodali novi modul na svoju stranicu. Novi moduli se mogu dodavati samo unutar redova. Ako započinjete novu stranicu, ne zaboravite prvo dodati red na svoju stranicu.
Pronađite modul koda na listi modula i kliknite na njega da biste ga dodali na svoju stranicu. Spisak modula je pretraživ, što znači da možete i upisati riječ "kod", a zatim pritisnuti enter za automatsko pronalaženje i dodavanje modula koda! Nakon dodavanja modula, dočekat će vas lista opcija modula. Ove su opcije podijeljene u tri glavne skupine: sadržaj , koncepcija et napredan .
Slučaj upotrebe dodavanjem dosadnog lista stilova za animiranje sadržaja na pojedinačnoj stranici
U ovom primjeru ću dodati skriptu veze za uvoz Animate.css kako bih elementima na stranici 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 redovan odjeljak i liniju pune širine (stupac 1) i dodajte kodni modul.
U tekstualnom polju od sadržaja, dodajte isječak koda.
Sve što morate učiniti je dodati nekoliko CSS klasa za animiranje bilo kojeg elementa vaše stranice CSS klase na vašoj stranici. U ovom primjeru odbiti ću dugme kad se stranica učita.
U postavkama modula Button, na kartici Advanced, unesite dvije klase "animirani" i "odskočiti" u tekstualni okvir CSS klase.
Sada dugme 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žaja, naći ćete sve elemente sadržaja modula, kao što su tekst, slike i ikone. Sve što kontroliše šta 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 se kod može ukloniti iz kursa ako ga koristi autor ili saradnik. Također možete postaviti kratke kodove u modul. Ovi kodovi kurseva (kratki kodovi) će biti prikazani unutar roditeljske kolone bez ikakvih dodatnih omota 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 dizajniranja 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čku listu 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 opcije 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đe 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 koji je jednostavan za upotrebu za ovaj modul. ID se može koristiti za stvaranje prilagođenog CSS stila ili za povezivanje na određene odjeljke vaše stranice.
CSS klasa
Unesite opcione CSS klase koje ćete koristiti za ovaj modul. CSS klasa se može koristiti za kreiranje prilagođenog CSS stila. Možete dodati više klasa, odvojenih razmakom. Ovi časovi se mogu koristiti u vašem Divi tema Podređeni ili u prilagođenom CSS-u koji dodate na svoju stranicu ili svoju site Web koristeći opcije Divi teme ili postavke stranice Divi Builder.
Prilagođeni CSS
Prilagođeni CSS takođe se može primeniti na modul i bilo koji od unutrašnjih elemenata modula. U odjeljku Prilagođeni CSS pronaći ćete tekstualno polje u koje možete dodati CSS direktno u svaki element. CSS unosi u ovim postavkama već su ugrađeni sa stilskim oznakama. Dakle, morate unijeti CSS pravila odvojena zarezom.
vidljivost
Ova opcija vam omogućava upravljanje uređajima na kojima se pojavljuje vaš modul. Možete odabrati da deaktivirate svoj modul na tabletima, pametnim telefonima ili radnim površinama pojedinačno. Ovo je korisno ako želite koristiti različite modove na različitim uređajima ili ako želite pojednostaviti mobilni dizajn uklanjanjem određenih elemenata sa stranice.
To je sve za ovaj vodič.
