1. Introduktion
2. Webbhotell & domän
3. Installera WordPress
4. Välj och anpassa tema
5. Lär känna WordPress
6. Designa med Divi Builder
7. Sidmallar i Divi Theme Builder
8. Exportera & importera layouter
9. Checklista när du är färdig
10. Fira!
Du är en stjärna!
6.2 Skapa en global header och meny i Divi Theme Builder
- Din genomförda andel av hela kursen:
Ställ in vilka länkar som ska visas i menyn under Utseende » Meny
- Skapa din meny med top bar och navigation i Divi Theme Builder.
- Skapa en sticky meny som hänger med när du scrollar ner på sidan.
- Skapa en top bar med knappar till sociala medier och en call to action-knapp
- Skapa en snygg hamburgermeny / mobilmeny
Under videon hittar du alla länkar, filer och kodsnuttar som nämns i kapitlet. 👇
Resurser och relaterat innehåll
Förhindra radbryt i mobila enheter
display:flex;
CSS-kod för en bättre mobilmeny
/* X-ikon i öppen mobilmeny */
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
}
/* Fullbredd mobilmeny */
.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}
- Demo-sajten Divistugan.nu
- 20% rabatt på Divi (annonslänk)
- Webbhotell från 19 kr/mån hos Inleed (annonslänk)
Detta är en kostnadsfri grundkurs om hur du skapar en hemsida med WordPress och Divi. Kursen innehåller annonslänkar till Elegant Themes (som står bakom Divi) och Inleed (som tillhandahåller webbhotell och domäner). Om du köper något via en annonslänk får vi på Diviguiden en liten provision, men det kostar aldrig mer för dig. Respektive företag äger rättigheterna till sina varumärken. Kursen är ett fristående och oberoende initiativ från Diviguiden. Tack vare ditt stöd kan vi fortsätta skapa mer kostnadsfritt innehåll.
Kursledaren Victor Duse är född 1980 och har över 20 års erfarenheter av webbdesign, webbutveckling och utbildning inom sektorer från media och marknadsföring till energi, industri och offentlig verksamhet. Han är grundare av Diviguiden, DiviMundo och WordPress-byrån Duse Media med säte i Malmö. Bortom tangentbordet har Victor svart bälte i Brasiliansk Jiu-Jitsu och en stor aptit på choklad.
Lämna en kommentar
Ris, ros eller frågor? Lämna gärna en kommentar på kursavsnittet!
Hej
Min menyrad lägger sig på höjden, när jag infogar min logga, då jag bygger min global header
Har försökt placera på olika sätt.
Endast då jag centrerar funkar det.
Då hamnar logga övers och menyerna på en rad under, vill att det skall se ut som på kursen.
Hej Lars! Jag misstänker att problemet är kopplat till SSL då det finns varning för mixat innehåll (se de två sista punkterna på: https://www.whynopadlock.com/results/d30b18b9-b808-4137-bee1-1bc7e81ae50f)
Dubbelkolla så att du har https:// (inte http://) i både WordPress Address och Site Address under Settings » General
Spara inställningarna (även om de redan var rätt) och gå sedan in på Divi » Theme Options » Builder » Advanced och rensa Static CSS File Generation.
Om inget av detta hjälper kan du testa att installera och köra pluginet Really Simple SSL.
Hej!
Så otroligt mycket hjälp jag fått genom denna kurs. Tack för det!
Nu jag har jag dock kört fast och vet inte hur jag ska komma vidare.
Min globala meny syns inte på alla sidor. Det finns med på alla sidor utom startsidan.
Kan inte hitta någonstans i kursen där jag finner instruktioner om hur man gör när den inte finns med på alla mina sidor.
Allt gott!
Tack Sofie, vad kul att höra! Hm, just det felet har jag inte stött på innan. Vad visas istället? Har du en länk så att jag kan kika?
Jag kan spontant tänka mig två saker:
1. Testa att rensa webbläsarens cache, Divis cache (Divi » Theme Options » Builder » Advanced » Clear Static CSS) och cache-pluginet (om du använder ett).
2. Om inte det hjälper, dubbelkolla att du inte har råkat lägga in ett UNDANTAG i Theme Buildern, d.v.s. att headern ska visas på alla sidor FÖRUTOM på startsidan. Här kan du se hur man skapar undantag och regler i Theme Buildern (inlägget gäller footers men samma princip gäller för headers också): https://victorduse.com/en/blog/how-to-hide-the-divi-footer-without-css/
Tack för snabbt svar!
Det visas inget alls, utan ser ut så här https://genbacks.se/
På de övriga sidorna så återfinns headern med den meny jag byggt med hjälp av dina instruktioner. Där ser ut så här i nuläget https://genbacks.se/sortiment/
Önskar komma vidare så jag kan börja med min utformning på riktigt. Nu har jag bara slängt in ditt som datt för att testa mig fram.
Hittade inget Clear static CSS under Builder -> Advanced men har iaf rensat cachen.
Kollade även via länken som du skickade. Där finns inget att hämta tyvärr. Jag har du byggt enligt dina instruktioner så det ligger enbart global header där, och den ska vafra synligt för alla sidor om jag förstått instruktionerna rätt.
Hej igen! När jag går in på startsidan på https://genbacks.se/ så ser jag menyn men jag ser även ett tomt bloggflöde. Jag misstänker att du inte vill ha det så. Gå i så fall in på Settings » Reading och välj att du vill ha en ”Static Page” som startsida. Sedan väljer du vilken sida som ska vara startsida i rullgardinen och sparar.
Om jag går in på https://genbacks.se/startsidan/ (som jag misstänker att du vill ha som startsida) och kollar i koden så ser jag att du har valt ”Blank page” som template. Det är anledningen till att menyn inte visas. Ändra den från Blank Page till Default Template istället så kommer du att se menyn. Här hittar du Template-inställningen: https://www.elegantthemes.com/documentation/divi/blank-page/
Tack snälla för din hjälp!
Jag har lyckats lösa den biten. Dock har jag ytterligare en fråga som jag är tacksam om du vill hjälpa mig med.
Hur är de möjligt att färgen ser olika ut i headern, trots att jag kopierat och använder samma färgkod både i modul och sektion? I modulen blir den gröna färgen betydligt mörkare. Jag vill ha samma färg längs hela sektionen.
Om du vill kolla på http://www.genbacks.se så syns det tydligt.
Hur kan jag få till detta?
Du har samma färg men olika grad av opacitet. I topplisten har du rgba(0,38,5,0.89) där sista siffran betyder 89% opacitet och i menyraden under har du rgba(0,38,5,0.76) vilket innebär 76% opacitet. Opaciteten har ett eget reglage så testa att dra i det, alternativt högerklicka på den bakgrundsfärg som du vill ha i sektionens designinställningar och välj ”Copy background” och gå sedan in i motsvarande inställning i den andra sektion och välj ”Paste background”.
Hej Victor,
Kan jag någonstans i kursen hitta hur jag tar bort ett indrag i undermeny (mobil)?
Önskar dig en trevlig sommar!
/ Monica
Hej Monica,
Det kräver lite CSS. Om du vill ta bort indraget i nivå 3 på lönken i din kommentar kan du lägga in följande kod under Divi » Theme Customizer » Additional CSS:
#dtb-m-menu ul.dtb-mobile-menu li li li a {padding-left:18px !important;;
}
Hej!
Tack för en utmärkt kurs. Jag har dock valt att ladda ner en layout från Divi och ändrar i den.
Då kommer det med en footer och den verkar inte vara global, för när jag ändrar på startsidan,
så följer inte ändringarna med till nästa sida. Hur justerar jag det?
Jag har också problem med inställningarna i mobiltelefonvyn. Jag har tagit bort bilder och text i den
färdiga layouten, som jag inte ville ha. Det fungerar i datorn, men går jag över till mobilvyn, så blir
det ett stort långt tomrum – dvs både sektionen och raden blir evighetslånga innan footern kommer.
Om jag försöker dra tillbaka sektionen och ramen i mobilläget, så påverkar det utseendet i datorvyn.
Jag försöker ändra storlek på ram i verktygslådan under ”design”, men det går inte heller.
Hur ordnar jag detta?
En tredje fråga. När jag går in på hemsidan i min mobil, så kan man inte förstora och förminska foton
och texter, så som man alltid kan på andra hemsidor i mobilen. Jag får markera ”öppna webläsaren” för
att kunna göra det. Ska det vara så? Det kan man inte vänta sig att vår målgrupp ska klara. Hur ordnar
jag att hemsidan fungerar ”normalt” i mobilläge?
Hej Christina! Dina två första frågor besvaras i kursen, så jag rekommenderar att du kickar dig runt i den.
När det gäller zoom i mobilläget kan du antingen installera ett gratis tillgänglighets-plugin eller så lägger du lägga in en kodsnutt i functions.php.