Kodemodulen er et tomt lerret som lar deg legge til kode på siden din, for eksempel plugin-kortkoder eller statisk HTML-kode. Hvis du vil bruke et tredjeparts plugin, for eksempel et tredjeparts skyvekontrollprogram, kan du ganske enkelt plassere plugin-kortkoden i en standard eller fullbreddekodemodul for å vise elementet uhindret.
Slik legger du til en kodemodul på siden din
Før du kan legge til en kodemodul på siden din, må du først få tilgang til Divi Builder. Først når Divi-tema installert på din nettstedet Web, vil du legge merke til en knapp Bruk Divi Builder over utgiveren hver gang du oppretter en ny side.
Ved å klikke på denne knappen aktiverer du Divi Builder, som gir deg tilgang til alle Divi Builder-modulene. Klikk deretter på knappen Bruk Visual Builder å starte generatoren i visuell modus.
Du kan også klikke på knappen Bruk Visual Builder når du surfer på din nettstedet Web oppstrøms hvis du er logget på WordPress-dashbordet.
Når du har inngått Visual Builder, kan du klikke på den grå pluss-knappen for å legge til en ny modul på siden din. Nye moduler kan bare legges til innenfor rader. Hvis du starter en ny side, husk å legge til en rad på siden din først.
Finn kodemodulen i listen over moduler, og klikk på den for å legge den til siden din. Listen over moduler er søkbar, noe som betyr at du også kan skrive ordet "kode" og deretter trykke på enter for automatisk å finne og legge til kodemodulen! Når modulen er lagt til, vil du bli møtt med listen over modulalternativer. Disse alternativene er delt inn i tre hovedgrupper: Innhold , Conception et avansert .
Bruk tilfelle ved å legge til et kjedelig stilark for å animere innhold på en enkelt side
I dette eksemplet vil jeg legge til et koblingsskript for å importere Animate.css for å legge til animasjonseffekter til elementene på siden. Siden Animate.css-filen inneholder mye kode, er det fornuftig å bare laste den inn på siden jeg trenger.
Bare legg til et vanlig avsnitt og en linje i full bredde (1-kolonne) og legg til kodemodulen.
I tekstboksen til innhold, legg til kodebiten.
Alt du trenger å gjøre er å legge til noen CSS-klasser for å animere ethvert element på CSS-klassesiden din på siden din. I dette eksemplet skal jeg sprette knappen når siden lastes inn.
I Innstillinger for knappemoduler, i kategorien Avansert, skriver du inn de to klassene "animert" og "sprette" i tekstboksen CSS-klasse.
Nå spretter knappen når siden laster.
Tips: Noen ganger vil kode med linjeskift føre til at koden slutter å fungere. Det er bedre å lage koden din i et tekstredigeringsprogram og lime den inn i kodemodulen.
Kode innholdsalternativer
I fanen til innhold, finner du alle innholdselementene i modulen, som tekst, bilder og ikoner. Alt som styrer hva vises i modulen din vil alltid være i denne fanen.
Innhold
Her kan du plassere hvilken som helst HTML-, CSS- eller JavaScript-kode som du vil vise på siden på gjeldende plassering. Bare redaktører og administratorer har lov til å legge ut ufiltrert HTML, noe som betyr at koden kan fjernes fra kurset hvis den brukes av en forfatter eller bidragsyter. Du kan også legge inn kortkoder i modulen. Disse kurskodene (kortkodene) vil bli vist inne i den overordnede kolonnen uten ytterligere Divi-modulomslag.
Administrasjonsmerke
Dette vil endre moduletiketten i generatoren for enkel identifisering. Når du bruker WireFrame-visningen i Visual Builder, vil disse etikettene vises i modulblokken i Divi Builder-grensesnittet.
Kode design alternativer
I kategorien Design finner du alle modulstilvalgene, for eksempel skrifter, farger, størrelse og avstand. Denne kategorien lar deg endre utseendet til modulen din. Hver Divi-modul har en lang liste over designinnstillinger som du kan bruke til å tilpasse omtrent hva som helst.
Maksimal bredde
Enhver verdi som angis her, begrenser bredden på innholdet som er gjengitt i kodemodulen til den angitte verdien. For eksempel vil inntasting av 50% i inndatafeltet redusere innholdet i kodemodulen til 50% av kolonnen som inneholder den.
Kode Avanserte alternativer Kode
I kategorien Avansert finner du alternativer som mer erfarne webdesignere kan finne nyttige, for eksempel tilpassede CSS- og HTML-attributter. Her kan du bruke tilpasset CSS på alle modulens mange elementer. Du kan også bruke tilpassede CSS-klasser og ID-er til modulen, som kan brukes til å tilpasse modulen i barnets temas style.css-fil.
CSS ID
Skriv inn en brukervennlig CSS-ID for denne modulen. En ID kan brukes til å lage en tilpasset CSS-stil eller for å koble til bestemte deler av siden din.
CSS klasse
Skriv inn de valgfrie CSS-klassene som skal brukes for denne modulen. En CSS-klasse kan brukes til å lage tilpasset CSS-styling. Du kan legge til flere klasser, atskilt med et mellomrom. Disse timene kan brukes i din Divi-tema Underordnet eller i den tilpassede CSS-en du legger til på siden din eller din nettstedet Web ved å bruke Divi-temaalternativer eller Divi Builder-sideinnstillinger.
Tilpasset CSS
Tilpasset CSS kan også brukes på modulen og hvilket som helst av modulens interne elementer. I Custom CSS-delen finner du et tekstfelt der du kan legge til CSS direkte til hvert element. CSS-oppføringer i disse innstillingene er allerede innebygd med stilkoder. Så du må bare oppgi CSS-regler atskilt med semikolon.
synlighet
Dette alternativet lar deg kontrollere enhetene som modulen din vises på. Du kan velge å deaktivere modulen din på nettbrett, smarttelefoner eller stasjonære datamaskiner hver for seg. Dette er nyttig hvis du vil bruke forskjellige mods på forskjellige enheter, eller hvis du vil forenkle mobildesignet ved å eliminere visse elementer fra siden.
Det er det for denne opplæringen.
