Hur man använder sidhuvuden och sidfötter med Elementor

En webbplats sidhuvuden och sidfötter är viktiga element. I de flesta fall tillhandahåller rubriken navigeringslänkar som förenklar navigeringen till olika delar av en webbplats. Å andra sidan innehåller sidfoten viktig information som webbplatsbesökare kan behöva, såsom en företagsadress eller kontaktinformation, för att nämna några amp .

Sidhuvuden och sidfötter tillhandahålls av en användares aktuella tema på WordPress. Dessa är vanligtvis väldesignade och lämpliga för de flesta användningsområden. Men om du vill anpassa dina teman måste du ändra koden; Det är då Page Builder- plugin kommer till användning. Du kan använda dem för att skapa och ändra webbsidakomponenter utan att känna till någon kod.

Denna handledning kommer att lära oss hur man skapar en sidhuvud och sidfot på en webbplats. Elementor Pro kommer att användas (eftersom grundversionen av Elementor inte innehåller de funktioner som är viktigast för att skapa dessa komponenter). Så ladda ner Elementor Pro och se till att den är påslagen.

Varför ska du välja Elementor som din sidbyggare?

Elementor är den mest avancerade sidbyggaren som tillåter användare att använda premiumelement för att skapa underbara design och layouter. Det är mycket fördelaktigt för nybörjare som inte har några förkunskaper om kodning. Dra 'n' drop-redigeraren i Elementor låter användare flytta runt widgets och objekt.

Elementor är en visuell sidbyggare som låter användare se hur deras sidor ser ut utan att byta läge.

Ett annat övertygande argument för att använda Elementor är att det mesta arbetet kan slutföras utan kostnad. Deras gratisutgåva är mer än kapabel att tillhandahålla adekvata webbplatsredigeringsmöjligheter. Vi kommer dock att gå igenom både gratis- och betalversionerna så att du kan välja den som passar dina behov bäst.

Följande är några av de viktiga aspekterna av Elementor som gör det värt besväret:

  • Dra och släpp-funktioner stöds.
  • Den har ett stort antal mallar.
  • Det finns över 90 widgets totalt.
  • Ingen kodning krävs för responsiv support.
  • Gör om och ångra alternativ är tillgängliga.
  • Autosave är tillgängligt.

Det skulle hjälpa om du bestämde dig för det allmänna arrangemanget av dina önskade sidhuvuds- och sidfotssektioner innan du utvecklar ett unikt sidhuvud. Att titta på den förgjorda layouten för sidhuvudsektionen kan ge dig många val.

Du kan välja mellan olika rubriker; den vanligaste och modernaste rubriken har en webbplatslogotyp i det vänstra hörnet, ett navigeringsfält i mitten och ett sökfältsavsnitt till höger.

Det finns oändliga möjligheter, och du kan konstruera vilken layout du vill.

Jag valde nr. 7 förgjorda rubrikmall; Detta är det vanligaste och enklaste sättet att använda en header på en WordPress-webbplats. Kopiera och klistra in rubrikmallens namn i Mallar > Rubrik > sökmall > klistra in det kopierade rubriknamnet .

När du har hittat den rubrikmall du vill ha, välj "Redigera med Elementor", så kommer du till Elementor Pro-sektionen för huvudbyggare.

Låt oss få igång den här festen.

Vad är en rubrik och vad gör den?

Den övre delen av din webbsida kallas en "webbplatshuvud." Rubriken är vanligtvis densamma på hela din webbplats. Vissa webbplatser använder dock olika rubriker för olika delar av webbplatsen.

Din rubrikdesign kommer att ge dina användare deras första intryck av din webbplats, oavsett om de har kommit till din hemsida, om sidan eller annat individuellt innehåll. Och om den är väldesignad kommer den att fånga användarens uppmärksamhet och locka dem att fortsätta rulla och läsa.

Rubriken kan också hjälpa till att marknadsföra ditt företags varumärkesidentitet.

Jag använder funktioner som företagets logotyp, typsnitt, färger och övergripande varumärkesspråk.

Webbplatsnavigering, webbplatssökning, en kundvagn (för försäljningssajter), uppmaningsknappar (CTA) och andra funktioner som förbättrar användarupplevelsen och ökar omvandlingsfrekvensen finns alla i rubrikerna.

En sidfot är en del av en webbsida som visas längst ned på sidan. De visas vanligtvis konstant på hela webbplatsen, på alla sidor och inlägg, liknande rubriker.

Sidfötter förbises ofta, vilket är ett slöseri med potential, med tanke på att de visas på varje sida på webbplatsen. De är lika avgörande för headers.

Din sidfotsdesign kan visa användbar och viktig information som registrering av nyhetsbrev, information om upphovsrätt, användarvillkor och integritet, en webbplatskarta, kontaktinformation, kartor, webbnavigering och mycket mer, beroende på vilka inställningar du väljer.

Hur man gör en header

Vi kommer att skapa en anpassad rubrik i det här avsnittet. Oroa dig inte om det verkar skrämmande; vi börjar inte om från början. Istället kommer vi att använda Elementór Pros mallar, designade av Elementors designteam.

Utveckla en huvudmall

På WordPress adminpanel, håll muspekaren över mallar och klicka på Lägg till ny för att skapa vår Header.

Ett modalt fönster kommer att dyka upp när du har blivit dirigerad. Välj Rubrik från rullgardinsmenyn, namnge rubriken och klicka på " Skapa mall ":

Detta kommer att starta Elementor-redigeraren. Efter det kommer du att presenteras med en lista med mallar att välja mellan. Så välj en som tilltalar dig:

Det bör dyka upp ovanpå Elementor-redigeringssektionen när du har valt en mall:

Skapa en logotyp: Det första steget är att skapa en logotyp. Ställ in logotypen i webbplatsens Live Editor för att placera den i rubriken. Välj en logotyp genom att klicka på Webbplatsidentitet.

När du har bestämt dig för en logotyp klickar du på Publicera .

Din webbplats logotyp bör nu finnas i rubriken om du uppdaterar Elementor-gränssnittet:

Efter det kan du göra vilka ändringar du vill.

Göra ändringar i rubrikmenyn

Nästa sak vi bör göra är att ändra menyn. Om du har skapat en meny kommer mallen automatiskt att införliva den:

Här är vår menystruktur, som du kan se återspeglas i rubrikmallen:

Om du har mer än en meny kan du uppdatera innehållet vid behov.

Du kan redigera dess egenskaper precis som vilken annan widget som helst.

Om vi ​​behöver lägga till fler artiklar kan vi lägga till fler sektioner i vår Header:

Låt oss börja med att lägga till en rubrik och några ikoner för sociala medier:

Efter det kan du göra vilka ändringar du vill. Så här blev vår redigering:

Header Publication

Du kan nu publicera rubriken när du är klar med att ändra den. Vi använder rubriken på hela vår webbplats i exemplet amp , så vi väljer det valet efter att ha valt Lägg till villkor:

Och här är ett amp på en sida från vår livesajt:

Processen att skapa en sidfot är ganska lik den att konstruera en sidhuvud. För att skapa en, skapa en ny sidfotsmall så här:

Bestäm sedan en mall. Sidfot finns i en mängd olika former och storlekar. Vissa innehåller fast information, medan andra har kontaktformulär. Välj en mall som passar dina behov.

Mallen vi valde för vår hemsida är följande:

Du kommer att se sidhuvudet så snart du börjar redigera (om du ställer in villkoret att det ska visas på alla sidor).

Ändra sidfoten efter behov; Så här ser vår revidering ut:

Publicera sidfoten när den är klar:

Färdig produkt

Så här ser det färdiga resultatet ut. Både sidhuvudet och sidfoten används nu på vår hemsida:

Detta är den viktigaste fasen, och du måste se till att dina sidhuvuds- och sidfotssektioner är lyhörda. Eftersom en meny i full bredd vanligtvis inte passar mobilvyn måste du veta hur din design kommer att se ut på mobilskärmen. De lyhörda omkopplarna längst ned i Elementors sidofältssektion kan ändra mobil- och flikversionerna.

Du kan testa känsligheten hos din sidhuvud och sidfot på olika sätt. Du kan till amp använda verktyg som Browserstack, CrossBrowser Testing och Google Resizer för att säkerställa att dina webbsidor är så responsiva som möjligt. Du kan också göra det manuellt genom att experimentera med olika enheter.

Att avsluta saker och ting

Jag hoppas att den här guiden hjälpte dig att snabbt utveckla dina unika sidhuvuds- och sidfotssektioner med hjälp av Elementor Pro. WordPress har många funktioner, men det tillåter bara några få modifieringar i sidhuvudet och sidfotssektionerna, äntligen fixade med Elementor Pro-sidbyggaren. Med mycket bättre kontroll över dina webbplatselement kan du nu bättre demonstrera din webbplats vision. Dessutom har Elementors funktionalitet förbättrats genom att använda gratistillägg, vilket gör det möjligt för användare att anpassa sina webbplatser med mer avancerade funktioner.

Hanson F.

Nya Inlägg

WordPress-temajämförelse: Astra vs OceanWP

Två av de mest populära WordPress-temanen på marknaden är Astra och OceanWP. Professionell…

2 januari 2022

Jämförelse av WordPress-nyhetstema: Tidning vs. Astra

Att skapa en utmärkt nyhetswebbplats kräver inte att du blir webbdesigner. Vi…

25 oktober 2021

Skapa en nyhetsrelaterad webbplats med tidningstema

The Newspaper-temat är ett av de viktigaste WordPress-teman som designats av tagDiv, en...

18 oktober 2021

Hur man bygger en e-handel med Avada WooCommerce Builder

När det gäller att skapa en onlinebutik är WooCommerce det bästa plugin . Den…

4 oktober 2021

Hur man använder sticky header och rullningseffekter med Elementor

En rubrik är i allmänhet det första en person ser när de besöker din webbplats,...

21 september 2021

Hur man använder Avadas sidhuvud, sidfot och kolumnlayoutbyggare

Vår alldeles egna sidbyggare, Avada Builder, finns nu tillgänglig i två gränssnitt: Avada...

16 september 2021