10 oumbärliga guider till Divi

  • Victor Duse
  • 2019-08-05
  • Divi
  • 0 kommentarer
  • Om affiliate-länkar
    Några av länkarna i det här inlägget är affiliate-länkar. Detta innebär att om du klickar på dessa länkar och köper något kommer jag att få en affiliate-kommission. Men det kommer aldrig att kosta mer för dig. Tack för ditt stöd!

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

Gratis kurs på svenska: Skapa en hemsida med WordPress & Divi

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. 

Relaterade inlägg

0 kommentarer

Skicka en kommentar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.