Opret enkeltsides websted med One Page Navigation i WordPress (med bonus)

Ønsker du at bygge en hjemmeside til din virksomhed, men har du ikke tid til at lave en stor? Eller ikke klar til at forpligte sig til langtidsvedligeholdelse af hjemmesiden?

Så bør du gå efter en enkeltsides hjemmeside med One Page Navigation. Enkeltsidet websted giver al information på en attraktiv måde og giver dit websted et fantastisk udseende, så dine brugere kan engagere sig mere.

I denne blog vil du ikke kun lære hvordan oprette en enkelt side hjemmeside med en side navigation i WordPress men også hvordan man tilføjer en kontaktformular i en pop-up som en bonus.

De fleste forlader hjemmesiden, hvis de ikke finder en ordentlig måde at kontakte ejeren på, så dette bonustip vil virkelig tilføje ekstraordinær værdi til din hjemmeside.

Lad os ikke spilde mere tid og begynde processen med at skabe et fantastisk udseende websted med en Elementor-navigation på én side. Du kan se det endelige udseende af webstedet fra knappen nedenfor:

Hvad er One Page Navigation?

En sidenavigation, som navnet antyder, er en navigationsmenu, der er specielt designet til at navigere til forskellige dele af en enkelt sides hjemmeside. En sidenavigation med en jævn rulleeffekt gør navigering til forskellige sektioner til en nem og brugervenlig oplevelse.

"Enkelhed er den ultimative sofistikering." - Leonardo Da Vinci

Og denne enkelhed giver enkeltsidewebsteder den fordel, de har brug for i forhold til andre. En en-sides hjemmeside er fantastisk til små virksomheder som bryllupsplanlæggere, fotografering, lille salon, restaurant osv.   

Men hvis du har en stor e-handelsvirksomhed, der sælger for mange produkter eller leverer flere tjenester og har brug for at henvende dig til et større publikum, så er en enkeltsides hjemmeside ikke noget for dig.

Hvad er fordelene ved enkeltsides websted med One Page Navigation?

Du bør ikke tænke på at få et ensidet websted til din virksomhed, bare fordi din virksomhed er lille. Der er masser af andre fordele ved at have en én-sides hjemmeside, især en én-sides WordPress hjemmeside. Lad os se på nogle af fordelene:

• For det første er den mobilvenlig. Det er en afgørende ting at overveje, når det kommer til websteds SEO (søgemaskineoptimering). Fra 2021, 70% af amerikansk statsborger bruger en mobilenhed til at søge på internettet. Data som disse er årsagen Google prioriterer en mobilvenlig hjemmeside. Med single page design kommer din hjemmeside på Googles gode bøger fra starten.

• De fleste mennesker foretrækker et websted, der er almindeligt, smukt og præcist snarere end en unødvendigt lang. 
• Google tæller Domæne og sideniveau link autoritet til en grad på 40%. Dette er et andet område, hvor dit websted på én side vil have en fordel.
• Enkeltsidede websteder indlæses hurtigere end websteder med tonsvis af sider. I betragtning af det faktum, at folk i dag har ubegrænsede muligheder, er det virkelig ikke til forhandling at have en hurtig-indlæsningsside.
• En-side-websteder er nemme at vedligeholde.
• Da et websted på en enkelt side har alle oplysningerne på én side, gør rullenavigation det meget nemmere at navigere og en jævn rulleeffekt gør brugeroplevelsen beroligende.

Jeg kan blive ved i noget mere tid, men jeg tror, at ovenstående information formidler budskabet om, at hvis din virksomhed er lille, så kan du faktisk blive stor. store fordele ved at bruge den lille hjemmeside med én side navigation. Så lad os springe til hovedprocessen uden at spilde tid.

Sådan opretter du et enkelt websted med One Page Navigation I WordPress

I denne blog vil jeg vise dig, ikke bare, hvordan du bygger et websted, men en moderne sidenavigation i WordPress, der vil imponere dine potentielle kunder. Til denne tutorial vil jeg bruge den populære webstedsbygger WordPress (jeg ved, at der står i titlen!)

 Så lad os komme i gang...

Trin #1: Installer nødvendige WordPress-plugins for at oprette Elementor One Page Scroll

Når du har WordPress installeret på dit system. Du skal installere følgende WordPress-plugins for at oprette

et websted Elementor rul på én side:

• Elementor (Gratis version)
• ElementsKit (Gratis og Pro version begge)
• MetForm (Gratis version)

Når du er færdig med at installere og aktivere de nødvendige WordPress-plugins, er det tid til at bygge siden.

Trin #2: Opret et websted ved hjælp af ElementsKit premade side

ElementsKit giver mange færdiglavede sider og skabeloner og sektioner, så folk også kan bygge et websted med ethvert design, layout og stil, de ønsker, uden kodning. Til denne blog vil jeg bruge Destinationsside for bryllupsplanlægger af ElementsKit.

For at oprette din hjemmeside, Fra WordPress Dashboard, Gå til Sider ⇒ Tilføj nyt

• Give en titel såsom Hjem, vælg Elementor fuld bredde fra skabelonindstillingerne
• Klik for at udgive og efter udgivelsen klik på Rediger med Elementor

• Klik på ElementsKit-knappen (EK), når Elementor Builder-vinduet åbnes

• Gå til Side fanen, Søg efter Bryllup Side og klik videre indsætte

Nu klik ved opdatering for at gemme

Trin #3: Sådan tilføjes Elementor-navigation på én side ved hjælp af ElementsKit

Nu, hvor vi har vores hjemmeside, er det tid til den sjove del, der er at tilføje Elementor én-sides rullenavigation. ElementsKit Onepage rullenavigation er nemmere at bruge og giver dit websted et fantastisk udseende. Det er meget usandsynligt, at du vil finde en anden siderulle Elementor-tilføjelse så god som ElementsKit.

Lad os nu se på den trinvise proces med at tilføje et sidescroll-navigationslink til dit WordPress-websted:

3.1 Slå Onepage Scroll Module til

For at tilføje scroll-navigation til dit WordPress-websted skal vi først slå Onepage Scroll-modulet til.

• Gå til: WordPress Dashboard ⇒ ElementsKit ⇒ Moduler 
• Tænde for Onepage Scroll
• Klik på Gem ændringer at opdatere

3.2 Aktiver One Page Scroll fra sideindstillinger

• Klik på Indstillinger-ikonet i nederste venstre hjørne af Elementor-panelet
• Åbn fanen ElementsKit Indstillinger
• Aktiver Onepage Scroll mulighed

Bemærk: Hvis du ikke kan finde indstillingen Onepage Scroll Setting, har du sandsynligvis ikke gjort det aktiveret din ElementsKit Pro

3.3 Vælg Navigationsstil

Nu er det tid til at vælge navigationsstilen. ElementsKit giver dig flere muligheder for navigation. For eksempel får du under cirklen Opskalering, udfyld, udfyld osv. For kvadratisk mønster vil du have muligheder som opskalering og som en del af Linje får du muligheder som linjen til at vokse, linjefyld , linjekrympning osv.

Du kan vælge enhver stil, du kan lide, til denne blog vil jeg vælge det brugerdefinerede ikon. Når du har valgt et brugerdefineret ikon, får du mulighed for at vælge et ikon til indstillingen One Page Scroll Navigation Style. Du kan vælge et ikon enten fra ikon bibliotek eller upload en brugerdefineret SVG-ikon. 

For at vælge et brugerdefineret ikon

• Vælg Brugerdefineret ikon mulighed fra navigationsstil rullemenuen
• Svæv på navigationsikonet og klik på Icon-biblioteket
• Søg og indsæt det ikon, du kan lide

3.4 Konfigurer andre navigationsindstillinger

Når du har valgt en navigationsstil, får du adgang til følgende indstillinger:

• Navigationsposition: Du kan indstille navigationspositionen som top, højre, bund eller venstre. 
• Navigationsposition offset: Her kan du vælge navigationspositionens offsetværdi.
• Navigationsafstand: Vælg det mellemrum, du ønsker mellem hvert navigationsikon.
• Navigationsfarve:  Vælg en farve til navigationsikonet.
• Værktøjstip typografi: Her kan du vælge familie, skriftstørrelse, vægttransformation, stil, dekoration og linjehøjde til værktøjstip.

3.5 Tilføj sidesektioner til navigationslinks

Nu hvor alle indstillinger er færdige, er det tid til at tilføje de sektioner, du ønsker skal vises på navigationen. For at gøre det

• Svæv på afsnittet og klik på Rediger sektion ikon
• Gå til Avanceret fane
• Udvide ElementsKit Onpage Scroll mulighed
• Slå aktiver sektionen til for at gøre afsnittet synligt
• Slå aktiver gørt mulighed for at tilføje dette afsnit som et af navigationslinkene
• Angiv et navn til værktøjstip tekst. Værktøjstip-tekst vises, når nogen vil svæve på linket
• Klik til sidst på opdater for at gemme

Du kan gentage den samme proces som nævnt ovenfor for at tilføje alle de sektioner, du ønsker, til navigationen.

Bemærk:  Du kan tilføje en sektion til navigation, ikke den indre sektion. Så du finder ikke ElementsKit Onpage Scroll-indstillingen under den avancerede fane for den indre sektion eller nogen anden widget.

Når du har foretaget al navigation, opdater og klik at se forhåndsvisning af en sidenavigation i WordPress og også for at kontrollere navigationsmenuens links.

Trin #4: Tilføj sidehoved sidefod ved hjælp af ElementsKit forudlavede sidehoved sidefod sektion

Nå, du har en hjemmeside en side-navigation i WordPress nu, men du har stadig brug for en sidehoved for at fuldføre dit websted. Sidehoved- og sidefodssektioner på et websted er meget vigtige for at vise dit logo og vigtige oplysninger, så dine kunder nemt kan se det.

ElementsKit giver dig mange færdiglavet header og Sidefodssektioner at vælge imellem. Sådan bruger du ElementsKit sidehovedfod:

• Gå til ElementsKit ⇒ Sidehoved Footer ⇒ Klik på Tilføj ny

• Vælg Skriv som Header, Forhold som Hele webstedet, Tænde for indstillingen Aktiver/Deaktiver og klik til sidst på Gem ændringer.

• For nu at tilføje overskriftssektion skal du klikke på Rediger i den menu, du har oprettet
• Klik på Rediger indhold
• Klik på EK-knappen og gå til fanen Sektioner
• Vælg header-design, du kan lide, og klik på Indsæt 

Du kan følge videoen nedenfor for at oprette en smuk sidehoved til din hjemmeside.

Bemærk: Du kan følge de samme trin som Header for at oprette en Footer-sektion til dit websted ved hjælp af Premade-sektioner af ElementsKit.

Trin #5: Tilføj kontaktformular som modal popup (BONUS)

Det er tid til at tilføje en kontaktformular til din hjemmeside, så det er nemmere for dine potentielle kunder at kommunikere med dig. Tilføjelse af en kontaktformular ved hjælp af en pop-up ville give dit websted på én side et mere attraktivt udseende sammen med den meget nødvendige formular, du har brug for.

For at tilføje en modal popup vil jeg erstatte RSVP knap med en popup-modal og tilføj en kontaktformular til den.

• Gå til ElementsKit ⇒ Widgets ⇒ Slå Popup modal til ⇒ Klik på Gem ændringer

• Gå til din All Page ⇒ startside (eller hvad du nu har kaldt din side), og klik på Rediger med Elementor

• I redigeringstilstanden skal du rulle til RSVP-sektionen og slette RSVP-knappen
• Træk og slip modal pop op på stedet for RSVP-knappen

• For at ændre den modale knaptekst, gå til Indhold ⇒ Toggler-knap ⇒ Label og skift "Åbn Modal" til RSVP (eller hvad du vil)

• Gå til fanen Stil ⇒ Skifteknap for at ændre knappens baggrundsfarve, tekstfarve, kantradius og andre indstillinger for både normal visning og svævevisning.

• Gå nu til Indhold og slå Aktiver skabelontilstand til, så vi kan tilføje vores kontaktformular.
• Klik på pop op-knappen. Når du har åbnet, klik på redigeringsikonet på kroppen for at åbne Elementor-editoren

• Søg efter Metform, træk og slip widgetten
• Klik på Rediger-formularen for at vælge kontaktformularen 
• Vælg den ønskede formular fra listen og klik på Gem og luk
• Klik til sidst på opdater for at gemme

Bemærk: Jeg havde allerede lavet RSVP-formularen ved hjælp af Metform og også ændret farven og stilen lidt for at matche den landingssideskabelon, vi bruger. Du kan tjekke bloggen på hvordan man opretter og stiler kontaktformularer ved hjælp af Metform. 

Du kan også tjekke ud video nedenfor for instruktioner om, hvordan man opbygger en tilpasset kontaktformular ved hjælp af Metform.

Trin #6: Opdater og se forhåndsvisningen Enkelt websted med One Page Navigation

Nå, alt er gjort. Nu ned til det sidste trin, det nemmeste og mest spændende. Når du har gennemført alle tilpasningerne og trinene nævnt ovenfor, skal du klikke på Opdater knap for at gemme alt, og klik på Eksempel-knap for at se dit websted.

Forudsat at du har fulgt alle trinene korrekt, bør du få en enkelt side hjemmeside med en side navigation i WordPress som den nedenfor:

Sidste ord på Elementor One Page Scroll-webstedet

Giv dig selv et skulderklap! Fordi du med succes har skabt et moderne udseende smukt websted med én side navigation ved hjælp af Elementor og ElementsKit. Ved at bruge et enkeltsidet websted kan kunder nemt navigere til forskellige sektioner af dit websted for at lære om din virksomhed. Og den modale popup med et enkelt klik med kontaktformular gør kommunikation virkelig kun et klik væk! 

Hvis du er imponeret over, hvad du har bygget, så gør dig klar til at blive endnu mere overrasket, fordi ElementsKit åbner ubegrænsede muligheder for WordPress- og Elementor-brugere til at eksperimentere og bygge et fantastisk udseende websted. Så tag dig tid til at tjekke andre avancerede widgets og moduler af ElementsKit.

For at lære mere om webstedsopbygning ved hjælp af WordPress, Elementor og det magiske ElementsKit, følg os på vores sociale mediekonti.