Skapa en webbsida med en sida i WordPress (med bonus)

Funderar du på att bygga en webbplats för ditt företag men har inte tid att skapa en stor? Eller inte redo att förbinda sig till långvarigt underhåll av webbplatsen?

Då bör du välja en webbplats med en sida med en sidas navigering. Ensidig webbplats ger ut all information på ett attraktivt sätt och ger din webbplats ett fantastiskt utseende så att dina användare kan engagera sig mer.

I den här bloggen kommer du inte bara att lära dig hur man gör skapa en webbplats med en sida i WordPress men också hur man lägger till ett kontaktformulär i en popup som en bonus.

De flesta lämnar webbplatsen om de inte hittar ett korrekt sätt att kontakta ägaren, så detta bonustips kommer verkligen att tillföra ett extraordinärt värde till din webbplats.

Låt oss inte slösa mer tid och börja processen med att skapa en webbplats med ett fantastiskt utseende med en Elementor navigering på en sida. Du kan kolla in det slutliga utseendet på sajten från knappen nedan:

Vad är One Page Navigation?

En sidnavigering som namnet antyder är en navigeringsmeny speciellt utformad för att navigera till olika delar av en enskild sidas webbplats. En sidas navigering med en mjuk rullningseffekt gör navigering till olika avsnitt till en enkel och användarvänlig upplevelse.

"Simpelhet är den ultimata formen av sofistikation." - Leonardo Da Vinci

Och denna enkelhet ger ensidiga webbplatser den fördel de behöver framför andra. En ensidig webbplats är bra för små företag som bröllopsplanerare, fotografering, liten salong, restaurang, etc.   

Men om du har ett stort e-handelsföretag som säljer för många produkter eller tillhandahåller flera tjänster och som behöver tillgodose en större publik, är en ensidig webbplats inte för dig.

Vilka är fördelarna med en sidas webbplats med One Page Navigation?

Du bör inte tänka på att skaffa en ensidig webbplats för ditt företag bara för att ditt företag är litet. Det finns många andra fördelar med att ha en ensidig webbplats, särskilt en ensidig WordPress-webbplats. Låt oss ta en titt på några av proffsen:

  • De flesta föredrar en webbplats som är enkel, vacker och rakt på sak snarare än en onödigt lång sådan. 
  • Google räknas Domän och sidnivå länka auktoritet till en grad av 40%. Detta är ett annat område där din ensidiga webbplats kommer att ha en fördel.
  • Ensidiga webbplatser laddas snabbare än webbplatser med massor av sidor. Med tanke på det faktum att människor nuförtiden har obegränsade möjligheter, är det verkligen inte förhandlingsbart att ha en sajt som laddar snabbt.
  • En sida webbplatser är lätta att underhålla.
  • Eftersom en enstaka sida har all information på en sida, gör rullningsnavigering det mycket lättare att navigera och en mjuk rullningseffekt gör att användarupplevelsen blir lugnande.

Jag kan fortsätta ett tag till, men jag tror att informationen ovan förmedlar budskapet att om ditt företag är litet så kan du bli stor faktiskt stora fördelar med den lilla webbplatsen med navigering på en sida. Så låt oss hoppa till huvudprocessen utan att slösa tid.

Hur man skapar en enda webbsida med navigering på en sida I WordPress

I den här bloggen kommer jag att visa dig inte bara hur man bygger en webbplats utan en modernt utseende en sidas navigering i WordPress som kommer att imponera på dina potentiella kunder. För den här handledningen kommer jag att använda den populära webbplatsbyggaren WordPress (jag vet att det står i titeln!)

 Så, låt oss börja...

Steg #1: Installera nödvändiga WordPress-plugin-program för att skapa Elementor One Page Scroll

När du har installerat WordPress på ditt system. Du måste installera följande WordPress-plugins för att skapa

en webbplats Elementor en sidrullning:

När du är klar med att installera och aktivera de nödvändiga WordPress-plugins är det dags att bygga webbplatsen.

Steg #2: Skapa en webbplats med hjälp av ElementsKit premade sida

ElementsKit ger många färdiga sidor och mallar och sektioner så att människor kan bygga en webbplats med vilken design, layout och stil de vill utan kodning. För den här bloggen kommer jag att använda Målsida för bröllopsplanerare av ElementsKit.

För att skapa din webbplats, Från WordPress Dashboard, Gå till Sidor ⇒ Lägg till ny

Navigera till WordPress Ny sida en sidas navigeringselement
  • Ge en titel som Hem, välj Elementor full bredd från mallalternativen
  • Klicka för att publicera och efter publicering klicka på Redigera med Elementor
Skapa sida med Elementor sidbyggare en sidas navigeringselementor
  • Klicka på ElementsKit-knappen (EK) när Elementor Builder-fönstret öppnas
Klicka på knappen ElementsKit
  • Gå till Sida fliken, Sök efter Bröllop Sida och klicka vidare Föra in
Sök och infoga bröllopshemsida av ElementsKit One Page Navigation i WordPress

Nu klick på uppdatering för att spara

Klicka på Uppdatera för att spara ändringar Element eller navigering på en sida

Steg #3: Hur man lägger till Elementor-navigering på en sida använder ElementsKit

Nu när vi har vår hemsida är det dags för den roliga delen som är att lägga till Elementor en sidas rullningsnavigering. ElementsKit Onepage rullningsnavigering är enklare att använda och ger din webbplats ett fantastiskt utseende. Det är mycket osannolikt att du hittar ett annat elementor-tillägg med en sidrullning så bra som ElementsKit.

Låt oss nu titta på steg-för-steg-processen för att lägga till en sidrullningsnavigeringslänk till din WordPress-webbplats:

3.1 Aktivera Onepage Scroll Module

För att lägga till rullnavigering till din WordPress-webbplats måste vi först aktivera Onepage Scroll Module.

  • Gå till: WordPress Dashboard ⇒ ElementsKit ⇒ Moduler 
  • Sätta på Onepage Scroll
  • Klicka på Spara ändringar att uppdatera
Aktivera Onepage Scroll by ElementsKit en sida navigering elementor Elementor en sida rulla en sida rulla elementor

3.2 Aktivera en sidrullning från sidinställningar

  • Klicka på ikonen Inställningar i det nedre vänstra hörnet av Elementor-panelen
  • Öppna fliken ElementsKit Settings
  • Aktivera alternativet Onepage Scroll
Aktivera ensida Bläddra från inställningarna Element eller One Page Navigation i WordPress

Notera: Om du inte kan hitta alternativet Onepage Scroll Setting så har du förmodligen inte det aktiverat ditt ElementsKit Pro

3.3 Välj Navigationsstil

Nu är det dags att välja navigeringsstil. ElementsKit ger dig flera alternativ för navigering. Till exempel under cirkeln får du Skala upp, fylla i, fylla i etc. För kvadratmönster kommer du att ha alternativ som uppskalning och som en del av Linje får du alternativ som linjen att växa, linjefyllning , linjekrympning osv.

Alternativ för navigeringsstil med rullning på en sida

Du kan välja vilken stil du vill, för den här bloggen kommer jag att välja den anpassade ikonen. När du väl har valt en anpassad ikon får du ett alternativ att välja en ikon för alternativet One Page Scroll Navigation Style. Du kan välja en ikon antingen från ikon bibliotek eller ladda upp en anpassad SVG-ikon

För att välja en anpassad ikon

  • Välj anpassad ikon alternativ från rullgardinsmenyn för navigeringsstil
  • Sväva på navigeringsikonen och klick på Icon-biblioteket
  • Sök och infoga ikonen du gillar
Välj anpassad navigeringsikon One Page Navigation i WordPress

3.4 Ställ in andra navigationsinställningar

När du väljer en navigeringsstil får du tillgång till följande inställningar:

  • Navigeringsposition: Du kan ställa in navigeringspositionen som topp, höger, botten eller vänster. 
  • Navigationspositionsförskjutning: Här kan du välja offsetvärdet för navigationspositionen.
  • Navigeringsavstånd: Välj det utrymme du vill ha mellan varje navigeringsikon.
  • Navigeringsfärg:  Välj en färg för navigeringsikonen.
  • Verktygstips typografi: Här kan du välja familj, teckenstorlek, viktomvandling, stil, dekoration och linjehöjd för verktygstipset.
Andra inställningar för navigeringsstil en sidrullningselement eller en sidasnavigering

3.5 Lägg till sidavsnitt till navigeringslänkar

Nu när alla inställningar är gjorda är det dags att lägga till de avsnitt du vill ska visas i navigeringen. Att göra så

  • Sväva på avsnittet och klicka på Redigera avsnitt ikon
  • Gå till Fliken Avancerat
  • Bygga ut ElementsKit Onpage Scroll-alternativ
  • Slå på aktivera avsnittet för att göra avsnittet synligt
  • Slå på aktivera gört alternativ för att lägga till det här avsnittet som en av navigeringslänkarna
  • Ange ett namn för verktygstips text. Verktygstipstext visas när någon håller muspekaren över länken
  • Klicka slutligen på uppdatera för att spara
Lägg till sidavsnitt till navigeringsrullning på en sida

Du kan upprepa samma process som nämnts ovan för att lägga till alla avsnitt du vill ha i navigeringen.

Notera:  Du kan lägga till ett avsnitt i navigeringen, inte det inre avsnittet. Så du hittar inte ElementsKit Onpage Scroll-alternativet under fliken avancerade för den inre delen eller någon annan widget.

När du har gjort all navigering, uppdatera och klicka att se förhandsvisning av en sidas navigering i WordPress och även för att kontrollera navigeringsmenyns länkar.

En sida navigering i WordPress med element eller en sida navigering

Steg #4: Lägg till sidfot med hjälp av ElementsKit förgjorda sidfotssektion

Tja, du har en webbplats en sidas navigering i WordPress nu men du behöver fortfarande en sidhuvud för att slutföra din webbplats. Sidhuvud och sidfotssektioner på en webbplats är mycket viktiga för att visa din logotyp och viktig information så att dina kunder enkelt kan se den.

ElementsKit ger dig många premade Header och Sidfotssektioner att välja ifrån. Så här använder du ElementsKit Header Footer:

  • Gå till ElementsKit ⇒ Sidhuvud Sidfot ⇒ Klicka på Lägg till ny
Lägg till ny header ElementsKit One Page Navigation i WordPress
  • Välj Skriv som Rubrik, Villkor som Hela webbplatsen, Sätta på alternativet Aktivera/Avaktivera och klicka slutligen på Spara ändringar.
Skapa Header med ElementsKit
  • Nu för att lägga till rubriksektion, klicka på Redigera på menyn du skapade
  • Klicka på Redigera innehåll
  • Klicka på EK-knappen och gå till fliken Sektioner
  • Välj rubrikdesign du gillar och klicka på Infoga 
Infoga rubriksektion med ElementsKit

Du kan följa videon nedan för att skapa en vacker sidfot för din webbplats.

Notera: Du kan följa samma steg som Header för att skapa en Footer-sektion för din webbplats med hjälp av Premade-sektioner av ElementsKit.

Ladda ner ElementsKit gif

Steg #5: Lägg till kontaktformulär som modal popup (BONUS)

Det är dags att lägga till ett kontaktformulär på din webbplats så att det är lättare för dina potentiella kunder att kommunicera med dig. Att lägga till ett kontaktformulär med hjälp av ett popup-fönster skulle ge din webbplats med en sida ett mer attraktivt utseende tillsammans med det mycket nödvändiga formuläret du behöver.

För att lägga till en modal popup kommer jag att ersätta OSA knappen med en popup-modal och lägg till ett kontaktformulär till den.

  • Gå till ElementsKit ⇒ Widgets ⇒ Aktivera Popup modal ⇒ Klicka på spara ändringar
Slå på och spara popup modal widget av ElementsKit
  • Gå till din All Page ⇒ startsida (eller vad du nu kallade din sida) och klicka på Redigera med Elementor
Redigera startsida med Elementor
  • I redigeringsläget, bläddra till sektionen OSA och ta bort OSA-knappen
  • Dra och släpp modal popup på platsen för OSA-knappen
Dra och släpp Modal popup från ElementsKit och ta bort knappen One Page Navigation i WordPress
  • För att ändra den modala knappens text, gå till Innehåll ⇒ Växlingsknapp ⇒ Etikett och ändra "Öppna Modal" till OSA (eller vad du vill)
Ändra popup-modal knapptext
  • Gå till fliken Stil ⇒ Växlingsknapp för att ändra knappens bakgrundsfärg, textfärg, ramradie och andra inställningar för både normal och svävande vy.
Ändra popup-modalknappstil med ElementsKit Elementor en sidrullning en sidrullningselementor
  • Gå nu till Innehåll och aktivera Aktivera mallläge så att vi kan lägga till vårt kontaktformulär.
  • Klicka på popup-knappen. När du är öppen klickar du på redigeringsikonen på kroppen för att öppna Elementor-redigeraren
Aktivera mall och klicka för att öppna Elementor-panelen
  • Sök efter Metform, dra och släpp widgeten
  • Klicka på formuläret Redigera för att välja kontaktformuläret 
  • Välj det formulär du vill ha från listan och klicka på spara & stäng
  • Klicka slutligen på uppdatera för att spara
Lägg till Metform i modal popup i en Elementor en sida rulla en sida rulla elementor webbplats

Notera: Jag hade redan gjort OSA-formuläret med Metform och även ändrat färgen och stilen lite för att matcha målsidesmallen vi använder. Du kan kolla in bloggen på hur man skapar och utformar kontaktformulär med Metform

Du kan också kolla in video nedan för instruktioner om hur man bygger ett anpassat kontaktformulär med Metform.

Steg #6: Uppdatera och se förhandsgranskningen Enstaka webbplats med One Page Navigation

Nåväl, allt är klart. Nu ner till det sista steget, det enklaste och mest spännande. När du har slutfört alla anpassningar och steg som nämns ovan, klicka på Uppdatera knapp för att spara allt och klicka på Förhandsgranska knapp för att se din webbplats.

Förutsatt att du har följt alla steg korrekt, bör du få en webbplats med en sida med en sidnavigering i WordPress som den nedan:

En sida webbplats med en sida navigering element eller en sida navigering Elementor en sida scroll en sida scroll elementor
Förhandsvisning

Vill du veta mer om ElementsKit? Kolla in den senaste uppdateringen av ElementsKit att veta mer om detta fantastiska Elementor-tillägg.

Slutord på Elementor One Page Scroll-webbplats

Ge dig själv en klapp på axeln! Eftersom du framgångsrikt har skapat en modernt snygg webbplats med en sidas navigering med hjälp av Elementor och ElementsKit. Genom att använda en ensidig webbplats kan kunderna enkelt navigera till olika delar av din webbplats för att lära sig mer om ditt företag. Och den modala popupen med ett klick med kontaktformulär gör kommunikationen egentligen bara ett klick bort! 

Om du är imponerad av det du har byggt, gör dig redo att bli ännu mer överraskad eftersom ElementsKit öppnar obegränsade möjligheter för WordPress- och Elementor-användare att experimentera och bygga en fantastiskt snygg webbplats. Så ta dig tid att kolla in andra avancerade widgets och moduler av ElementsKit.

För att lära dig mer om att bygga webbplatser med WordPress, Elementor och det magiska ElementsKit följ oss på våra sociala mediekonton.


Kommentarer

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *