"Articles Slider" eller Posts Slider-modulet på WordPress tema Divi giver dig mulighed for på en fornem måde at vise artikler efter eget valg på hjemmesiden. På mange blogs bruges denne type modul generelt til at vise udvalgte artikler. Men du kan gøre en anden brug af det og vise artikelforslag for eksempel.

Sådan tilføjes artikelskydermodulet på Divi Builder

Før du kan tilføje et artikelskydemodul til din side, skal du først springe til Divi Builder. Når den Divi-tema installeret på din hjemmeside, vil du bemærke en Bouton Brug Divi Builder over udgiveren, hver gang du opretter en ny side. Klik på denne knap for at aktivere Divi Builder og få 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 dit websted i forgrunden, hvis du er tilsluttet dit WordPress-dashboard.

Divi-bygmester

Når du har indtastet 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.

articles.png cursor

Find modulet "Post Sliders" på listen over moduler, og klik på det for at tilføje det til din side. Listen over moduler kan søges, hvilket betyder, at du også kan skrive ordet "Post Cusors" og derefter klikke på "Enter" for automatisk at finde og tilføje Post Cusors-modulet! Når modulet er tilføjet, vil du blive mødt af listen over modulindstillinger. Disse muligheder er opdelt i tre hovedgrupper: Indhold , Conception et avanceret .

Eksempel på brugssag: Send skyderne (artikler) for at få vist de seneste

I dette eksempel vil jeg tilføje en skyder til indlæg for at fremvise de tre seneste indlæg øverst på en blogside. Hvert dias viser det valgte postbillede som baggrundsbillede, posttitel og postmeta og en Læs mere-knap.

eksempel på blog divi.jpg

Brug Visual Builder til at tilføje et nyt standardsektion øverst på blogsiden med en fuldbredde (1 kolonne) række. Indsæt derefter Post Slider-modulet i din nye linje.

oprette en ny divi.png-kolonne

Under markørindstillinger skal du opdatere følgende indstillinger:

Indholdsindstillinger

Meddelelsens nummer: 3

Design muligheder

Overskrift Skrifttype: Roboto (store bogstaver) overskrift Skriftstørrelse: 50 px Overskrift Tekstfarve: # edef5d Overskrift Letterafstand: 1 px Krops skriftstørrelse: 16 Letter-mellemrum: 1 pix Kropslinjehøjde: 1.4 em Meta skrifttype: Åben sans, Kursiv, store bogstaver Meta skrifttypestørrelse: 18 px Meta tekstfarve: #cccccc Metaliniehøjde: 2 em Brug brugerdefinerede stilarter til knappen: JA Tekststørrelse: 26 px Tekstfarve: # edef5d Knapbredde: 0 px Knapikon:> Vis kun ikon

Eksempel på divi.jpg-knap

Gem indstillinger

Det er alt!

eksempel på en blog i aktion divi.gif

Indholdsmuligheder artikelskydermodul

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 findes på denne fane.

option indhold curser divi modul skyder af articles.png

Antal poster (antal indlæg)

Vælg det antal emner, du vil have vist i skyderen.

Medtag kategorier

Vælg de kategorier, du vil inkludere i skyderen.

Bestil af

Her kan du justere rækkefølgen, som artiklerne vises i.

Knappen tekst

Definer den tekst, der vises på knappen "Læs mere". efterlad blank for standard (Læs mere)

Indholdsvisning

Visning af fuldt indhold trunkerer ikke dine indlæg i skyderen. Stykkevisningen viser kun uddragsteksten.

Brug uddrag fra artiklen, hvis det er defineret

Deaktiver denne indstilling, hvis du vil springe over de manuelt definerede uddrag og stadig genererer dem.

Auto-ekstraktlængde

Definer længden af ​​de automatisk genererede ekstrakter. Lad være tom for standard (270)

Vis pile

Denne indstilling aktiverer og deaktiverer navigationspile.

Vis kontroller

Denne indstilling aktiverer og deaktiverer cirkelknapperne i bunden af ​​markøren.

Vis knappen Læs mere

Denne indstilling aktiverer og deaktiverer knappen Læs mere.

Vis meddelelsen Meta

Denne indstilling aktiverer og deaktiverer metasektionen.

Vis fremhævet billede

Denne indstilling tænder og slukker for det valgte billede i skyderen.

Placeringsbillede

Vælg, hvordan du vil vise det valgte billede i lysbillederne

Baggrundsfarve

Brug farvevælgeren til at vælge en baggrundsfarve til dette modul.

Baggrundsbillede

Upload dit ønskede billede, eller skriv URL-adressen til det billede, du vil bruge som baggrund for skyderen.

Baggrundsbilledets placering

Vælg CSS-placering af baggrundsbilledet for hvert dias.

Baggrundsbillede størrelse

Vælg den CSS-baggrundsstørrelse, der bruges til hvert dias.

Administrator Etiket

Dette vil ændre moduletiketten i konstruktøren for nem identifikation. Når du bruger WireFrame-visningen i Visual Builder, vises disse etiketter i modulblokken i Divi Builder-grænsefladen.

Designelementer til skyderenmodulet

Under fanen Design finder du alle indstillingerne for modulstyling, såsom skrifttyper, farver, størrelse og afstand. Dette er den fane, du vil bruge til at ændre udseendet på dit modul. Hvert Divi-modul har en lang liste over designindstillinger, som du kan bruge til at ændre alt.

design option divi articles.png

Fjern indre skygge

Dette fjerner som standard CSS-indre skygge, der er anvendt på alle dias.

Brug baggrundsoverlayet

Når det er aktiveret, tilføjes en brugerdefineret overlayfarve over dit baggrundsbillede og bag dit skyderindhold.

Baggrundsoverlejringsfarve

Brug farvevælgeren til at vælge en farve til baggrunden.

Brug tekstoverlay

Når denne indstilling er aktiveret, tilføjes en baggrundsfarve bag markørteksten for at gøre den mere læsbar på baggrundsbilleder.

Tekst overlejring Border Radius

Grænsens radius påvirker runden i hjørnerne af tekstoverlejringsområdet. Hjørnerne har som standard en let afrundet kant på 3 pixels. Du kan reducere denne værdi til 0 for at oprette en rektangulær boks eller øge værdien for at gøre hjørnerne endnu mere afrundede.

Divi overlay-modul

Brug Parallax-effekten

Aktivering af denne mulighed giver dine baggrundsbilleder en fast position, mens du ruller.

Parallax-metode

Her kan du indstille den metode, der bruges til parallakseffekten - CSS eller True Parallax.

Brugerdefineret farvepile

Når du holder markøren over et skydermodul, vises pile, der giver den besøgende mulighed for at navigere gennem hvert dias. Disse pile arver som standard farven på diasens hovedtekst. Du kan dog definere en brugerdefineret farve til disse pile ved hjælp af denne indstilling.

Dot Nav tilpasset farve

I hver markør vises punktnavigationselementer under markørindholdet. Disse elementer giver brugeren mulighed for at navigere markøren. Du kan definere en brugerdefineret farve, der skal bruges til disse elementer ved hjælp af farvevælgeren i denne indstilling.

Tekstfarve

Her kan du vælge, om din tekst er lys eller mørk. Hvis du har et dias med en mørk baggrund, skal du vælge lys tekst. hvis du
har en klar baggrund, brug mørk tekst.

Sektion meta modul skyderen diviOverskrift font

Du kan ændre skrifttypen på din overskriftstekst ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper, der drives 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 fed, kursiv, hovedstad og understregningsmuligheder.

Overskrift skriftstørrelse

Her kan du justere størrelsen på din overskriftstekst. Du kan trække områdeskyderen for at øge eller formindske størrelsen på din tekst eller 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ørrelsesværdi for at ændre enhedstypen.

Sidehovedtekstfarve

Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre farven på din overskriftstekst, 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 områdeskyderen 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ørrelsesværdi 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 mellemrummet mellem hver række, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstandsstørrelse i indtastningsfelt 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ørrelsesværdi 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, der drives 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 fed, kursiv, hovedstad og understregningsmuligheder.

Krops skrifttypestørrelse

Her kan du justere din kropstekststørrelse. Du kan trække områdeskyderen for at øge eller formindske størrelsen på din tekst eller 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ørrelsesværdi for at ændre enhedstypen.

Krops tekstfarve

Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre farven på din tekst, 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 tekst, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand 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ørrelsesværdi for at ændre enhedstypen.

Højde på kropslinjen

Linjehøjde påvirker mellemrummet mellem hver tekstlinje i din krop Hvis du vil øge afstanden mellem hver linje, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand i indtastningsfeltet placeret 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ørrelsesværdi for at ændre enhedstypen.

Metapoliti

Du kan ændre skrifttypen på din metatekst ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper, der drives 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 fed, kursiv, hovedstad og understregningsmuligheder.

Meta Font Size

Her kan du justere størrelsen på din metatekst. Du kan trække områdeskyderen for at øge eller formindske størrelsen på din tekst eller 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ørrelsesværdi for at ændre enhedstypen.

Metatekstfarve

Som standard vises alle tekstfarver i Divi i 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 mulighed.

Meta Letter afstand

Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din metatekst, skal du bruge områdeskyderen 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ørrelsesværdi for at ændre enhedstypen.

Meta Line Højde

Linjehøjde påvirker mellemrummet mellem hver linje i din metatekst. Hvis du vil øge afstanden mellem hver linje, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstandsstørrelse i indtastningsfeltet placeret 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ørrelsesværdi for at ændre enhedstypen.

Øvre polstring

Denne parameter styrer det interne rum mellem toppen af ​​modulet og tekstindholdet i modulet. Hvis du vil øge eller formindske dette mellemrum, skal du indtaste den ønskede værdi her. For eksempel for at reducere markørens plads og samlede størrelse kan du indtaste en værdi på 100 pixel. Du kan også indtaste en procentværdi, for eksempel 10%, for at gøre højden mere dynamisk.

Bund polstring

Denne parameter styrer det interne rum mellem bunden af ​​modulet og tekstindholdet i modulet. Hvis du vil øge eller formindske dette mellemrum, skal du indtaste den ønskede værdi her. For eksempel for at reducere markørens plads og samlede størrelse kan du indtaste en værdi på 100 pixel. Du kan også indtaste en procentværdi, for eksempel 10%, for at gøre højden mere dynamisk.

Brug brugerdefinerede knapperBrug tilpassede stilarter til knappen

Aktivering af denne mulighed afslører forskellige indstillinger for tilpasning af knapper, som du kan bruge til at ændre udseendet på dit moduls knap.

Knappen tekststørrelse

Denne indstilling kan bruges til at øge eller formindske størrelsen på teksten i knappen. Knappen tilpasser sig, når tekststørrelsen øges og formindskes.

Knappen tekst farve

Som standard anvender knapperne accentfarven på dit tema som defineret i Theme Customizer. Denne mulighed giver dig mulighed for at tildele en brugerdefineret tekstfarve til knappen i dette modul. Vælg din brugerdefinerede farve ved hjælp af farvevælgeren for at ændre knapfarven.

Button baggrundsfarve

Som standard har knapperne en gennemsigtig baggrundsfarve. Dette kan ændres ved at vælge den ønskede baggrundsfarve fra farvevælgeren.

Knap kantbredde

Alle Divi-knapper har en 2 pixers kant som standard. Denne kant kan øges eller formindskes ved hjælp af denne indstilling. Kanter kan fjernes ved at indtaste en værdi på 0.

Knappen kantfarve

Som standard vedtager knapgrænser dit temas accentfarve som defineret i Theme Customizer. Denne mulighed giver dig mulighed for at tildele en brugerdefineret kantfarve til knappen på dette modul. Vælg din brugerdefinerede farve ved hjælp af farvevælgeren for at ændre farven på knapgrænsen.

Knappen grænsen radius

Grænsens radius påvirker runden af ​​hjørnerne på dine knapper. Som standard har knapperne i Divi en lille kantradius, der afrunder hjørnerne med 3 pixels. Du kan reducere denne værdi til 0 for at oprette en firkantet knap eller øge den markant for at oprette knapper med cirkulære kanter.

Spacing af bogstaverne på knappen

Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din knaptekst, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand 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ørrelsesværdi for at ændre enhedstypen.

Politi knap

Du kan ændre skrifttypen på din knaptekst ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper, der drives 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 fed, kursiv, hovedstad og understregningsmuligheder.

Tilføj et knapikon

Deaktiveret, denne indstilling fjerner ikoner fra din knap. Som standard viser alle Divi-knapper et pilikon på svævningen.

Knapikon

Hvis ikoner er aktiveret, kan du bruge denne indstilling til at vælge hvilket ikon der skal bruges i din knap. Divi har forskellige ikoner at vælge imellem.

Farveikoneknap

Hvis du justerer denne parameter, ændres farven på ikonet, der vises på din knap. Som standard er ikonfarven den samme som din knaptekstfarve, men denne indstilling giver dig mulighed for at justere farven uafhængigt.

Ikonplaceringsknap

Du kan vælge at vise ikonet for din knap til venstre eller højre for din knap.

Vis kun ikon, når du holder markøren over knappen

Som standard vises knapikoner kun, når du svæver. Hvis du vil have, at ikonet altid skal vises, skal du slå denne indstilling fra.

Button Hover Text Color

Når knappen holdes over en besøgendes mus, bruges denne farve. Farven skifter fra basisfarven defineret i de tidligere indstillinger.

Hover knap baggrundsfarve

Når knappen holdes over en besøgendes mus, bruges denne farve. Farven skifter fra basisfarven defineret i de tidligere indstillinger.

Farvebøjle Border Button

Når knappen holdes over en besøgendes mus, bruges denne farve. Farven skifter fra basisfarven defineret i de tidligere indstillinger.

Hover Border Radius Button

Når knappen holdes over en besøgendes mus, bruges denne værdi. Værdien skifter fra basisværdien defineret i de tidligere indstillinger.

Pegefunktionsafstandsknap

Når knappen holdes over en besøgendes mus, bruges denne værdi. Værdien skifter fra basisværdien defineret i de tidligere indstillinger.

Avancerede indstillinger for Post Slider

På den avancerede fane finder du muligheder, som mere erfarne webdesignere måske finder 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.

markørmodul

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 oprette brugerdefineret CSS-styling. Du kan tilføje flere klasser adskilt af et mellemrum. Disse klasser kan bruges i dit Divi-underordnede tema eller i det brugerdefinerede CSS-stilark, som du føjer til din side eller til dit websted ved hjælp af Divi-temaindstillingerne eller Divi Builder-sideindstillingerne.

Tilpasset CSS

Brugerdefineret CSS kan også anvendes på modulet og ethvert af modulets interner. I sektionen Custom CSS finder du et tekstfelt, hvor du kan tilføje tilpassede CSS-stilark direkte til hvert element. CSS-poster i disse indstillinger er allerede pakket i typografikoder. Så indtast bare CSS-reglerne adskilt af semikolon.

Divi artikel skyder modulAutomatisk animation

Hvis du vil have markøren til at glide automatisk, uden at den besøgende skal klikke på den næste knap, skal du aktivere denne indstilling og derefter justere rotationshastigheden nedenfor, hvis du ønsker det.

Automatisk animationshastighed (i ms)

Her kan du angive, hvor hurtigt markøren falmer mellem hvert dias, hvis indstillingen 'Auto-animer' er aktiveret ovenfor. Jo højere tallet er, jo længere er pausen mellem hver rotation.

Fortsæt Auto dias på Hover

Hvis du tænder dette, tillader automatisk dias at fortsætte på musens svinger.

Skjul indhold på mobilen

Efterhånden som skærmstørrelsen bliver mindre på mobile enheder, bliver fast ejendom på skærmen mere værdifuld. Nogle gange er det en god ide at slå nogle mindre vigtige markørelementer fra for at reducere markørstørrelsen og gøre den mere læsbar. Aktivering af denne indstilling skjuler markørtekstindholdet på mobilen.

Skjul CTA On Mobile

Da skærmstørrelsen bliver mindre på mobile enheder, bliver ejendom på skærmen mere værdifuld. Nogle gange er det en god ide at slå nogle mindre vigtige markørelementer fra for at reducere markørstørrelsen og gøre den mere læsbar. Aktivering af denne indstilling skjuler markørkald til handlingsknapper på mobilen.

Se billede / video på mobil

Efterhånden som skærmstørrelsen bliver mindre på mobile enheder, bliver fast ejendom på skærmen mere værdifuld. Nogle gange er det en god ide at slå nogle mindre vigtige markørelementer fra for at reducere markørstørrelsen og gøre den mere læsbar. Aktivering af denne indstilling viser diasbilleder og videoer på mobilenheder (de er som standard deaktiveret).

deaktivere

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.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flad” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI TEMA [/vcex_button][/vc_column 1 ][vc_column" /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andre Divi tutorials