Kodemodulet er et tomt lærred, der giver dig mulighed for at tilføje kode til din side, såsom plugin-kortkoder eller statisk HTML-kode. Hvis du vil bruge et tredjeparts-plugin, for eksempel et tredjeparts skyder-plugin, kan du blot placere plugin-kortkoden i et standard- eller fuldbreddekodemodul for at få vist elementet uhindret.
Sådan føjes et kodemodul til din side
Før du kan tilføje et kodemodul til din side, skal du først tilgå Divi Builder. En gang Divi-tema installeret på din Websted, vil du bemærke en knap Brug Divi Builder over udgiveren, hver gang du opretter en ny side.
Ved at klikke på denne knap aktiverer du Divi Builder, som giver dig adgang til alle Divi Builder-modulerne. Klik derefter på knappen Brug Visual Builder for at starte generatoren i visuel tilstand.
Du kan også klikke på knappen Brug Visual Builder når du gennemser din Websted upstream, hvis du er logget ind på dit WordPress-dashboard.
Når du er indtastet i Visual Builder, kan du klikke på den grå plus-knap for at tilføje et nyt modul til din side. Nye moduler kan kun tilføjes inden for rækker. Hvis du starter en ny side, skal du huske at føje en række til din side først.
Find kodemodulet på listen over moduler, og klik på det for at føje det til din side. Listen over moduler er søgbar, hvilket betyder at du også kan skrive ordet "kode" og derefter trykke på enter for automatisk at finde og tilføje kodemodulet! Når modulet er tilføjet, vil du blive mødt med listen over modulindstillinger. Disse muligheder er opdelt i tre hovedgrupper: Indhold , Conception et avanceret .
Brug case ved at tilføje et kedeligt stilark til at animere indhold på en individuel side
I dette eksempel vil jeg tilføje et link script til at importere Animate.css for at tilføje animationseffekter til elementerne på siden. Da filen Animate.css indeholder en masse kode, giver det mening at kun indlæse den på den side, jeg har brug for.
Bare tilføj et almindeligt afsnit og en linje med fuld bredde (kolonne 1) og tilføj kodemodulet.
I tekstboksen til indhold, tilføj kodestykket.
Alt du skal gøre er at tilføje et par CSS-klasser for at animere ethvert element på din CSS-klasseside på din side. I dette eksempel vil jeg hoppe på knappen, når siden indlæses.
I indstillingerne for knapmodul under fanen Avanceret skal du indtaste de to klasser "animeret" og "bounce" i tekstfeltet CSS-klasse.
Nu springer knappen ud, når siden indlæses.
Tip: Nogle gange vil tilføjelse af kode med linjeskift få koden til at stoppe med at fungere. Det er bedre at oprette din kode i en teksteditor og indsætte den i kodemodulet.
Kode indholdsindstillinger
I fanen af indhold, finder du alle modulets indholdselementer, såsom tekst, billeder og ikoner. Alt der styrer hvad vises i dit modul vil altid være i denne fane.
Indhold
Her kan du placere enhver HTML-, CSS- eller JavaScript-kode, som du vil have vist på siden på den aktuelle placering. Kun redaktører og administratorer har tilladelse til at poste ufiltreret HTML, hvilket betyder, at kode kan fjernes fra kurset, hvis den bruges af en forfatter eller bidragyder. Du kan også placere kortkoder i modulet. Disse kursuskoder (shortcodes) vil blive vist inde i den overordnede kolonne uden yderligere Divi-modulindpakninger.
Administration etiket
Dette ændrer moduletiketten i generatoren for nem identifikation. Når du bruger WireFrame-visningen i Visual Builder, vises disse etiketter i modulblokken i Divi Builder-grænsefladen.
Kode design muligheder
På fanen Design finder du alle stylingindstillingerne for modulet, såsom skrifttyper, farver, størrelse og afstand. Denne fane giver dig mulighed for at ændre udseendet på dit modul. Hvert Divi-modul har en lang liste over designindstillinger, som du kan bruge til at tilpasse næsten alt.
Maksimal bredde
Enhver værdi, der indtastes her, begrænser bredden på ethvert indhold, der gengives i kodemodulet, til den indstillede værdi. For eksempel vil indtastning af 50% i indtastningsfeltet reducere indholdet af kodemodulet til 50% af den kolonne, der indeholder det.
Kode Avancerede indstillinger Kode
På fanen Avanceret finder du indstillinger, som mere erfarne webdesignere kan finde nyttige, såsom tilpassede CSS- og HTML-attributter. Her kan du anvende tilpasset CSS på ethvert af modulets mange elementer. Du kan også anvende tilpassede CSS-klasser og ID'er til modulet, som kan bruges til at tilpasse modulet i dit barns temas style.css-fil.
CSS ID
Indtast et brugervenligt CSS-ID til dette modul. Et ID kan bruges til at oprette en brugerdefineret CSS-stil eller til at linke til bestemte sektioner på din side.
CSS klasse
Indtast de valgfri CSS-klasser, der skal bruges til dette modul. En CSS-klasse kan bruges til at skabe brugerdefineret CSS-styling. Du kan tilføje flere klasser, adskilt af et mellemrum. Disse klasser kan bruges i din Divi-tema Underordnet eller i den tilpassede CSS, som du tilføjer til din side eller din Websted ved at bruge Divi-temaindstillinger eller Divi Builder-sideindstillinger.
Tilpasset CSS
Brugerdefineret CSS kan også anvendes på modulet og ethvert af modulets interne elementer. I sektionen Custom CSS finder du et tekstfelt, hvor du kan tilføje CSS direkte til hvert element. CSS-posterne i disse indstillinger er allerede indlejret med typografikoder. Så du skal bare indtaste CSS-regler adskilt af semikolon.
synlighed
Denne mulighed giver dig mulighed for at kontrollere de enheder, som dit modul vises på. Du kan vælge at deaktivere dit modul på tablets, smartphones eller desktops individuelt. Dette er nyttigt, hvis du vil bruge forskellige mods på forskellige enheder, eller hvis du vil forenkle mobildesignet ved at fjerne visse elementer fra siden.
Det er det til denne tutorial.
