Juster Højden på Din Divi Slider Nemt

12/11/2022

★★★★★Rating: 3.92 (1424 votes)

Divi er et utroligt alsidigt tema og page builder til WordPress, der giver dig fuld kontrol over designet af din hjemmeside. En af de mest populære moduler er slideren, som mange bruger til at præsentere vigtigt indhold, tilbud eller visuelle historier på en engagerende måde. Men som mange Divi-brugere har oplevet, kan det være en udfordring at få sliderens højde til at passe perfekt til dit design. Enten er den for dominerende og fylder for meget, eller også er den for lille og forsvinder i indholdet.

How do I change the slider height in Divi? — It might be too low or too high. To modify this, just add the following code into the Divi custom CSS field (in your WP admin panel: Divi > Theme Options) or to your child theme’s style.css file: This code will take care of it. Change the “600px” values with your preferred slider height.

Denne artikel vil guide dig igennem de nemme trin til at justere højden på dit Divi slider-modul, så det passer præcist til dine behov og dit æstetiske udtryk. Vi dækker både statiske pixelværdier og responsive viewport-højder, så din slider ser fantastisk ud på alle enheder.

Forstå Problemet: Hvorfor Skal Sliderhøjden Justeres?

Standardindstillingerne for Divi slideren er designet til at fungere for et bredt publikum, men de er sjældent perfekte for alle specifikke designkrav. En for høj slider kan skubbe vigtigt indhold 'under folden', hvilket betyder, at besøgende skal scrolle ned for at se det. Dette kan negativt påvirke brugeroplevelsen og konverteringsraten. Omvendt kan en for lav slider virke ubetydelig og ikke fange øjet, som den burde. Den ideelle sliderhøjde afhænger af dit indhold, dine billeder og den overordnede layoutstrategi for din side.

Den Direkte Løsning: CSS-Kode til Højdekontrol

Den mest effektive og direkte måde at kontrollere Divi sliderens højde på er ved hjælp af CSS (Cascading Style Sheets). Du skal tilføje en specifik kode enten i Divis temaoptioner, i dit child theme’s style.css-fil eller direkte på den specifikke side eller indlæg, hvor slideren er placeret.

CSS-Koden Du Skal Bruge:

.et_pb_slider, .et_pb_slider .et_pb_container {
 height: 600px !important;
}
.et_pb_slider, .et_pb_slider .et_pb_slide {
 max-height: 600px;
}

Denne kode er kernen i løsningen. Lad os bryde den ned:

.et_pb_slider: Dette er den primære CSS-klasse for hele slider-modulet.
.et_pb_slider .et_pb_container: Dette refererer til den indre container, der holder sliderens indhold. Ved at målrette begge sikrer vi, at højden anvendes konsekvent.
height: 600px !important;: Denne linje sætter den faste højde til 600 pixels. !important-deklarationen er afgørende her, da den sikrer, at din brugerdefinerede CSS overskriver Divis standardindstillinger. Uden den kan Divis indbyggede stilarter potentielt ignorere din ændring.
max-height: 600px;: Denne linje fungerer som en øvre grænse for sliderens højde. Selvom height forsøger at sætte en fast højde, kan max-height give en ekstra sikkerhed og i visse tilfælde hjælpe med responsivitet, hvis der er andre konflikter.

Du kan ændre værdien 600px til den højde, du ønsker. Eksperimenter med forskellige værdier for at finde den perfekte pasform til dit design.

Hvor Skal Koden Tilføjes?

Der er et par steder, hvor du kan indsætte denne CSS-kode, afhængigt af om du ønsker, at ændringen skal gælde globalt for alle sliders, eller kun for en specifik slider:

Divi Temaoptioner (Global Anvendelse)
Dette er det mest almindelige sted at tilføje global brugerdefineret CSS. Gå til dit WordPress-adminpanel: Divi > Temaoptioner. Rul ned til bunden, hvor du finder feltet 'Brugerdefineret CSS'. Indsæt koden her. Denne metode er ideel, hvis du ønsker, at alle sliders på din hjemmeside skal have den samme højde.
Child Theme’s style.css-fil (Bedste Praksis)
For mere avancerede brugere og dem, der ønsker at sikre, at deres tilpasninger ikke går tabt ved Divi-temaopdateringer, er det bedste sted at placere CSS-koden i dit child theme’s style.css-fil. Dette kræver, at du har et child theme installeret og aktiveret. Du kan redigere denne fil via FTP eller via WordPress-adminpanelet under Udseende > Tema Editor (vælg dit child theme først). Dette er den anbefalede metode for langtidsholdbare tilpasninger.
Side-/Indlægs-specifik CSS (Lokal Anvendelse)
Hvis du kun ønsker at ændre højden på en slider på en bestemt side eller et bestemt indlæg, kan du tilføje koden direkte i Divi-indstillingerne for den pågældende side/indlæg. Når du redigerer en side eller et indlæg med Divi Builder, skal du klikke på tandhjulsikonet for sideindstillinger (øverst på siden), gå til fanen 'Avanceret' og derefter 'Brugerdefineret CSS'. Indsæt koden i feltet for 'Hovedelement'. Dette er perfekt til unikke sliderlayouts.

Gør Din Slider Responsiv med vh-Enheden

Mens en fast pixelværdi (f.eks. 600px) fungerer godt for en statisk højde, er det ikke altid den bedste løsning for responsivt design. På mindre skærme kan en slider på 600px fylde hele skærmen, hvilket er uhensigtsmæssigt. Her kommer viewport height (vh) ind i billedet.

En vh-værdi repræsenterer en procentdel af viewportens højde. Hvis du sætter height: 20vh;, vil slideren altid fylde 20% af brugerens skærmhøjde, uanset om de ser den på en stor desktop-skærm eller en lille mobiltelefon. Dette sikrer en mere flydende og responsiv oplevelse.

Eksempel med `vh`:

.et_pb_slider, .et_pb_slider .et_pb_container {
 height: 40vh !important;
}
.et_pb_slider, .et_pb_slider .et_pb_slide {
 max-height: 40vh;
}

I dette eksempel vil slideren altid være 40% af skærmens højde. Du kan justere 40vh til en hvilken som helst procentdel, der passer bedst til dit design. En god praksis er at teste forskellige vh-værdier på forskellige enheder for at sikre den optimale visuelle balance.

Forbedret Responsivitet med Medieforespørgsler

For den mest avancerede kontrol over responsivitet kan du kombinere px og vh med medieforespørgsler. Dette giver dig mulighed for at definere forskellige sliderhøjder for specifikke skærmstørrelser (breakpoints).

Eksempel på medieforespørgsler:

.et_pb_slider, .et_pb_slider .et_pb_container {
 height: 600px !important; /* Standardhøjde for store skærme */
}
.et_pb_slider, .et_pb_slider .et_pb_slide {
 max-height: 600px;
}

@media only screen and (max-width: 980px) { /* Tablette */
 .et_pb_slider, .et_pb_slider .et_pb_container {
 height: 50vh !important;
 }
 .et_pb_slider, .et_pb_slider .et_pb_slide {
 max-height: 50vh;
 }
}

@media only screen and (max-width: 767px) { /* Mobiltelefoner */
 .et_pb_slider, .et_pb_slider .et_pb_container {
 height: 60vh !important;
 }
 .et_pb_slider, .et_pb_slider .et_pb_slide {
 max-height: 60vh;
 }
}

Dette eksempel sætter en fast højde på 600px for desktop, men skifter til 50vh for tablets og 60vh for mobiltelefoner. Dette giver en meget mere skræddersyet og optimal brugeroplevelse på tværs af enheder.

Alternativer og Supplerende Justeringer: Padding

Udover direkte at justere højden med CSS, kan du også lege med top- og bund-paddingværdierne for dine sliderbilleder eller selve slider-modulet. Divi Builder giver dig mulighed for at justere padding direkte i modulindstillingerne. Selvom dette ikke direkte kontrollerer den overordnede containerhøjde på samme måde som CSS, kan det give en fornemmelse af mere eller mindre plads og dermed påvirke den opfattede højde af slideren.

Hvis du bruger padding, skal du være opmærksom på, hvordan det interagerer med din CSS-kode. I nogle tilfælde kan padding skubbe indhold ud af syne, hvis du har sat en fast max-height, så test altid grundigt.

Fejlfinding og Tips

Selvom processen er relativt ligetil, kan der opstå problemer. Her er nogle tips til fejlfinding:

Ryd Cache: Efter at have tilføjet CSS-kode, skal du altid rydde din hjemmesides cache (både browsercache og eventuel server- eller plugin-cache) for at sikre, at ændringerne træder i kraft.
Tjek for Tastefejl: En enkelt forkert stavelse eller manglende semikolon kan forhindre din CSS i at fungere. Dobbeltcheck koden omhyggeligt.
CSS-Specificitet: Hvis din kode ikke virker, kan det skyldes, at en mere specifik CSS-regel overskriver din. Brug browserens udviklerværktøjer (højreklik > 'Inspicer element') til at se, hvilke CSS-regler der anvendes på slideren. Dette kan hjælpe dig med at identificere konflikter og justere din kode for at være mere specifik, hvis nødvendigt (f.eks. ved at tilføje et overordnet ID til slideren).
Test på Flere Enheder: Sørg for at teste din slider på forskellige skærmstørrelser og enheder for at sikre, at den ser godt ud overalt.
Billedstørrelse og Optimering: Store, uoptimerede billeder kan påvirke sliderens indlæsningstid og ydeevne. Sørg for, at dine sliderbilleder er optimerede til web (komprimeret og i passende dimensioner) for at sikre en hurtig og jævn brugeroplevelse. Selvom det ikke direkte påvirker højden, påvirker det den samlede oplevelse.

Ofte Stillede Spørgsmål om Divi Slider Højde

Spørgsmål	Svar
Hvad er den optimale højde for en Divi slider?	Der er ingen 'one-size-fits-all' optimal højde. Den bedste højde afhænger af dit design, indhold og de billeder, du bruger. En god tommelfingerregel er at finde en balance, så slideren er fremtrædende, men stadig tillader vigtigt indhold at være synligt 'above the fold' (uden at skulle scrolle). Eksperimenter med både faste pixelværdier og `vh`-enheder for at finde det rette udtryk.
Hvorfor virker min CSS-kode ikke?	Tjek for tastefejl, ryd din hjemmesides cache, og sørg for, at du har tilføjet koden det rigtige sted. CSS-specificitet kan også være et problem; brug browserens inspektørværktøj til at se, hvilke stilarter der anvendes, og om din kode bliver overskrevet. Sørg for at bruge `!important`, hvis det er nødvendigt for at overskrive Divis standardindstillinger.
Hvad er forskellen på `px` og `vh` for sliderhøjde?	`px` (pixels) sætter en fast højde, der forbliver den samme uanset skærmstørrelsen. `vh` (viewport height) sætter højden som en procentdel af brugerens skærmhøjde, hvilket gør slideren automatisk responsiv og tilpasser sig forskellige enheder. `vh` er ofte bedre for et moderne, responsivt design.
Kan jeg have forskellige højder på forskellige sliders?	Ja. Hvis du ønsker forskellige højder, skal du tilføje den brugerdefinerede CSS til den specifikke side/indlæg, hvor slideren er placeret, i stedet for i de globale temaoptioner. Du kan også tildele en unik CSS-klasse eller et ID til hver slider og derefter målrette dem individuelt med din CSS.
Påvirker sliderhøjden mobiloptimering?	Absolut. En for høj slider på mobil kan fylde hele skærmen, hvilket er en dårlig brugeroplevelse. Brug `vh`-enheder og/eller medieforespørgsler til at sikre, at din slider har en passende højde på mobile enheder, så brugerne nemt kan se mere af dit indhold.

Konklusion

At justere højden på din Divi slider er en simpel, men effektiv tilpasning, der kan have stor betydning for din hjemmesides visuelle udtryk og brugeroplevelse. Ved at anvende den korrekte CSS-kode og vælge mellem faste pixelværdier eller responsive viewport-højder, får du fuld kontrol over sliderens dimensioner. Husk altid at teste dine ændringer på forskellige enheder og rydde din cache for at se effekten med det samme.

Med disse tips er du godt rustet til at finjustere dine Divi sliders til perfektion, hvilket bidrager til en mere professionel og brugervenlig hjemmeside.

Hvis du vil læse andre artikler, der ligner Juster Højden på Din Divi Slider Nemt, kan du besøge kategorien Teknologi.