Er du netop gået igang med, at designe din egen hjemmeside i WordPress med Elementor Pro?
Denne guide gennemgår hvordan du opretter en responsive header(sidehoved).
Jeg har optaget en video hvor jeg forklare hvordan jeg opsætter headeren – men hvis du synes det går for hurtigt, så har jeg også skrevet tutorialen nede under videoen.
Kommer snart
Trin 1: Tilføj ny template i Elementor
Hvis du har købt Elementor Pro, og du gerne vil ændre udseendet på den standard header som alle andre har. Så kig endelig med her, hvor jeg forklare trin for tri, hvordan du opretter et lækker og responsive header som fungerer på alle enheder!
Når du skal oprette din responsive header, så skal du finde menupunktet: Templates -> Themebuilder
Trin 2: Vælg skabelon
Vælg header som den skabelon du vil bygge – og herefter tryk på knappen: add new
Trin 3: Byggelse af header
Når vi skal til at bygge vores nye header fra bunden af, så skal skræmen gerne være blank – som vist på billedet ->
Vi gør ikke brug af de skabeloner som Elementor allerede har designet for en. Grunden til jeg ikke anbefaler disse, er fordi de ikke er repsonsive, og de fleste af dem ser kun flotte ud på PC version.
Trin 4: Vælg struktur på din header
- Tryk på den røde plus knap – også vælg den trejde række hvor der er 3 bokse i.
- Efterfølgende skulledu gerne kunne se en sektion med 3 bokse i.
Trin 5: baggrund og padding
Hvis du hover over sektionen, så kommer der en blå boks frem – tryk på de 6 prikker i midten.
Øverst i ventre side af skærmen står der: Edit section.
Her er der et menupunkt der hedder layout – tryk på den og gør følgende:
- Content width: Full width.
Når du har gjort det, så går du ind under menupunktet background – også gør du følgende:
- Tryk på penslen: giv den en baggrunds fave.
Efter du har angivet din background color, så tryk på menupunktet advanced, og gør følgende:
- Sæt padding til: 10px, 50px, 10px, 50px.
Når du har gjort dette, så burde du gerne ha’ noget der ligner det som vist på billedet nedenfor.
Trin 6: Indeling af kolonner
Ligenu har du 3 kolonner inde i den section. Jeg vil gerne have dem opdelt så den kolonne i midten er større end dem ude i siderne.
Hvis du hover over den kolonne helt til venstre, så kan du se der kommer et ikon frem. Tryk på den, også skulle du gerne se at du er inde under et menupunkt der hedder layout.
Sæt column width til at være 20% – og gør det samme for den helt til venstre.
Når du har gjort det, så skulle din section/kolonner gerne vises som vist på dette billede
Trin 7: Indsæt moduler/elements
- Indsæt din hjemmesides logo i den kolonne placeret helt til venstre.
- Indsæt nav menu i den kolonne der er placeret i midten.
- Indsæt en knap i den kolonne placeret til højre – dette kommer til at være en call to action funktion.
Når du har gjort dette, så burde du have et resultat vist som på billedet nedenfor.
Trin 8: Indsæt moduler/elements
- Indsæt din hjemmesides logo i den kolonne placeret helt til venstre.
- Indsæt nav menu i den kolonne der er placeret i midten.
- Indsæt en knap i den kolonne placeret til højre – dette kommer til at være en call to action funktion.
Når du har gjort dette, så burde du have et resultat vist som på billedet nedenfor.