Sju begränsningar i Divi och hur du övervinner dem

✏️ 2018-03-25 | Divi, Divi Nuggets, Tips & trix | 0 Kommentarer

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.
Skribent: Victor Duse
Av Victor Duse
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.

Mer från bloggen

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

5 gratis plugins som gör Divi ännu bättre

Ge Divi superkrafter med plugins (tillägg) som dessutom är helt gratis.

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

Trött på tröga och tråkiga formulär som ingen (förutom spammare) fyller i? Så här får du ut mer av Divis inbyggda formulärmodul.

Kortkommandon till Divi som snabbar upp ditt arbete

Att jobba med webbutveckling och webbdesign är ett av de roligaste jobben som finns. Möjligheten att kunna översätta din eller din kunds vision till en snygg och användarvänlig hemsida är definitivt en kreativ process. I vissa fall vill man dock tillbringa mindre tid...

Så installerar du WordPress manuellt – komplett guide

Många webbhotell erbjuder 1-click install av WordPress men det är inte dumt att veta hur du gör installationen från grunden. Dels får du full kontroll över detaljerna, dels ökar du din kunskap om hur saker och ting hänger ihop.

✔ Checklista: 10 saker att göra efter lanseringen av din WordPress-hemsida

Att en hemsida aldrig blir färdig är en gammal sanning. Här hittar du tips för bättre säkerhet, prestanda och sökmotoroptimering.

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

WordPress är inte bara den största plattformen för webbplatser – WooCommerce dominerar även e-handeln. Här kan ta del av några fantastiska fakta från 2020.

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.

10 oumbärliga guider till Divi

Här är de 10 bästa guiderna till Divi som förenklar och förbättrar ditt kreativa arbete. Passar både nybörjare och mer avancerade användare.

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.

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.