Divi Builder Plugin Documentation

Sådan tilføjer, konfigurerer og tilpasser du Divi blogmodulet.

Med Divi er selv blogs et modul, og din “blog” kan placeres hvor som helst på dit websted og i forskellige formater. Du kan kombinere blog- og sidebar-moduler for at skabe klassiske blogdesigns. Blogs med 1 kolonne, 2 kolonner eller 3 kolonner kan alle bygges ved hjælp af blog- og sidebar-moduler.

Se en live-demo af dette modul

Sådan tilføjer du et blogmodul til din side

Hvor du kan tilføje et blogmodul til din side, skal du først hoppe ind i Divi Builder. Når Divi-temaet er blevet installeret på dit websted, vil du bemærke en Use Divi Builder-knap over indlægseditoren, hver gang du opbygger en ny side. Hvis du klikker på denne knap, aktiveres Divi Builder, hvilket giver dig adgang til alle Divi Builders moduler. Klik derefter på knappen Use Visual Builder for at starte builderen i visuel tilstand. Du kan også klikke på knappen Use Visual Builder, når du gennemser dit websted i frontend, hvis du er logget ind på dit WordPress Dashboard.

Når du er kommet ind i Visual Builder, kan du klikke på den grå plusknap for at tilføje et nyt modul til din side. Nye moduler kan kun tilføjes inde i Rows. Hvis du starter en ny side, skal du ikke glemme at tilføje en række til din side først. Vi har nogle gode vejledninger om, hvordan du bruger Divi’s række- og sektionselementer.

Lokaliser blogmodulet i listen over moduler, og klik på det for at tilføje det til din side. Modullisten er søgbar, hvilket betyder, at du også kan skrive ordet “blog” og derefter klikke på enter for automatisk at finde og tilføje blogmodulet! Når modulet er blevet tilføjet, vil du blive mødt med modulets liste over muligheder. Disse muligheder er opdelt i tre hovedgrupper: Indhold, Design og Avanceret.

Brugseksempel: Tilføjelse af blogmodul med et gitterlayout i et specialafsnit med en højre sidebar

I dette eksempel vil jeg tilføje et blogmodul til en blogside. Denne blogside har en header i fuld bredde med et søgemodul under den. Under søgemodulet vil jeg tilføje et specialafsnit med blogmodulet i venstre side og et sidebarafsnit i højre side. Sidebaren til højre har en widget for seneste indlæg, et Email Optin-modul og et Personmodul.

Her er, hvordan eksempelsiden ser ud.

Bemærk, at blogmodulet er i et gitterlayout på venstre side af specialafsnittet.

Lad os komme i gang.

Brug den visuelle builder til at tilføje et specialafsnit med følgende layout:

Du vil blive bedt om at tilføje enten en 1-kolonne eller 2-kolonne række til venstre side. Vælg rækken med 1 kolonne.

Føj derefter Blogmodulet til rækken.

Ajourfør Blogindstillingerne som følger:

Indholdsindstillinger

Indlægsnummer: 6
Læs mere-knappen: ON
Show Pagination: ON
Show Pagination: NEJ
Grid Tile Baggrundsfarve:: NEJ
Grid Tile Baggrundsfarve: #ffffffff

Designindstillinger

Layout: Grid
Brug Dropshadow: ON
Overlay Icon Color:: ON
Overlay Icon Color: ON
Overlay Icon Color: ON #ffffffff
Hover Overlay Color: rgba(224,153,0,0,0.51)
Header Font:: #ffffffffff
Hover Overlay Color: rgba(224,153,0,0.51)
Standard
Hovedskriftstørrelse: 21px
Hovedskriftstørrelse: 21px
Hovedtekstfarve: Gg: #33333333
Header Letter Spacing:: #33333333
Header Letter Spacing 1px
Header Line Height: 1.2em
Use Border: 1px
Header Line Height: 1.2em
Use Border: YES
Border Color:: YES
Border Color: YES
Border Color: YES #f0f0f0f0
Bredde af ramme: 1px
Bordenstil: Solid

Advanced Options

Brugerdefineret CSS (Læs mere-knappen):

Den avancerede brugerdefinerede CSS til Læs mere-knappen skaber et brugerdefineret udseende, der passer godt til designet.

På højre sidebar-sektion i specialsektionslayoutet skal du tilføje et sidebar-modul, der trækker widget’en for seneste indlæg ind. Under dette skal du tilføje et e-mail-optin-modul. Og så skal du under Email Optin tilføje Personmodulet med info om forfatteren.

Det er det!

Blogindholdsindstillinger

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

Antal indlæg

Definer det antal indlæg, som du ønsker at vise. Du skal have oprettet indlæg, for at noget kan vises inde i dette modul.

Vælg de kategorier, som du ønsker at inkludere i indlægsfeedet. Alle indlægskategorier, som du har oprettet, vises her, så du kan vælge/fravælge dem.

Inkluderede kategorier

Vælg, hvilke kategorier du ønsker at inkludere i feedet.

Meta datoformat

Definér det datoformat, som du ønsker at vise på dine blogindlæg her. Standardlayoutet er et M j, Y-format (6. januar 2014) Se WordPress Codex om datoformater for at få flere muligheder.

Indhold

Visning af det fulde indhold vil ikke afkortes dine indlæg på indekssiden. Visning af uddrag vil kun vise din uddragstekst.

Offset Number

Vælg, hvor mange indlæg du ønsker at offset med. Hvis du f.eks. forskyder med 3 indlæg, vil de tre første indlæg i dit blogfeed ikke blive vist.

Show Featured Image

Med denne indstilling kan du vælge, om du vil have miniaturebilleder vist i dit blogmodul.

Læs mere-knappen

Her kan du definere, om du vil vise “læs mere”-linket efter uddraget eller ej.

Vis forfatter

Vælg, om du vil vise forfatteren til hvert blogindlæg inden for indlægsmetaområdet under indlægstitlen eller ej.

Vis dato

Vælg, om du vil vise den dato, hvor hvert indlæg blev oprettet, inden for indlægsmetaområdet under indlægstitlen.

Vis kategorier

Vælg, om du vil vise indlægskategorier inden for indlægsmetaområdet under indlægstitlen.

Vis kommentarantal

Vælg, om du vil vise kommentarantal inden for indlægsmetaområdet under indlægstitlen.

Vis paginering

Vælg, om du vil vise paginering for dette feed eller ej. For at aktivere nummereret paginering skal du installere WP Page Navi-plugin’et.

Admin Label

Dette vil ændre etiketten for modulet i builderen for nem identifikation. Når du bruger WireFrame-visning i Visual Builder, vises disse etiketter i modulblokken i Divi Builder-grænsefladen.

Blogdesignindstillinger

I designfanen finder du alle modulets stylingindstillinger, såsom skrifttyper, farver, størrelser og mellemrum. Det er denne fane, du skal bruge til at ændre, hvordan dit modul ser ud. Hvert Divi-modul har en lang liste over designindstillinger, som du kan bruge til at ændre stort set alt.

Layout

Du kan enten vælge at vise dine blogindlæg i et gitter eller et layout i fuld bredde.

Featured Image Overlay

Hvis den er aktiveret, vises en overlejringsfarve og et ikon, når en besøgende holder musen hen over det fremhævede billede i et indlæg.

Overlay ikonfarve

Her kan du definere en brugerdefineret farve til overlay-ikonet.

Hover Overlay-farve

Her kan du definere en brugerdefineret farve til overlayet.

Hover Icon Picker

Her kan du definere et brugerdefineret ikon til overlejringen.

Text Color

Hvis din blog placeres på en lys baggrund, skal tekstfarven indstilles til ‘Dark’ (Mørk). Visa omvendt, hvis din blog placeres på en mørk baggrund, skal tekstfarven indstilles til “Lys”.

Font for overskriften

Du kan ændre skrifttypen for 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 tekst på din side. Du kan også tilpasse stilen på din tekst ved hjælp af indstillingerne fed, kursiv, versaler og understregning.

Hovedskriftstørrelse

Her kan du justere størrelsen på din header-tekst. Du kan trække i intervallet skyderen for at øge eller mindske størrelsen af din tekst, eller du kan indtaste den ønskede tekststørrelse direkte i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder, at du kan indtaste “px” eller “em” efter din størrelsesværdi for at ændre enhedstypen.

Indtastningsfeltet understøtter forskellige måleenheder, hvilket betyder, at du kan indtaste “px” eller “em” efter din størrelsesværdi for at ændre enhedstypen.

Farve på overskriften

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

Header Letter Spacing

Letter spacing påvirker afstanden mellem hvert enkelt bogstav. Hvis du ønsker at øge afstanden mellem hvert bogstav i din overskriftstekst, skal du bruge skyderen til at justere afstanden 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” efter størrelsesværdien for at ændre enhedstypen.

Header Line Height

Linjehøjden påvirker mellemrummet mellem hver linje i din overskriftstekst Hvis du ønsker at øge mellemrummet mellem hver linje, skal du bruge skyderen til at justere mellemrummet eller indtaste den ønskede mellemrumsstørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder, at du kan indtaste “px” eller “em” efter din størrelsesværdi for at ændre enhedstypen.

Body Font

Du kan ændre skrifttypen for din brødtekst ved at vælge den ønskede skrifttype i dropdown-menuen. Divi leveres med snesevis af fantastiske skrifttyper drevet af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al tekst på din side. Du kan også tilpasse stilen på din tekst ved hjælp af indstillingerne fed, kursiv, alle versaler og understregning.

Body Font Size

Her kan du justere størrelsen på din brødtekst. Du kan trække i intervallet skyderen for at øge eller mindske størrelsen af din tekst, eller du kan indtaste den ønskede tekststørrelse direkte i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder, at du kan indtaste “px” eller “em” efter din størrelsesværdi for at ændre dens enhedstype.

Kropstekstfarve

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

Body Letter Spacing

Bogstavafstand påvirker afstanden mellem hvert enkelt bogstav. Hvis du ønsker at øge afstanden mellem hvert bogstav i din brødtekst, skal du bruge skyderen for området til at justere afstanden 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” efter størrelsesværdien for at ændre enhedstypen.

Body Line Height

Linjehøjden påvirker mellemrummet mellem hver linje i din brødtekst Hvis du ønsker at øge mellemrummet mellem hver linje, skal du bruge skyderen til at justere mellemrummet eller indtaste den ønskede mellemrumsstørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder, at du kan indtaste “px” eller “em” efter din størrelsesværdi for at ændre enhedstypen.

Meta Font

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

Meta Font Size

Her kan du justere størrelsen på din metatekst. Du kan trække i intervallet skyderen for at øge eller mindske størrelsen af din tekst, eller du kan indtaste den ønskede tekststørrelse direkte i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder, at du kan indtaste “px” eller “em” efter din størrelsesværdi for at ændre dens enhedstype.

Metatekstfarve

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

Meta Letter Spacing

Letter spacing påvirker mellemrummet mellem hvert enkelt bogstav. Hvis du gerne vil øge afstanden mellem hvert bogstav i din metatekst, skal du bruge intervallets skyder til at justere afstanden 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” efter størrelsesværdien for at ændre enhedstypen.

Meta Line Height

Linjehøjden påvirker mellemrummet mellem hver linje i din metatekst Hvis du gerne vil øge mellemrummet mellem hver linje, skal du bruge skyderen til at justere mellemrummet eller indtaste den ønskede mellemrumsstørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder, at du kan indtaste “px” eller “em” efter din størrelsesværdi for at ændre enhedstypen.

Use Border

Aktiverer du denne indstilling, placeres der en kant omkring dit modul. Denne kant kan tilpasses ved hjælp af følgende betingede indstillinger.

Border Color

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

Border Width

Som standard har rammer en bredde på 1 pixel. Du kan øge denne værdi ved at trække i skyderen for området eller ved at indtaste en brugerdefineret værdi i indtastningsfeltet til højre for skyderen. Brugerdefinerede måleenheder understøttes, hvilket betyder, at du kan ændre standardenheden fra “px” til noget andet, f.eks. em, vh, vw osv.

Border Style

Borders understøtter otte forskellige stilarter, herunder: solid, dotted, dashed, double, groove, ridge, ridge, inset og outset. Vælg den ønskede stil i rullemenuen for at anvende den på din kant.

Blog avancerede indstillinger

I fanen avanceret finder du indstillinger, som mere erfarne webdesignere kan finde nyttige, f.eks. brugerdefinerede CSS- og HTML-attributter. Her kan du anvende brugerdefineret CSS på ethvert af modulets mange elementer. Du kan også anvende brugerdefinerede CSS-klasser og -ID’er på modulet, som kan bruges til at tilpasse modulet i dit undertema’s style.css-fil.

CSS-ID

Indtast et valgfrit CSS-ID, der skal bruges for dette modul. Et ID kan bruges til at oprette brugerdefineret CSS-styling eller til at oprette links til bestemte afsnit på din side.

CSS-klasse

Indtast valgfrie CSS-klasser, der skal bruges til dette modul. En CSS-klasse kan bruges til at oprette brugerdefineret CSS-styling. Du kan tilføje flere klasser, adskilt med et mellemrum. Disse klasser kan bruges i dit Divi Child Theme eller i Custom CSS, som du tilføjer til din side eller dit websted ved hjælp af Divi Theme Options eller Divi Builder Page Settings.

Custom CSS

Custom CSS kan også anvendes på modulet og ethvert af modulets interne elementer. I afsnittet Brugerdefineret CSS finder du et tekstfelt, hvor du kan tilføje brugerdefineret CSS direkte til hvert element. CSS-indtastninger i disse indstillinger er allerede pakket ind i style-tags, så du behøver kun at indtaste CSS-regler adskilt af semikoloner.

Visibility

Med denne indstilling kan du styre, hvilke enheder dit modul vises på. Du kan vælge at deaktivere dit modul på tablets, smartphones eller stationære computere individuelt. Dette er nyttigt, hvis du ønsker at bruge forskellige moduler på forskellige enheder, eller hvis du ønsker at forenkle det mobile design ved at fjerne visse elementer fra siden.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.