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

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 #4: Lägg till en länk bredvid en checkbox i ett WordPress-formulär

Den 25 maj börjar den nya dataskyddsförordningen GDPR att gälla. Se till att du beskriver och länkar till dina allmänna villkor i dina kontaktformulär. I videon nedan kan du se hur du lägger till en länk bredvid en checkbox i ett WordPress-formulär med Divi.

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

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.

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!

Divi Nugget #3: Hämta och applicera format snabbt i WordPress

Minns du hur mycket enklare livet blev när du upptäckte penseln i Microsoft Word (eller den motsvarande rollern i Google Docs)? Nu kan du använda en liknande funktion för att “hämta format” och applicera stilen på nästan vad som helst i WordPress – utan att ditt innehåll skrivs över.

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

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

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 2017 har marknadsandelen för Wordpress tiodubblats i Sverige sedan 2012. CMS med stängd...

Fixa HTTPS – or die trying

Google trappar upp kriget mot osäkra sajter. Från och med oktober kommer varningen "INTE SÄKER" att möta den som fyller i ett formulär eller surfar inkognito på en sida med HTTP. Om du inte vill skrämma bort dina besökare är det dags att agera.  När en adress inleds...