Med Divi er selv blogs et modul, og din "blog" kan placeres hvor som helst på din Websted og i forskellige formater. Du kan kombinere blog- og sidepanelmoduler for at skabe klassiske blogdesigns. 1 kolonne, 2 kolonne eller 3 kolonne kan oprettes ved hjælp af blog og sidebar modul.
Sådan føjes et blogmodul til din side
Før du kan tilføje et blogmodul 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 kan du aktivere 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 først glemme at tilføje en række til din side. Vi har gode tutorials om brug af elementerne i linjer og sektioner af Divi.
Find blogmodulet 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 "blog" og derefter klikke på enter for automatisk at finde og tilføje blogmodulet! 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 tilfældet med blogmodulet med et gitterlayout i en specialafdeling med et højre sidebjælke
I dette eksempel vil jeg tilføje et blogmodul til en blogside. Denne blogside har en fuld overskrift med et søgemodul nedenfor. Under søgemodulet vil jeg tilføje et specialafsnit med blogmodulet i venstre side og et sidebareafsnit til højre. Sidebjælken til højre indeholder en nyere post-widget, et e-mail-optin-modul og et personmodul.
Sådan ser eksempelsiden ud.
Bemærk, at blogmodulet er i et gitterlayout i venstre side af det specielle afsnit.
Lad os starte.
Brug den visuelle builder til at tilføje et specialiseret afsnit med følgende layout:
Du bliver bedt om at tilføje en kolonne eller en række med to kolonner til venstre side. Vælg kolonne række 1.
Føj derefter blogmodulet til linjen.
Opdater blogindstillingerne som følger:
Indholdsindstillinger
Stillingsnummer: 6
Lær mere Knap: ON
Vis pagination: NEJ
Gitter baggrundsfarve: #ffffff
Design muligheder
Layout: Gitter
Brug Dropshadow: ON
Overlay-farveikon: #ffffff
Hover Overlay-farve: rgba (224,153,0,0.51) Header
Politi:
Skriftstørrelseshoved: 21px
Overskrift Tekstfarve: # 333333
Bogstavafstand: 1px
Overskriftsrækkehøjde: 1.2 em
Border: JA
Farve på grænsen: # f0f0f0
Bredde på grænsen: 1px
Border style: Solid
Valgmuligheder avancées
Tilpasset CSS (knappen Læs mere):
farve: # e09900;
visning blok;
tekst-align: center;
margin-top: 10px;
grænse: 1px solid #ccc;
polstring: 5px;
Tekst Transformation: Kapitalisere;
brevafstand: 1px;
Den avancerede tilpassede CSS-knap til Read More-knappen skaber et brugerdefineret look, der matcher designet.
I det højre sidebareafsnit i specialsektionslayoutet skal du tilføje et sidebaremodul, der indsætter den seneste widget for indlæg. Nedenfor skal du tilføje et Email Optin-modul. Og derefter under Email Optin skal du tilføje Person-modul med forfatteroplysninger.
Det er alt!
Indstillinger for blogindhold
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.
Varenummer (Antal varer)
Indstil antallet af beskeder, du vil vise. Du bliver nødt til at have beskeder om alt, hvad der vises i dette modul.
Vælg de kategorier, du vil medtage i post-feedet. Alle de beskedkategorier, du oprettede, vises her, hvor du kan vælge / fravælge.
Kategorier inkluderet
Vælg de kategorier, du vil inkludere i feedet.
Metadataformat
Indstil det datoformat, du vil have vist på dine blogindlæg her. Standardlayoutet er M j, Y-format (6. januar 2014) Se WordPress codex på datoformater for flere muligheder.
Indhold
Visning af fuldt indhold trunkerer ikke dine indlæg på indekssiden. Vis uddrag viser kun din uddragstekst.
Offsetnummer
Vælg det antal beskeder, du vil udligne. Hvis du f.eks. Kompenserer med 3 indlæg, vises de første tre indlæg i dit blogfeed ikke.
Vis fremhævet billede
Denne indstilling giver dig mulighed for at vælge, om du vil have miniaturebilleder i dit blogmodul.
Læs mere knappen
Her kan du indstille, om linket "læs mere" skal vises efter uddraget eller ej.
Vis forfatter
Vælg, om du vil vise forfatteren af hvert blogindlæg i post-metafeltet under postens titel.
Vis dato
Vælg, om du vil vise datoen, hvor hver artikel blev oprettet i feltet Metamasse under meddelelsens titel.
Vis kategorier
Vælg, om postkategorierne skal vises i postmetaområdet under publikationstitlen eller ej.
Vis antal kommentarer
Vælg, om du vil have vist antallet af kommentarer i postmetamassen under titlen på indlægget.
Se pagination
Vælg, om du vil vise pagination for dette feed eller ej. For at aktivere nummereret personsøgning skal du installere pluginnet WP Page Navi .
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.
Blog 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.
Disposition
Du kan vælge at vise dine blogindlæg i et gitter eller et layout i fuld bredde.
Overlejret billede
Hvis denne indstilling er aktiveret, vises en farve og et overlay-ikon, når en besøgende svæver over det valgte billede af en besked.
Overlay-ikonfarve
Her kan du indstille en brugerdefineret farve til overlay-ikonet.
Cover farve svæver
Her kan du definere en tilpasset farve til overlejringen.
Hover Icon Picker
Her kan du definere et tilpasset ikon til overlayet.
Tekstfarve
Si din blog er placeret på en lys baggrund, skal tekstfarven indstilles til "Mørk". Visa, ja din blog er placeret på en mørk baggrund, skal tekstfarven indstilles til "Lys".
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 størrelsen på din tekst, eller du kan direkte indtaste den ønskede værdi for tekststø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.
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 mellemrummet 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 værdi for tekststø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.
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 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.
Højde på kropslinjen
Linjehøjde påvirker mellemrummet mellem hver linje med brødtekst. Hvis du vil øge mellemrummet 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.
Metas font
Du kan ændre skrifttypen på din metatekst 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.
Metas skriftstørrelse
Her kan du justere størrelsen på din metatekst. Du kan trække intervalskyderen for at øge eller formindske størrelsen på din tekst, eller du kan direkte indtaste den ønskede værdi for tekststø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.
Tekstfarve til meta
Som standard vises alle tekstfarver i Divi i hvid eller mørk grå. Hvis du vil ændre farven på din metatekst, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.
Afstand mellem metabrev
Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din metatekst, 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.
Meta Line Højde
Rækkehøjde påvirker mellemrummet mellem hver række i din metatekst. Hvis du vil øge afstanden mellem hver række, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste størrelsen på den afstand, du vil have i feltet 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.
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øttede brugerdefinerede måleenheder, hvilket betyder at du kan ændre standardenheden fra "px" til noget andet, fx 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.
Avancerede blogindstillinger
På fanen Avanceret finder du indstillinger, som mere erfarne webdesignere kan finde nyttige, såsom tilpassede CSS- og HTML-attributter. Her kan du anvende brugerdefineret 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 tilpasset CSS, som du tilføjer til din side eller dit websted ved hjælp af 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.
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.
Hej,
Ved du, hvordan du vender pagineringens retning? Jeg vil gerne præsentere mine artikler fra de nyeste til de ældste.
Tak for dit svar.
Manolita