Även om Divi till stora delar är självförklarande finns det några grundläggande guider som jag återkommer till gång på gång. Det handlar om nyttiga funktioner som förenklar ditt arbete och skapar en optimal användarupplevelse för dina besökare. Håll till godo!

Uppdaterad 2019-10-17

✅ Ändra ordning på kolumnerna i mobila enheter

Ändra ordning på kolumnerna i mobila enheter
Skärmbild från elegantthemes.com

Divi är ett responsivt tema vilket innebär att kolumnerna staplas ovanpå varandra i mobila enheter. Standard är att kolumnerna ordnas från vänster till höger. I den här guiden får du veta hur du ändrar ordningen på innehållet i mobilen med hjälp av CSS.

✅ Skapa snygga footers med Divi Builder

Skapa snygga footers med Divi Builder
Skärmbild från divilover.com

Uppdatering 2019-10-17: Nu har Divi 4 släppts! Detta innebär att du enkelt kan bygga både headers och footers direkt med Divis kraftfulla sidbyggare – utan kod eller extra plugins. Uppdatera till senaste versionen av Divi och använd sedan Temabyggaren.

Skapa header med Divi Builder

Skapa footer med Divi Builder

Vill du designa sidfoten med Divi Builder men slippa lägga in den manuellt på varje sida och inlägg? I väntan på Elegant Themes efterlängtade temabyggare kan du skapa snygga footers i Divis bibliotek och hämta in dem automatiskt på alla sidor.

Använder du fortfarande Divi 3? Här är en guide till hur du skapar footers med Divi Builder med Divi 3.

 

✅ Snabba upp laddingshastigheten på din hemsida

Snabba upp laddingshastigheten på din hemsida
Skärmbild från elegantthemes.com

En långsam hemsida skrämmer bort besökare och rankar sämre på Google. Helst ska din hemsida ladda på ca 1 sekund. Här får du en komplett genomgång av hur du snabbar upp laddningstiden på din hemsida.

✅ Visa bildtexten under din utvalda bild

Visa bildtexten under din utvalda bild i Divi
Skärmbild från divimundo.com

När du laddar upp en utvald bild till ett inlägg i WordPress kan du ange en bildtext som ska visas under bilden. Av någon anledning visar inte Divi bildtexten, men häng inte läpp för det. Med några rader kod i single.php är problemet löst och din bildtext visas som den ska. 

✅ Optimera din hemsida för mobiler och surfplattor

Optimera din hemsida för mobiler och surfplattor
Skärmbild från elegantthemes.com

Här får du en komplett genomgång av Divis funktioner för mobilanpassning. Inte dumt alls, med tanke på att en majoritet av alla internettrafik i dag kommer från mobila enheter.

✅ Välj rätt bildstorlekar och bildformat

Välj rätt bildstorlekar och bildformat
Skärmbild från elegantthemes.com

Om du använder onödigt stora bilder blir din hemsida långsam; om du använder för små bilder kan de stretchas ut och bli pixliga. Att välja rätt bildmått är särskilt viktigt i Divi eftersom det är ett tema som inte använder WordPress automatiska skalning av bilder.

Uppdatering: Sedan version 3.27 stöder Divi numera WordPress inbyggda responsiva bildhantering (SRCSET). Läs mer »

Här hittar du en komplett guide över mått, dimensioner och format för bilder.

✅ Fixa vanliga tekniska problem i Divi

Fixa vanliga tekniska problem i Divi
Skärmbild från peeayecreative.com

Tyvärr löser man inte alla tekniska problem genom att starta om datorn. Här är en bra guide som som hjälper dig att lösa de vanligaste tekniska problemen som man kan råka ut för i Divi.

✅ Pixlar, procent eller…  Välj rätt måttenheter 

CSS-format i Divi
Skärmbild från elegantthemes.com

När du anger storlekar i Divi (och i CSS rent generellt) kan du många använda olika mått, t.ex. 10px, 5vw, 100vh, 2em, 22% etc. Vissa mått är relativa och vissa är absoluta. Men vad betyder det egentligen och när bör man använda vilket format? Här är en komplett guide till måttenheter i Divi.

✅ Lägg till en fixerad “ring upp”-knapp på din sida

Lägg till en fixerad “ring upp”-knapp på din sida
Skärmbild från agirlandhermac.design

Detta är kanske en smal guide i sammanhanget men den är särskilt bra om du har stor andel mobil besökare. Nagla enkelt fast en blurb i hörnet på din sida som mobila användare kan trycka på för att snabbt och enkelt ringa upp.

Ps. Vill du ha en mer avancerad fixerad knapp som öppnar ett kontaktformulär istället? Det finns såklart en guide för det också.

Läs mer

✅ Justera Divis brytpunkter med Media Queries

Justera brytpunkter i Divi
Skärmbild från elegantthemes.com

I Divis sidbyggare kan du göra olika designinställningar för mobil, surfplatta och dator. Men ibland räcker inte dessa tre storlekar till och då kan så kallade Media Queries komma väl till pass. Med CSS-kod kan du styra hur din sajt visas på olika skärmstorlekar ner till minsta pixelnivå.

Summering

Det var 10 oumbärliga guider till Divi. Följ Elegant Themes, Divi Lover, Pee-Aye Creative, A Girl and Her Mac och såklart Diviguiden för fler tips och tricks. 

Mer från bloggen

Divi Nugget #5: Klistra in ren text utan format i WordPress

När du klistrar in text från t.ex. Word, e-post eller en pdf-fil direkt till WordPress så är risken stor att det följer med oönskad kod som kan försämra din hemsida. Här är tre sätt att tvätta bort formaten.

Klarar dina texter vi-testet?

Vad var det första du gjorde när du som barn fick den rykande färska skolkatalogen? Om du febrigt bläddrade fram till bilden på dig själv så var du knappast ensam. Vi är självupptagna varelser. Eller som Joe Pulizzi uttrycker det: Kunderna bryr sig inte om ditt...

Divi Nugget #01: Så byter du logga på enskilda sidor i WordPress

I första delen i serien Divi Nuggets går vi igenom hur man byter logga på en enskild sida i WordPress med temat Divi. Se videon nu.

10 oumbärliga guider till Divi

Även om Divi till stora delar är självförklarande finns det några grundläggande guider som jag återkommer till gång på gång. Det handlar om nyttiga funktioner som förenklar ditt arbete och skapar en optimal användarupplevelse för dina besökare. Håll till godo!

Divi Nugget #7: Skapa runda bilder direkt i WordPress (utan Photoshop)

Helt eller delvis runda bilder används ofta för att göra designen lite mjukare. På många hemsidor används till exempel rundade porträttbilder och produktbilder. Här är det enklaste och mest effektiva sättet att skapa runda bilder i WordPress.

Visa aktuellt år eller datum i din WordPress-footer

Vill du att att texten Copyright © 2018 ska uppdateras till aktuellt år automatiskt i WordPress footer? Det går att lösa med en shortcode – utan extra plugins som tynger ner din hemsida. Vi visar dig hur och bjuder även på några extra datumformat som aktuell dag, aktuell månad och dagens datum.

Sju begränsningar i Divi och hur du övervinner dem

Divi är ett fantastiskt WordPress-tema. Men det finns några begränsningar som återkommer. Här får du veta hur du anpassar mobilmenyn, skräddarsyr navigationen, gör centrala inställningar för rubriker och länkar, sparar formulärsvar, finslipar knapparna och tvättar bort den babyblå färgen.

Tusen(!) nyheter i den senaste Divi-uppdateringen

Senaste uppdateringen av Divi (3.0.74) innebär tusen nya funktioner och förbättringar – bokstavligt talat. Alla moduler har nu berikats med samma funktionalitet och logik, vilket gör temat både enklare och mer kraftfullt. Samtidigt som Divi nu blir mer konsekvent och...

✔ Checklista: 10 saker att göra efter lanseringen av din WordPress-hemsida

Efter mycket jobb har du äntligen publicerat din WordPress-hemsida. Men tro inte att du är klar; det är nu jobbet börjar! Här är en checklista med tio punkter som du bör bocka av direkt efter lanseringen.1. Säkerheten först!2018 stod WordPress för 90% av alla hackade...

Uppdatera i WordPress direkt från mobilen

Elegant Themes har nu släppt en efterlängtad uppdatering till Divi Builder: Sidbyggaren är nu helt responsiv. Detta innebär att det är smidigt att uppdatera innehållet på din Wordpress-hemsida från mobilen – var du än befinner dig. Som en bonus blir sidbyggaren även...