Web byggerens Slide-modul

Sådan tilføjes, konfigureres og tilpasses web byggerens slide modul.

Tilføj en slider til din hjemmeside for at fremme produktegenskaber

En slider er en fantastisk måde at fremvise dine produkt- eller servicefunktioner på. Kombinationen af billeder og indhold kan virkelig give dine produkter en professionel følelse, der skiller sig ud.

Hvordan tilføjer jeg et slide modul?

Før du kan tilføje et slide modul til din hjemmeside skal du først ind i web byggeren. Når dit Awork biz tema er blevet installeret på din hjemmeside, skal du ind i den visuelle bygger og derfra tager tingene fart.  

Når du har trykket på den visuelle bygger, kan du klikke på den grå plus-knap for at tilføje et nyt modul til din side. Nye moduler kan kun tilføjes inde i rækker. Hvis du starter en ny side, skal du huske at tilføje en række til din side først.

Find det nye modul i modullisten, og klik på det for at tilføje det til din side. Modullisten er søgbar, hvilket betyder at du også kan skrive "slider" og derefter trykke “Enter” for at automatisk finde det. Når modulet er tilføjet, vil du blive mødt med modulets liste over muligheder. Disse muligheder er opdelt i tre hovedgrupper: Indhold, Design og Avanceret.

Slider indholdsmuligheder

Inden for fanen indhold finder du alle modulets indholdselementer, såsom tekst, billeder og ikoner. Alt, der styrer det, der vises i dit modul, findes altid i denne fane.

Pile funktion

Vælg om du vil vise venstre eller højre navigationspile.

Kontrol

Vælg om du vil vise cirkelknapperne / diasindikatorerne nederst på dit slide.

Admin Etiket

Dette vil ændre modulets etiket i web byggeren for nem identifikation.

Slide design muligheder

Inden for designfanen finder du alle modulets stylings indstillinger, såsom skrifttyper, farver, størrelser og mellemrum. Dette er den fane, du vil bruge til at ændre, hvordan dit modul ser ud. Hvert modul har en lang liste over design indstillinger, som du kan bruge til at ændre næsten alt.

Fjern indvendig skygge

Som standard vises en indre skygge inden for slide modulet. Hvis du vil deaktivere denne skygge, kan du gøre det ved at bruge denne indstilling.

Parallelle Effekter

Aktivering af denne indstilling giver dine baggrundsbilleder en fast position, mens du ruller. Husk, at når denne indstilling er aktiveret, skal dine billeder være skaleret til browserens højde.

Header tekst

Du kan ændre skrifttypen i din header tekst ved at vælge den ønskede skrifttype fra rullemenuen. Web byggeren har en del store skrifttyper drevet af Google Fonts. Som standard bruger web byggeren skriften Open Sans til al tekst på din side. Du kan også tilpasse stilen på din tekst ved hjælp af fed, kursiv, all-caps og understrege muligheder.

Headers tekststørrelse

Her kan du justere størrelsen på din header tekst. Du kan trække slide modulet for at rækkevidden øger eller formindsker størrelsen på din tekst, eller du kan indtaste din ønskede tekststørrelses værdi direkte i indtastningsfeltet til højre for slide modulet. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" for din tekststørrelse værdi.

Header tekstfarve

Som standard vises alle tekstfarver i web byggeren som hvid eller mørkegrå. Hvis du vil ændre farven på din header tekst, skal du vælge den ønskede farve fra farvelæseren ved hjælp af denne indstilling.

Header tekstafstand

Bogstavsafstanden påvirker mellemrummet mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din header tekst, skal du bruge “afstand mellem bogstaver” for at justere mellemrummet eller indtaste din ønskede afstand størrelse i inputfeltet til højre for slide modulet. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" for din størrelses værdi for at ændre dens enhedstype.

Hovedlinjens højde

Linjehøjde påvirker mellemrummet mellem hver linje i din header tekst. Hvis du vil øge mellemrummet mellem hver linje, skal du bruge mellemrums funktionen til at justere rummet eller indtaste din ønskede mellemrums størrelse i indtastningsfeltet til højre for slideren. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" af din størrelse værdi for at ændre dens enhedstype.

Tekst skrifttype

Du kan ændre skrifttypen i din “body tekst” ved at vælge den ønskede skrifttype fra rullemenuen. Du kan også tilpasse stilen på din tekst ved hjælp af fed, kursiv, all-caps og understrege muligheder.

Body Size

Her kan du justere størrelsen på din “body tekst”. Du kan trække slideren for at rækkevidden øger eller formindsker størrelsen på din tekst, eller du kan indtaste din ønskede tekststørrelsesværdi direkte i indtastningsfeltet til højre for slide modulet. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" efter din størrelses værdi for at ændre dens enhedstype.

Body Tekstfarve

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

Linjeafstand

Bogstavafstanden påvirker mellemrummet mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din tekst, skal du bruge slideren til at justere rummet eller indtaste din ønskede afstand størrelse i inputfeltet til højre for slide modulet. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" efter din størrelse værdi for at ændre dens enhedstype.

Top Margen

Denne indstilling styrer det indre rum mellem toppen af modulet og tekstindholdet i modulet. Hvis du vil øge eller formindske dette felt, skal du indtaste din ønskede værdi her. For eksempel for at reducere mellemrummet af den samlede størrelse af slide modulet, kan du indtaste en værdi på 100 px. Alternativt kan du indtaste en procentværdi, f.eks. 10%, for at gøre højden mere dynamisk.

Bund Margen

Denne indstilling styrer mellemrummet mellem bunden af modulet og tekstindholdet i modulet. Hvis du vil øge eller formindske dette felt, skal du indtaste din ønskede værdi her. For eksempel for at reducere mellemrummet og den samlede størrelse af skyderen, kan du indtaste en værdi på 100 px. Alternativt kan du indtaste en procentværdi, f.eks. 10%, for at gøre højden mere dynamisk.

Brug tilpassede stilarter til modul knappen

Aktivering af denne indstilling gør at du kan ændre udseendet af modulets knap.

Modul knappens tekststørrelse

Denne indstilling kan bruges til at øge eller formindske tekstens størrelse for knappen. Knappen skaleres, da tekststørrelsen øges og formindskes.

Knappens farve

Som standard antager knapperne din tema accent farve som defineret i Theme Customizer. Denne indstilling 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 knappens farve.

Knappens Baggrundsfarve

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

Knappens kantbredde

Alle awork biz knapper har som standard en 2px-grænse. Denne grænse kan øges eller formindskes ved hjælp af denne indstilling. Grænser kan fjernes ved at indtaste en værdi på 0.

Knappens kantfarve

Som standard antager knapgrænser din tema accentfarve som defineret i Theme Customizer. Denne indstilling giver dig mulighed for at tildele en brugerdefineret grænsefarve til knappen i dette modul. Vælg din brugerdefinerede farve ved hjælp af farvevælgeren for at ændre knappens kantfarve.

Knap skrifttype

Du kan ændre skrifttypen for din knaptekst ved at vælge den ønskede skrifttype fra rullemenuen. Divi kommer med snesevis af store skrifttyper drevet af Google Fonts. Som standard bruger Divi skriften Open Sans til al tekst på din side. Du kan også tilpasse stilen på din tekst ved hjælp af fed, kursiv, all-caps og understrege muligheder.

Knappens Ikon

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

Ikon Farve

Justering af denne indstilling ændrer farven på ikonet. Som standard er ikon farven den samme som din knaps tekstfarve, men denne indstilling giver dig mulighed for at justere farven uafhængigt.

Placering af icon

Du kan vælge at få din knapikonvisning til venstre eller højre på din knap.

Knap Hover tekstfarve

Når knappen trykkes på af en besøgers mus, vil denne farve blive brugt. Farven overgår fra basisfarven, der er defineret i de foregående indstillinger.

Knap Hover Baggrundsfarve

Når knappen trykkes på af en besøgers mus, vil denne farve blive brugt. Farven overgår fra basisfarven, der er defineret i de foregående indstillinger.

Knap Hover kantfarve

Når knappen trykkes på af en besøgers mus, vil denne farve blive brugt. Farven overgår fra basisfarven, der er defineret i de foregående indstillinger.

Knap Hover Letter Spacing

Når knappen trykkes på af en besøgers mus, vil denne værdi blive brugt. Værdien overgår fra basisværdien som blev defineret i de foregående indstillinger.

Modul slidets avanceret muligheder

På den avanceret fane finder du muligheder, som mere erfarne webdesignere kan finde nyttige, som f.eks. Brugerdefinerede CSS- og HTML-attributter. Her kan du anvende tilpasset CSS til et af modulets mange elementer.

CSS ID

Indtast et valgfrit CSS ID, der skal bruges til dette modul. Et ID kan bruges til at oprette brugerdefineret CSS-styling, eller 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.

Brugerdefineret CSS

Brugerdefineret CSS kan også anvendes til modulet og et hvilket som helst af modulets interne elementer. I sektionen Custom CSS finder du et tekstfelt, hvor du kan tilføje brugerdefineret CSS direkte til hvert element. CSS-input til disse indstillinger er allerede pakket ind i stil koder, så du behøver kun at indtaste CSS-regler adskilt af semikolon.

Automatisk animation

Hvis du vil have slide modulet 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 skyderen falder mellem hvert lysbillede, hvis 'Automatisk animation' er aktiveret ovenfor. Jo højere tallet jo længere pause mellem hver rotation.

Fortsæt automatisk Slide på Hover

Hvis du aktiverer dette vil det tillade automatisk slide at fortsætte når du bruger musen.

Skjul indhold på mobil

Da skærmens størrelse bliver mindre på mobile enheder, bliver skærmbilledet mere værdifuld. Nogle gange er det en god idé at deaktivere nogle mindre vigtige slideenheder for at reducere sliderens størrelse og gøre den mere læsbar. Aktivering af denne indstilling skjuler slide modulets tekstindhold på mobilen.

Skjul Call To Action på mobilen

Da skærmens størrelse bliver mindre på mobile enheder, bliver skærmbilledet mere værdifuld. Nogle gange er det en god idé at deaktivere nogle mindre vigtige slide funktioner for at reducere slidet størrelse og gøre den mere læsbar. Aktivering af denne indstilling skjuler slidet, der henviser til “call to action” knap.

Vis billede / video på mobil

Da skærmens størrelse bliver mindre på mobile enheder, bliver skærmbilledet mere værdifuld. Nogle gange er det en god idé at deaktivere nogle mindre vigtige slide funktioner, for at reducere slidets størrelse og samtidig gøre den mere læsbar. Aktivering af denne indstilling viser diasbilleder og videoer på mobilen (de er deaktiveret som standard).

Deaktiver den ovenstående funktion

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

Indholdsmuligheder for individuelle slide moduler

Overskrift

Definer titel teksten til dit slide her.

Knap Tekst

Hvis du vil vise en knap under dit slide indhold, skal du indtaste en knaptekst her. Lad dette være tomt, hvis du ikke vil vise en knap.

Indhold

Indtast indholdet til din slider her. Bemærk, at mængden af tekst, du indtaster her, bestemmer højden på dine dias.

Knap URL

Hvis du viser en knap, skal du indsætte en gyldig webadresse i dette felt for at definere destinations linket.

Slide billede

Hvis du tilføjer et diasbillede, vises det til venstre for dias teksten oven på dias baggrunden. Hvis du ikke angiver et diasbillede, vil du blive efterladt med en tekst kun.

Bemærk af hensyn til læsbarhed vil diasbilleder kun blive vist i slidet, der er i ⅔ kolonne, ¾ kolonne eller 1 kolonnebredde. Diasbilleder vises ikke på browser med en bredde på mindre end 768 pixel. Bredderne af diasbilleder er defineret nedenfor. Vi anbefaler at dine dias billeder lever op til minimums bredden.

Slide video

Hvis du tilføjer en diasvideo, vises den til venstre for din diastekst. Hvis du ikke angiver en diasvideo, vil du kun have et tekstbillede på det dias.

Pause din video

Tillad, at videoen kan blive standset af brugerne, når de begynder at afspille.

Baggrundsbillede

Hvis du har valgt et billede vil dette billede blive brugt som baggrund for det valgte modul. For at fjerne et baggrundsbillede, skal du blot slette webadressen fra indstillings feltet.

Højden på et dias bestemmes af mængden af tekstindhold, du tilføjer. Hvis du har flere dias, vil slide modulet tage højden af dit højeste dias.

Bredden på dit slide modul bestemmes af browserenes bredde. Baseret på standard skærmstørrelser anbefaler vi, at dine billeder er mindst 1280px med 768px.

Baggrundsbillede position

Som standard vises baggrundsbilleder i midten af diaset. Du kan bruge denne indstilling til at ændre placeringen øverst, nederst, venstre, højre eller en af de fire hjørner af diaset.

Baggrunds billedstørrelse

Som standard skal baggrundsbillederne skaleres proportionalt for at sikre, at de fylder hele billedet. Du kan dog bruge denne indstilling til at ændre det. "Cover" er standard indstillingen, som skalerer billedet for at dække hele dias området. "Fit" vil også tvinge billedet til at dække hele området, men det vil tvinge billedets højde og bredde til at matche slidets højde og bredde. Dette kan resultere i et skæv billede, men det forhindrer billedbeskæring. "Faktisk størrelse" vil ikke skalere billedet i det hele taget og vise det ved sin indledende størrelse.

Baggrundsfarve

Hvis du vil bruge en farve til baggrunden af dit dias, skal du bruge farvevalg til at finde en baggrundsfarve.

Baggrundsvideo MP4

Alle videoer skal uploades i begge .MP4 .WEBM formater for at sikre maksimal kompatibilitet i alle browsere. Upload .MP4-versionen her. Vigtig note: Video baggrunde er deaktiveret fra mobile enheder. I stedet vil dit baggrundsbillede blive brugt. Af denne grund bør du finde både et baggrundsbillede og en baggrundsfilm for at sikre de bedste resultater.

Baggrundsvideo WEBM

Alle videoer skal uploades i begge .MP4 .WEBM formater for at sikre maksimal kompatibilitet i alle browsere. Upload .WEBM versionerne her. Vigtig note: Video baggrunden er deaktiveret fra mobile enheder. I stedet vil dit baggrundsbillede blive brugt. Af denne grund bør du finde både et baggrundsbillede og en baggrundsfilm for at sikre de bedste resultater.

Bredde for baggrundsvideo

For at videoer skal kunne tilpasses korrekt, skal du indtaste den nøjagtige bredde (i pixels) af din video.

Højde for video baggrunden

For at videoer skal kunne tilpasses korrekt, skal du indtaste den nøjagtige højde (i pixels) af din video her.

Individuel design muligheder for slide modulet

Brug baggrundsoverlag

Når den er aktiveret, tilføjes en brugerdefineret overlejringsfarve over dit baggrundsbillede og bag dit slide indhold.

Baggrundsoverlejringsfarve

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

Brug tekstoverlag

Når den er aktiveret, tilføjes en baggrundsfarve bag slidet for at gøre den mere læsbar.

Tekstoverlejringsfarve

Brug farvevælgeren til at vælge en farve til tekst overlejringen.

Vælg farven på din pil

Når du svinger musen over en slideenhed, vises pilene, der gør det muligt for den besøgende at trykke på hvert dias. Du kan dog definere en brugerdefineret farve for disse pile ved hjælp af denne indstilling.

Slide modulets vertikale justering

Denne indstilling bestemmer den vertikale justering af dit diasbillede. Dit billede kan enten være vertikalt centreret eller justeret fra bunden af dit dias.

Tekstfarve

Hvis din dias baggrund er mørk, skal tekstfarven indstilles til 'lys'. Omvendt, hvis dias baggrunden er lys, bør tekstfarven indstilles til 'mørk'.

Hoved tekst

Du kan ændre skrifttypen i din header tekst ved at vælge den ønskede skrifttype fra rullemenuen. Divi har forskellige af store skrifttyper drevet af Google Fonts. Som standard bruger Divi skriften Open Sans til al tekst på din side. Du kan også tilpasse stilen på din tekst ved hjælp af fed, kursiv, all-caps og understrege muligheder.

Hoved tekststørrelse

Her kan du justere størrelsen på din header tekst. Du kan trække slidet så rækkevidden øger eller formindsker størrelsen på din tekst, eller du kan indtaste din ønskede tekst størrelses værdi direkte i indtastningsfeltet til højre for slidet. 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.

Hovedtekst farve

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

Hovedtekst afstand

Bogstavsafstanden påvirker mellemrummet mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din header tekst, skal du bruge slidet for at justere rummet eller indtaste din ønskede afstand størrelse i input feltet til højre for slidet. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" efter din størrelse værdi for at ændre dens enhedstype.

Avanceret muligheder for individuelle slides

Brugerdefineret CSS

Brugerdefineret CSS kan også anvendes til modulet og et hvilket som helst af modulets interne elementer. I sektionen Custom CSS finder du et tekstfelt, hvor du kan tilføje brugerdefineret CSS direkte til hvert element. CSS-input til disse indstillinger er allerede pakket ind i stilkoder, så du behøver kun at indtaste CSS-regler adskilt af semikolon.