Creați un site web cu o singură pagină cu o singură pagină de navigare în WordPress (cu bonus)

Cauți să construiești un site web pentru afacerea ta, dar nu ai timp să creezi unul mare? Sau nu ești pregătit să te angajezi în întreținerea de lungă durată a site-ului web?

Atunci ar trebui să alegeți un site web cu o singură pagină cu o singură pagină de navigare. Site-ul web cu o singură pagină oferă toate informațiile într-un mod atractiv și oferă site-ului dvs. un aspect uimitor, astfel încât utilizatorii să se poată implica mai mult.

În acest blog, veți învăța nu numai Cum să creați un site web cu o singură pagină cu o singură pagină de navigare în WordPress , ci și cum să adăugați un formular de contact într-o fereastră pop-up ca bonus.

Majoritatea oamenilor părăsesc site-ul web dacă nu găsesc o modalitate adecvată de a contacta proprietarul, așa că acest pont bonus va adăuga cu adevărat o valoare extraordinară site-ului tău.

Să nu mai pierdem timpul și să începem procesul de creare a unui site web cu aspect uimitor cu o navigare Elementor pe o pagină . Puteți verifica aspectul final al site-ului din butonul de mai jos:

Ce este Navigarea pe o pagină?

Navigarea pe o pagină, așa cum sugerează și numele, este un meniu de navigare special conceput pentru a naviga la diferite părți ale unui site web cu o singură pagină. Navigarea pe o singură pagină cu efect de defilare lină face ca navigarea către diferite secțiuni să fie o experiență ușoară și ușor de utilizat.

„Simplitatea este sofisticarea supremă.” — Leonardo da Vinci

Și această simplitate oferă site-urilor cu o singură pagină avantajul de care au nevoie față de altele. Un site web cu o singură pagină este excelent pentru întreprinderile mici, cum ar fi organizatorii de nunți, fotografii, salonuri mici, restaurante etc.

Cu toate acestea, dacă aveți o afacere mare de comerț electronic care vinde prea multe produse sau oferă mai multe servicii și trebuie să răspundă unui public mai mare, site-ul cu o singură pagină nu este pentru dvs.

Care sunt beneficiile site-ului cu o singură pagină cu Navigarea pe o singură pagină?

Nu ar trebui să vă gândiți să obțineți un site web de o pagină pentru afacerea dvs. doar pentru că afacerea dvs. este mică. Există o mulțime de alte beneficii în a avea un site web cu o singură pagină, în special un site WordPress cu o singură pagină. Să aruncăm o privire la câțiva dintre profesioniști:

• În primul rând, este compatibil cu dispozitivele mobile. Acesta este un lucru esențial de luat în considerare atunci când vine vorba de SEO (optimizare pentru motoarele de căutare) pentru site-uri web. Începând cu 2021, 70% dintre cetățenii americani folosesc un dispozitiv mobil pentru a căuta pe internet. Date ca acestea sunt motivul pentru care Google acordă prioritate unui site web prietenos cu dispozitivele mobile. Cu designul unei singure pagini, site-ul dvs. intră în cărțile bune ale Google de la început.

• Majoritatea oamenilor preferă un site web simplu, frumos și la obiect decât unul inutil de lung.
• Google numără autoritatea de link la nivel de domeniu și de pagină la un grad de 40%. Acesta este un alt domeniu în care site-ul dvs. de o pagină va avea un avantaj.
• Site-urile web cu o singură pagină se încarcă mai repede decât site-urile cu tone de pagini. Având în vedere faptul că oamenii din zilele noastre au opțiuni nelimitate, a avea un site cu încărcare rapidă este cu adevărat nenegociabil.
• Site-urile cu o singură pagină sunt ușor de întreținut.
• Deoarece un site web cu o singură pagină are toate informațiile pe o singură pagină, navigarea prin defilare face mult mai ușoară navigarea, iar un efect de defilare lină face ca experiența utilizatorului să fie una liniștitoare.

Pot continua ceva timp, dar cred că informațiile de mai sus transmit mesajul că, dacă afacerea dvs. este mică, atunci puteți obține beneficii mari, de fapt, foarte mari folosind site-ul mic cu o singură pagină de navigare. Deci, să trecem la procesul principal fără a pierde timpul.

Cum să creați un singur site web cu o singură pagină de navigare în WordPress

În acest blog, vă voi arăta nu doar cum să construiți un site web, ci și o navigare modernă pe o pagină în WordPress, care vă va impresiona clienții potențiali. Pentru acest tutorial, voi folosi WordPress Website builder popular (Știu că scrie în titlu!)

Asadar, haideti sa începem…

Pasul #1: Instalați pluginurile WordPress necesare

Odată ce ați instalat WordPress pe sistemul dvs. Trebuie să instalați următoarele pluginuri WordPress:

• Elementor (versiunea gratuită)
• ElementsKit (versiunea gratuită și Pro ambele)
• MetForm (versiunea gratuită)

Odată ce ați terminat de instalat și activat pluginurile WordPress necesare, este timpul să construiți site-ul.

Pasul #2: Creați un site web folosind pagina prefabricată ElementsKit

ElementsKit oferă multe pagini prefabricate, șabloane și secțiuni, astfel încât oamenii să poată construi un site web cu orice design, aspect și stil își doresc și ei, fără codificare. Pentru acest blog, voi folosi pagina de destinație Wedding planner de la ElementsKit.

Pentru a vă crea site-ul web, din tabloul de bord WordPress, accesați Pagini ⇒ Adăugați nou

• Dați un titlu , cum ar fi Acasă, alegeți Elementor Full Width din opțiunile de șablon
• Faceți clic pentru a publica și după publicare faceți clic pe Editare cu Elementor

• Faceți clic pe butonul ElementsKit (EK) odată ce se deschide fereastra Elementor Builder

• Accesați fila Pagina , Căutați Pagina de nuntă și faceți clic pe inserare

Acum faceți clic pe actualizare pentru a salva

Pasul #3: Cum să adăugați Elementor de navigare pe o pagină folosind ElementsKit

Acum că avem site-ul nostru web, este timpul pentru partea distractivă care este adăugarea de navigare prin defilare pe o pagină. ElementsKit Navigarea prin defilare pe o pagină este mai ușor de utilizat și oferă site-ului dvs. un aspect uimitor. Este foarte puțin probabil să găsiți un alt supliment Elementor de navigare pe o pagină la fel de bun ca ElementsKit.

Acum, să ne uităm la procesul pas cu pas de adăugare a unui link de navigare de defilare a paginii pe site-ul dvs. WordPress:

3.1 Activați Modulul de defilare pe o pagină

Pentru a adăuga navigarea prin derulare pe site-ul dvs. WordPress, mai întâi, trebuie să pornim Modulul de defilare Onepage.

• Accesați: Tabloul de bord WordPress ⇒ ElementsKit ⇒ Module
• Activați Derularea pe o pagină
• Faceți clic pe Salvare modificări pentru a actualiza

3.2 Activați derularea unei pagini din setările paginii

• Faceți clic pe pictograma Setări din colțul din stânga jos al panoului Elementor
• Deschideți fila Setări ElementsKit
• Activați opțiunea de derulare pe o pagină

Notă: Dacă nu puteți găsi opțiunea Onepage Scroll Setting, atunci probabil că nu ați activat ElementsKit Pro

3.3 Alegeți stilul de navigare

Acum, este timpul să alegeți stilul de navigare. ElementsKit vă oferă mai multe opțiuni pentru navigare. De exemplu, sub cerc, veți obține Scalare, completați, completați etc. Pentru modelul pătrat, veți avea opțiuni precum mărirea și, ca parte a Liniei, veți obține opțiuni precum linia pentru a crește, linia de umplere , micsorarea liniei etc.

Puteți alege orice stil doriți, pentru acest blog voi alege pictograma personalizată. Odată ce alegeți o pictogramă Personalizată, veți primi o opțiune de a alege o pictogramă pentru opțiunea Stil de navigare derulat pe o pagină. Puteți alege o pictogramă fie din biblioteca de pictograme, fie să încărcați o pictogramă SVG personalizată.

Pentru a alege o pictogramă personalizată

• Alegeți opțiunea Pictogramă personalizată din meniul derulant al stilului de navigare
• Plasați cursorul pe pictograma de navigare și faceți clic pe Biblioteca de pictograme
• Căutați și introduceți pictograma care vă place

3.4 Configurați alte setări de navigare

Odată ce alegeți un stil de navigare, veți avea acces la următoarele setări:

• Poziție de navigare: puteți seta poziția de navigare ca sus, dreapta, jos sau stânga.
• Navigation Position Offset: Aici puteți alege valoarea decalajului poziției de navigare.
• Spațiere de navigare: alegeți spațiul dorit între fiecare pictogramă de navigare.
• Culoare de navigare: alegeți o culoare pentru pictograma de navigare.
• Tipografie cu indicații: aici puteți alege familia, dimensiunea fontului, transformarea greutății, stilul, decorul și înălțimea liniei pentru sfatul explicativ.

3.5 Adăugați secțiuni de pagină la linkurile de navigare

Acum că toate setările sunt făcute, este timpul să adăugați secțiunile pe care doriți să le apară în navigare. Pentru a face asta

• Treceți cursorul pe secțiune și faceți clic pe pictograma Editați secțiunea
• Accesați fila Avansat
• Extindeți opțiunea ElementsKit Onpage Scroll
• Activați activarea secțiunii pentru a face secțiunea vizibilă
• Activați opțiunea de activare do t pentru a adăuga această secțiune ca unul dintre linkurile de navigare
• Furnizați un nume pentru textul indicativ . Textul descrierii va apărea când cineva va trece cursorul pe link
• În cele din urmă, faceți clic pe actualizare pentru a salva

Puteți repeta același proces menționat mai sus pentru a adăuga toate secțiunile pe care le doriți la navigare.

Notă: puteți adăuga o secțiune la navigare, nu secțiunea interioară. Deci, nu veți găsi opțiunea ElementsKit Onpage Scroll sub fila avansată pentru secțiunea interioară sau orice alt widget.

După ce ați efectuat toată navigarea, actualizați și faceți clic pentru a vedea previzualizarea navigării unei pagini în WordPress și, de asemenea, pentru a verifica link-urile meniului de navigare.

Pasul #4: Adăugați subsol antet folosind secțiunea de subsol antet prefabricată ElementsKit

Ei bine, acum aveți un site web cu o pagină de navigare în WordPress, dar aveți încă nevoie de un antet de subsol pentru a vă completa site-ul. Secțiunile Antet și Subsol ale unui site web sunt foarte importante pentru a vă afișa logo-ul și informațiile importante, astfel încât clienții să le poată vedea cu ușurință.

ElementsKit vă oferă multe secțiuni de antet și subsol prefabricate din care să alegeți. Pentru a utiliza ElementsKit Header Footer:

• Accesați ElementsKit ⇒ Subsol antet ⇒ Faceți clic pe Adăugare nou

• Alegeți Tip ca antet , Condiții ca site întreg , activați opțiunea Activare/Dezactivare și, în final, faceți clic pe Salvare modificări .

• Acum, pentru a adăuga secțiunea antet, faceți clic pe Editați în meniul pe care l-ați creat
• Faceți clic pe Editați conținut
• Faceți clic pe butonul EK și accesați fila Secțiuni
• Alegeți designul antetului care vă place și faceți clic pe Inserare

Puteți urmări videoclipul de mai jos pentru a crea un subsol frumos antet pentru site-ul dvs. web.

Notă: puteți urma aceiași pași ca și Antet pentru a crea o secțiune de subsol pentru site-ul dvs. folosind secțiuni Premade de ElementsKit.

Pasul 5: Adăugați formularul de contact ca pop-up modal (BONUS)

Este timpul să adăugați un formular de contact pe site-ul dvs., astfel încât să fie mai ușor pentru clienții potențiali să comunice cu dvs. Adăugarea unui formular de contact folosind o fereastră pop-up ar oferi site-ului dvs. cu o pagină un aspect mai atractiv, împreună cu formularul atât de necesar de care aveți nevoie.

Pentru a adăuga un pop-up modal, voi înlocui butonul RSVP cu un pop-up modal și voi adăuga un formular de contact la acesta.

• Accesați ElementsKit ⇒ Widgeturi ⇒ Activați modul pop-up ⇒ Faceți clic pe Salvare modificări

• Accesați pagina Toate ⇒ pagina de pornire (sau orice ați numit pagina dvs.) și faceți clic pe Editați cu Elementor

• În modul de editare, derulați la secțiunea RSVP și ștergeți butonul RSVP
• Trageți și plasați un pop-up modal pe locul butonului RSVP

• Pentru a schimba textul butonului modal, accesați Conținut ⇒ Butonul de comutare ⇒ Etichetă și schimbați „Open Modal” în RSVP (sau orice doriți)

• Accesați fila Stil ⇒ Butonul de comutare pentru a schimba culoarea de fundal a butonului, culoarea textului, raza chenarului și alte setări atât pentru vizualizarea normală, cât și pentru vizualizarea hover.

• Acum accesați Conținut și activați modul Activare șablon, astfel încât să putem adăuga formularul nostru de contact.
• Faceți clic pe butonul pop-up. Odată deschis, faceți clic pe pictograma de editare de pe corp pentru a deschide editorul Elementor

• Căutați Metform, trageți și plasați widgetul
• Faceți clic pe Editați formularul pentru a alege formularul de contact
• Alegeți formularul dorit din listă și faceți clic pe salvare și închidere
• În cele din urmă, faceți clic pe actualizare pentru a salva

Notă: Am făcut deja formularul de RSVP folosind Metform și, de asemenea, am schimbat puțin culoarea și stilul pentru a se potrivi cu șablonul de pagină de destinație pe care îl folosim. Puteți consulta blogul despre cum să creați și să stilați formularele de contact folosind Metform .

De asemenea, puteți consulta videoclipul de mai jos pentru instrucțiuni despre cum să creați un formular de contact personalizat folosind Metform.

Pasul #6: Actualizați și vedeți previzualizarea site-ului unic cu o singură pagină de navigare

Ei bine, totul este făcut. Acum, până la pasul final, cel mai ușor și mai interesant. După ce ați finalizat toate personalizarea și pașii menționați mai sus, faceți clic pe butonul Actualizare pentru a salva totul și faceți clic pe butonul Previzualizare pentru a vedea site-ul dvs.

Cu condiția să fi urmat corect toți pașii, ar trebui să obțineți un site web cu o singură pagină cu o singură pagină de navigare în WordPress, cum ar fi cel de mai jos:

Învelire

Dă-ți o palmă pe spate! Pentru că ați creat cu succes un site web modern, frumos, cu o singură pagină de navigare folosind Elementor și ElementsKit. Folosind un site cu o singură pagină, clienții pot naviga cu ușurință la diferite secțiuni ale site-ului dvs. pentru a afla despre afacerea dvs. Și acel pop-up modal cu un singur clic cu formular de contact face comunicarea cu adevărat la doar un clic distanță!

Dacă sunteți impresionat de ceea ce ați construit, atunci pregătiți-vă să fiți surprins și mai mult, deoarece ElementsKit deschide posibilități nelimitate pentru utilizatorii WordPress și Elementor de a experimenta și de a construi un site web cu aspect minunat. Așadar, fă-ți timp să verifici alte widget-uri și module avansate ale ElementsKit.

Pentru a afla mai multe despre crearea de site-uri web folosind WordPress, Elementor și magicul ElementsKit, urmăriți-ne pe conturile noastre de socializare.