Tilpas kolonner i Divi til tablet og mobil

I den stadigt udviklende verden af webdesign er det essentielt at sikre, at din hjemmeside ser fantastisk ud på alle enheder. Divi, et af de mest populære WordPress-temaer, tilbyder en utrolig fleksibilitet, men nogle gange kræver standardindstillingerne lidt finjustering for at opnå det perfekte responsive layout. En af de mest almindelige udfordringer er at styre antallet af kolonner på tablets og smartphones. Heldigvis giver Divi Toolbox dig mulighed for at tage kontrol og tilpasse kolonneantallet præcist efter dine behov.

Denne guide vil føre dig igennem processen med at ændre antallet af kolonner for både tablets og telefoner ved hjælp af Divi Toolbox. Vi vil dykke ned i de specifikke CSS-klasser, du kan anvende, og hvordan du kan definere dine egne skærmbrudspunkter for at opnå et fuldt tilpasset responsivt design.

Forståelse af Kolonnestruktur i Divi

Divi opererer med et grid-system, der automatisk tilpasser sig forskellige skærmstørrelser. Som standard vil Divi ofte reducere antallet af synlige kolonner, når skærmstørrelsen bliver mindre. Dette er en god grundlæggende responsiv tilgang, men for at opnå et unikt og professionelt udseende, kan det være nødvendigt at specificere et andet antal kolonner. Dette er især relevant for portfolio-gallerier, blog-oversigter eller andre sektioner, hvor du ønsker at vise mere indhold på mindre skærme eller omvendt.

Divi Toolbox: Din Nøgle til Tilpassede Kolonner

Divi Toolbox er et kraftfuldt plugin, der udvider Divis funktionalitet betydeligt. Blandt dets mange funktioner finder du muligheden for at anvende brugerdefinerede CSS-klasser for at ændre kolonneantallet på forskellige enheder. Dette giver dig en hidtil uset kontrol over dit layouts responsivitet.

Sådan Ændrer du Kolonneantallet for Tablets og Telefoner

Trinene til at implementere disse ændringer er relativt ligetil. Det kræver, at du tilføjer specifikke CSS-klasser til dine rækkeindstillinger (Row Settings) i Divi Builder.

Tilføjelse af CSS-klasser til Rækker

Naviger til indstillingerne for den række, du ønsker at tilpasse. Under fanen 'Avanceret' (Advanced) finder du et felt kaldet 'CSS-klasser'. Her kan du indtaste de relevante klasser fra listen nedenfor.

Tilgængelige Klasser for Tabletter

Disse klasser påvirker layoutet på tablets med en skærmbredde mellem 479px og 980px:

• tablet-two-cols: Viser to kolonner på tablets.
• tablet-three-cols: Viser tre kolonner på tablets.
• tablet-four-cols: Viser fire kolonner på tablets.
• tablet-five-cols: Viser fem kolonner på tablets.
• tablet-six-cols: Viser seks kolonner på tablets.

Tilgængelige Klasser for Telefoner

Disse klasser påvirker layoutet på telefoner med en skærmbredde under 479px:

• phone-two-cols: Viser to kolonner på telefoner.
• phone-three-cols: Viser tre kolonner på telefoner.
• phone-four-cols: Viser fire kolonner på telefoner.

Du kan kombinere disse klasser. For eksempel, hvis du vil have fire kolonner på tablets og tre kolonner på telefoner, ville du tilføje både tablet-four-cols og phone-three-cols til din række.

Definition af Brugerdefinerede Skærmbrudspunkter

Divi Toolbox giver dig også mulighed for at definere dine egne skærmbrudspunkter. Dette betyder, at du kan bestemme præcis, hvornår dit layout skal skifte fra desktop-visning til tablet-visning og fra tablet-visning til mobil-visning.

Under 'Divi Toolbox ➜ Mobile ➜ Change Mobile Column Count ➜ Custom Columns Mobile Breakpoints' kan du indstille disse værdier. Dette er særligt nyttigt, hvis du har enheder, der falder mellem Divis standardbrudspunkter, eller hvis du har en specifik visuel strategi, der kræver anderledes overgange.

Brug af Blandede Kolonnebredder

For endnu større fleksibilitet kan du bruge yderligere CSS-klasser til at definere forskellige kolonnebredder inden for den samme række. Dette er perfekt, når du ønsker at skabe asymmetriske layouts, hvor nogle kolonner er bredere end andre.

Klasser for Blandede Bredder på Tablets

• tablet-2cols-1-2: To kolonner, hvor den første er 1/3 bred og den anden er 2/3 bred.
• tablet-2cols-2-1: To kolonner, hvor den første er 2/3 bred og den anden er 1/3 bred.
• tablet-2cols-1-3: To kolonner, hvor den første er 1/4 bred og den anden er 3/4 bred.
• tablet-2cols-3-1: To kolonner, hvor den første er 3/4 bred og den anden er 1/4 bred.

Klasser for Blandede Bredder på Telefoner

• phone-2cols-1-2: To kolonner, hvor den første er 1/3 bred og den anden er 2/3 bred.
• phone-2cols-2-1: To kolonner, hvor den første er 2/3 bred og den anden er 1/3 bred.
• phone-2cols-1-3: To kolonner, hvor den første er 1/4 bred og den anden er 3/4 bred.
• phone-2cols-3-1: To kolonner, hvor den første er 3/4 bred og den anden er 1/4 bred.

Disse blandede breddeklasser kan kombineres med de grundlæggende kolonneklasser for at opnå meget specifikke layoutmønstre.

Eksempel: Fem-Kolonne Portfolio Grid

Lad os se på et konkret eksempel, hvor vi ønsker at vise et portfolio i fem kolonner på større skærme. Divi har som standard et fire-kolonne layout for portfoliosektioner, og det kan være en udfordring at ændre dette uden hjælp.

Tilføjelse af Klasse og CSS

For at opnå et fem-kolonne layout, tilføjer vi klassen five-column-grid til vores portfolio-modul. Derefter skal vi tilføje følgende CSS til vores child theme's stylesheet eller til sektionen 'Custom CSS' i Divi Options panelet:

/* FEM KOLONNE PORTFOLIO GRID LAYOUT */ @media only screen and ( min-width: 981px ) { .five-column-grid .et_pb_grid_item { width: 17.6% !important; margin: 0 3% 3% 0 !important; } .five-column-grid .et_pb_grid_item:nth-child(3n+1) { clear: unset !important; } .five-column-grid .et_pb_grid_item:nth-child(4n+1) { clear: unset !important; } .five-column-grid .et_pb_grid_item:nth-child(5n) { margin-right: 0 !important; } .five-column-grid .et_pb_grid_item:nth-child(5n+1) { clear: left !important; } }

Forklaring af CSS

• @media only screen and ( min-width: 981px ): Denne regel sikrer, at CSS'en kun anvendes på skærme, der er mindst 981 pixels brede. Dette er for at undgå konflikter med Divis egne mobile standarder.
• .five-column-grid .et_pb_grid_item: Vi specificerer bredden og marginen for hvert grid-element inden for vores fem-kolonne layout. Bredden er sat til 17.6% for at give plads til fem kolonner med den angivne margin.
• clear: unset !important; og clear: left !important;: Disse regler er vigtige for at styre, hvordan kolonnerne "bryder" og starter nye rækker. Vi justerer `clear`-egenskaben for at sikre, at fem kolonner vises korrekt, især for det første element i en ny række (:nth-child(5n+1)). Vi fjerner også standard `clear`-indstillinger fra andre positioner (:nth-child(3n+1) og :nth-child(4n+1)), som Divi bruger til standard layout.
• margin-right: 0 !important;: Fjerner den højre margin fra det femte element i hver række for at undgå overskydende plads.

Justering af Skærmbrudspunkter

Hvis du ønsker, at fem-kolonne layoutet skal fortsætte på mindre skærme, kan du justere `min-width`-værdien. For eksempel, for at beholde fem kolonner på større tablets (fra 768px), ville du ændre værdien til min-width: 768px. For mindre tablets (fra 480px), ville du bruge min-width: 480px.

Divis Standard Kolonneovergange

Det er vigtigt at bemærke, at Divi automatisk skifter til tre kolonner ved 980px, to kolonner ved 767px og en kolonne på mobil (under 479px). Ved at definere dine egne CSS-regler og skærmbrudspunkter, kan du tilsidesætte disse standarder.

Divi FilterGrid: En Endnu Nemmere Løsning

For dem, der søger den absolut nemmeste måde at styre portfoliokolonner på, tilbyder DiviPlugins også pluginnet Divi FilterGrid. Dette plugin har en indbygget funktion, der lader dig definere antallet af kolonner direkte i modulindstillingerne for hver skærmstørrelse. Dette eliminerer behovet for manuel CSS-kode og gør processen meget mere intuitiv.

Tabel: Sammenligning af Kolonneklasser

Ofte Stillede Spørgsmål (FAQ)

Hvor mange kolonner har Divi som standard?

Divi bruger et responsivt system, der automatisk justerer antallet af kolonner baseret på skærmstørrelsen. Typisk vil du se fire kolonner på desktops, tre på større tablets, to på mindre tablets og én på smartphones. Disse standarder kan dog tilsidesættes med de metoder, der er beskrevet ovenfor.

Kan jeg anvende forskellige kolonneantal for forskellige sektioner?

Ja, absolut. Du skal blot tilføje de relevante CSS-klasser til den specifikke række (Row) for hver sektion, du ønsker at tilpasse. Dette giver dig fuld kontrol over layoutet på tværs af hele din hjemmeside.

Hvad sker der, hvis jeg bruger en klasse, der ikke er angivet?

Hvis du anvender en CSS-klasse, som Divi Toolbox ikke genkender eller som ikke er defineret i dit tema, vil den simpelthen ikke have nogen effekt på layoutet. Det er vigtigt at bruge de præcise klasser, der er angivet, for at opnå de ønskede resultater.

Hvordan kan jeg være sikker på, at ændringerne vises korrekt?

Efter at have anvendt klasserne og eventuel CSS, er det afgørende at teste dit website på forskellige enheder og skærmstørrelser. Du kan bruge browserens udviklerværktøjer (typisk ved at trykke F12) til at simulere forskellige enheder og se, hvordan dit layout opfører sig.

Er det nødvendigt at bruge et child theme?

Det anbefales kraftigt at bruge et child theme, når du tilføjer brugerdefineret CSS. Dette sikrer, at dine ændringer ikke går tabt, når temaet opdateres. Alternativt kan du placere din CSS i sektionen 'Divi ➜ Theme Options ➜ Custom CSS'.

Konklusion

At mestre kolonneantallet i Divi for tablets og smartphones er en vigtig del af at skabe et professionelt og brugervenligt website. Med Divi Toolbox og de tilgængelige CSS-klasser har du magten til at skræddersy dit layout ned til mindste detalje. Uanset om du ønsker at vise flere produkter i et galleri på en tablet eller forenkle et layout på en mobiltelefon, giver disse værktøjer dig den nødvendige fleksibilitet. Husk altid at teste dine ændringer grundigt for at sikre den bedst mulige brugeroplevelse på tværs af alle enheder.

Hvis du vil læse andre artikler, der ligner Tilpas kolonner i Divi til tablet og mobil, kan du besøge kategorien Teknologi.