Et websteds sidehoveder og sidefødder er væsentlige elementer. I de fleste tilfælde giver Headeren navigationslinks, der forenkler navigering til forskellige dele af et websted. På den anden side indeholder sidefoden vitale oplysninger, som besøgende på webstedet kan kræve, såsom en virksomhedsadresse eller kontaktoplysninger, for at nævne nogle få amp .
Sidehoveder og sidefødder leveres af en brugers aktuelle tema på WordPress. Disse er normalt veldesignede og passende til de fleste af deres anvendelser. Men hvis du vil tilpasse dine temaer, bliver du nødt til at ændre koden; Det er her, Page Builder- plugin kommer til nytte. Du kan bruge dem til at oprette og ændre websidekomponenter uden at kende nogen kode.
Denne tutorial vil lære os, hvordan man laver en sidehoved og sidefod på et websted. Elementor Pro vil blive brugt (da grundversionen af Elementor ikke indeholder de funktioner, der er vigtigst for at skabe disse komponenter). Så download Elementor Pro og sørg for, at det er tændt.
- Hvorfor skal du vælge Elementor som din sidebygger?
- Elementor giver dig mulighed for at vælge hovedlayoutet for din tilpassede sidehoved og sidefod.
- Hvad er en header, og hvad gør den?
- Hvad er en sidefod helt præcist?
- Sådan laver du en header
- Udvikling af en header-skabelon
- Foretag ændringer i overskriftsmenuen
- Overskriftsudgivelse
- Sådan laver du en sidefod
- Udvikling af en footer-skabelon
- Sidefodsændringer
- Færdigt produkt
- Undersøg dine sidehoved- og sidefodssektioner for lydhørhed.
- At bringe tingene til en ende
Hvorfor skal du vælge Elementor som din sidebygger?
Elementor er den mest avancerede sidebygger, der giver brugerne mulighed for at bruge premium-elementer til at skabe smukke designs og layouts. Det er meget fordelagtigt for begyndere, der ikke har nogen forudgående viden om kodning. Drag 'n' drop-editoren i Elementor giver brugerne mulighed for at flytte rundt på widgets og elementer.
Elementor er en visuel sidebygger, der giver brugerne mulighed for at se, hvordan deres sider vises uden at skifte tilstand.
Et andet overbevisende argument for at bruge Elementor er, at det meste arbejde kan udføres uden omkostninger. Deres gratis udgave er mere end i stand til at give tilstrækkelige webstedsredigeringsmuligheder. Vi vil dog gennemgå både de gratis og betalte versioner, så du kan vælge den, der passer bedst til dine behov.
Følgende er nogle af de vigtige aspekter af Elementor, der gør det umagen værd:
- Træk og slip-funktionalitet understøttes.
- Den har et stort antal skabeloner.
- Der er over 90 widgets i alt.
- Der kræves ingen kodning for responsiv support.
- Gentag og fortryd muligheder er tilgængelige.
- Autosave er tilgængelig.
Elementor giver dig mulighed for at vælge hovedlayoutet for din tilpassede sidehoved og sidefod.
Det ville hjælpe, hvis du besluttede dig for det generelle arrangement af dine ønskede sidehoved- og sidefodssektioner, før du udviklede et unikt sidehoved. Hvis du ser på det forudlavede sidehovedsektionslayout, kan du få mange valgmuligheder.
Du kan vælge mellem forskellige overskriftssektioner; det mest almindelige og moderne udseende Header har et webstedslogo i det venstre hjørne, en navigationslinje i midten og en søgelinjesektion til højre.
Der er uendelige muligheder, og du kan konstruere ethvert layout, du ønsker.
Jeg valgte nr. 7 præ-lavede header skabelon; Dette er den mest almindelige og enkle tilgang til at bruge en header på et WordPress-websted. Kopier og indsæt header-skabelonnavnet i Skabeloner > Header > søgeskabelon > indsæt det kopierede headernavn .
Når du har fundet den header-skabelon, du ønsker, skal du vælge "Rediger med Elementor", og du vil blive ført til Elementor Pro-headerbuilder-sektionen.
Lad os få denne fest i gang.
Hvad er en header, og hvad gør den?
Den øverste del af din webside kaldes en "websideoverskrift". Overskriften er normalt den samme på tværs af hele dit websted. Nogle websteder bruger dog forskellige overskrifter til forskellige dele af webstedet.
Dit headerdesign vil give dine brugere deres første indtryk af dit websted, uanset om de er ankommet til din hjemmeside, om side eller andet individuelt indhold. Og hvis det er veldesignet, vil det fange brugerens opmærksomhed og lokke dem til at fortsætte med at rulle og læse.
Headeren kan også hjælpe med at promovere din virksomheds brandidentitet.
Jeg bruger funktioner som virksomhedens logo, skrifttype, farver og overordnede brandsprog.
Webstedsnavigation, webstedssøgning, en indkøbskurv (til salgswebsteder), knapper til handling (CTA) og andre funktioner, der forbedrer brugeroplevelsen og øger konverteringsraterne, findes alle i overskrifter.
Hvad er en sidefod helt præcist?
En sidefod er en sektion af en webside, der vises nederst på siden. De vises normalt konstant på hele webstedet, på alle sider og indlæg, svarende til overskrifter.
Sidefødder bliver ofte overset, hvilket er spild af potentiale, da de vises på hver side på webstedet. De er lige så afgørende for headerne.
Dit sidefodsdesign kan vise nyttige og vitale oplysninger såsom registrering af nyhedsbrev, copyright-oplysninger, vilkår for brug og privatliv, et sitemap, kontaktoplysninger, kort, hjemmesidenavigation og meget mere, afhængigt af de indstillinger, du vælger.
Sådan laver du en header
Vi vil oprette en tilpasset header i dette afsnit. Bare rolig, hvis det virker skræmmende; vi starter ikke fra bunden. I stedet vil vi bruge Elementór Pros skabeloner, designet af Elementors designteam.
Udvikling af en header-skabelon
På WordPress-administrationspanelet skal du holde markøren over skabeloner og klikke på Tilføj ny for at konstruere vores header.
Et modalt vindue vil poppe op, når du er blevet rutet. Vælg Overskrift fra rullemenuen, navngiv overskriften, og klik på " Opret skabelon ":
Dette vil starte Elementor-editoren. Derefter vil du blive præsenteret for en liste over skabeloner, du kan vælge imellem. Så vælg en, der tiltaler dig:
Det skal dukke op oven på Elementor-redigeringssektionen, når du har valgt en skabelon:
Oprettelse af et logo: Det første skridt er at oprette et logo. Indstil logoet i webstedets Live Editor for at sætte det i overskriften. Vælg et logo ved at klikke på Site Identity.
Når du har besluttet dig for et logo, skal du klikke på Udgiv .
Dit websteds logo skulle nu være i overskriften, hvis du opdaterer Elementor-grænsefladen:
Derefter kan du foretage de ændringer, du ønsker.
Foretag ændringer i overskriftsmenuen
Den næste ting vi skal gøre er at ændre menuen. Hvis du har genereret en menu, vil skabelonen automatisk inkorporere den:
Her er vores menustruktur, som du kan se afspejlet i overskriftsskabelonen:
Hvis du har mere end én menu, kan du opdatere indholdet, hvis det er nødvendigt.
Du kan redigere dens egenskaber ligesom enhver anden widget.
Hvis vi har brug for at tilføje flere elementer, kan vi tilføje flere sektioner til vores Header:
Lad os starte med at tilføje en header og nogle sociale medier-ikoner:
Derefter kan du foretage de ændringer, du vil. Sådan blev vores redigering:
Overskriftsudgivelse
Du kan nu udgive overskriften, når du er færdig med at ændre den. Vi bruger overskriften på hele vores websted i eksemplet amp , så vi vælger dette valg efter at have valgt Tilføj betingelse:
Og her er et amp på en side fra vores live-websted:
Sådan laver du en sidefod
Udvikling af en footer-skabelon
Processen med at lave en sidefod ligner nogenlunde processen med at konstruere en sidehoved. For at lave en skal du oprette en ny sidefodsskabelon som denne:
Så beslut dig for en skabelon. Sidefødder kommer i en række forskellige former og størrelser. Nogle indeholder faste oplysninger, mens andre har kontaktformularer. Vælg en skabelon, der passer til dine behov.
Skabelonen vi valgte til vores hjemmeside er som følger:
Sidefodsændringer
Du vil se overskriften, så snart du begynder at redigere (hvis du indstiller den betingelse, at den vises på alle sider).
Skift sidefoden efter behov; Sådan ser vores revision ud:
Udgiv sidefoden, når den er færdig:
Færdigt produkt
Sådan ser det færdige resultat ud. Både sidehovedet og sidefoden bruges nu på vores hjemmeside:
Undersøg dine sidehoved- og sidefodssektioner for lydhørhed.
Dette er den vigtigste fase, og du skal sikre, at dine sidehoveder og sidefødder er lydhøre. Fordi en menu i fuld bredde normalt ikke passer til mobilvisningen, skal du vide, hvordan dit design vil fremstå på mobilskærmen. De responsive kontakter i bunden af Elementor-sidebjælkeafsnittet kan ændre mobil- og faneversionerne.
Du kan teste reaktionsevnen af din sidehoved og sidefod på forskellige måder. For amp kan du bruge værktøjer som Browserstack, CrossBrowser Testing og Google Resizer for at sikre, at dine websider er så lydhøre som muligt. Du kan også gøre det manuelt ved at eksperimentere med forskellige enheder.
At bringe tingene til en ende
Jeg håber, at denne guide hjalp dig med hurtigt at udvikle dine unikke sidehoved- og sidefodssektioner ved hjælp af Elementor Pro. WordPress har mange funktioner, men det giver kun mulighed for nogle få ændringer i sidehoved- og sidefodssektionerne, endelig rettet med Elementor Pro-sidebyggeren. Med langt bedre kontrol over dine webstedselementer kan du nu bedre demonstrere dit websteds vision. Desuden er Elementors funktionalitet blevet forbedret ved at bruge gratis tilføjelser, som giver brugerne mulighed for at tilpasse deres hjemmesider med mere avancerede muligheder.
