Crea un sito Web a pagina singola con una pagina di navigazione in WordPress (con bonus)

Stai cercando di realizzare un sito web per la tua attività ma non hai il tempo per crearne uno grande? O non sei pronto a impegnarti nella manutenzione del sito Web a lungo termine?

Quindi dovresti scegliere un sito Web a pagina singola con navigazione a una pagina. Il sito Web a pagina singola fornisce tutte le informazioni in modo attraente e conferisce al tuo sito Web un aspetto straordinario in modo che i tuoi utenti possano impegnarsi di più.

In questo blog imparerai non solo come creare un sito Web a pagina singola con una pagina di navigazione in WordPress , ma anche come aggiungere un modulo di contatto in un pop-up come bonus.

La maggior parte delle persone lascia il sito Web se non trova un modo corretto per contattare il proprietario, quindi questo suggerimento bonus aggiungerà davvero un valore straordinario al tuo sito Web.

Non perdiamo altro tempo e iniziamo il processo di creazione di un sito Web dall'aspetto straordinario con una navigazione di una pagina di Elementor . Puoi controllare l'aspetto finale del sito dal pulsante qui sotto:

Cos'è la navigazione in una pagina?

La navigazione di una pagina come suggerisce il nome è un menu di navigazione appositamente progettato per navigare in diverse parti di un sito Web a pagina singola. La navigazione di una pagina con un effetto di scorrimento fluido rende la navigazione in diverse sezioni un'esperienza facile e intuitiva.

"La semplicità è la sofisticatezza finale." - Leonardo Da Vinci

E questa semplicità offre ai siti Web a pagina singola il vantaggio di cui hanno bisogno rispetto agli altri. Un sito Web di una pagina è ottimo per le piccole imprese come wedding planner, fotografia, piccolo salone, ristorante, ecc.

Tuttavia, se hai una grande attività di e-commerce che vende troppi prodotti o fornisce più servizi e deve soddisfare un pubblico più ampio, il sito Web a pagina singola non fa per te.

Quali sono i vantaggi del sito Web a pagina singola con navigazione a pagina singola?

Non dovresti pensare di ottenere un sito Web di una pagina per la tua attività solo perché la tua attività è piccola. Ci sono molti altri vantaggi nell'avere un sito Web di una pagina, in particolare un sito Web WordPress di una pagina. Diamo un'occhiata ad alcuni dei pro:

• In primo luogo, è ottimizzato per i dispositivi mobili. Questa è una cosa fondamentale da considerare quando si tratta di SEO del sito web (ottimizzazione per i motori di ricerca). Nel 2021, il 70% dei cittadini statunitensi utilizza un dispositivo mobile per effettuare ricerche su Internet. Dati come questi sono il motivo per cui Google dà la priorità a un sito web ottimizzato per i dispositivi mobili. Con il design a pagina singola, il tuo sito web entra nei buoni libri di Google fin dall'inizio.

• La maggior parte delle persone preferisce un sito Web semplice, bello e diretto al punto piuttosto che uno inutilmente lungo.
• Google conta l'autorità di collegamento a livello di pagina e dominio fino al 40%. Questa è un'altra area in cui il tuo sito di una pagina avrà un vantaggio.
• I siti Web a pagina singola si caricano più velocemente rispetto ai siti Web con tonnellate di pagine. Considerando il fatto che le persone al giorno d'oggi hanno opzioni illimitate, avere un sito a caricamento rapido è davvero non negoziabile.
• I siti di una pagina sono facili da mantenere.
• Poiché un sito Web a pagina singola ha tutte le informazioni su una pagina, la navigazione a scorrimento semplifica notevolmente la navigazione e un effetto di scorrimento fluido rende l'esperienza dell'utente rilassante.

Posso andare avanti ancora per un po' di tempo, ma penso che le informazioni di cui sopra trasmettano il messaggio che se la tua attività è piccola, puoi ottenere grandi vantaggi in effetti davvero grandi utilizzando il piccolo sito Web con la navigazione di una pagina. Quindi, passiamo al processo principale senza perdere tempo.

Come creare un singolo sito Web con la navigazione di una pagina in WordPress

In questo blog, ti mostrerò non solo come creare un sito Web, ma anche una navigazione di una pagina dall'aspetto moderno in WordPress che impressionerà i tuoi potenziali clienti. Per questo tutorial, userò il famoso costruttore di siti Web WordPress (lo so che c'è scritto nel titolo!)

Quindi iniziamo…

Passaggio 1: installa i plugin WordPress richiesti

Una volta installato WordPress sul tuo sistema. Devi installare i seguenti plugin per WordPress:

• Elementor (versione gratuita)
• ElementsKit (versione gratuita e versione Pro entrambe)
• MetForm (versione gratuita)

Una volta terminata l'installazione e l'attivazione dei plug-in WordPress richiesti, è il momento di creare il sito.

Passaggio 2: crea un sito Web utilizzando la pagina predefinita di ElementsKit

ElementsKit fornisce molte pagine predefinite, modelli e sezioni in modo che le persone possano creare un sito Web con qualsiasi design, layout e stile desiderino anche senza codifica. Per questo blog, utilizzerò la pagina di destinazione del wedding planner di ElementsKit.

Per creare il tuo sito web, dalla dashboard di WordPress, vai su Pagine ⇒ Aggiungi nuovo

• Assegna un titolo come Home, scegli Elementor Full Width dalle opzioni del modello
• Fai clic su Pubblica e dopo la pubblicazione fai clic su Modifica con Elementor

• Fai clic sul pulsante ElementsKit (EK) una volta aperta la finestra di Elementor Builder

• Vai alla scheda Pagina , Cerca la pagina del matrimonio e fai clic su Inserisci

Ora fai clic su Aggiorna per salvare

Passaggio 3: come aggiungere Elementor per la navigazione di una pagina utilizzando ElementsKit

Ora che abbiamo il nostro sito Web, è il momento della parte divertente che consiste nell'aggiungere la navigazione a scorrimento di una pagina.ElementsKit La navigazione a scorrimento di una pagina è più facile da usare e conferisce al tuo sito un aspetto straordinario. È molto improbabile che trovi un altro componente aggiuntivo Elementor di navigazione di una pagina buono come ElementsKit.

Ora, diamo un'occhiata al processo passo passo per aggiungere un collegamento di navigazione a scorrimento di una pagina al tuo sito WordPress:

3.1 Attivare il modulo di scorrimento di una pagina

Per aggiungere la navigazione a scorrimento al tuo sito WordPress, per prima cosa, dobbiamo attivare il modulo di scorrimento di una pagina.

• Vai a: dashboard di WordPress ⇒ ElementsKit ⇒ Moduli
• Attiva Scorrimento di una pagina
• Fare clic su Salva modifiche per aggiornare

3.2 Abilita una pagina Scorrere dalle impostazioni della pagina

• Fai clic sull'icona Impostazioni nell'angolo in basso a sinistra del pannello Elementor
• Apri la scheda Impostazioni ElementsKit
• Abilita l'opzione di scorrimento di una pagina

Nota: se non riesci a trovare l'opzione Impostazione scorrimento di una pagina, probabilmente non hai attivato ElementsKit Pro

3.3 Scegli lo stile di navigazione

Ora è il momento di scegliere lo stile di navigazione. ElementsKit ti offre più opzioni per la navigazione. Ad esempio, sotto il cerchio, ottieni l'ingrandimento, il riempimento, il riempimento, ecc. Per il motivo quadrato, avrai opzioni come l'ingrandimento e come parte di Linea avrai opzioni come la linea da crescere, il riempimento della linea , restringimento linea, ecc.

Puoi scegliere lo stile che preferisci, per questo blog sceglierò l'icona personalizzata. Dopo aver scelto un'icona personalizzata, avrai un'opzione per scegliere un'icona per l'opzione Stile di navigazione a scorrimento di una pagina. Puoi scegliere un'icona dalla libreria di icone o caricare un'icona SVG personalizzata.

Per scegliere un'icona personalizzata

• Scegli l'opzione Icona personalizzata dal menu a discesa dello stile di navigazione
• Passa il mouse sull'icona di navigazione e fai clic sulla libreria di icone
• Cerca e inserisci l'icona che ti piace

3.4 Configurare altre impostazioni di navigazione

Dopo aver scelto uno stile di navigazione, avrai accesso alle seguenti impostazioni:

• Posizione di navigazione: è possibile impostare la posizione di navigazione in alto, a destra, in basso o a sinistra.
• Spostamento posizione di navigazione: qui puoi scegliere il valore di spostamento della posizione di navigazione.
• Spaziatura di navigazione: scegli lo spazio che desideri tra ogni icona di navigazione.
• Colore di navigazione: scegli un colore per l'icona di navigazione.
• Tipografia della descrizione comando: qui puoi scegliere famiglia, dimensione del carattere, trasformazione del peso, stile, decorazione e altezza della linea per la descrizione comando.

3.5 Aggiungere sezioni di pagina ai collegamenti di navigazione

Ora che tutte le impostazioni sono state eseguite è il momento di aggiungere le sezioni che vuoi far apparire nella navigazione. Fare così

• Passa il mouse sulla sezione e fai clic sull'icona Modifica sezione
• Vai alla scheda Avanzate
• Espandi l'opzione di scorrimento della pagina di ElementsKit
• Attiva abilita la sezione per rendere visibile la sezione
• Attiva l'opzione abilita punto per aggiungere questa sezione come uno dei collegamenti di navigazione
• Fornisci un nome per il testo della descrizione comando . Il testo della descrizione comando verrà visualizzato quando qualcuno passerà con il mouse sul collegamento
• Infine, fai clic su Aggiorna per salvare

Puoi ripetere la stessa procedura sopra menzionata per aggiungere tutte le sezioni che desideri alla navigazione.

Nota: puoi aggiungere una sezione alla navigazione, non la sezione interna. Quindi, non troverai l'opzione ElementsKit Onpage Scroll nella scheda avanzata per la sezione interna o qualsiasi altro widget.

Dopo aver effettuato tutta la navigazione, aggiorna e fai clic per vedere l' anteprima della navigazione di una pagina in WordPress e anche per controllare i collegamenti del menu di navigazione.

Passaggio 4: aggiungi il piè di pagina dell'intestazione utilizzando la sezione del piè di pagina dell'intestazione predefinita di ElementsKit

Bene, ora hai un sito Web di navigazione di una pagina in WordPress, ma hai ancora bisogno di un piè di pagina di intestazione per completare il tuo sito Web. Le sezioni di intestazione e piè di pagina di un sito Web sono molto importanti per visualizzare il tuo logo e informazioni importanti in modo che i tuoi clienti possano vederlo facilmente.

ElementsKit ti offre molte sezioni di intestazione e piè di pagina predefinite tra cui scegliere. Per utilizzare il piè di pagina dell'intestazione ElementsKit:

• Vai a ElementsKit ⇒ Piè di pagina intestazione ⇒ Fai clic su Aggiungi nuovo

• Scegli Tipo come intestazione , Condizioni come intero sito , Attiva l'opzione Attiva/Disattiva e infine fai clic su Salva modifiche .

• Ora per aggiungere la sezione dell'intestazione, fai clic su Modifica nel menu che hai creato
• Fare clic su Modifica contenuto
• Fai clic sul pulsante EK e vai alla scheda Sezioni
• Scegli il design dell'intestazione che ti piace e fai clic su Inserisci

Puoi seguire il video qui sotto per creare un bellissimo footer di intestazione per il tuo sito web.

Nota: puoi seguire gli stessi passaggi di Header per creare una sezione Footer per il tuo sito Web utilizzando le sezioni Premade di ElementsKit.

Passaggio 5: aggiungi il modulo di contatto come popup modale (BONUS)

È ora di aggiungere un modulo di contatto al tuo sito Web in modo che sia più facile per i tuoi potenziali clienti comunicare con te. L'aggiunta di un modulo di contatto utilizzando un popup darebbe al tuo sito Web di una pagina un aspetto più attraente insieme al modulo tanto necessario di cui hai bisogno.

Per aggiungere un popup modale, sostituirò il pulsante RSVP con un popup modale e aggiungerò un modulo di contatto.

• Vai a ElementsKit ⇒ Widget ⇒ Attiva popup modale ⇒ Fai clic su salva modifiche

• Vai alla tua pagina iniziale ⇒ (o come hai chiamato la tua pagina) e fai clic su Modifica con Elementor

• Nella modalità di modifica, scorrere fino alla sezione RSVP ed eliminare il pulsante RSVP
• Trascina e rilascia il pop up modale al posto del pulsante RSVP

• Per modificare il testo del pulsante modale vai su Contenuto ⇒ Pulsante Toggler ⇒ Etichetta e cambia "Apri modale" in RSVP (o qualsiasi cosa tu voglia)

• Vai alla scheda Stile ⇒ Pulsante interruttore per modificare il colore di sfondo del pulsante, il colore del testo, il raggio del bordo e altre impostazioni sia per la visualizzazione normale che al passaggio del mouse.

• Ora vai su Contenuto e attiva la modalità Abilita modello in modo da poter aggiungere il nostro modulo di contatto.
• Fare clic sul pulsante popup. Una volta aperto, fai clic sull'icona di modifica sul corpo per aprire l'editor di Elementor

• Cerca Metform, trascina e rilascia il widget
• Fare clic sul modulo Modifica per scegliere il modulo di contatto
• Scegli il modulo che desideri dall'elenco e fai clic su salva e chiudi
• Infine, fai clic su Aggiorna per salvare

Nota: avevo già creato il modulo RSVP utilizzando Metform e ho anche cambiato leggermente il colore e lo stile per adattarli al modello di pagina di destinazione che stiamo utilizzando. Puoi dare un'occhiata al blog su come creare e definire lo stile dei moduli di contatto utilizzando Metform .

Puoi anche guardare il video qui sotto per istruzioni su come creare un modulo di contatto personalizzato utilizzando Metform.

Passaggio n. 6: aggiorna e visualizza l'anteprima Sito Web singolo con navigazione in una pagina

Bene, tutto è fatto. Passiamo ora al passaggio finale, il più semplice ed emozionante. Dopo aver completato tutta la personalizzazione e i passaggi sopra menzionati, fai clic sul pulsante Aggiorna per salvare tutto e fai clic sul pulsante Anteprima per vedere il tuo sito.

A condizione che tu abbia seguito correttamente tutti i passaggi, dovresti ottenere un sito Web a pagina singola con navigazione di una pagina in WordPress come quello di seguito:

Incartare

Datti una pacca sulla spalla! Perché hai creato con successo un bellissimo sito Web dall'aspetto moderno con la navigazione di una pagina utilizzando Elementor ed ElementsKit. Utilizzando un sito Web a pagina singola, i clienti possono navigare facilmente in diverse sezioni del tuo sito Web per conoscere la tua attività. E quel popup modale con un clic con modulo di contatto rende la comunicazione davvero a portata di clic!

Se sei impressionato da ciò che hai costruito, preparati a sorprenderti ancora di più perché ElementsKit offre possibilità illimitate agli utenti di WordPress ed Elementor di sperimentare e creare un sito Web dall'aspetto fantastico. Quindi, prenditi del tempo per controllare altri widget e moduli avanzati di ElementsKit.

Per saperne di più sulla creazione di siti Web utilizzando WordPress, Elementor e il magico ElementsKit, seguici sui nostri account di social media.