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.
Uppdatering: Efter den här artikeln publicerades har Divi uppdaterats och de flesta begränsningarna är nu puts väck. Ta del av vår kompletta kurs på svenska om hur du skapar en hemsida med Divi istället.
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:
Uppdatering: Sedan artikeln skrevs har Divi släppt Theme Buildern som ger dig mer kontroll över mobilmenyn. Här är en mer uppdaterad artikel om hur du kan skapa en bättre mobilmeny i Divi
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:
- Göm logo-bild
- Ändra textfärg
- Ä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.
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.
Uppdatering: Sedan artikeln skrevs har Divi släppt Theme Buildern som ger dig mer kontroll över navigationen i och med Divi Theme Builder. Här är en video från 2021 om hur du skapar en meny med Divi Theme Builder
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
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.
- Lägg in en ny (lila) helbreddssektion på sidan
- Välj modulen Meny – helbredd
- 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:
- Redigera sidan som du vill applicera ändringarna på
- I URL-fältet i din webbläsare hittar du sidans ID-nummer, t.ex. ?post=81 (varje sida har ett unikt siffer-id)
- 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.
Uppdatering: Sedan artikeln skrevs har du full kontroll över rubrikerna via Global Presets. Lär dig mer om detta i Divi-kursen från 2021.
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*/
font-weight: 600;
color:#121212;
}
h2 {
font-size: 30px !important;
font-weight: 400;
color:#121212;
}
font-size: 23px !important;
font-weight: 400;
color:#333;
}
h4 {
font-size: 18px !important;
font-weight: 400;
color:#000;
font-style: italic;
}
Uppdatering: Sedan artikeln skrevs har du full kontroll över länkarna i Divi Builder. Lär dig mer i Divi-kursen från 2021
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:
a:hover {
color:red;
}
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;
}
.et_pb_button {
padding: 20px 40px 20px 40px !important;
}
.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ällningar > Layoutinstä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ällningar > Layoutinstä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.
0 kommentarer