"Artikkelskyve" eller Innleggsglidemodulen på WordPress tema Divi lar deg på en fremtredende måte vise artikler etter eget valg på hjemmesiden. På mange blogger brukes denne typen moduler vanligvis for å vise fremhevede artikler. Men du kan gjøre en annen bruk av den og vise artikkelforslag for eksempel.

Slik legger du til artikkelglidermodulen på Divi Builder

Før du kan legge til en artikkelglidermodul på siden din, må du først hoppe til Divi Builder. Når Divi-tema installert på nettstedet ditt, vil du legge merke til en bouton Bruk Divi Builder over utgiveren hver gang du oppretter en ny side. Klikk på denne knappen for å aktivere Divi Builder og få tilgang til alle Divi Builder-modulene. Klikk deretter på knappen Bruk Visual Builder for å starte generatoren i visuell modus. Du kan også klikke på knappen Bruk Visual Builder når du surfer på nettstedet ditt i forgrunnen hvis du er koblet til WordPress-dashbordet.

Divi byggherre

Når du har angitt Visual Builder, kan du klikke på den grå pluss-knappen for å legge til en ny modul på siden din. Nye moduler kan bare legges til innenfor rader. Hvis du starter en ny side, husk å legge til en rad på siden din først.

articles.png cursor

Finn "Post Sliders" -modulen i listen over moduler, og klikk på den for å legge den til siden din. Listen over moduler er søkbar, noe som betyr at du også kan skrive ordet "Post Cursors" og deretter klikke "Enter" for automatisk å finne og legge til Post Cusors-modulen! Når modulen er lagt til, vil du bli møtt av modulalternativlisten. Disse alternativene er delt inn i tre hovedgrupper: Innhold , Conception et avansert .

Eksempel på brukstilfelle: Legg ut glidebrytere (artikler) for å vise de siste

For dette eksemplet legger jeg til en innleggsglidebryter for å vise frem de tre siste innleggene øverst på en bloggside. Hvert lysbilde viser det valgte innleggsbildet som bakgrunnsbilde, posttittel og innleggsmeta, og en Les mer-knapp.

eksempel på blog divi.jpg

Bruk Visual Builder til å legge til en ny standarddel øverst på bloggsiden med full bredde (1 kolonne) rad. Sett deretter inn Post Slider-modulen i den nye linjen.

opprette en ny divi.png-kolonne

Oppdater følgende alternativer under Markørinnstillinger:

Innholdsalternativer

Meldingsnummer: 3

Designalternativer

Topptekst: Roboto (store bokstaver) topptekst Fontstørrelse: 50px Topptekstfarge: # edef5d Topptekst Letteravstand: 1px Kroppsstørrelse: 16 Letter-mellomrom: 1px Body Line Height: 1.4em Meta Font: Open Sans, Kursiv, stor bokstav Meta skriftstørrelse: 18px Meta tekstfarge: #cccccc Meta Line Height: 2em Bruk egendefinerte stiler for knappen: JA Tekststørrelse: 26px Knapp Tekstfarge: # edef5d Knappebredde: 0px Knappikon:> Vis bare ikon

Eksempel på divi.jpg-knappen

Lagre innstillinger

Det er det!

eksempel på en blogg i action divi.gif

Innholdsalternativer artikkel glidemodul

I Innhold-fanen finner du alle innholdselementene i modulen, for eksempel tekst, bilder og ikoner. Alt som styrer hva vises i modulen din, vil du alltid finne i denne fanen.

alternativ innhold curser divi modul glidebryter av articles.png

Antall artikler (antall innlegg)

Velg antall elementer du vil vise i glidebryteren.

Inkluder kategorier

Velg kategoriene du vil inkludere i glidebryteren.

Bestilles av

Her kan du justere rekkefølgen artiklene vises i.

Knapptekst

Definer teksten som skal vises på "Les mer" -knappen. la stå blank for standard (Les mer)

Innholdsvisning

Hvis du viser fullt innhold, blir ikke innleggene dine trukket av i glidebryteren. Kuttvisningen viser bare tekstutdraget.

Bruk utdrag fra artikkel hvis definert

Deaktiver dette alternativet hvis du vil hoppe over de manuelt definerte kodebitene og fremdeles automatisk generere det.

Lengde på automatisk uttrekk

Definer lengden på de automatisk genererte utdragene. La stå tomt for standard (270)

Vis piler

Denne innstillingen vil aktivere og deaktivere navigasjonspilene.

Vis kontroller

Denne innstillingen vil aktivere og deaktivere sirkelknappene nederst på markøren.

Vis Les mer-knappen

Denne innstillingen vil aktivere og deaktivere Les mer-knappen.

Vis meldingen Meta

Denne innstillingen vil aktivere og deaktivere metadelen.

Vis utvalgt bilde

Denne innstillingen slår av og på bildet som er valgt i glidebryteren.

Plasseringsbilde

Velg hvordan du vil vise det valgte bildet i lysbildene

Bakgrunnsfarge

Bruk fargevelgeren til å velge en bakgrunnsfarge for denne modulen.

Bakgrunnsbilde

Last opp ønsket bilde eller skriv inn URL-en til bildet du vil bruke som bakgrunn for glidebryteren.

Posisjonen til bakgrunnsbildet

Velg CSS-posisjonering av bakgrunnsbildet for hvert lysbilde.

Bakgrunnsbildestørrelse

Velg størrelsen på CSS-bakgrunnsbildet som brukes for hvert lysbilde.

Administrator Etikett

Dette vil endre moduletiketten i konstruktøren for enkel identifisering. Når du bruker WireFrame-visningen i Visual Builder, vises disse etikettene i modulblokken i Divi Builder-grensesnittet.

Designelementer for skyvemoduler

I kategorien Design finner du alle stilalternativene for modulen, for eksempel skrifter, farger, størrelse og avstand. Dette er fanen du vil bruke til å endre utseendet til modulen din. Hver Divi-modul har en lang liste over designinnstillinger som du kan bruke til å endre hva som helst.

design alternativ divi articles.png

Fjern indre skygge

Dette vil fjerne CSS-indre skygge som er brukt på alle lysbildene som standard.

Bruk bakgrunnsoverlegg

Når den er aktivert, blir en tilpasset overleggsfarge lagt til over bakgrunnsbildet ditt og bak glidebryterinnholdet ditt.

Bakgrunnsoverleggsfarge

Bruk fargevelgeren til å velge en farge for bakgrunnen.

Bruk tekstoverlegg

Når dette alternativet er aktivert, legges det til en bakgrunnsfarge bak markørteksten for å gjøre den mer lesbar på bakgrunnsbilder.

Tekst Overlay Border Radius

Kantens radius påvirker runden i hjørnene på tekstoverleggsområdet. Som standard har hjørnene en litt avrundet kant på 3 piksler. Du kan redusere denne verdien til 0 for å lage en rektangulær boks eller øke verdien for å gjøre hjørnene enda mer avrundede.

Divi overleggsmodul

Bruk Parallax-effekten

Aktivering av dette alternativet vil gi bakgrunnsbildene dine en fast posisjon mens du blar.

Parallax-metoden

Her kan du angi metoden som brukes for parallakseffekten - CSS eller True Parallax.

Egendefinerte fargepiler

Når du holder markøren over en glidemodul, vises pilene slik at besøkende kan navigere gjennom hvert lysbilde. Disse pilene arver som standard fargen på lysbildets hovedtekst. Du kan imidlertid definere en egendefinert farge for disse pilene ved hjelp av denne innstillingen.

Dot Nav tilpasset farge

I hver markør vises punktnavigasjonselementer under markørinnholdet. Disse elementene lar brukeren navigere markøren. Du kan definere en egendefinert farge som skal brukes for disse elementene ved å bruke fargevelgeren i denne innstillingen.

Tekstfarge

Her kan du velge om teksten din er lys eller mørk. Hvis du har et lysbilde med mørk bakgrunn, velger du lys tekst. Hvis du
ha en klar bakgrunn, bruk mørk tekst.

Seksjon meta modul glidebryter diviOverskrift font

Du kan endre skrifttypen til overskriftsteksten ved å velge ønsket skrift fra rullegardinmenyen. Divi kommer med dusinvis av flotte skrifttyper drevet av Google Fonts. Som standard bruker Divi Open Sans-skrift for all teksten på siden din. Du kan også tilpasse stilen på teksten din med fet, kursiv, stor bokstav og understrekingsalternativer.

Topptekststørrelse

Her kan du justere størrelsen på overskriftsteksten. Du kan dra områdeglidebryteren for å øke eller redusere størrelsen på teksten, eller angi ønsket tekststørrelsesverdi direkte i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Topptekstfarge

Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. Hvis du vil endre fargen på toppteksten, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.

Avstand mellom topptekster

Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke avstanden mellom hver bokstav i overskriftsteksten, bruker du skyvekontrollen for å justere mellomrom eller angir ønsket avstandsstørrelse i inntastingsfeltet til høyre for skyveknappen. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Toppradens høyde

Radhøyde påvirker mellomrommet mellom hver rad i overskriftsteksten. Hvis du vil øke avstanden mellom hver rad, bruker du glidebryteren for å justere mellomrom eller angir ønsket avstandsstørrelse i inntastingsfelt til høyre for markøren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Kropps skrifttype

Du kan endre kroppsfonten din ved å velge ønsket skrift fra rullegardinmenyen. Divi kommer med dusinvis av flotte skrifttyper drevet av Google Fonts. Som standard bruker Divi Open Sans-skrift for all teksten på siden din. Du kan også tilpasse stilen på teksten din med fet, kursiv, stor bokstav og understrekingsalternativer.

Kropp skriftstørrelse

Her kan du justere kroppens tekststørrelse. Du kan dra områdeglidebryteren for å øke eller redusere størrelsen på teksten, eller angi ønsket tekststørrelsesverdi direkte i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Kropps tekstfarge

Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. Hvis du vil endre fargen på teksten, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.

Spacing av kropps bokstaver

Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke avstanden mellom hver bokstav i teksten, bruker du skyvekontrollen for å justere mellomrom eller skriver inn ønsket avstandsstørrelse i inntastingsfeltet til høyre for skyveknappen. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Høyde på kroppslinjen

Linjehøyde påvirker mellomrommet mellom hver tekstlinje i kroppen din. Hvis du vil øke mellomrommet mellom hver linje, kan du bruke skyveknappen for å justere mellomrom eller angi ønsket avstandsstørrelse i inndatafeltet plassert til høyre for markøren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Metapoliti

Du kan endre skrifttypen til metateksten ved å velge ønsket skrift fra rullegardinmenyen. Divi kommer med dusinvis av flotte skrifttyper drevet av Google Fonts. Som standard bruker Divi Open Sans-skrift for all teksten på siden din. Du kan også tilpasse stilen på teksten din med fet, kursiv, stor bokstav og understrekingsalternativer.

Meta skriftstørrelse

Her kan du justere størrelsen på metateksten. Du kan dra rekkevidde glidebryteren for å øke eller redusere størrelsen på teksten eller direkte angi ønsket tekststørrelsesverdi i inndatafeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Metatekstfarge

Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. Hvis du vil endre fargen på metateksten, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.

Metabrevetavstand

Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke mellomrommet mellom hver bokstav i metateksten, bruker du glidebryteren for å justere mellomrommet eller skriver inn ønsket avstandsstørrelse i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Meta Line Høyde

Linjehøyde påvirker mellomrommet mellom hver linje i metateksten. Hvis du vil øke mellomrommet mellom hver linje, bruker du glidebryteren for å justere mellomrom eller angir ønsket avstandsstørrelse i inndatafeltet plassert til høyre for markøren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Øvre polstring

Denne parameteren styrer det interne rommet mellom toppen av modulen og tekstinnholdet i modulen. Hvis du vil øke eller redusere denne plassen, angir du ønsket verdi her. For eksempel, for å redusere plass og total størrelse på markøren, kan du angi en verdi på 100 px. Du kan også angi en prosentverdi, for eksempel 10%, for å gjøre høyden mer dynamisk.

Bunnpolstring

Denne parameteren styrer det indre rommet mellom bunnen av modulen og tekstinnholdet i modulen. Hvis du vil øke eller redusere denne plassen, angir du ønsket verdi her. For eksempel, for å redusere plass og total størrelse på markøren, kan du angi en verdi på 100 px. Du kan også angi en prosentverdi, for eksempel 10%, for å gjøre høyden mer dynamisk.

Bruk egendefinerte knapperBruk egendefinerte stiler for knappen

Aktivering av dette alternativet avslører forskjellige innstillinger for knappetilpasning som du kan bruke til å endre utseendet på modulens knapp.

Knapptekststørrelse

Denne innstillingen kan brukes til å øke eller redusere størrelsen på teksten i knappen. Knappen tilpasser seg når tekststørrelsen øker og avtar.

Knapptekstfarge

Som standard tar knappene aksentfargen på temaet ditt som definert i Theme Customizer. Dette alternativet lar deg tilordne en tilpasset tekstfarge til knappen i denne modulen. Velg din egendefinerte farge ved å bruke fargevelgeren for å endre knappens farge.

Knapp bakgrunnsfarge

Som standard har knappene en gjennomsiktig bakgrunnsfarge. Dette kan endres ved å velge ønsket bakgrunnsfarge fra fargevelgeren.

Knappgrensebredde

Alle Divi-knapper har en 2px-kant som standard. Denne grensen kan økes eller reduseres ved hjelp av denne innstillingen. Kanter kan fjernes ved å angi verdien 0.

Knapp kantfarge

Som standard vedtar knappekanter temaets aksentfarge som definert i Theme Customizer. Dette alternativet lar deg tilordne en egendefinert kantfarge til knappen i denne modulen. Velg din egendefinerte farge ved å bruke fargevelgeren for å endre fargen på knappekanten.

Knappgrenseradius

Grenseradiusen påvirker runden på hjørnene på knappene dine. Som standard har knappene i Divi en liten kantradius som avrunder hjørnene med 3 piksler. Du kan redusere denne verdien til 0 for å lage en firkantet knapp, eller øke den betydelig for å lage knapper med sirkulære kanter.

Spacing av bokstavene på knappen

Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke mellomrommet mellom hver bokstav i knappeteksten, bruker du glidebryteren for å justere mellomrommet eller skriver inn ønsket avstandsstørrelse i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Politiet-knappen

Du kan endre skrifttypen til knappeteksten ved å velge ønsket skrift fra rullegardinmenyen. Divi kommer med dusinvis av flotte skrifttyper drevet av Google Fonts. Som standard bruker Divi Open Sans-skrift for all teksten på siden din. Du kan også tilpasse stilen på teksten din med fet, kursiv, stor bokstav og understrekingsalternativer.

Legg til et knappikon

Deaktivert, denne innstillingen fjerner ikoner fra knappen din. Som standard viser alle Divi-knappene et pilikon på sveveren.

Knappikon

Hvis ikoner er aktivert, kan du bruke denne innstillingen til å velge hvilket ikon du vil bruke i knappen din. Divi har forskjellige ikoner å velge mellom.

Fargeikon-knapp

Justering av denne parameteren vil endre fargen på ikonet som vises på knappen din. Som standard er ikonfargen den samme som knappetekstfargen din, men denne innstillingen lar deg justere fargen uavhengig.

Ikon plasseringsknapp

Du kan velge å vise ikonet til knappen til venstre eller høyre for knappen.

Vis bare ikonet når du holder markøren over knappen

Som standard vises knappikonene bare når du holder markøren. Hvis du vil at ikonet alltid skal vises, slå av denne innstillingen.

Knapphenger Tekstfarge

Når knappen er svevet over en besøkendes mus, vil denne fargen bli brukt. Fargen vil endres fra grunnfargen som ble definert i de forrige innstillingene.

Hover knappen bakgrunnsfargen

Når knappen er svevet over en besøkendes mus, vil denne fargen bli brukt. Fargen vil endres fra grunnfargen som ble definert i de forrige innstillingene.

Fargeknapp Border Button

Når knappen er svevet over en besøkendes mus, vil denne fargen bli brukt. Fargen vil endres fra grunnfargen som ble definert i de forrige innstillingene.

Hover Border Radius Button

Når knappen holdes over musen til en besøkende, vil denne verdien brukes. Verdien vil endres fra basisverdien som ble definert i de forrige innstillingene.

Pekende notatavstandsknapp

Når knappen holdes over musen til en besøkende, vil denne verdien brukes. Verdien vil endres fra basisverdien som ble definert i de forrige innstillingene.

Avanserte alternativer for Post Slider

I den avanserte fanen finner du alternativer som mer erfarne webdesignere kan finne nyttige, for eksempel tilpassede CSS- og HTML-attributter. Her kan du bruke tilpasset CSS på alle modulens mange elementer. Du kan også bruke tilpassede CSS-klasser og IDer til modulen, som kan brukes til å tilpasse modulen i barnets temas style.css-fil.

markørmodul

CSS ID

Skriv inn en valgfri CSS-ID som skal brukes til denne modulen. En ID kan brukes til å lage en tilpasset CSS-stil eller for å koble til bestemte deler av siden din.

CSS klasse

Angi de valgfrie CSS-klassene som skal brukes til denne modulen. En CSS-klasse kan brukes til å lage tilpasset CSS-styling. Du kan legge til flere klasser, atskilt med et mellomrom. Disse klassene kan brukes i Divi-barnetemaet eller i det tilpassede CSS-stilarket du legger til på siden eller nettstedet ditt ved hjelp av Divi-temaalternativene eller innstillingene på Divi Builder-siden.

Tilpasset CSS

Tilpasset CSS kan også brukes på modulen og hvilken som helst av modulens interner. I Custom CSS-delen finner du et tekstfelt der du kan legge til tilpassede CSS-stilark direkte til hvert element. CSS-oppføringer i disse innstillingene er allerede pakket inn i stilkoder. Så bare skriv inn CSS-reglene atskilt med semikolon.

Divi artikkel glidermodulAutomatisk animasjon

Hvis du vil at markøren skal skyve automatisk, uten at den besøkende må klikke på neste knapp, aktiver dette alternativet, og juster deretter rotasjonshastigheten nedenfor hvis du ønsker det.

Automatisk animasjonshastighet (i ms)

Her kan du indikere hvor raskt markøren falmer mellom hvert lysbilde, hvis alternativet 'Auto-animer' er aktivert ovenfor. Jo høyere tall, jo lengre er pausen mellom hver rotasjon.

Fortsett Auto lysbilde på Hover

Slå på dette vil tillate automatisk lysbilde å fortsette på musens svinger.

Skjul innhold på mobilen

Ettersom skjermstørrelsen blir mindre på mobile enheter, blir eiendom på skjermen mer verdifull. Noen ganger er det lurt å slå av noen mindre viktige markørelementer for å redusere markørstørrelsen og gjøre den mer lesbar. Aktivering av denne innstillingen skjuler markørtekstinnholdet på mobilen.

Skjul CTA på mobil

Ettersom skjermstørrelsen blir mindre på mobile enheter, blir eiendom på skjermen mer verdifull. Noen ganger er det lurt å slå av noen mindre viktige markørelementer for å redusere markørstørrelsen og gjøre den mer lesbar. Aktivering av denne innstillingen vil skjule markørknappene på mobilen.

Se bilde / video på mobil

Ettersom skjermstørrelsen blir mindre på mobile enheter, blir eiendom på skjermen mer verdifull. Noen ganger er det lurt å slå av noen mindre viktige markørelementer for å redusere markørstørrelsen og gjøre den mer lesbar. Aktivering av denne innstillingen viser bilder og videoer på mobilen (de er deaktivert som standard).

deaktivere

Dette alternativet lar deg kontrollere enhetene som modulen din vises på. Du kan velge å deaktivere modulen din på nettbrett, smarttelefoner eller stasjonære datamaskiner hver for seg. Dette er nyttig hvis du vil bruke forskjellige mods på forskjellige enheter, eller hvis du vil forenkle mobildesignet ved å eliminere 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=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LAST NED 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”]LAST NED DEN MALER DIVI[/vcex_button][/vc_column][/vc_row]

Andre divisjoner