Før du kan tilføje et oversigtsmodul 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 indlægseditoren, når 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 Sammendrag-modulet på listen over moduler, og klik på det for at føje det til din side. Listen over moduler kan søges, hvilket betyder, at du også kan skrive ordet "Oversigt" og derefter klikke på enter for automatisk at finde og tilføje det beskrivende tekstmodul! 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 sagen til at angive virksomhedstjenester på hjemmesiden

Da modulet Sammendrag kombinerer både billeder og tekst for at fremvise bestemte funktioner, kan du bruge det til at tilføje en liste over dine forretningstjenester til din startside. Blurb-modulet giver dig også mulighed for at gøre dit billede / ikon og titel til et link til din serviceside. I dette eksempel skal jeg bruge Blurb-modulet til at føje fire fremhævede tjenester til en startside.

For at tilføje alle fire Blurbs til din side skal du bruge den visuelle builder til at tilføje en standardafdeling med en række med fire kolonner. Føj derefter et Blurb-modul til den første kolonne i din række.

Opdater Blurb-indstillingerne med følgende:

Indholdsindstillinger

Titel: [indtast tjenestens titel]
Indhold: [indtast en kort beskrivelse af tjenesten]
URL: [tilføj en URL til servicesiden]
Brug ikonet: JA
Ikon: [vælg et ikon, der illustrerer din tjeneste]

Design muligheder

Ikonfarve: # 42bb99 (lav den farve, der komplimenterer designet af webstedet)
Brug ikonet Fontstørrelse: YES
Ikon skrifttypestørrelse: 68 pixel (justerer ikonstørrelse)
Tekstorientering: Center -
Hoved skriftstørrelse: 24 pixel
Skriftstørrelse: 18 pixel
Kropslinjens højde: 1.5em

Nu er din første introduktionstekst færdig.

Dupliker nu oversigtsmodulet, du lige har oprettet tre gange, og træk hver af de duplikerede oversigter til de tre andre kolonner. Da dine designindstillinger er blevet integreret i dine duplikerede moduler, er alt hvad du skal gøre at ændre indhold (header, indhold, ikon, URL osv.) og ændre farverne for at tilpasse dem til hver af dine tjenester.

Resumeindstillinger for indhold

I fanen indhold finder du alle modulets indholdselementer, såsom tekst, billeder og ikoner. Alt det der styrer hvad vises i dit modul vil altid være i denne fane.

titel

Giv din tekst en titel, der vises over teksten i fed skrift. URL-indstillingen under feltet Titel giver dig mulighed for at gøre din titel til et hyperlink.

Indhold

Dette felt er hvor du kan indtaste brødtekstindholdet i din tekst. Blurb Text dækker også hele bredden af ​​din kolonne op til 550 px.

URL

Placer en gyldig web-url i dette felt for at gøre din Blurb-titel til et link. Hvis du efterlader dette felt tomt, bliver din titel bare som et statisk element.

Åbning af URL

Her kan du vælge, om dit link skal åbnes i et nyt vindue.

Brug ikonet

Når du bruger Blurbs, kan du vælge at bruge et ikon eller et billede med din tekst. Hvis du vælger "Ja" som "Brug ikon", får du følgende muligheder for at tilpasse dit ikon. Hvis du ikke vælger at bruge et ikon, bliver du bedt om at uploade et billede i stedet.

ikon

Hvis du har valgt “Ja” for “Brug ikon” -indstillingen, vises denne mulighed. Denne mulighed præsenterer dig med en liste over tilgængelige ikoner, som du kan bruge med din blurb. Klik bare på det ikon, du vil bruge, så vises det i din tekst.

Billede

Hvis du ikke valgte at bruge et ikon, vises denne indstilling. Placer en gyldig billedwebadresse her, eller vælg / upload et billede via WordPress-mediebiblioteket. Billeder i modulet Sammendrag vises altid centreret i deres kolonner og spænder over hele kolonnens bredde op til 550 pixel. Dit billede vil dog aldrig være større end dets oprindelige uploadstørrelse. Præsentationsbilledets højde bestemmes af billedformatet for dit originale billede. Det tilrådes derfor at placere alle dine præsentationsbilleder i samme højde, hvis du placerer dem side om side.

Baggrundsfarve

Definer en brugerdefineret baggrundsfarve til dit modul, eller lad den være tom for at bruge standardfarven.

Baggrundsbillede

Hvis indstillet, bruges dette billede som baggrund for dette modul. For at fjerne et baggrundsbillede skal du bare fjerne URL'en fra feltet Indstillinger. Baggrundsbillederne vises oven på baggrundsfarverne, hvilket betyder, at din baggrundsfarve ikke vil være synlig, når der anvendes et baggrundsbillede.

Admin Label

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.

Indstillinger for sammendrag af moduldesign

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.

Ikonfarve

Hvis du har valgt “Ja” for “Brug ikon” -indstillingen, vises denne mulighed. Denne mulighed giver dig mulighed for at tilpasse farven på dit ikon. Som standard er ikoner indstillet til dit temas accentfarve.

Cirkelikon

Hvis du har valgt “Ja” for “Brug ikon” -indstillingen, vises denne mulighed. Denne mulighed giver dig mulighed for at placere dit ikon i en farvet cirkel. Hvis du vælger "ja" for denne indstilling, vil du blive tilbudt yderligere muligheder for at tilpasse farven og kanten af ​​din cirkel.

Cirkelens farve

Hvis du valgte "Ja" til indstillingen "Cirkelikon", vises denne indstilling. Her kan du vælge en farve, der skal bruges til din cirkel. Denne farve er uafhængig af farven på dit tidligere valgte ikon. Dit ikon vises i sin farve inde i en cirkel med den farve, du vælger her.

Vis cirklens grænse

Hvis du valgte "Ja" til indstillingen "Cirkelikon", vises denne indstilling. Denne mulighed giver dig mulighed for at aktivere en grænse for din cirkel. Hvis denne valgmulighed er valgt, vises en yderligere mulighed for at vælge din kantfarve.

Cirkelfarve

Hvis du valgte "Ja" til indstillingen "Vis cirkelramme", vises denne indstilling. Her kan du justere farven på cirkelkanten.

Billede / ikonplacering

Her kan du vælge placeringen af ​​dit billede/ikon. Det kan enten stå over teksten eller til venstre for teksten. Ved at placere billedet/ikonet til venstre for din tekst, bliver billedet mindre, end hvis det placeres ovenpå.

Brug ikonets skriftstørrelse

Hvis denne indstilling er aktiveret, kan du indtaste en brugerdefineret størrelse for ikonet, der vises ovenfor eller to til venstre for din slør.

Tekstfarve

Hvis din slør er placeret på en mørk baggrund, skal tekstfarven indstilles til "Mørk". Omvendt, hvis din slør er placeret på en lys baggrund, skal tekstfarven indstilles til "Lys".

Tekstorientering

Denne rullemenu giver dig mulighed for at angive retningen af ​​din tekst, der skal retfærdiggøres, centreres eller højrejusteres.

Overskrift skrifttype

Du kan ændre skrifttypen på din overskrift ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper drevet af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al teksten på din side. Du kan også tilpasse stilen på din tekst ved hjælp af indstillinger med fed, kursiv, stor og understregning.

Overskrift skriftstørrelse

Her kan du justere størrelsen på din overskriftstekst. Du kan trække intervalskyderen for at øge eller formindske din tekst, eller du kan direkte indtaste den ønskede tekststørrelsesværdi i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelse for at ændre enhedstypen.

Sidehovedtekstfarve

Som standard vises alle tekstfarver i Divi i hvid eller mørk grå. Hvis du vil ændre farven på din overskrift, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.

Mellemrum i overskrift

Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din overskriftstekst, skal du bruge intervalskyderen til at justere mellemrummet eller indtaste den ønskede mellemstørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelse for at ændre enhedstypen.

Overskrift rækkehøjde

Rækkehøjde påvirker afstanden mellem hver række i din overskriftstekst. Hvis du vil øge afstanden mellem hver række, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand i indtastningsfeltet til højre for markøren. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelse for at ændre enhedstypen.

Body skrifttype

Du kan ændre din kropsskrifttype ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper drevet af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al teksten på din side. Du kan også tilpasse stilen på din tekst ved hjælp af indstillinger med fed, kursiv, stor og understregning.

Krops skrifttypestørrelse

Her kan du justere størrelsen på din brødtekst. Du kan trække intervalskyderen for at øge eller formindske størrelsen på din tekst, eller du kan direkte indtaste den ønskede tekststørrelsesværdi i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelse for at ændre enhedstypen.

Krops tekstfarve

Som standard vises alle tekstfarver i Divi i hvid eller mørk grå. Hvis du vil ændre farven på din brødtekst, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.

Afstand mellem kropsbreve

Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din brødtekst, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste størrelsen på det ønskede mellemrum i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelse for at ændre enhedstypen.

Højde på kropslinjen

Linjehøjde påvirker mellemrummet mellem hver linje med brødtekst. Hvis du vil øge afstanden mellem hver række, skal du bruge intervalskyderen til at justere mellemrummet eller indtaste den ønskede afstandsstørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelse for at ændre enhedstypen.

Brug grænsen

Aktivering af denne mulighed placerer en kant omkring dit modul. Denne kant kan tilpasses ved hjælp af følgende betingede parametre.

Farve på grænsen

Denne indstilling påvirker farven på din kant. Vælg en brugerdefineret farve fra farvevælgeren for at anvende den på din kant.

Bredden af ​​grænsen

Som standard er kanterne 1 pixel brede. Du kan øge denne værdi ved at trække områdeskyderen eller indtaste en brugerdefineret værdi i indtastningsfeltet til højre for skyderen. Understøtter brugerdefinerede måleenheder, hvilket betyder at du kan ændre standardenheden fra "px" til noget andet som em, vh, vw osv.

Grænsestil

Grænser understøtter otte forskellige stilarter, herunder: solid, prikket, prikket, dobbelt, rille, ryg, indsats og start. Vælg den ønskede stil i rullemenuen for at anvende den på din kant.

Maksimal billedbredde

Anvendelse af en maksimal breddeværdi her begrænser bredden på præsentationsbilledet. Dette påvirker kun uskarphed, der ikke er i ikontilstand.

Brugerdefineret margen

Margenen er det mellemrum, der er tilføjet på ydersiden af ​​dit modul, mellem modulet og det næste element over, under eller til venstre og højre for det. Du kan tilføje brugerdefinerede margenværdier til en af ​​modulets fire sider. For at fjerne en brugerdefineret margen skal du fjerne merværdien fra indtastningsfeltet. Som standard måles disse værdier i pixels, men du kan indtaste brugerdefinerede måleenheder i inputfelterne.

Brugerdefineret polstring

Polstring er det rum, der tilføjes inde i dit modul, mellem kanten af ​​modulet og dets interne elementer. Du kan tilføje tilpassede polstringsværdier til en af ​​modulets fire sider. For at fjerne en brugerdefineret margen skal du fjerne merværdien fra indtastningsfeltet. Som standard måles disse værdier i pixels, men du kan indtaste brugerdefinerede måleenheder i inputfelterne.

Avancerede indstillinger Oversigt modul

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 valgfrit CSS-ID, der skal bruges 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-poster i disse indstillinger er allerede indlejret med typografikoder. Så du skal bare indtaste CSS-regler adskilt af semikolon.

Billede / ikon animation

Dette styrer retningen af ​​den dovne belastningsanimation.

ALT-tekst fra billedet

Hvis du ikke valgte at bruge et ikon, vises denne indstilling. Anden tekst indeholder alle nødvendige oplysninger, hvis billedet ikke indlæses, vises korrekt eller i en anden situation, hvor en bruger ikke kan se billedet. Det gør det også muligt at læse og genkende billedet af søgemaskiner.

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. Vi håber at have vist dig, hvordan du bruger opsummeringsmodulet på Divi.