Moduli i Kodit është një kanavacë bosh që ju lejon të shtoni kod në faqen tuaj, të tilla si kodet e shkurtra të shtojcave ose kodi statik HTML. Nëse dëshironi të përdorni një shtojcë të palës së tretë, për shembull një shtojcë rrëshqitëse të palës së tretë, thjesht mund ta vendosni kodin e shkurtër të shtojcës në një modul kodi standard ose me gjerësi të plotë për të shfaqur elementin të pakufizuar.
Si të shtoni një modul kodi në faqen tuaj
Përpara se të shtoni një modul kodi në faqen tuaj, së pari duhet të hyni në Divi Builder. Pasi të Tema divi instaluar në tuaj Site Web, do të vini re një buton Përdorni Divi Builder mbi botuesin sa herë që krijoni një faqe të re.
Duke klikuar në këtë buton, ju aktivizoni Divi Builder, i cili ju lejon të përdorni të gjitha modulet Divi Builder. Pastaj klikoni në butonin Përdorni Visual Builder për të filluar gjeneratorin në modalitetin vizual.
Ju gjithashtu mund të klikoni në butonin Përdorni Visual Builder kur ju shfletoni tuaj Site Web në rrjedhën e sipërme nëse jeni regjistruar në pultin tuaj të WordPress.
Pasi të keni hyrë në Visual Builder, mund të klikoni butonin gri plus për të shtuar një modul të ri në faqen tuaj. Modulet e reja mund të shtohen vetëm brenda rreshtave. Nëse po filloni një faqe të re, mos harroni të shtoni më parë një rresht në faqen tuaj.
Gjeni modulin e kodit në listën e moduleve dhe klikoni mbi të për ta shtuar në faqen tuaj. Lista e moduleve është e kërkueshme, që do të thotë që ju gjithashtu mund të shkruani fjalën "kod" dhe më pas të shtypni enter për të gjetur automatikisht dhe shtuar modulin e kodit! Pasi të shtohet moduli, ju do të përshëndeteni me listën e opsioneve të modulit. Këto opsione janë të ndara në tre grupe kryesore: Përmbajtje , Konceptim et i përparuar .
Përdorni rastin duke shtuar një fletë stilesh të shurdhër për të gjallëruar përmbajtjen në një faqe individuale
Në këtë shembull, unë do të shtoj një skenar lidhje për të importuar Animate.css për të shtuar efektet e animacionit në elementet në faqe. Meqenëse skedari Animate.css përmban shumë kod, ka kuptim ta ngarkoj atë vetëm në faqen që më duhet.
Thjesht shtoni një seksion të rregullt dhe një vijë me gjerësi të plotë (kolona 1) dhe shtoni modulin e kodit.
Në kutinë e tekstit të përmbajtje, shtoni fragmentin e kodit.
E tëra çfarë ju duhet të bëni është të shtoni disa klasa CSS për të gjallëruar ndonjë element të faqes tuaj të klasës CSS në faqen tuaj. Në këtë shembull, unë do të kërcej butonin kur faqja të ngarkohet.
Në cilësimet e modulit Button, në skedën Advanced, futni dy klasat "animuar" dhe "kërcej" në kutinë e tekstit të klasës CSS.
Tani butoni kthehet kur ngarkesa e faqes.
Këshillë: Ndonjëherë shtimi i kodit me ndërprerje të linjës do të bëjë që kodi të ndalojë së funksionuari. Shtë më mirë të krijoni kodin tuaj në një redaktues teksti dhe ta ngjisni atë në modulin e kodit.
Opsionet e përmbajtjes së kodit
Në skedën e përmbajtje, do të gjeni të gjithë elementët e përmbajtjes së modulit, si teksti, imazhet dhe ikona. Gjithçka që kontrollon çfarë shfaqet në modulin tuaj gjithmonë do të jetë në këtë skedë.
Përmbajtje
Këtu mund të vendosni çdo kod HTML, CSS ose JavaScript që dëshironi të shfaqni në faqe në vendndodhjen aktuale. Vetëm redaktorët dhe administratorët lejohen të postojnë HTML të pafiltruar, që do të thotë se kodi mund të hiqet nga kursi nëse përdoret nga një autor ose kontribues. Ju gjithashtu mund të vendosni kode të shkurtra në modul. Këto kode kursesh (kode të shkurtra) do të shfaqen brenda kolonës mëmë pa asnjë mbështjellës shtesë të modulit Divi.
Etiketa e administrimit
Kjo do të ndryshojë etiketën e modulit në gjenerator për identifikim të lehtë. Kur përdorni pamjen WireFrame në Visual Builder, këto etiketa do të shfaqen në bllokun e modulit të ndërfaqes Ndërtuesi Divi.
Opsionet e dizajnit të kodit
Në skedën Design, do të gjeni të gjitha opsionet e stilit të modulit, të tilla si gërmat, ngjyrat, madhësia dhe hapësira. Kjo skedë ju lejon të modifikoni pamjen e modulit tuaj. Çdo modul Divi ka një listë të gjatë të cilësimeve të dizajnit që mund t'i përdorni për të rregulluar gjithçka.
Gjerësia maksimale
Çdo vlerë e futur këtu kufizon gjerësinë e çdo përmbajtjeje të dhënë në modulin e kodit në vlerën e caktuar. Për shembull, futja e 50% në fushën e hyrjes do të zvogëlojë përmbajtjen e modulit të kodit në 50% të kolonës që e përmban atë.
Kodi i Avancuar i Kodit Kodi
Në skedën Advanced, do të gjeni opsione që krijuesit e faqeve më me përvojë mund t’i konsiderojnë të dobishme, siç janë tiparet e personalizuara CSS dhe HTML. Këtu mund të aplikoni CSS të personalizuar në cilindo nga shumë elementë të modulit. Ju gjithashtu mund të aplikoni klasa dhe ID të personalizuara të CSS në modul, të cilat mund të përdoren për të personalizuar modulin në skedarin style.css të temës tuaj të fëmijës.
ID CSS
Vendosni një CSS të lehtë për t'u përdorur për këtë modul. Një ID mund të përdoret për të krijuar një stil të personalizuar CSS ose për t'u lidhur me seksione të veçanta të faqes tuaj.
Klasë CSS
Futni klasat opsionale CSS për t'u përdorur për këtë modul. Një klasë CSS mund të përdoret për të krijuar një stil të personalizuar CSS. Mund të shtoni disa klasa, të ndara me një hapësirë. Këto klasa mund të përdoren në tuaj Tema divi Fëmijë ose në CSS-në e personalizuar që shtoni në faqen tuaj ose në faqen tuaj Site Web duke përdorur opsionet e temës Divi ose cilësimet e faqes Divi Builder.
Custom CSS
CSS e personalizuar mund të zbatohet gjithashtu në modul dhe cilindo nga elementët e brendshëm të modulit. Në seksionin Custom CSS, do të gjeni një fushë teksti ku mund të shtoni CSS direkt në secilin element. Hyrjet CSS në këto cilësime janë ngulitur tashmë me etiketat e stilit. Kështu që thjesht duhet të futni rregullat e CSS të ndara me pikëpresje.
dukshmëri
Ky opsion ju lejon të kontrolloni pajisjet në të cilat shfaqet moduli juaj. Ju mund të zgjidhni të çaktivizoni modulin tuaj në tableta, telefona inteligjentë ose desktopë individualisht. Kjo është e dobishme nëse dëshironi të përdorni modë të ndryshëm në pajisje të ndryshme ose nëse dëshironi të thjeshtoni modelin e telefonit celular duke hequr disa elementë nga faqja.
Kjo është ajo për këtë tutorial.
