Ä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

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.

Divi snabbar upp laddtiden med ny uppdatering

Nu släpper Divi en teknisk uppdatering som innebär att din sajt kommer att laddas snabbare för besökarna. Genom att all CSS-kod lagras i statiska filer så hålls kodmängden på de enskilda sidorna nere. Allt sker såklart automatiskt i bakgrunden så förändringen påverkar...

Så visar du bildtexten under din utvalda bild i Divi

När du skapar ett inlägg i Wordpress kan du ladda upp en Utvald bild (Featured Image) som visas mellan rubriken och brödtexten. För att Divi ska visa din bildtext under bilden så behöver du lägga till en rad kod. Vi visar hur och bjuder dessutom på en enkel...

Fantastiska fakta om WordPress 2020 – världens största CMS

UPPDATERAD 2020-01-09: Nästan var tredje webbplats är skapad i Wordpress. I Sverige är det vårt mest populära CMS (webbpubliceringsverktyg) med öppen källkod (Open Source). Enligt Web Service Award 2019 har marknadsandelen för Wordpress tiodubblats i Sverige sedan...

7 knep för bättre Divi-formulär

Säg "formulär" och de flesta tänker på något grått och tråkigt. Samtidigt är det i formulär som kontakter knyts och affärer påbörjas. Det finns en uppsjö kraftfulla formulär-plugins till Wordpress, men nackdelen är att de ofta är krångliga att administrera och kräver...

WordPress: 8 exempel på inspirerande webbdesign

Nu är det dags för en ny dos inspiration med åtta exempel på riktigt bra webbdesign i Wordpress. Med tanke på att vi går mot mörkare tider så blir det extra mycket färg och smaksensationer den här gången. En nyhet är att det bara är svenska sajter i listan. De flesta...

Divi Nugget #2: Skapa en studsande scroll-pil neråt i WordPress

I Divi Nugget #2 går vi igenom hur du skapar en studsande scroll-pil neråt på din hemsida i WordPress. Vi ser även till att pilen är klickbar och länkar till sektioner under. Se videon nu.

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.

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

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