Har du missat del 1, del 2 eller del 3 av vår lär dig WordPress serie? Gå till del 1 här, gå till del 2 här eller gå till del 3 här.
Lär dig WordPress Del 4 - Anpassade Headers & Footers
Lär dig WordPress så att du kan bygga en egen hemsida för att marknadsföra ditt företag på bästa sätt och nå ut till fler kunder? WordPress är världens främsta hemsidebyggande verktyg där du enkelt kan klistra in de objekt du vill använda och skapa din egen hemsida utan kunskap inom kodning.
Att ha en effektiv responsiv hemsida som skapar mervärde för dina kunder och besökare är idag viktigare än någonsin. En lättnavigerad hemsida med en samhörande webbdesign får dina kunder att känna tillit och förtroende för ert företag. Med tanke på att det idag inte är lika svårt som det har varit förut att skapa en hemsida så finns det ingen anledning för dig att inte införskaffa en. Lär dig WordPress med vår guide.
Innehållsförteckning
Sammanfattning
I del 1 och del 2 av vår serie ’lär dig WordPress’ skapade vi undersidor, ändrade viktiga inställningar, fixade en meny till headern och skapade hela startsidan. I del 3 jobbade vi med responsiviteten av vår startsida så den även ser inbjudande ut på mindre format som mobiler och läsplattor.
Nästkommande del fyra av vår WordPress serie kommer vi att skapa en anpassad Header och Footer. När man först installerar sin WordPress hemsida får man en standard Header och Footer automatiskt. Dessa är oftast väldigt simpla och tråkiga. Footern brukar även ha information som man inte vill ha på sin hemsida. Vi går även igenom hur man tar bort ’Powered by Astra’ texten och ersätter den med ditt företagsnamn istället.
Vi skapar headern först
Detta är headern som vi nu tänker skapa:
Med Elementor free version så kan man inte skapa custom headers så vi får därför installera ett tillägg man kan skapa headers och footers med.
- Gå till Tillägg > Lägg till nytt > Sök på ’header’ > Installera ’Elementor Header & Footer Builder’ > Aktivera tillägget.
- Gå sedan till Utseende > Elementor Header & Footer Builder > Add New.
- Välj ”I’m a WordPress: Beginner” & ”I’m building website for: Myself/My company > Next.
- Skrv in ditt namn (kan vara påhittat), sedan en fungerande mail och tryck Submit.
- Namnge din Header > Display on: Entire Website > User roles: All > Checka for rutan ”Enable Layout for Elementor Canvas Template?” > Tryck publicera i övre högra hörnet > Redigera med Elementor
- Du borde nu ha kommit till en tom Elementor canvas sida.
- Tryck på plustecknet och välj en två kolumns sektion.
Skapa en header:
Lägg till logotyp i header
Har du en särskild logo du vill använda dig av så gör du såhär:
- I vänsterspalten längst upp i vänsterhörnet finns en hamburgaremeny med tre streck.
- Tryck på hamburgaremenyn > Webbplatsinställningar > Webbplatsens identitet > Webbplatslogo. Här kan du ladda upp din fil med logotypen och spara.
- Tryck sedan på krysset för att gå tillbaka till headern.
Redigera element i header
Nu ska vi lägga till en logotyp och vår navigeringsmeny samt placera dom korrekt.
- I vänsterspalten söker du på ’Logo’. Välj elementet Site Logo HFB och applicera det i den vänstra kolumnen i vår header sektion.
- Sök sedan på ’Nav’ och välj elementet Navigation Menu HFB och applicera det i den andra kolumnen i sektionen.
- Vi vill göra kolumnen för vår logo mindre eftersom vår meny inte riktigt får plats och vår logo tar inte upp så mycket plats.
- Om du placerar din mus i högerändan av den vänstra kolumnen med logon i så bör du se ett sådant här tecken ”<||>”. Om du håller inne musen och drar till vänster så kan minska storleken av kolumnen med logon i.
- Gör kolumnen relativt liten tills du tycker att din logo har en passande storlek och din navigeringsmeny får plats med gott om utrymme.
Applicera logo och nav meny:
Ändra storlek på kolumner och logo:
Ändra färg på header och element i headern
Först vill vi ändra bakgrundsfärg på headern. Om du har en vit logo just nu så ser du antagligen inte den just nu eftersom vår header har en vit färg men det ska vi ändra nu.
- Tryck på de tre punkterna i sektionen med våra header element.
- I vänsterspalten går du till Stilfliken > Bakgrund > Klassisk (penseln) > och väljer en bakgrundsfärg som du vill ha.
- Vi vill ha en mörkblå bakgrundsfärg eftersom det är den vi har i vår prototyp.
Nu ska vi ändra färg på elementen i vår header och hover färgen som uppstår när man håller musen över elementen.
- Tryck på navigeringsmenyn i den högra kolumnen. Den lilla pennan som kommer upp när du håller musen över navigeringsmenyn.
- Gå till Stilfliken och längst ner hittar vi Text Color, ändra den till vit.
- Ovanför Text Color ser du tre olika flikar ”Normal, Hover & Active”. Tryck på Hoverfliken.
- Ändra färgen till den färg elementen i navigeringsmenyn ska ändras till när man håller musen över dom.
- Vi väljer även att lägga till ett streck under våra text element.
- Ovanför Text Color finns Link Hover Effect välj Underline. På raden under kan man även välja hur linjen skall komma in, vi väljer Drop in.
- Ändra färgen på detta streck till samma röda färg, längst ner där vi ändrade färg på texten. Under Link Hover Effect Color.
- Ändra färgen för elementen när man är inne på en specifik sida. Om du är inne på startsidan så kommer alltså ’Hem’ knappen i navigeringsmenyn ha en annan färg.
- Tryck på Activefliken och ändra färgen. Vi valde vår röda färg.
- Lägg till ett streck under texten enligt instruktionerna i steg 6 & 7.
- Nu är vår header klar men skulle du vilja ändra höjden på headern så trycker du på sektionen och under Layout på Innehållsfliken finner du Höjd där du väljer Min. höjd. Skriv in den höjd du vill ha genom att dra i reglaget.
Ändra bakgrundsfärg på headern:
Ändra färg på element i header:
Gör headern responsiv
Vår header är nu klar för dator men vi har fortfarande inte anpassat den för mindre upplösningar som mobil och läsplattor.
Tryck återigen på mobil/läsplatta ikonen nere i vänsterhörnet på Elementor panelen för att komma till redigeraren för mobil och läsplatta, som vi gått igenom i del 3 av vår serie där vi går igenom responsivitet av hemsidan. När du har kommit till mobil redigeraren, skriv in 450 px uppe i högra hörnet i den första rutan med ett ’W’ framför.
- Markera nu den översta kolumnen med logon i.
- Under Layout i innehållsfliken till vänster ändrar vi kolumnbredden till 50%.
- Markera sedan den andra kolumnen med hamburgaremenyn i och ändra på samma sätt den kolumnen till 50%.
- Du kan laborera lite själv med kolumnbredden om du vill att logon ska vara mindre eller större. Men det viktiga är att totalbredden av kolumnerna blir totalt 100% så dom lägger sig i kanterna.
- Markera sedan själva hamburgaremenyn genom att hålla musen över den och tryck på den vita pennan som ploppar upp på höger sidan.
- Under Innehållsfliken trycker du på Layout och ändra Alignment till Right.
- Du kan även på denna fliken längst ner ändra ikonerna om du vill detta.
Nu är vår header anpassad för mobil
Vi behöver fortfarande ändra färgen på vår hamburgaremeny eftersom den har en ful grå färg. Vi behöver även ändra bakgrundsfärgen på menyn som ploppar ner när man trycker på hamburgaremenyn eftersom våra element ha en vit färg så syns dom inte på den vita bakgrunden.
- Gå till Stilfliken > Menu Trigger & Close Icon > Color och välj den färgen du vill använda, vi valde en vit färg.
- Gå sedan till Stilfliken > Dropdown > Background Color och väljer den färg vi vill ha som bakgrundsfärg. Rekommenderat är att använda samma färg som din header har, vi valde vår blåa färg igen.
- Längre ned på samma sida hittar vi även Top Distance där vi skriver in 20px. Så att menyn lägger sig under headern och inte under logon. Storleken på Top Distance får man laborera lite själv med. Anger man för mycket distans så blir det ett mellanrum mellan menyn som ploppar ner och headern och då syns den vita bakgrundsfärgen, vilket vi inte vill.
- Vi skulle egentligen vilja centrera vår text i menyn som ploppar ner. Men tyvärr så finns det inte någon möjlighet till detta i gratis versionen utan kodning så vi lämnar dom på vänster sidan.
Alla inställningar vi har gjort nu fungerar även bra på läsplattor och det enda vi behöver fixa för läsplattor är Top Distance igen.
- Tryck på Läsplatta ikonen längst upp och följ sedan steg 3 ovanför för att lägga till 20px Top Distance igen.
Ändra kolumnbredd:
Lägg hamburgaremenyn till höger:
Ändra färger på ikoner:
Ändra bakgrundsfärg och top distance:
Nu ska vi skapa vår egen footer
Gå tillbaka till din WordPress admin panel genom att trycka på hamburgaremenyn längst upp till vänster och välj Tillbaka till adminpanelen. Gå sedan till Utseende > Elementor Header & Footer Builder > Add New > Namnge den ’Footer’ > Type of template: Footer > Display on: Entire Website > User roles: All > Enable Layout for Elementor Canvas Template? Check > Publicera > Redigera med Elementor.
Du borde nu vara på en tom Elementor canvas igen. Skapa en ny sektion genom att trycka på plustecknet. Eftersom elementen i den footer vi ska skapa är staplade över varandra så skapar vi en sektion med en kolumn.
Vi ska nu lägga in alla våra element för att sedan ordna med placering, färger och annan design.
- Sök återigen efter ’logo’ i Elementor panelen. Dra in Logo elementet i kolumnen i sektionen.
- Välj sedan textredigeraren och dra in den under logon.
- Sök efter ’soc’ och dra in Sociala Ikoner elementet under textredigeraren.
- Välj återigen textredigeraren och applicera den underst i sektionen efter sociala ikoner.
Nu borde din footer se ut på följande sätt:
Nu ska vi redigera elementen och footern
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Först vill vi skapa lite utrymme längst upp och en bakgrundsfärg.
- Markera sektionen.
- Gå till Avanceratfliken > Padding och avmarkera sammanlänkning. Skriv sedan in 50px-0-0-0.
- Gå sedan till Stilfliken > Bakgrund > Klassisk och välj samma färg som din header har om du nu vill använda det, vilket vi rekommenderar.
Padding och bakgrundsfärg:
Ändra textfärg, centrering och ikoner
- Markera första textredigeraren som vi har applicerat.
- Gå till Stilfliken och under textfärg ändrar vi till en vit färg.
- I samma flik under justering ändrar vi till mittencentrering.
- Gör samma sak på vår andra textredigerare.
Ändra ikoner
- Markera Sociala Ikoner elementet.
- Under innehåll kan du trycka på ikonerna för att ändra ikoner och du kan även lägga till fler ikoner med knappen ’Lägg till objekt’. Vår footer ska ha ikonerna: Facebook, Instagram, Pinerest och Youtube.
- Vi lägger till ett objekt och byter alla ikoner mot de vi ska använda.
- Gå till Stilfliken > Färg: Anpassad och välj den primär och sekundär färg du vill använda dig utav.
- Ändra sedan storleken på ikonerna till 20px.
- Ändra sedan mellanrum mellan ikonerna genom att ange 30px i rutan för Mellanrum.
- Vi vill ha runda ikoner så vi ändrar även Kantradien längst ner på sidan till 30px runt om.
Nu ska vi anpassa avstånd mellan texten i footern.
- Markera andra textredigeraren och under Stilfliken > Typografi ändrar vi radavstånd till 0.
- Gå till Avanceratfliken > Margin och tar bort sammanlänkning och skriver in 100px-0-0-0.
Centrering av text och textfärg:
Ändra ikoner:
Stil på ikoner:
Ändra radavstånd på text:
Lägg till margin på understa texten:
Nu är vår footer klar och ditt resultat borde se ut ungefär såhär:
Detta var allt för del 4 i vår serie 'lär dig WordPress'. I vår sista del, del 5, går igenom länkar och finslipar vår hemsida.
Gå till Del 5 i serien lär dig WordPress.
