Cum se creează un site web cu o singură pagină pe WordPress

Multe site-uri web de succes sunt mari, complexe, cu multe pagini și conținut. Cu toate acestea, uneori, mai mult înseamnă cu adevărat mai puțin în lumea designului web. Și de aceea, în loc să adoptați o abordare tradițională, s-ar putea să merite să creați un site web cu o singură pagină pe WordPress.

În acest articol, vom aprofunda beneficiile și aplicațiile acestui tip de site. Apoi, vă vom arăta cum să creați un site web cu o singură pagină pe WordPress în doar trei pași. Să începem!

📚 Cuprins:

De ce ați putea dori să creați un site web cu o singură pagină

Majoritatea site-urilor web au mai multe pagini. Cel puțin, există de obicei o pagină principală, o pagină de contact, o pagină despre, și pagini pentru orice conținut sau servicii pe care le oferiți.

Un site web cu o singură pagină, pe de altă parte, condensează toate informațiile importante într-o singură pagină principală, adesea prin includerea unui număr de secțiuni dedicate. Designul de site web cu o singură pagină oferă o serie de beneficii, cum ar fi:

• Simplicitate, ceea ce face mai ușor pentru vizitatori să navigheze pe site-ul dvs. și să găsească ceea ce au nevoie.
• Facilitatea întreținerii, deoarece există foarte puțin conținut de întreținut.

Desigur, un design cu o singură pagină nu este alegerea potrivită pentru fiecare site web. Site-urile mari și complexe își au locul lor. Cu toate acestea, dacă aveți un site de afaceri mici, un portofoliu sau o vitrină simplă, este posibil să doriți să luați în considerare acest format.

Elementele esențiale ale unui site web cu o singură pagină

Când site-ul dvs. se întinde doar pe o singură pagină, trebuie să fiți foarte deliberat cu privire la ceea ce includeți. Este important să oferiți toate informațiile de care publicul dvs. va avea nevoie, fără a aglomera pagina sau a-l copleși. Tot ceea ce adăugați pe pagina dvs. ar trebui să fie acolo cu un motiv.

Iată câteva dintre elementele esențiale dacă doriți să creați un site web cu o singură pagină:

• Un apel la acțiune (CTA) proeminent, cum ar fi butonul de înscriere, de contact sau de achiziție.
• O secțiune Despre care să explice cine sunteți dvs., compania sau organizația dvs.
• Elemente de branding, cum ar fi logo-ul și sloganul.
• O listă de produse sau servicii, dacă este relevant.
• Link-uri către alte locuri și conținuturi ale dvs. de pe web, inclusiv profiluri de social media.
• Informații de contact, inclusiv diverse canale, dacă este posibil.

Este, de asemenea, important să acordați atenție ordinii acestor elemente. În general, veți dori să plasați cele mai importante informații și CTA-uri la începutul paginii, cu detalii de contact și link-uri mai aproape de partea de jos a paginii. Gândiți-vă la ceea ce publicul dvs. va trebui să vadă și în ce ordine, iar acest lucru vă va ajuta să determinați ce elemente să includeți și cum să le aranjați.

În cele din urmă – doar pentru că folosiți un design de site cu o singură pagină, asta nu înseamnă neapărat că nu puteți avea un blog. Dacă totuși doriți să includeți un blog, WordPress vă va permite în continuare să creați un link către blogul dvs. de pe pagina de start a paginii unice.

Cum să creați un site web cu o singură pagină (ETAPELE EXACTE)

Acum, haideți să vorbim despre cum să procedați efectiv la proiectarea site-ului dvs. Primul lucru pe care veți dori să îl faceți este să verificați câteva exemple existente de site-uri web cu o singură pagină pentru inspirație. Apoi treceți la primul pas.

Pasul 1: Determinați accentul pe care se concentrează site-ul dvs.

După cum am discutat, alegerea de a crea un site cu o singură pagină înseamnă că va trebui să fiți foarte deliberat cu privire la designul său. Acest lucru include să fii clar cu privire la obiectivele sale. Atunci când sunteți constrâns la o singură pagină, veți dori să alegeți unul sau două lucruri cheie pe care să vă concentrați.

Pentru a face acest lucru, luați în considerare CTA-ul principal în jurul căruia va fi proiectat site-ul dvs. Ce doriți ca vizitatorii să facă – să se înscrie pentru un abonament, să cumpere un produs, să participe la un eveniment sau să vă angajeze pentru un loc de muncă? Tot ceea ce se află pe pagina dvs. ar trebui să încurajeze oamenii să facă acea acțiune. Acest lucru înseamnă să le oferiți informațiile de care vor avea nevoie, să le explicați beneficiile și să clarificați pașii următori.

Pasul 2: Selectați o temă one-page de calitate

Dacă v-ați decis să creați un site one-page în WordPress, puteți folosi orice temă doriți. Cu toate acestea, o strategie inteligentă este adesea aceea de a alege o temă de o pagină care a fost construită special pentru a vă ajuta să proiectați acest tip de site. Aceste teme simplifică includerea tuturor informațiilor necesare, menținând în același timp un design atractiv.

Când alegeți o temă cu o singură pagină, iată ce veți dori să căutați:

• Un constructor de pagini cu elementele pre-construite de care veți avea nevoie, cum ar fi o secțiune de contact.
• O metodă de împărțire a paginii dvs. în mai multe secțiuni care pot fi distinse vizual.
• Navigație care permite vizitatorilor să sară la diferite secțiuni în cadrul paginii dvs.
• O modalitate ușoară de a adăuga butoane CTA și de a le personaliza.

Există o mulțime de teme de o pagină disponibile. Neve, de exemplu, este o temă multifuncțională care este perfectă pentru site-uri de o pagină concise, dar cuprinzătoare. Este compatibilă cu mulți constructori de pagini populare, include un personalizator live și vă ajută să vă configurați rapid site-ul cu o singură pagină. De asemenea, include secțiuni predefinite pentru informații de contact, biografia dvs., o vitrină și multe altele.

Pasul 3: Proiectați-vă site-ul

După ce știți ce doriți să includeți pe site-ul dvs., sunteți clar cu privire la obiectivul său și ați ales o temă puternică, puteți începe să proiectați efectiv pagina. Veți dori ca aceasta să fie potrivită pentru publicul dvs., să reflecte stilul dvs. și să fie optimizată pentru a vă îndeplini obiectivele – ceea ce înseamnă că nu ar trebui să urmați pur și simplu o formulă.

Cu toate acestea, iată câteva sugestii de care să țineți cont în timp ce vă alcătuiți site-ul:

• Păstrați-vă pagina simplă și nu includeți nimic care nu servește unui scop distinct
• Distingeți clar diferitele secțiuni cu o varietate de anteturi, fundaluri și așa mai departe.
• Creați o navigație care să trimită rapid vizitatorii la secțiunile de care au nevoie.
• Faceți ca CTA-urile dvs. principale să fie proeminente și convingătoare.

Să urmați aceste sfaturi, veți putea crea un site minunat cu o singură pagină în cel mai scurt timp.

Acum, să vorbim despre instrumente. Deci, cum puteți construi un site grozav cu o singură pagină în cel mai eficient și mai rapid mod posibil?

Constituiți site-ul dvs. cu o singură pagină cu Elementor

Elementor este un constructor de pagini ușor de utilizat, bogat în caracteristici, care facilitează crearea oricărui număr de pagini în cadrul unui site WordPress. Acest lucru îl face instrumentul perfect pentru a crea un site web grozav cu o singură pagină.

În următoarele secțiuni, vă vom arăta cum să faceți acest lucru. Exemplul pe care îl folosim este un site pentru un magazin de fructe și legume. Site-ul va avea:

• o pagină cu mai multe secțiuni care adăpostesc conținutul
• un meniu pe care vizitatorii pot face clic pentru a merge direct la secțiunile relevante
• un antet care găzduiește logo-ul și meniul
• un footer

Iată o previzualizare a modului în care va arăta site-ul la final:

Vom parcurge fiecare pas în detaliu, dar iată care este procesul de bază:

1. Instalați tema gratuită Neve.
2. Instalați plugin-ul Elementor, dacă nu ați făcut-o deja.
3. Setați „pânza” site-ului dvs. web – antetul, subsolul și meniul.
4. Adaugați conținutul dvs. cu Elementor.
5. Legăsați meniul la diferite secțiuni din designul dvs. pentru a crea efectul de navigare pe o singură pagină.
6. Setați designul dvs. ca pagina de pornire a site-ului dvs.

Instalați tema gratuită Neve

• Direcționați-vă la Appearance → Themes → Add New în tabloul de bord WordPress.
• Căutați „Neve”
• Click pe butonul Install
• După ce WordPress instalează tema, faceți clic pe Activate pentru a o face live

Instalați pluginul gratuit Elementor

• Vezi Plugins → Add New
• Căutați „Elementor”
• Instalați și activați pluginul gratuit Elementor Page Builder.

Acum, cu o instalare curată a WordPress, tema Neve activă și constructorul de pagini Elementor, sunteți gata să vă construiți site-ul dvs. cu o singură pagină.

Configurați antetul, subsolul și meniul

Vă veți folosi tema Neve pentru a configura antetul, subsolul și meniul site-ului dvs. de o pagină.

Header

Direcționați-vă către tabloul de bord WordPress și faceți clic pe Appearance → Themes → Customize pentru a personaliza tema Neve:

În primul rând, veți selecta culorile și fundalul pentru site

În continuare, în panoul Customizer, faceți clic pe Header → Change Logo și adăugați logo-ul site-ului dvs. Ajustați lățimea logo-ului, adăugați titlul site-ului, pictograma site-ului și un slogan. Alegeți dacă doriți să afișați sau să ascundeți numele site-ului și sloganul în antet.

În fila Layout, alegeți un aspect pentru antet, precum și culoarea, și setați umplutura și marginile. Alternativ, alegeți una dintre presetările de antet.

Menu

În continuare, trebuie să creați meniul de navigare care va fi afișat în antet. Pentru a face acest lucru, faceți clic pe Meniuri → Creare meniu nou. Dați-i un nume și setați Menu Location (Locația meniului) egală cu Primary Menu (Meniu primar).

Click pe Next (Următorul) și Add items (Adaugă elemente). Aici, adăugați numele secțiunilor pe care le veți crea. De exemplu, Principal, Despre noi, Produse și Contact. Pentru a face acest lucru, faceți clic pe butonul Custom Links (Legături personalizate).

În câmpul URL, introduceți un hashtag urmat de numele secțiunii respective. Mai târziu, când veți configura Elementor, îl veți configura astfel încât aceste linkuri să meargă la secțiuni specifice din designul dvs. De exemplu:

• #about-us
• #products
• #contact

Footer

Pasați la Footer și adăugați textul și culoarea de fundal. Puteți adăuga orice conținut doriți aici:

Apăsați Publish pentru a salva toate modificările

În această etapă, site-ul dvs. are un antet, un footer și un meniu. Ar trebui să arate ceva de genul celor de mai jos. Acum, sunteți gata să folosiți Elementor pentru a adăuga conținutul care se află între antet și subsol:

Creați o pagină nouă și adăugați conținut cu Elementor

Pentru a începe, mergeți la Pages → Add New pentru a crea o pagină nouă. Dați un nume paginii. Dacă tema oferă bare laterale, va apărea și aceea. Dar puteți tăia barele laterale ajustând Atributele paginii la lățime completă.

Pe pagina nouă care se deschide, faceți clic pe Edit with Elementor. Se deschide un panou în stânga. În partea dreaptă se află zona de editare în care veți vedea cum ia formă site-ul web.

O scurtă introducere în interfața Elementor

Înainte de a merge mai departe, să aruncăm o privire la panoul Elementor. Acesta are multe elemente creative sau widget-uri precum titluri, paragrafe, imagini sau videoclipuri. Puteți adăuga acestea la conținutul dvs. trăgându-le peste.

În stânga sus a panoului se află meniul hamburger care deschide multe opțiuni. Aici, veți putea ajusta culorile, fonturile și stilul temei la nivel global. Inutil să mai spunem că acest lucru economisește mult timp în timpul adăugării de noi pagini.

Din această filă, puteți, de asemenea, să ieșiți în tabloul de bord WordPress în orice moment.

În partea de jos a panoului, există opțiuni pentru a ajusta setările paginii, pentru a denumi pagina, pentru a vizualiza istoricul edițiilor și pentru a comuta între modurile responsive. De asemenea, există un navigator care arată o vizualizare organizată a paginii.

Dând clic pe pictograma cu ochi, puteți Previzualiza pagina, iar când sunteți gata să intrați în direct, apăsați butonul Publicare.

Acum, este timpul să începeți să adăugați conținut.

Două moduri de a crea un site web de o pagină cu Elementor

În acest stadiu, puteți alege să vă ocupați de construirea site-ului web de o pagină cu Elementor în două moduri:

1. Introduceți unul dintre șabloanele pre-construite de Elementor și apoi personalizați-l după cum doriți. În acest scop, faceți clic pe pictograma folderului din previzualizarea live a designului dvs. și se vor deschide o serie de șabloane, unele gratuite și multe pro. În fila Pages (Pagini), veți găsi modele complet finisate pentru pagini întregi. În fila Blocks (Blocuri), veți găsi șabloane pre-construite pentru secțiuni specifice ale unei pagini mai mari (aceasta este cea mai utilă pentru un site web cu o singură pagină).

Puteți insera orice șablon făcând clic pe el. Apoi, veți putea personaliza complet fiecare element.

2. Alternativ, puteți începe de la zero, făcând clic pe butonul plus pentru a adăuga o secțiune și construindu-vă designul dintr-o pânză albă.

În scopul acestui tutorial, vom adopta o combinație a ambelor metode – vom construi prima secțiune a site-ului nostru web de la zero și apoi vom alege din blocurile șablon pentru a completa secțiunile rămase.

Cum să creăm secțiuni ale site-ului de o pagină cu Elementor

Elementor folosește secțiuni, coloane și widget-uri pentru a crea aspectul oricărei pagini. Secțiunile sunt cele mai mari blocuri de construcție și puteți adăuga coloane în interiorul lor. În interiorul acestor secțiuni sau coloane, veți putea adăuga widget-urile pe care le doriți.

Click pe semnul „+” pentru a adăuga o secțiune și pentru a alege structura coloanelor.

Când treceți deasupra unei secțiuni, apare o margine albastră cu un mâner în partea de sus. Acest mâner vă permite să adăugați o nouă secțiune goală deasupra secțiunii existente sau să editați/eliminați o secțiune. Dacă faceți clic pe punctele din mijloc, puteți accesa controalele secțiunii – aspect, stil și avansat. Mai mult, puteți muta secțiunile în sus sau în jos trăgând pe puncte și puteți face clic dreapta pentru a aduce mai multe opțiuni, cum ar fi duplicarea sau ștergerea.

În mod similar, puteți face clic pe mânerul cu pictograma coloană din colțul de sus pentru a alege aspectul coloanelor din cadrul secțiunii. De asemenea, puteți ajusta lățimea coloanelor și spațiul dintre ele. Faceți clic dreapta pe căsuțe pentru a adăuga mai multe coloane, a le duplica pe cele existente, a le șterge și multe altele.

Din panoul Elementor, puteți trage orice element (numit widget) în coloană. Odată ce adăugați un element într-o coloană sau secțiune, apare o pictogramă de tip creion în colțul din dreapta sus. Faceți clic pe această pictogramă pentru a afișa conținutul, stilul și opțiunile avansate de editare din panoul Elementor.

Cum să creați prima secțiune

Vom folosi prima secțiune pentru a le permite vizitatorilor să cunoască natura afacerii și câte ceva despre ea. În acest scop, puteți utiliza întreaga lățime a secțiunii pentru a plasa o imagine de fundal. În timp ce editați aspectul secțiunii, puteți ajusta lățimea conținutului și puteți întinde secțiunea la întreaga lățime a paginii, prin simpla comutare a unui buton.

Pentru a adăuga imaginea de fundal, alegeți opțiunea de editare a secțiunii, făcând clic pe punctele din mâner. Vizitați fila Style care apare în panou și încărcați imaginea din Media Library. Ajustați dimensiunea imaginii, precum și suprapunerea.

Vom adăuga o singură coloană în cadrul secțiunii și o vom centra în cadrul secțiunii. În interiorul coloanei, vom folosi trei widget-uri – Heading care le spune vizitatorilor că vindeți fructe și legume proaspete, un editor de text care atrage atenția asupra opțiunilor de livrare la domiciliu și un buton de unde vizitatorii pot plasa o comandă.

Adați un widget de tip Heading:

Trageți un widget de tip text:

Adați widgetul de tip Button:

Acum puteți personaliza fiecare widget folosind opțiunile de editare.

Dacă doriți, puteți, de asemenea, să adăugați widgeturile în trei coloane separate prin adăugarea de coloane făcând clic pe pictograma coloană. Ceea ce este important de reținut aici este faptul că fiecare widget poate fi ajustat minuțios pentru aspect, stil și multe altele.

Creați secțiunile rămase

Acum că prima secțiune este gata, puteți trece la cele trei rămase – Despre noi, Produse și Contact.

Așa cum am menționat mai devreme, vom folosi blocuri de șabloane gata făcute din biblioteca Elementor pentru a construi aceste trei secțiuni. Elementor are multe blocuri șablon gratuite în fiecare dintre aceste categorii, iar biblioteca poate fi căutată.

Pentru secțiunea Despre noi, vom alege un bloc șablon simplu, cu un titlu, un editor de text și un widget video. Puteți înlocui toate acestea cu propriul dvs. conținut.

Bloc șablon cu conținutul înlocuit:

În același mod, puteți folosi blocuri șablon pentru secțiunea Produse și Contact. Șablonul utilizat pentru secțiunea Contact vine cu pictograme de social media. Faceți clic pe fila Style (Stil) pentru a controla culoarea pictogramei, dimensiunea, umplutura și multe altele.

Din moment ce Elementor permite o mare cantitate de personalizare, puteți face ca aceste secțiuni să arate diferit față de șabloanele importate.

Când ați terminat de făcut modificările dorite, faceți clic pe butonul verde Publish (Publicare) și modificările vor fi live pe site.

Legăturați meniul la secțiunile de o pagină

Pentru a avea un meniu de navigare pe care se poate face clic, trebuie să conectați diferitele secțiuni din designul Elementor cu meniul de navigare pe care l-ați creat la pasul nr. 3. Pentru a face acest lucru, deschideți ID-ul unei secțiuni și mergeți la fila Advanced (Avansat). În câmpul CSS ID din Elementor Panel, în secțiunea corespunzătoare, completați numele corect al secțiunii fără hashtag.

De exemplu, dacă meniul dvs. se leagă la #about-us, veți adăuga CSS ID-ul ca about-us. Apoi, repetați procesul pentru toate secțiunile pe care doriți să le legați:

Setați designul dvs. ca pagină de pornire

Ca ultim pas, puteți seta pagina pe care tocmai ați creat-o ca pagină de pornire a site-ului one page creat cu Elementor. Pentru a face acest lucru, mergeți la Settings → Reading. Faceți clic pe Select a static page (Selectați o pagină statică) sub Your homepage displays (Afișează pagina dvs. de pornire) și selectați designul pe care l-ați creat. În cele din urmă, faceți clic pe Save Changes.

Dacă sunteți confuz de vreun pas, avem un ghid complet privind configurarea unei pagini de pornire statice WordPress.

În cele din urmă, site-ul dvs. cu o singură pagină este acum gata. Iată un exemplu de cum ar putea arăta:

Concluzie

Iată trei pași simpli care vă vor permite să creați astăzi un site cu o singură pagină:

1. Determinați accentul pe care îl va avea site-ul dumneavoastră.
2. Selectați o temă de calitate cu o singură pagină, cum ar fi Neve.
3. Proiectați-vă site-ul folosind Elementor dacă este necesar.