Med Divi kan du placera skjutreglagen i sektioner med full bredd, vilket gör att dina skjutreglage spänner över hela webbläsarens bredd. Divi-skjutreglage stöder parallaxbakgrunder, såväl som videobakgrunder!

Så här lägger du till en fullbredd Diapo-modul från Divi

Innan du kan lägga till en skjutreglagemodul i full bredd på din sida måste du först hoppa in i Divi Builder. När Divi-tema installerat på din webbplats, kommer du att märka en knapp Använd Divi Builderovanför inläggsredigeraren när du skapar en ny sida. Klicka på den här knappen för att aktivera Divi Builder och få tillgång till alla Divi Builder-moduler. Klicka sedan på knappen Använd Visual Builder för att starta generatorn i visuellt läge. Du kan också klicka på knappen Använd Visual Builder när du bläddrar i din webbplats i förgrunden om du är inloggad på din WordPress-instrumentpanel.

När du väl är i Visual Builder kan du klicka på den grå plusknappen för att lägga till en ny modul på din sida. Nya moduler kan bara läggas till inom rader. Om du börjar en ny sida, kom ihåg att först lägga till en rad på din sida.

Leta reda på fullbreddsreglermodulen i modullistan och klicka på den för att lägga till den på din sida. Listan över mods är sökbar, vilket innebär att du också kan skriva ordet "Slide" och sedan trycka på enter för att automatiskt hitta och lägga till skjutreglermodulen i full bredd! När modulen har lagts till hälsas du av listan över modulalternativ. Dessa alternativ är uppdelade i tre huvudgrupper: Innehåll , Conception et advanced .

Använd fallexempel: Lägga till en helbreddsreglagehjältsektion på din hemsida

En skjutreglage i full bredd är ett utmärkt sätt att visa upp flera uppmaningar över tröskeln på din hemsida. Kombinationen av bilder och innehåll kan verkligen ge ditt avsnitt en professionell känsla som sticker ut.

I det här exemplet lägger jag till en bild i full bredd för att fungera som huvudsektionen på en hemsida.

Med Visual Builder lägger du till ett avsnitt med full bredd högst upp på din webbsida. Sätt sedan in fullbreddsmodulen i ditt nya avsnitt. Klicka på fliken Innehåll i bilden för hela bredden + Lägg till en ny artikel för att skapa din första bild.

Uppdatera följande alternativ i bildinställningarna för din första bild.

Innehållsalternativ

En-tete : [skriv in bildens titel]
Knapptext : [ange knapptext]
Innehåll : [ange textinnehållet i objektglaset]
Knappadress : [ange mål-URL för bildknappen]
Bakgrundsbild : [skriv in bilden som ska fungera som bakgrund för bilden]

Designalternativ

Använd bakgrundsöverlägg : JA
Bakgrundsfärg : rgba (0,0,0,0.2) det här överlägget mörknar bakgrundsbilden något för att göra texten mer läsbar.

Spara bildinställningar

Dubblera nu bilden som du just skapade och uppdatera den nya bilden med nytt innehåll efter behov. Upprepa detta för alla bilder du vill lägga till.

Det är allt. I det här exemplet inkluderar jag bara två bilder, men resultatet är en effektiv helbreddshjälmareglage med flera uppmaningar till handling som engagerar användaren att klicka på knappen för mer information. Eftersom detta är din huvudsakliga uppmaning till din webbplats, föreslår jag att du utför delad testning på din bild i full bredd med Divi Leads och ser vilken som konverterar bäst.

Slide Full Content-alternativ

På fliken innehåll hittar du alla innehållselement i modulen, till exempel text, bilder och ikoner. Allt som styr vad visas i din modul hittas alltid på den här fliken.

pilar

Välj om du vill visa vänster- och högernavigeringspilar eller inte.

kontroller

Välj om du vill visa cirkelknapparna / bildindikatorerna längst ner på markören eller ej.

Administratörsetikett

Detta ändrar moduletiketten i konstruktorn för enkel identifiering. När du använder vyn WireFrame i Visual Builder visas dessa etiketter i modulblocket i Divi Builder-gränssnittet.

Designalternativ för diabildmodul

På fliken Design hittar du alla stilalternativ för modulen, som teckensnitt, färger, storlek och avstånd. Det här är fliken du använder för att ändra utseendet på din modul. Varje Divi-modul har en lång lista med designinställningar som du kan använda för att ändra vad som helst.

Ta bort inre skugga

Som standard visas en intern skugga i markören. Om du vill stänga av denna skugga kan du göra det med den här inställningen.

Effekt av parallax

Om du aktiverar det här alternativet får dina bakgrundsbilder en fast position när du rullar. Tänk på att när den här inställningen är på kommer dina bilder att skala dina bilder till webbläsarens höjd.

Rubrik teckensnitt

Du kan ändra typsnittet i rubriktexten genom att välja önskat typsnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi teckensnittet Open Sans för all text på din sida. Du kan också anpassa stilen på din text med fetstil, kursiv, versaler och understrukna alternativ.

Rubrikstorlek

Här kan du justera storleken på rubriktexten. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller direkt ange värdet för önskad textstorlek i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Rubriktextfärg

Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra färgen på rubriktexten väljer du önskad färg från färgväljaren med det här alternativet.

Rubrikbokstavsavstånd

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i rubriktexten, använd avståndsreglaget för att justera utrymmet eller ange önskad avståndsstorlek i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storlek för att ändra enhetstyp.

Rubrikrad Höjd

Radhöjden påverkar utrymmet mellan varje rad i rubriktexten. Om du vill öka utrymmet mellan varje rad använder du skjutreglaget för att justera mellanslag eller anger önskad avståndsstorlek i inmatningsfält till höger om markören. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storlek för att ändra enhetstyp.

Kroppspolis

Du kan ändra ditt kroppsteckensnitt genom att välja önskat typsnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi Open Sans-teckensnittet för all text på din sida. Du kan också anpassa stilen på din text med fetstil, kursiv, versaler och understrukna alternativ.

Kroppstypstorlek

Här kan du justera din kroppsstorlek. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller direkt ange värdet för önskad textstorlek i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra dess enhetstyp.

Kroppstextfärg

Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra färgen på din text väljer du önskad färg från färgväljaren med det här alternativet.

Spacing av kropps bokstäver

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din text, använd skjutreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfältet till höger om skjutreglaget. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra dess enhetstyp.

Höjd på kroppslinjen

Radhöjd påverkar utrymmet mellan varje textrad i din kropp Om du vill öka utrymmet mellan varje rad, använd avståndsreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfältet till höger om markören. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra dess enhetstyp.

Övre stoppning

Den här parametern styr det interna utrymmet mellan modulens överdel och textinnehållet i modulen. Om du vill öka eller minska detta utrymme anger du önskat värde här. Till exempel, för att minska markörens utrymme och totala storlek kan du ange ett värde på 100 pixlar. Du kan också ange ett procentvärde, till exempel 10%, för att göra höjden mer dynamisk.

Botten stoppning

Denna parameter styr det interna utrymmet mellan modulens botten och textinnehållet i modulen. Om du vill öka eller minska detta utrymme anger du önskat värde här. Till exempel, för att minska markörens utrymme och totala storlek kan du ange ett värde på 100 pixlar. Du kan också ange ett procentvärde, till exempel 10%, för att göra höjden mer dynamisk.

Använd anpassade stilar för knappen

Om du aktiverar detta alternativ visas olika inställningar för knappanpassning som du kan använda för att ändra utseendet på modulens knapp.

Knapptextstorlek

Denna inställning kan användas för att öka eller minska storleken på texten i knappen. Knappen anpassar sig när textstorleken ökar och minskar.

Knapptextfärg

Som standard antar knapparna accentfärgen för ditt tema som definierats i Theme Customizer. Med det här alternativet kan du tilldela en anpassad textfärg till knappen i den här modulen. Välj din anpassade färg med hjälp av färgväljaren för att ändra knappfärg.

Knapp bakgrundsfärg

Som standard har knapparna en transparent bakgrundsfärg. Detta kan ändras genom att välja önskad bakgrundsfärg från färgväljaren.

Bredden på knappgränsen

Alla Divi-knappar har en två pixlar kant som standard. Denna gräns kan ökas eller minskas med den här inställningen. Gränser kan tas bort genom att ange värdet 2.

Knapp kantfärg

Som standard antar knappens ramar accentfärgen för ditt tema som definierats i temainpassaren. Med det här alternativet kan du tilldela en anpassad kantfärg till knappen i den här modulen. Välj din anpassade färg med hjälp av färgväljaren för att ändra färgen på knappramen.

Knappen gränsradie

Gränsens radie påverkar rundan på hörnen på dina knappar. Som standard har knapparna i Divi en liten kantradie som avrundar hörnen med 3 pixlar. Du kan minska detta värde till 0 för att skapa en fyrkantig knapp eller öka det avsevärt för att skapa knappar med cirkulära kanter.

Spacing av bokstäverna

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din knapptext använder du skjutreglaget för att justera mellanslag eller anger önskad avståndsstorlek i inmatningsfältet till höger om skjutreglaget. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Knapp typsnitt

Du kan ändra teckensnittet för din knapptext genom att välja önskat teckensnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi Open Sans-teckensnittet för all text på din sida. Du kan också anpassa stilen på din text med fetstil, kursiv, versaler och understrykningsalternativ.

Lägg till en knappikon

Inaktiverad, den här inställningen tar bort ikoner från din knapp. Som standard visar alla Divi-knappar en pilikon på svävaren.

Knappikon

Om ikoner är aktiverade kan du använda den här inställningen för att välja vilken ikon du vill använda i din knapp. Divi har olika ikoner att välja mellan.

Färgikonen knapp

Om du justerar den här inställningen ändras färgen på ikonen som visas på din knapp. Som standard är ikonfärgen densamma som knappens textfärg, men den här inställningen låter dig justera färgen oberoende av varandra.

Ikonplaceringsknapp

Du kan välja att visa ikonen för din knapp till vänster eller höger om din knapp.

Visa endast ikon när du svävar över knappen

Som standard visas knappikonerna bara när du svävar. Om du vill att ikonen alltid ska visas stänger du av den här inställningen.

Höger textfärg på knappen

När knappen hålls över en besökares mus kommer den här färgen att användas. Färgen ändras från basfärgen som definierades i tidigare inställningar.

Höger knapp bakgrundsfärg

När knappen hålls över en besökares mus kommer den här färgen att användas. Färgen ändras från basfärgen som definierades i tidigare inställningar.

Färghake Gränssnittsknapp

När knappen hålls över en besökares mus kommer den här färgen att användas. Färgen ändras från basfärgen som definierades i tidigare inställningar.

Höger Border Radius Button

När knappen hålls över en besökares mus kommer detta värde att användas. Värdet ändras från basvärdet som definierats i tidigare inställningar.

Pekskärmknapp

När knappen hålls över en besökares mus kommer detta värde att användas. Värdet ändras från basvärdet som definierats i tidigare inställningar.

Avancerade alternativ i full bredd bildmodul

På den avancerade fliken hittar du alternativ som mer erfarna webbdesigners kan hitta användbara, till exempel anpassade CSS- och HTML-attribut. Här kan du använda anpassad CSS på något av modulens många element. Du kan också tillämpa anpassade CSS-klasser och ID på modulen, som kan användas för att anpassa modulen i ditt barns temas style.css-fil.

CSS ID

Ange ett valfritt CSS-ID som ska användas för den här modulen. Ett ID kan användas för att skapa en anpassad CSS-stil eller för att länka till vissa delar av din sida.

CSS klass

Ange de valfria CSS-klasserna som ska användas för den här modulen. En CSS-klass kan användas för att skapa anpassad CSS-styling. Du kan lägga till flera klasser, åtskilda av ett mellanslag. Dessa klasser kan användas i ditt Divi-underordnade tema eller i det anpassade CSS-stilarket som du lägger till på din sida eller på din webbplats med hjälp av Divi-temalternativ eller Divi Builder-sidinställningarna.

Anpassad CSS

Anpassad CSS kan också tillämpas på modulen och vilken modul som helst. I avsnittet Anpassad CSS hittar du ett textfält där du kan lägga till anpassade CSS-formatmallar direkt till varje element. CSS-poster i dessa inställningar är redan inslagna i stiltaggar. Så skriv bara in CSS-reglerna åtskilda av semikolon.

Automatisk animering

Om du vill att markören ska glida automatiskt utan att besökaren måste klicka på nästa knapp, aktivera det här alternativet och justera sedan rotationshastigheten nedan om du vill.

Automatisk animationshastighet (i ms)

Här kan du ange hur snabbt markören bleknar mellan varje bild, om alternativet 'Auto-animera' är aktiverat ovan. Ju högre tal, desto längre paus mellan varje rotation.

Fortsätt Auto slide på Hover

Om du aktiverar detta gör det möjligt för automatisk bildskärm att fortsätta på muspekaren.

Dölj innehåll på mobilen

När skärmstorleken blir mindre på mobila enheter blir skärmfastigheter mer värdefulla. Ibland är det en bra idé att stänga av några mindre viktiga markörelement för att minska markörstorleken och göra den mer läsbar. Om du aktiverar den här inställningen döljs markörtextinnehållet på mobilen.

Dölj CTA på mobilen

När skärmstorleken blir mindre på mobila enheter blir skärmfastigheter mer värdefulla. Ibland är det en bra idé att stänga av några mindre viktiga markörelement för att minska markörstorleken och göra den mer läsbar. Om du aktiverar den här inställningen döljs markörknapparna på mobilen.

Visa bild / video på mobil

När skärmstorleken blir mindre på mobila enheter blir skärmfastigheter mer värdefulla. Ibland är det en bra idé att stänga av några mindre viktiga markörelement för att minska markörstorleken och göra den mer läsbar. Om du aktiverar den här inställningen visas bilder och videor på mobilen (de är inaktiverade som standard).

synlighet

Med det här alternativet kan du styra enheterna där din modul visas. Du kan välja att inaktivera din modul på surfplattor, smartphones eller stationära datorer individuellt. Detta är användbart om du vill använda olika mods på olika enheter, eller om du vill förenkla mobildesignen genom att eliminera vissa element från sidan.

Innehållsalternativ för glidmodulelement i full bredd

Titel

Ställ in texten för din markörtitel här.

Knapptext

Om du vill visa en knapp under ditt bildinnehåll anger du knapptexten här. Lämna fältet tomt om du inte vill visa en knapp.

Innehåll

Ange markörens kroppsinnehåll här. Observera att mängden text du anger här kommer att avgöra höjden på dina bilder.

Knappadress

Om du visar en knapp, sätt in en giltig webbadress i det här fältet för att ställa in destinationslänken.

Dra bilden

Om du lägger till en bildbild visas den till vänster om din bildtext ovanför din bildbakgrund. Om du inte anger en bildbild kommer du till vänster med en centrerad, endast textbild. Eftersom höjden på varje bild bestäms av texten, om din bildbild är tillräckligt hög, kommer den att falla under bildens botten och skapa en justerad bild längst ner.

Observera att höjden på en bild med en bild kan bestämmas av en högre bild i reglaget. Se till att din bildbild är tillräckligt stor för att passa om du vill ha en bild längst ner. Av läsbarhetsskäl visas bilderna endast i reglagen för kolumn, kolumn eller 1 kolumnbredd. På samma sätt visas bilder på bilder inte i webbläsarens bredder som är mindre än 768 pixlar. Bildens bredder definieras nedan. Vi rekommenderar att dina bildbilder är minst lika breda.

Videobild

Om du lägger till en bildfil kommer den att visas till vänster om bildtexten ovanför bildens bakgrund. Om du inte anger en bildvideo kommer du till vänster med en centrerad bild som bara är text. Eftersom höjden på varje bild bestäms av texten, om din bildbild är tillräckligt hög, kommer den att falla under bildens botten och skapa en justerad bild längst ner.

Pausa video

Låt videon pausas av andra spelare när de börjar spela

Bakgrundsbild

Om den är inställd kommer den här bilden att användas som bakgrund för denna modul. För att ta bort en bakgrundsbild tar du bara bort webbadressen från inställningsfältet.

Höjden på en bild bestäms av mängden text du lägger till. Om du har flera bilder kommer skjutreglaget att ta höjden på den högsta bilden.

Markörens bredd bestäms av webbläsarens bredd. Baserat på vanliga skärmstorlekar rekommenderar vi att dina bilder är minst 1280 pixlar gånger 768 pixlar.

Bakgrundsbildens position

Som standard visas bakgrundsbilder i mitten av bilden. Du kan använda den här inställningen för att ändra placeringen längst upp, längst ner, vänster, höger eller i något av de fyra hörnen på bilden.

Bakgrundsbildstorlek

Som standard kommer bakgrundsbilderna att förstoras proportionellt så att de fyller hela bilden. Du kan dock använda det här alternativet för att ändra standardbeteendet. "Täckning" är standardbeteendet, som skalar bilden så att den täcker hela bilden. ”Fit” tvingar också bilden att täcka hela området, men den kommer att tvinga bildens höjd och bredd för att matcha markörens höjd och bredd. Detta kan resultera i en förvrängd bild, men det förhindrar att bilden beskärs. "Faktisk storlek" skalar inte bilden och visar den i sin ursprungliga storlek.

Bakgrundsfärg

Om du bara vill använda en heltäckande bakgrund för din bild, använd färgväljaren för att ställa in en bakgrundsfärg.

MP4 bakgrundsvideo

Alla videor ska laddas ner i båda .MP4 .WEBM-format för att säkerställa maximal kompatibilitet i alla webbläsare. Ladda ner .MP4-versionen här. Viktig anmärkning: Videobakgrunder är inaktiverade från mobila enheter. Istället kommer din bkacground-bild att användas. Av denna anledning bör du ställa in både en bakgrundsbild och en bakgrundsvideo för att säkerställa bättre resultat.

WEBM-bakgrundsvideo

Alla videor ska laddas ner i båda .MP4 .WEBM-format för att säkerställa maximal kompatibilitet i alla webbläsare. Ladda ner .WEBM-versionerna här. Viktig anmärkning: Videobakgrunder är inaktiverade från mobila enheter. Istället kommer din bkacground-bild att användas. Av denna anledning bör du ställa in både en bakgrundsbild och en bakgrundsvideo för att säkerställa bättre resultat.

Bakgrundsvideobredd

För att videor ska vara korrekt storlek måste du ange den exakta bredden (i pixlar) för din video här.

Bakgrund för videohöjd

För att videor ska vara korrekt storlek måste du ange den exakta höjden (i pixlar) för din video här.

Alternativ för design av objektglas

Använd bakgrundsöverlägg

När det är aktiverat läggs en anpassad överläggsfärg till ovanför din bakgrundsbild och bakom reglaget.

Bakgrundsöverlagringsfärg

Använd färgväljaren för att välja en färg för bakgrunden.

Använd textöverlagring

När det här alternativet är aktiverat läggs en bakgrundsfärg till bakom markörtexten för att göra den mer läsbar på bakgrundsbilder.

Textöverlagringsfärg

Använd färgväljaren för att välja en färg för textöverlägget.

Textöverlagringsgränsen

Gränsens radie påverkar rundheten i hörnen på textytan. Som standard har hörnen en något rundad kant på 3 pixlar. Du kan minska detta värde till 0 för att skapa en rektangulär ruta eller öka värdet för att göra hörnen ännu mer rundade.

Anpassade färgpilar

När du svävar över en skjutmodul visas pilar som gör att besökaren kan navigera genom varje bild. Som standard ärver dessa pilar färgen på bildens huvudtext. Du kan dock definiera en anpassad färg för dessa pilar med den här inställningen.

Dot Nav Anpassad färg

I varje markör visas punktnavigationsobjekt under markörens innehåll. Dessa element tillåter användaren att navigera i markören. Du kan definiera en anpassad färg som ska användas för dessa element med hjälp av färgväljaren i den här inställningen.

Vertikal justering av bilden

Den här inställningen bestämmer den vertikala justeringen av din bildbild. Din bild kan centreras vertikalt eller justeras längst ner på bilden.

Textfärg

Om bakgrunden på din bild är mörk bör textfärgen ställas in på "Ljus". Omvänt, om bakgrunden på bilden är ljus bör textfärgen ställas in på "Mörk".

Rubrikrubrik

Du kan ändra typsnittet i rubriktexten genom att välja önskat typsnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi teckensnittet Open Sans för all text på din sida. Du kan också anpassa stilen på din text med fetstil, kursiv, versaler och understrukna alternativ.

Rubrikstorlek

Här kan du justera storleken på rubriktexten. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller direkt ange värdet för önskad textstorlek i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Rubriktextfärg

Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra färgen på rubriktexten väljer du önskad färg från färgväljaren med det här alternativet.

Rubrikbokstavsavstånd

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i rubriktexten, använd avståndsreglaget för att justera utrymmet eller ange önskad avståndsstorlek i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storlek för att ändra enhetstyp.

Rubrikrad Höjd

Radhöjden påverkar utrymmet mellan varje rad i rubriktexten. Om du vill öka utrymmet mellan varje rad använder du skjutreglaget för att justera mellanslag eller anger önskad avståndsstorlek i inmatningsfält till höger om markören. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storlek för att ändra enhetstyp.

Kroppstypsnitt

Du kan ändra ditt kroppsteckensnitt genom att välja önskat typsnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi Open Sans-teckensnittet för all text på din sida. Du kan också anpassa stilen på din text med fetstil, kursiv, versaler och understrukna alternativ.

Kroppstypstorlek

Här kan du justera din kroppsstorlek. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller direkt ange värdet för önskad textstorlek i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra dess enhetstyp.

Kroppstextfärg

Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra färgen på din text väljer du önskad färg från färgväljaren med det här alternativet.

Spacing av kropps bokstäver

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din text, använd skjutreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfältet till höger om skjutreglaget. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra dess enhetstyp.

Höjd på kroppslinjen

Radhöjd påverkar utrymmet mellan varje textrad i din kropp Om du vill öka utrymmet mellan varje rad, använd avståndsreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfältet till höger om markören. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra dess enhetstyp.

Använd anpassade stilar för knappen

Om du aktiverar detta alternativ visas olika inställningar för knappanpassning som du kan använda för att ändra utseendet på modulens knapp.

Knapptextstorlek

Denna inställning kan användas för att öka eller minska storleken på texten i knappen. Knappen anpassar sig när textstorleken ökar och minskar.

Knapptextfärg

Som standard antar knapparna accentfärgen för ditt tema som definierats i Theme Customizer. Med det här alternativet kan du tilldela en anpassad textfärg till knappen i den här modulen. Välj din anpassade färg med hjälp av färgväljaren för att ändra knappfärg.

Knapp bakgrundsfärg

Som standard har knapparna en transparent bakgrundsfärg. Detta kan ändras genom att välja önskad bakgrundsfärg från färgväljaren.

Border Width-knappen

Alla Divi-knappar har en två pixlar kant som standard. Denna gräns kan ökas eller minskas med den här inställningen. Gränser kan tas bort genom att ange värdet 2.

Knapp kantfärg

Som standard antar knappens ramar accentfärgen för ditt tema som definierats i temainpassaren. Med det här alternativet kan du tilldela en anpassad kantfärg till knappen i den här modulen. Välj din anpassade färg med hjälp av färgväljaren för att ändra färgen på knappramen.

Knappen gränsradie

Gränsens radie påverkar rundan på hörnen på dina knappar. Som standard har knapparna i Divi en liten kantradie som avrundar hörnen med 3 pixlar. Du kan minska detta värde till 0 för att skapa en fyrkantig knapp eller öka det avsevärt för att skapa knappar med cirkulära kanter.

Spacing av bokstäverna

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din knapptext använder du skjutreglaget för att justera mellanslag eller anger önskad avståndsstorlek i inmatningsfältet till höger om skjutreglaget. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Knapp typsnitt

Du kan ändra teckensnittet för din knapptext genom att välja önskat teckensnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi Open Sans-teckensnittet för all text på din sida. Du kan också anpassa stilen på din text med fetstil, kursiv, versaler och understrykningsalternativ.

Lägg till en knappikon

Inaktiverad, den här inställningen tar bort ikoner från din knapp. Som standard visar alla Divi-knappar en pilikon på svävaren.

Knappikon

Om ikoner är aktiverade kan du använda den här inställningen för att välja vilken ikon du vill använda i din knapp. Divi har olika ikoner att välja mellan.

Färgikonen knapp

Om du justerar den här inställningen ändras färgen på ikonen som visas på din knapp. Som standard är ikonfärgen densamma som knappens textfärg, men den här inställningen låter dig justera färgen oberoende av varandra.

Ikonplaceringsknapp

Du kan välja att visa ikonen för din knapp till vänster eller höger om din knapp.

Visa endast ikon när du svävar över knappen

Som standard visas knappikonerna bara när du svävar. Om du vill att ikonen alltid ska visas stänger du av den här inställningen.

Höger textfärg på knappen

När knappen hålls över en besökares mus kommer den här färgen att användas. Färgen ändras från basfärgen som definierades i tidigare inställningar.

Höger knapp bakgrundsfärg

När knappen hålls över en besökares mus kommer den här färgen att användas. Färgen ändras från basfärgen som definierades i tidigare inställningar.

Färghake Gränssnittsknapp

När knappen hålls över en besökares mus kommer den här färgen att användas. Färgen ändras från basfärgen som definierades i tidigare inställningar.

Höger Border Radius Button

När knappen hålls över en besökares mus kommer detta värde att användas. Värdet ändras från basvärdet som definierats i tidigare inställningar.

Pekskärmknapp

När knappen hålls över en besökares mus kommer detta värde att användas. Värdet ändras från basvärdet som definierats i tidigare inställningar.

Avancerade marköralternativ Fullbredd

Anpassad CSS

Anpassad CSS kan också tillämpas på modulen och vilken modul som helst. I avsnittet Anpassad CSS hittar du ett textfält där du kan lägga till anpassade CSS-formatmallar direkt till varje element. CSS-poster i dessa inställningar är redan inslagna i stiltaggar. Så skriv bara in CSS-reglerna åtskilda av semikolon.

Alternativ bildtext

Alt-texten ger all nödvändig information om bilden inte laddas, visas korrekt eller i någon annan situation där en användare inte kan se bilden. Det gör också att bilden kan läsas och kännas igen av sökmotorer.

[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=”platt” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LADDA 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”]LADDA NED DEN TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andra Divi tutorials

• 5 webbplatser för restaurang användning Divi tema
• Så här lägger du till text på en Divi WooCommerce-produkt
• Så här byter du menyfärg mellan Divi-sidor
• Hur du anpassar rutorna på en blogg med Divi
• Hur man använder roll Divi editor på Wordpress
• Hur man skapar en Divi-skjutreglage på full skärm
• Hur man ändrar menyens färg mellan Divi-sidor
• Funktioner du antagligen inte känner till Divi
• Så här använder du Divi Builder på WordPress
• Så här använder du Divi video-rullningsmodulen
• Så här använder du Divi Builder Flip-modulen
• Hur man lägger till en vittnesmodul om Divi Builder
• Så här använder du Divi-textmodulen
• Hur man skapar en reglage på Divi
• Hur man redigerar en Divi-användarroll
• Så här använder du Divi Social Media-modulen
• Hur man använder butikmodulen på temat WordPress Divi
• Så här använder du Divi sidebar-modulen
• Så här använder du Divi Price Table Module
• Hur man använder titelfodulen i Divi-publikationer
• Hur lägger jag till en videomodul av Divi
• Så här använder du artikelnavigationsmodulen
• Så här använder du Divi-sökmodulen
• Så här använder du Divi-plånboksmodulen
• Hur man använder personmodulen på Divi Builder
• Hur man använder plånboksmodulen med Divi-filter
• Hur man använder skjutreglaget med hela bredden
• Så här använder du Divi Builder Image Module
• Så här använder du Divi Builder med fullbredd navigationsmodul
• Hur man använder modulen för bildgalleri
• Så här använder du Divi Builder Full-Width Card Module
• Så här använder du Divi Full Width Portfolio Module
• Hur du använder Divi-modulen med full bredd
• Så här använder du Divi Counter Module
• Hur man använder artiklarna på Divi Builder
• Så här använder du Divi Email Optin-modulen