Ä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!

✅ Ä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

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. 

✅ 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

Hjälp! Min sida syns inte på Google 😱

Det görs över 60 000 sökningar på Google – varje sekund. Med en marknadsandel på 97% har Google i det närmaste monopol på sökmarknaden i Sverige. Magra resultat från din sajt kan vara dolt tecken på total osynlighet. Det finns nämligen sajter som helt oavsiktligt...

Visa aktuellt år automatiskt i Divis bottom bar

Divis bottenlist (bottom bar) passar utmärkt för information om Copyright © men många glömmer att uppdatera till rätt år. Lägg in ett årtal som uppdateras automatiskt.

Så får du 20% rabatt på Divi – utan rabattkod

Divi är ett av världens mest använda och högst rankade premium-tema till Wordpress. Genom Diviguiden kan du få 20% rabatt på ditt Divi-medlemskap hos Elegant Themes – utan att använda varken rabattkod eller kampanjkoder. Häng med! Sänk priset med rätt länk Om skriver...

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!

Inspiration: 10 svenska hemsidor i WordPress

Behöver du fylla på med ny inspiration till dina webbprojekt? Här hittar du tio svenska WordPress-hemsidor som kan boosta din kreativitet. Oavsett om det handlar om dataspel, friluftsliv, musik eller vatten och avlopp(!) så går det att skapa riktigt snygg webbdesign. Mycket nöje!

Öka antalet samtal med telefonlänkar

Att sänka trösklarna för dina besökare när de vill kontakta dig kan leda till fler värdefulla interaktioner och lägre drop-out. Ett enkelt sätt att uppnå detta är att skapa telefonlänkar som triggar uppringning vid klick – även kallat click-to-call. Detta är...

✔ 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...

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.

Sex snabba sätt att ta tempen på din webbplats

Presterar inte din webbplats toppresultat trots att du matar den med bra och nyttigt innehåll? Det kan bero på att den är krasslig och hostar bort potentiella besökare. Här kommer sex enkla (och för det mesta helt gratis) sätt att ställa en träffsäker diagnos. För om...

3 enkla sätt att fixa en logotyp (om du inte är grafisk designer)

Professionella grafiska designers skapar oftast logotyper i program från Adobe CC, till exempel Illustrator, Photoshop och Indesign. Men för en nybörjare som vill skapa en enkel logga blir valmöjligheterna lätt utmattande. Här är tre sätt att skapa en vektor-logotyp...