Divi Kolonner på Mobil: Fuld Kontrol og Optimering

I nutidens digitale landskab er et responsivt webdesign ikke længere en luksus, men en absolut nødvendighed. Med en stadig stigende andel af internettrafikken, der kommer fra mobile enheder og tablets, er det afgørende, at din hjemmeside ser godt ud og fungerer fejlfrit på alle skærmstørrelser. Divi, et af de mest populære temaer og sidebyggere til WordPress, er bygget med responsivt design i tankerne. Som standard er Divi designet til at stable dine kolonner oven på hinanden, når du bevæger dig fra en stor skærm som en desktop til mindre skærme som mobiltelefoner. Dette er ofte den mest logiske adfærd, da det sikrer, at indholdet forbliver læsbart og organiseret. Men hvad sker der, når denne standardadfærd ikke passer til dit design? Hvad hvis du ønsker at vise flere kolonner side om side på mobil, eller ændre den rækkefølge, kolonnerne stables i?

Disse udfordringer er almindelige for Divi-brugere, der stræber efter den perfekte mobile brugeroplevelse. Selvom Divi tilbyder robuste responsive indstillinger, kræver fuld kontrol over kolonnevisning og rækkefølge på mobile enheder ofte lidt ekstra finesse i form af brugerdefineret CSS. Denne artikel vil dykke ned i præcis, hvordan du kan opnå dette. Vi vil udforske metoder til at aktivere flere kolonner på mobil og tablet, og hvordan du kan justere kolonnestakrækkefølgen for at sikre en logisk og flydende præsentation af dit indhold. Desuden vil vi se på, hvordan du kan strømline din arbejdsproces ved hjælp af Divi Global Presets.

Forstå Divis Standard Kolonneadfærd på Mobil

Når du designer i Divi, er det vigtigt at forstå, hvordan den indbyggede responsive grid fungerer. Som nævnt vil Divi som standard stable dine kolonner fra venstre mod højre, når skærmstørrelsen reduceres. Hvis du for eksempel har en række med tre kolonner på din desktop-visning, vil den første (længst til venstre) kolonne blive vist øverst på mobil, efterfulgt af den anden og derefter den tredje. Dette er ofte intuitivt og tilstrækkeligt for de fleste hjemmesider. Men der opstår situationer, hvor et design, der ser fantastisk ud på desktop, skaber en inkonsekvent indholdsstrøm på mobil. Forestil dig et layout, hvor du skiftevis har billede og tekst i to kolonner: Billede | Tekst på række 1, og Tekst | Billede på række 2. På desktop ser det symmetrisk ud. Men på mobil vil række 1 stable som Billede, Tekst, og række 2 som Tekst, Billede. Dette bryder den visuelle logik for brugeren.

Problemet opstår, fordi Divi automatisk prioriterer den venstre kolonne. For at løse dette, især når du har komplekse layouts eller ønsker at optimere brugeroplevelsen på små skærme, skal vi gribe ind. Der er to hovedscenarier, vi vil fokusere på: at tvinge flere kolonner til at blive vist side om side på mobil, og at ændre den rækkefølge, de stables i.

Aktivering af Flere Kolonner på Mobil og Tablet i Divi

Divi stakker som standard alle kolonner til en enkelt kolonne på mobil for at sikre læsbarhed. Men hvad nu hvis du ønsker at vise to, tre eller endda flere kolonner side om side på en mobiltelefon eller tablet? Dette kan være relevant for produktoversigter, serviceikoner eller andre elementer, hvor en tættere visning er ønskelig. Den gode nyhed er, at det er muligt at få fuld kontrol over antallet af kolonner, der vises på mobil og tablet i hver Divi-række, ved at tilføje brugerdefineret CSS.

Mange "hurtige fixes" på internettet foreslår simpåt display:flex eller width:50%. Selvom disse kan fungere, vil vi her introducere en mere robust løsning, der forbliver konsistent med den type kode, Divi allerede bruger til desktop-kolonner. Denne metode giver dig mulighed for at opnå 2-6 kolonner på mobil og tablet med passende afstand mellem og under kolonnerne.

Sådan implementeres flere kolonner med CSS:

For at implementere dette, skal du først tildele en unik CSS-klasse til den Divi-række, du ønsker at påvirke. Gå til rækkeindstillingerne, vælg fanen 'Avanceret', og under 'CSS ID & Klasser' tilføj en klasse som f.eks. mobil-flere-kolonner i feltet 'CSS-klasse'.

Dernæst skal du tilføje den brugerdefinerede CSS. Dette kan gøres under Divi > Tema Indstillinger > Brugerdefineret CSS, eller i dit barns temas style.css-fil.

Her er et eksempel på CSS for at vise to kolonner på mobil og tablet:

@media only screen and (max-width: 980px) { .mobil-flere-kolonner { display: flex; flex-wrap: wrap; justify-content: space-between; } .mobil-flere-kolonner .et_pb_column { width: 48%; /* For 2 kolonner med plads imellem */ margin-bottom: 20px; /* Afstand mellem rækker af kolonner, hvis indholdet bryder */ } } @media only screen and (max-width: 767px) { .mobil-flere-kolonner .et_pb_column { width: 48%; /* Kan justeres for mobil, hvis ønsket */ } } 

Forklaring af koden:

• @media only screen and (max-width: 980px): Dette er en medieforespørgsel, der sikrer, at CSS'en kun anvendes på skærme med en bredde på 980px eller mindre (tablet og mobil).
• @media only screen and (max-width: 767px): En yderligere medieforespørgsel specifikt for mobiltelefoner (under 768px), hvis du ønsker en anden adfærd her.
• .mobil-flere-kolonner: Vores brugerdefinerede klasse, der målretter den specifikke række.
• display: flex;: Gør rækken til en flex-container, hvilket giver os kraftfuld kontrol over elementers layout.
• flex-wrap: wrap;: Tillader kolonnerne at "bryde" til den næste linje, hvis der ikke er plads nok på en enkelt linje.
• justify-content: space-between;: Fordeler pladsen jævnt mellem kolonnerne.
• .mobil-flere-kolonner .et_pb_column: Målretter Divi-kolonnerne inden for vores række.
• width: 48%;: Sætter bredden for hver kolonne. For to kolonner giver 48% plads til en lille margin imellem.

Tilpasning til 3, 4, 5 eller 6 kolonner:

For at vise et andet antal kolonner, skal du blot justere width-værdien for .et_pb_column. Husk at tage højde for mellemrum mellem kolonnerne:

• 3 kolonner:width: 31%; (ca.)
• 4 kolonner:width: 23%; (ca.)
• 5 kolonner:width: 19%; (ca.)
• 6 kolonner:width: 16%; (ca.)

Du kan også justere margin-bottom for at styre den lodrette afstand mellem kolonnerækkerne, hvis de bryder.

Sådan Justeres Kolonnestakrækkefølgen på Mobil i Divi

Ud over at styre antallet af kolonner er det ofte nødvendigt at ændre den rækkefølge, kolonnerne stables i på mobil. Divis standard 'venstre-til-højre' stakning er ikke altid optimal. Heldigvis er der et par metoder til at løse dette.

Metode 1: Divis "Deaktiver på"-funktion

Den nemmeste, men potentielt mest oppustede, måde at justere kolonnestakrækkefølgen på mobil er ved at duplikere rækker og bruge Divis indbyggede "Deaktiver på"-funktion. Denne funktion giver dig mulighed for at skjule eller vise sektioner af indhold på bestemte enheder (telefon, tablet, desktop).

Fremgangsmåde:

1. Opret din række med indhold, som den skal se ud på desktop.
2. Dupliker denne række.
3. I den originale række (desktop-versionen) går du til rækkeindstillingerne > Avanceret > Synlighed og markerer "Deaktiver på Telefon" og "Deaktiver på Tablet".
4. I den duplikerede række (mobil-versionen) omarrangerer du modulerne, så de vises i den ønskede rækkefølge på mobil.
5. For denne duplikerede række går du til rækkeindstillingerne > Avanceret > Synlighed og markerer "Deaktiver på Desktop".

Fordele: Ingen kode er nødvendig, fuld visuel kontrol i Divi Builder.

Ulemper: Denne metode kan føre til et oppustet DOM (Document Object Model) og potentielt langsommere indlæsningstider, da indholdet stadig indlæses, selvom det er skjult. Det kan også gøre side redigering forvirrende, da du skal vedligeholde flere versioner af det samme indhold.

Metode 2: Brugerdefineret CSS for Kolonnestakrækkefølge (Anbefalet)

Den mere elegante og SEO-venlige løsning er at bruge brugerdefineret CSS og Flexbox's order-egenskab. Dette kræver et par linjer kode, men er en meget robust metode, der undgår indholdsduplikering.

For rækker med to kolonner:

Det mest almindelige problem opstår med to kolonner, hvor du ønsker at bytte om på rækkefølgen på mobil (f.eks. kolonne 2 før kolonne 1). Du kan anvende denne CSS direkte i rækkeindstillingerne > Avanceret > Brugerdefineret CSS > Hovedelement, og aktivere de responsive indstillinger for at sikre, at det kun gælder for mobil og/eller tablet:

display: flex; flex-wrap: wrap; flex-direction: column-reverse; 

flex-direction: column-reverse; vil vende rækkefølgen af dine kolonner om, så den anden kolonne kommer først, efterfulgt af den første.

For rækker med mere end to kolonner:

Når du arbejder med rækker, der har 4, 6 eller flere kolonner (via brugerdefineret CSS), kan du have brug for at ændre stakrækkefølgen for hver enkelt kolonne. Her er to måder at gøre det på:

1. Brug af CSS i hver kolonne:

Først skal du aktivere Flexbox på din række. Gå til rækkeindstillingerne > Avanceret > Brugerdefineret CSS > Hovedelement og indsæt dette: (Husk at aktivere responsive indstillinger for mobil/tablet)

display: flex; flex-wrap: wrap; 

Dette aktiverer flex i rækken og forhindrer kolonnerne i at krympe. Nu kan du indstille rækkefølgen for hver kolonne individuelt på mobil. Gå til indstillingerne for hver kolonne > Avanceret > Brugerdefineret CSS > Hovedelement, og aktiver de responsive indstillinger for mobil. Indsæt derefter:

order: 2; 

Du skal indstille order-værdien for hver kolonne i den ønskede rækkefølge. Kolonner med lavere order-værdier vises først. For eksempel, for at vende rækkefølgen af 4 kolonner:

• Kolonne 1: order: 4;
• Kolonne 2: order: 3;
• Kolonne 3: order: 2;
• Kolonne 4: order: 1;

Dette vil få Kolonne 4 til at blive vist først, Kolonne 3 som nummer to osv. på mobil.

2. En universel løsning med brugerdefineret CSS-snippet:

Denne metode er mere skalerbar, da den bruger en global CSS-snippet og derefter kun kræver tilføjelse af CSS-klasser. Denne metode kræver to trin:

Trin 1: Indsæt snippet i Divi Tema Indstillinger > Brugerdefineret CSS:

@media (max-width: 767px) { .column-reverse { display: flex; flex-wrap: wrap; } .column-reverse .col-1{ order:2; } .column-reverse .col-2{ order:1; } .column-reverse .col-3{ order:4; } .column-reverse .col-4{ order:3; } .column-reverse .col-5{ order:6; } .column-reverse .col-6{ order:5; } } 

Denne kode definerer en CSS-klasse .column-reverse til rækken og specifikke klasser .col-1 til .col-6 til kolonnerne, der styrer deres rækkefølge på mobile skærme (under 768px).

Trin 2: Tilføj de forskellige CSS-klasser:

• Til rækken, hvor du vil ændre stakrækkefølgen, tilføj klassen column-reverse (i rækkeindstillinger > Avanceret > CSS ID & Klasser > CSS-klasse).
• For hver kolonne inden for denne række tilføjer du den tilsvarende klasse (f.eks. col-1 for den første kolonne, col-2 for den anden osv.) i kolonneindstillinger > Avanceret > CSS ID & Klasser > CSS-klasse.

Efter dette vil enhver række og kolonne, du tilføjer disse klasser til, automatisk få den definerede stakrækkefølge for mobil.

Optimering af Din Arbejdsproces med Divi Global Presets

Divi Global Presets er en kraftfuld funktion, der kan spare dig utrolig meget tid, især når du anvender de samme indstillinger – herunder CSS-klasser – på tværs af flere elementer på din hjemmeside. Selvom Global Presets primært er designet til at anvende designindstillinger og avancerede indstillinger (som CSS ID'er og klasser) til moduler, rækker og sektioner, kan de indirekte hjælpe med at administrere kolonneadfærd, når du bruger den CSS-baserede metode.

Ideen er, at i stedet for manuelt at tilføje CSS-klasser til hver enkelt række eller kolonne, hver gang du opretter et nyt layout, kan du oprette en global forudindstilling for en række (eller endda et modul inden i en kolonne), der allerede indeholder den nødvendige CSS-klasse. Når du derefter trækker denne globale række (eller modul) ind på din side, vil CSS-klassen automatisk blive anvendt, og din brugerdefinerede kolonneadfærd træder i kraft.

Sådan bruger du globale forudindstillinger med CSS-klasser:

1. Definer din CSS: Først skal du have din brugerdefinerede CSS (enten for flere kolonner eller for stakrækkefølge) klar og placeret i Divi Tema Indstillinger > Brugerdefineret CSS eller dit barns temas style.css. Sørg for, at din CSS målretter en specifik klasse, f.eks. .min-responsive-række eller .kolonne-omvendt.
2. Opret en række (eller modul) med klassen: Byg en Divi-række (eller et modul inden i en kolonne), der repræsenterer dit ønskede layout. Gå til rækkeindstillingerne > Avanceret > CSS ID & Klasser og tilføj den CSS-klasse, som din brugerdefinerede CSS målretter (f.eks. min-responsive-række eller column-reverse).
3. Gem som Global Preset: Højreklik på rækken (eller modulet) i Divi Visual Builder. Vælg "Gem som global". Giv den et meningsfuldt navn, f.eks. "Global Række - Mobil 2 Kolonner" eller "Global Række - Omvendt Stak".
4. Genbrug din preset: Når du nu vil bruge dette specifikke kolonne-layout andre steder på din hjemmeside, skal du blot tilføje en ny række (eller modul) og vælge din gemte globale forudindstilling fra dit bibliotek. Klassen vil automatisk blive anvendt, og du behøver ikke at tilføje den manuelt igen.

Denne metode automatiserer anvendelsen af CSS-klasser og sikrer konsistens på tværs af dit websted, hvilket gør den til en yderst effektiv måde at arbejde med avancerede Divi-layouts på.

Hvilken Metode er Bedst? En Sammenligning

Valget mellem Divis "Deaktiver på"-funktion og den CSS-baserede metode afhænger af dine specifikke behov og præferencer. Lad os opsummere fordele og ulemper:

Anbefaling: Hvis du har brug for at skabe helt forskellige layouts og/eller planlægger at ændre indholdet ud over kolonneordenen på mobil, kan "Deaktiver på"-funktionen være relevant. Men hvis du primært har brug for at omarrangere kolonner på mobil uden at ændre indhold og ønsker en renere, mere effektiv løsning, så er CSS-metoden uden tvivl den foretrukne. Den tilbyder bedre ydeevne, nemmere vedligeholdelse på lang sigt, og er mere robust.

Ofte Stillede Spørgsmål (FAQ)

Hvad er Divi breakpoints?

Divi bruger standard "breakpoints" til at bestemme, hvornår layoutet skal ændre sig for forskellige enheder. De primære breakpoints er:

• Desktop: Større end 980px
• Tablet: Mellem 768px og 980px
• Mobil: Mindre end 767px

Disse breakpoints bruges i CSS-medieforespørgsler (@media-regler) for at anvende specifikke stilarter til bestemte skærmstørrelser.

Påvirker skjult indhold SEO?

Der har været debat om, hvordan søgemaskiner håndterer indhold, der er skjult på en side (f.eks. via Divis "Deaktiver på"-funktion). Selvom indholdet er skjult for brugeren på visse enheder, er det stadig "crawl-bart" af Google. Google er dog blevet meget bedre til at identificere, om indhold er skjult af responsive layoutgrunde. Så længe du ikke skjuler indhold af ondsindede årsager (f.eks. keyword stuffing), vil Google normalt ikke straffe dig. Den CSS-baserede metode er dog ofte foretrukket fra et SEO-perspektiv, da den ikke indebærer duplikering af indhold, men blot omarrangering af eksisterende indhold.

Kan jeg bruge disse metoder på alle Divi-moduler?

Ja, de principper, der er beskrevet her for at justere kolonneadfærd, gælder for alle moduler, der er placeret inden for en Divi-kolonne. Uanset om det er tekstmoduler, billedmoduler, knapper eller tilpassede moduler, vil CSS'en, der anvendes på rækken eller kolonnen, påvirke, hvordan disse moduler vises i forhold til hinanden.

Hvor skal jeg placere min brugerdefinerede CSS?

Der er flere steder, du kan placere din brugerdefinerede CSS i Divi:

• Divi > Tema Indstillinger > Brugerdefineret CSS: Dette er det mest almindelige og nemmeste sted for de fleste brugere. Koden her vil gælde for hele dit websted.
• Divi Tema Builder > Global Header/Footer/Body: Hvis du har CSS, der kun gælder for specifikke dele af dit websted, kan du tilføje det her.
• Et barns temas style.css-fil: Dette er den anbefalede metode for mere avancerede brugere og udviklere, da det sikrer, at dine ændringer ikke overskrives ved temaopdateringer.
• I række-/kolonneindstillingerne > Avanceret > Brugerdefineret CSS: Til meget specifikke CSS-regler, der kun gælder for den pågældende række eller kolonne. Husk at bruge de responsive indstillinger her for at målrette specifikke enheder.

For den universelle CSS til kolonnestakrækkefølge anbefales "Divi > Tema Indstillinger > Brugerdefineret CSS" eller dit barns temas style.css.

Afsluttende Tanker

At have kontrol over kolonnestakrækkefølgen og muligheden for at vise flere kolonner på mobile enheder er utroligt nyttigt og ofte nødvendigt for at skabe en optimal brugeroplevelse. Du kan nu designe unikke layouts til desktop uden at kompromittere konsistensen af indholdsstrømmen på mobil. Ved at mestre disse teknikker, enten gennem Divis indbyggede "Deaktiver på"-funktion eller den mere avancerede CSS-metode, kan du løfte dine Divi-projekter til et helt nyt niveau af responsiv perfektion. Husk, at et velstruktureret og flydende layout på alle enheder ikke kun forbedrer brugeroplevelsen, men også bidrager positivt til din SEO. Vi håber, at denne guide har givet dig de værktøjer og den viden, du har brug for til at tage fuld kontrol over dine mobile Divi-layouts. Held og lykke med dit næste design!

Hvis du vil læse andre artikler, der ligner Divi Kolonner på Mobil: Fuld Kontrol og Optimering, kan du besøge kategorien Teknologi.