Swedish 
English 
German 
Spanish 
Italian 
French 
Danish 
Portuguese 
Polish 
Korean 
Japanese 
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:
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.
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:
- För det första är det mobilvänligt. Det är en avgörande sak att tänka på när det kommer till webbplats SEO (sökmotoroptimering). Från och med 2021, 70% av amerikansk medborgare använder en mobil enhet för att söka på internet. Data som dessa är anledningen till detta Google prioriterar en mobilanpassad webbplats. Med ensidig design kommer din webbplats på Googles bra böcker från början.
- 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.
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:
- Elementor (Gratis version)
- ElementsKit (Gratis och Pro version båda)
- MetForm (Gratis version)
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
- 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
- Klicka på ElementsKit-knappen (EK) när Elementor Builder-fönstret öppnas
- Gå till Sida fliken, Sök efter Bröllop Sida och klicka vidare Föra in
Nu klick på uppdatering för att spara
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
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
Notera: Om du inte kan hitta alternativet Onepage Scroll Setting så har du förmodligen inte det aktiverat ditt ElementsKit Pro
Nu är det dags att välja navigeringsstil. ElementsKit ger dig flera alternativ för navigering. Under cirkeln får du till exempel 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.
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
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.
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
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.
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
- Välj Skriv som Rubrik, Villkor som Hela webbplatsen, Sätta på alternativet Aktivera/Avaktivera och klicka slutligen på Spara ändringar.
- 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
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.
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
- Gå till din All Page ⇒ startsida (eller vad du nu kallade din sida) och klicka på Redigera 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
- 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)
- 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.
- 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
Du kan kolla in mer information på vår blogg på olika sätt att använda pop up modal widget av ElementsKit på din WordPress-webbplats
- 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
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.
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:
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.
Lämna ett svar