Skapa en personlig header med Divi temabyggare

Publicerad: 12 januari, 2020
Med Divis nya temabyggare är det superenkelt att anpassa huvudet (headern), kroppen (body) och sidfoten (footer) på sajten. Du kan även bygga egna mallar för dina inlägg och arkiv samt för enskilda sidor.

Dags att börja skapa en header i Divi

Börja med att öppna temabyggaren (Theme Builder) som du hittar i huvudmenyn under menyalternativet Divi.

Skapa en personlig header med Divi temabyggare 1

Det första man möts av är menyn där man kan skapa anpassade teman för olika delar av en sida, samt konfigurera dem så de används globalt över hela webbplatsen eller enbart på en specifik sidtyp, som t ex inlägg.

Skapa en personlig header med Divi temabyggare 2

I vårt fall ska vi skapa en ”Global Header” för divi.se. Dvs det är den översta delen av webbsida, huvudet, där loggan, menyn och kanske en sk CTA-knapp (call to action) visas.

Klicka på ”Lägg till Global Header” och du får välja att ”bygga en global header” eller ”lägga till från bibliotek”. Vi skapar oss en egen header från grunden, så väljer det översta alternativet.

Bestäm strukturen

Det första vi får göra sedan är att infoga en rad och berätta hur många kolumner headern ska bestå av. Jag väljer att skapa en enkelkolumn överst där jag kan ha en uppmaning till mina besökare att köpa Divi till 20% rabatt. Vill du också ta del av denna rabatt, så klicka här.

Divi enkel kolumn

Innan jag går vidare sätter jag padding på sektionen ovan- och nertill till 0px. För att headern inte ska ta all plats. Detta är något du kan experimentera med för din sida.

Skapa en personlig header med Divi temabyggare 3

Kopiera sedan sektionen så vi får en sektion 2 att ha vår meny i. Så här ser strukturen ut för mig nu.

Divi temabyggare header

Konfigurera sektion 1 & 2

I den översta sektionen så adderar jag en textmodul där jag skriver ”Få 20% rabatt på Divi – klicka här”. Den länkar jag sedan till min speciella sida där man verkligen får 20% rabatt på Divi.

Jag sätter bakgrundsfärgen på sektionen till min orangea färg, ställer in typsnitt och andra inställningar för textmodulen. Eftersom jag har en vald länkfärg på mina länkar så tvingar jag texten att visas som vit genom att addera lite CSS-style till min textmodul.

<a style=”color: #fff” href=”https://divi.se/20procent”>Få 20% rabatt på Divi – klicka här</a>

I den undre sektionen adderar jag en menymodul med min primära meny. Jag anpassar menyn så den passar min design och sparar.

Din nya header

Stäng sedan ner ”global header layout” och spara. Den nya globala header är nu aktiv och synlig på alla sidor. Vill du göra ändringar så klicka bara på pennan i den gröna rutan och lägg till flera rader, moduler, bilder baserat på dina egna behov.

Skapa en personlig header med Divi temabyggare 4

 

 

 

 

 

 

Läs även

Inga resultat hittades

Sidan du begärde kunde inte hittas. Försök förfina din sökning eller använd navigeringen ovan för att lokalisera inlägget.