Missförstå mig rätt; jag gillar verkligen Divi och allt som Nick Roach och gänget på Elegant Themes har åstadkommit. Efter tio år använder nästan en halv miljon proffs och nybörjare Divi för att skapa grymma hemsidor i WordPress. Med detta sagt: efter att ha byggt ett stort antal Divi-sajter finns det några irritationsmoment som återkommer.

Dessa tillkortakommanden kommer säkerligen att lösas i framtida temauppdateringar, men fram till dess presenterar jag sex begränsningar i Divi – och hur du övervinner dem:

 

  1. Den begränsade mobilmenyn
  2. De utspridda navigationsinställningarna
  3. De sparsmakade inställningarna för rubriker
  4. De saknade hover-effekterna för länkar
  5. Formuläret som inte sparar svaren
  6. Fina knappar men få centrala inställningar
  7. Den efterhängsna babyblåa färgen

1. Den begränsade mobilmenyn

2018 står mobiler för 52% av internettrafiken. Trots detta erbjuder Divi bara en enda layout för mobil navigation. Under Divi > Tema-anpassare > Mobilstilar > Mobilmeny finns dessutom bara tre inställningar:

  1. Göm logo-bild
  2. Ändra textfärg
  3. Ändra bakgrundsfärg

That’s it. I väntan på nästa Divi-uppdatering kan du pimpa mobilmenyn på egen hand.

Lösning

I juni 2016 släppte Elegant Themes gratis-tillägget Divi Hamburger Menu med 20 olika stilar för mobilmenyer. Du kan dessutom så ställa in färgen på både hamburgaren och krysset. Ladda ner tillägget, installera och välj layout. Färdigt.

Divi Hamburger Menu

Vill du ha ännu fler alternativ? Här är en guide till hur du bland annat lägger till bakgrundsbild och ändrar typsnitt med (en hel del) CSS.

2. De utspridda navigationsinställningarna

När det gäller menyn för desktop så finns det fler val men de är utspridda på ett antal olika ställen.

Under Divi > Tema-anpassare > Sidhuvud & Navigation kan du välja på fem olika menystilar samt vertikal navigation. Du kan även ställa in höjd, textfärger och välja att visa eller dölja loggan på alla sidor.

Av oklar anledning ändrar du mobilmenyn på ett annat ställe: Divi > Tema-anpassare > Mobilstilar > Mobilmeny 

För att ytterligare öka förvirringen kan du under Temainställningar > General välja om navigationen ska ska vara fast – det vill säga följa med när besökaren scrollar – eller inte.

Under Temainställningar > Navigation anger du vilka sidor som ska visas i menyn. Ett tips är att aktivera Alternativ skrolla-till-ankare-metod under Temainställningar > Navigation > Allmänna inställningar när du ändå är här. Det innebär att dina ankarlänkar blir mer träffsäkra.

Uppe till höger på varje enskild sida kan du aktivera dot navigation och att navigationen ska döljas före scroll. Du kan förvisso dölja navigationen helt på en sida genom att välja “Blank page” under rubriken “Mall” i högerkolumnen, men det innebär även att du döljer footern, vilket du kanske inte vill.

Du kan inte ändra utseende på navigationen eller byta logotyp på enskilda sidor. I väntan på fler navigationsval (gärna på ett och samma ställe) får vi knacka CSS-kod.

Lösning

Om vi börjar med att byta logotyp på en enskild sida så kan du göra detmed lite Javascript och CSS. Se videon nedan och klistra in den här koden.

Vill du göra ett större ingrepp? Kanske helt byta färg och layout på navigationen på en enskild sida? Då är det enklast att helt dölja standardnavigationen och lägga in en separat navigationsmodul direkt på sidan:

  1. Lägg in en ny (lila) helbreddssektion på sidan
  2. Välj modulen Meny – helbredd
  3. Lägg den högst upp på sidan och designa den efter tycke och smak under fliken Design.

Du kan enkelt hämta in länkarna från den vanliga meny och behöver därmed inte uppdatera länkarna dubbelt.

Nu har du dubbla menyer på sidan. För att dölja den gamla menyn gör du så här:

  1. Redigera sidan som du vill applicera ändringarna på
  2. I URL-fältet i din webbläsare hittar du sidans ID-nummer, t.ex. ?post=81 (varje sida har ett unikt siffer-id)
  3. Gå till Divi > Tema-anpassare > Extra CSS och lägg in följande kod:

/*dölj enskilda sidors navigation – glöm inte att ändra nr efter page-id- så att det stämmer med sidan som du vill påverka*/

 .page-id-81 #main-header {
display: none;
}

Nu har du dolt standardnavigationen på sidan.

3. De sparsmakade inställningarna för rubriker

I oktober 2017 släppte Elgeant Thems en efterlängtad uppdatering av Divi med 600 nya typsnitt (sammanlagt 800 fonter att välja mellan!) och en uppsjö nya inställningar för att finjustera bland annat storlek, vikt och färg på rubriker, länkar och andra textelement. Gott så.

Problemet är bara att de flesta inställningarna bara kan göras på modul-nivå och inte centralt för hela sajten under Tema-anpassningar. Om du har en stor webbplats med många sidor och flera webbredaktörer är det inte ett hållbart arbetssätt att ställa in typografin i varje enskild modul. I väntan på att Divi lägger till fler centrala textinställningar kan du lägga in egen CSS-kod.

Lösning

H1:ans (huvudrubrikens) storlek kan du enkelt ange under Divi > Tema-anpassare > Allmänna inställningar > Typografi > Textstorlek i sidhuvud. Divi anger sedan ut storlekar för H2-H6 automatiskt. Men detta vill du såklart kunna styra själv och i nuläget kräver det lite CSS-kod. Gå in på Divi > Tema-anpassare > Extra CSS och lägg in följande:

/*ställ in storlek, vikt (tjocklek) och färg för alla h1-h4 och gör H4 kursiv*/

h1 {

font-weight: 600;
color:#121212;

}

h2 {

font-size: 30px !important;
font-weight: 400;
color:#121212;

}

h3 {

font-size: 23px !important;
font-weight: 400;
color:#333;

}

h4 {

font-size: 18px !important;
font-weight: 400;
color:#000;
font-style: italic;

}

4. De saknade hover-effekterna för länkar

Visst vill du styra hur länkarna beter sig när besökaren för muspekaren över dem? Eller om de ska vara understrukna eller inte? Även detta kan enkelt göras på modul-nivå men det finns ingen central inställning i Divi som styr detta för hela sajten.

Lösning

Gå in på Divi > Tema-anpassare > Extra CSS och lägg in följande kod:

/*ändra hover-färg på alla länkar – välj en färg som passar ditt tema*/

a:hover {

color:red;

}

/*gör alla länkar understrukna*/

a {
text-decoration: underline;

}

 

5. Formuläret som inte sparar svaren

Det följer med en fin formulär-modul i Divi som låter dig skapa avancerade formulär med olika typer av fält och olika flöden beroende på hur besökaren svarar. En stor fördel med modulen är att den är enkel att stajla med Divi Builder och att det är lätt att synka designen med resten av din Divi-sajt.

Så hur kommer det sig då att många laddar ner externa formulärtillägg som ofta är både krångliga och fula? Svaret är sannolikt att Divis formulärmodul inte sparar svaren i en databas utan bara skickar dem via e-post – en lösning som är ungefär lika betryggande som att skicka ett paket med Postnord. Som tur är finns det en lösning i väntan på att Elegant Themes släpper en uppdatering:

Lösning

Det lilla men naggande goda pluginet Divi Form DB ser till att alla svar som skickas in via dina Divi-formulär lagras i en databas i WordPress. Därifrån kan du enkelt läsa, rensa och exportera ut svaren i CSV-format. Tillägget har även avancerade funktioner för automatisk postning av inlägg på sajten direkt från formulär, men det är ett annat kapitel.

För 8 dollar får du använda Divi Form DB på hur många sajter som helst.

Bonustips: Så lägger du till en länk till allmänna villkor bredvid en checkbox i Divis formulärmodul

6. Fina knappar men få centrala inställningar

Divis knapp-modul är en av mina favoriter. På modul-nivå kan du enkelt ställa in padding, marginaler, skugga och mycket mer. Men återigen: i de centrala inställningarna finns bara ett fåtal inställningar vilket innebär en begränsning om du plötsligt ska stajla om tiotals eller hundratals knappar var för sig. Lösningen stavas återigen CSS.

Lösning

Gå in på Divi > Tema-anpassare > Extra CSS och lägg in följande:

/*gör alla knappar bredare med padding*/

.et_pb_button {

padding-left:40px !important;
padding-right:40px !important;

}

/*gör alla knappar bredare och högre med padding*/

.et_pb_button {

padding: 20px 40px 20px 40px !important;

}

/*lägg till skugga på alla knappar*/

.et_pb_button {

box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19) !important;

}

7. Den efterhängsna babyblåa färgen

Detta är kanske inte något man kan lasta Elegant Themes och Divi för, men jag ser alltför Divis babyblåa standardfärg #2ea3f2 lite här och var; ofta på sajter som egentligen har en helt annan färgprofil. Om den blåa färgen gör oönskade besök på din sajt beror det sannolikt på att du inte har angett en egen acccentfärg under Divi > Tema-anpassare > Allmänna inställningarLayoutinställningar > Färgtema.

Färgtemat påverkar bland annat:

  • Länkfärgen i brödtext
  • Vissa texter i widgets
  • Standardfärg för ikoner
  • Bakgrundsfärg för den sekundära menyn
  • Hamburgermenyns färg
  • Linjen i dropdopwn-menyer

… och mycket mer.

Lösning

Gå till Divi > Tema-anpassare > Allmänna inställningarLayoutinställningar > Färgtema och ange en annan temafärg som passar med din design. Ibland tycker jag att det är enklast att sätta vit (#fff) eller svart (#000) som temafärg och sedan använda CSS för att ändra specifika element som försvinner in i bakgrunden.

Sammanfattning

Divi är ett fantastiskt tema som gör det möjligt för att skapa riktigt bra hemsidor. Likt solen har det också sina skönhetsfläckar. Till skillnad från solen kan vi hoppas på att fläckarna försvinner tids nog.

Affiliate disclaimer

Diviguiden är en 100% fristående affiliate till Elegant Themes (Divi), Surftown och Fiverr. Vi rekommenderar bara tjänster som vi själva gillar och använder. Om du köper något via vissa av länkarna på Diviguiden så går en provision till Diviguiden, men det kostar aldrig mer för dig. Läs mer

Mer från bloggen

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

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

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

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.

12 exempel på strålande webbdesign i WordPress & Divi

Varje dag skapas 50 000(!) nya hemsidor i Wordpress. Vi har samlat 12 exempel på strålande webbdesign av allt från små frilansare till internationella storföretag; från konstnärlig minimalism till färgsprakande överdåd. Men alla sajterna har ett par saker saker...

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

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.

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

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

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.