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

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

Allora dovresti optare per un sito Web a pagina singola con navigazione a una pagina. Il sito Web a pagina singola fornisce tutte le informazioni in modo accattivante e conferisce al tuo sito Web un aspetto straordinario in modo che i tuoi utenti possano coinvolgere di più.

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

La maggior parte delle persone abbandona il sito web se non trova un modo adeguato 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 a Navigazione di una pagina di Elementor. Puoi controllare l'aspetto finale del sito dal pulsante qui sotto:

Cos'è la navigazione su 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 in una sola 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 organizzatori di matrimoni, fotografi, piccoli saloni, ristoranti, ecc.   

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

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

Non dovresti pensare di creare 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 vantaggi:

  • La maggior parte delle persone preferisci un sito web semplice, bello e pertinente piuttosto che inutilmente lungo. 
  • Google conta Dominio e livello di pagina autorità di collegamento a un grado di 40%. Questa è un'altra area in cui il tuo sito di una pagina avrà un vantaggio.
  • I siti Web di una sola pagina si caricano più velocemente dei siti Web con tonnellate di pagine. Considerando il fatto che oggigiorno le persone hanno opzioni illimitate, avere un sito che si carica velocemente non è davvero negoziabile.
  • I siti di una pagina sono facili da mantenere.
  • Poiché un sito Web a pagina singola contiene tutte le informazioni su un'unica pagina, la navigazione a scorrimento rende molto più semplice la navigazione e un effetto di scorrimento fluido rende l'esperienza dell'utente rilassante.

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

Come creare un singolo sito Web con navigazione in una sola pagina In WordPress

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

 Quindi iniziamo…

Passaggio #1: installa i plugin WordPress richiesti per creare Elementor One Page Scroll

Una volta installato WordPress sul tuo sistema. È necessario installare i seguenti plugin WordPress per creare

un sito web Elementor con scorrimento di una pagina:

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

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

ElementsKit ne fornisce molti pagine e modelli predefiniti 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ò il file Pagina di destinazione del pianificatore di matrimoni di ElementsKit.

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

Passare a WordPress Nuova pagina elemento di navigazione di una pagina
  • Dai un titolo come Home, scegli Elementor a tutta larghezza dalle opzioni del modello
  • Fare clic per pubblicare e dopo la pubblicazione clicca su Modifica con Elementor
Crea una pagina con Elementor page builder elemento di navigazione di una pagina
  • Fai clic sul pulsante ElementsKit (EK) una volta aperta la finestra Elementor Builder
Fare clic sul pulsante ElementsKit
  • Vai a Pagina scheda, Cerca Nozze Pagina e fare clic su inserire
Cerca e inserisci la home page del matrimonio tramite ElementsKit Navigazione di una pagina in WordPress

Ora clic in aggiornamento per salvare

Fai clic su Aggiorna per salvare le modifiche Elemento o navigazione di una pagina

Passaggio #3: come aggiungere la navigazione di una pagina di Elementor 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 di Elementor. ElementsKit La navigazione a scorrimento di una pagina è più facile da usare e conferisce al tuo sito un aspetto sorprendente. È molto improbabile che tu possa trovare un altro componente aggiuntivo Elementor con scorrimento 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 Attiva il modulo di scorrimento di una pagina

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

  • Vai a: Dashboard WordPress ⇒ ElementsKit ⇒ Moduli 
  • Accendere Scorrimento di una pagina
  • Clicca su Salvare le modifiche aggiornare
Attiva Onepage Scroll per ElementsKit navigazione di una pagina elementor Elementor scorrimento di una pagina scorrimento di una pagina elementor

3.2 Abilita lo scorrimento di una pagina 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 Scorrimento di una pagina
Abilita lo scorrimento di una pagina dalle impostazioni Elementor Navigazione di una pagina in WordPress

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

3.3 Scegli lo stile di navigazione

Ora è il momento di scegliere lo stile di navigazione. ElementsKit ti offre molteplici opzioni per la navigazione. Ad esempio, sotto il cerchio, ottieni Ingrandisci, riempi, compila, ecc. Per il modello quadrato, avrai opzioni come ingrandisci e come parte di Linea otterrai opzioni come la linea da ingrandire, il riempimento della linea , restringimento della linea, ecc.

Opzione Stile di navigazione con scorrimento di una pagina

Puoi scegliere lo stile che preferisci, per questo blog sceglierò l'icona personalizzata. Dopo aver scelto un'icona personalizzata, avrai la possibilità di scegliere un'icona per l'opzione Stile di navigazione con scorrimento di una pagina. Puoi scegliere un'icona da libreria di icone o carica un personalizzato Icona SVG

Per scegliere un'icona personalizzata

  • Scegli l'icona personalizzata opzione dal menu a discesa dello stile di navigazione
  • Passa il mouse sull'icona di navigazione e clic nella libreria delle icone
  • Cerca e inserisci l'icona che ti piace
Scegli l'icona di navigazione personalizzata Navigazione di una pagina in WordPress

3.4 Configurare altre impostazioni di navigazione

Una volta scelto uno stile di navigazione, avrai accesso alle seguenti impostazioni:

  • Posizione di navigazione: È possibile impostare la posizione di navigazione come in alto, a destra, in basso o a sinistra. 
  • Scostamento della posizione di navigazione: Qui puoi scegliere il valore di offset della posizione di navigazione.
  • Spaziatura di navigazione: Scegli lo spazio che desideri tra ciascuna icona di navigazione.
  • Colore di navigazione:  Scegli un colore per l'icona di navigazione.
  • Tipografia della descrizione comando: Qui puoi scegliere la famiglia, la dimensione del carattere, la trasformazione del peso, lo stile, la decorazione e l'altezza della linea per la descrizione comando.
Altre impostazioni dello stile di navigazione, dell'elemento di scorrimento di una pagina o della navigazione di una pagina

3.5 Aggiungere sezioni di pagina ai collegamenti di navigazione

Ora che tutte le impostazioni sono state completate, è il momento di aggiungere le sezioni che desideri vengano visualizzate nella navigazione. Fare così

  • Passa il mouse sulla sezione e fare clic su Modifica sezione icona
  • Vai a Scheda Avanzate
  • Espandere Opzione di scorrimento della pagina ElementsKit
  • Attiva abilita la sezione per rendere visibile la sezione
  • Attiva abilita fait opzione per aggiungere questa sezione come uno dei collegamenti di navigazione
  • Fornire un nome per testo della descrizione comando. Il testo della descrizione comando verrà visualizzato quando qualcuno passerà il mouse sul collegamento
  • Infine, fai clic su Aggiorna per salvare
Aggiungi una sezione di pagina allo scorrimento di navigazione di una pagina

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

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

Dopo aver effettuato tutta la navigazione, aggiornare e fare clic per vedere il anteprima di navigazione di una pagina in WordPress e anche per controllare i collegamenti del menu di navigazione.

Navigazione di una pagina in WordPress utilizzando elemento o navigazione di una pagina

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

Bene, ora hai un sito Web con navigazione di una pagina in WordPress, ma hai ancora bisogno di un piè di pagina dell'intestazione per completare il tuo sito Web. Le sezioni 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 vederle facilmente.

ElementsKit te ne fornisce molti Intestazione preimpostata E Sezioni piè di pagina scegliere da. Per utilizzare il piè di pagina dell'intestazione ElementsKit:

  • Vai a ElementsKit ⇒ Piè di pagina intestazione ⇒ Fare clic su Aggiungere nuova
Aggiungi una nuova intestazione ElementsKit Navigazione di una pagina in WordPress
  • Scegli Digita come Intestazione, Condizioni come Intero sito, Accendere l'opzione Attiva/Disattiva e infine fare clic su Salvare le modifiche.
Crea intestazione utilizzando ElementsKit
  • Ora per aggiungere la sezione dell'intestazione, fai clic su Modifica nel menu che hai creato
  • Fare clic su Modifica contenuto
  • Fare clic sul pulsante EK e andare alla scheda Sezioni
  • Scegli il design dell'intestazione che ti piace e fai clic su Inserisci 
Inserisci la sezione di intestazione di ElementsKit

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

Nota: Puoi seguire gli stessi passaggi dell'Intestazione per creare una sezione Piè di pagina per il tuo sito web utilizzando le sezioni predefinite di ElementsKit.

Scarica la gif di ElementsKit

Passaggio #5: aggiungere 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 file RSVP pulsante con un popup modale e aggiungi un modulo di contatto.

  • Vai a ElementsKit ⇒ Widget ⇒ Attiva la modalità Popup ⇒ Fai clic su Salva modifiche
Attiva e salva il widget modale popup di ElementsKit
  • Vai alla tua pagina Tutte le pagine ⇒ home page (o qualunque sia il nome che hai dato alla tua pagina) e fai clic su Modifica con Elementor
Modifica la home page con Elementor
  • Nella modalità di modifica, scorri fino alla sezione RSVP ed elimina il pulsante RSVP
  • Trascina e rilascia il popup modale al posto del pulsante RSVP
Trascina e rilascia il popup modale di ElementsKit e rimuovi il pulsante Navigazione in una pagina in WordPress
  • Per modificare il testo del pulsante modale vai su Contenuto ⇒ Pulsante di attivazione/disattivazione ⇒ Etichetta e modifica "Apri modale" in RSVP (o qualsiasi cosa tu voglia)
Modifica il testo del pulsante modale popup
  • Vai alla scheda Stile ⇒ Pulsante di attivazione/disattivazione per modificare il colore dello sfondo del pulsante, il colore del testo, il raggio del bordo e altre impostazioni sia per la visualizzazione normale che per quella al passaggio del mouse.
Cambia lo stile del pulsante modale popup con ElementsKit Elementor scorrimento di una pagina elemento di scorrimento di una pagina
  • 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
Abilita il modello e fai clic per aprire il pannello Elementor
  • Cerca Metform, trascina e rilascia il widget
  • Fare clic sul modulo Modifica per scegliere il modulo Contatto 
  • Scegli il modulo desiderato dall'elenco e fai clic su Salva e chiudi
  • Infine, fai clic su Aggiorna per salvare
Aggiungi Metform nel popup modale in un sito Web Elementor con scorrimento di una pagina di una pagina

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

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

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

Bene, tutto è fatto. Veniamo ora al passaggio finale, quello più semplice ed emozionante. Dopo aver completato tutte le personalizzazioni e i passaggi sopra menzionati, fai clic su Pulsante Aggiorna per salvare il tutto e cliccare su 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 a una pagina in WordPress come quello qui sotto:

Sito Web a pagina singola con elemento di navigazione di una pagina o elemento di navigazione di una pagina elemento di scorrimento di una pagina elemento di scorrimento di una pagina
Anteprima

Vuoi saperne di più su ElementsKit? Scopri l'ultimo aggiornamento su ElementsKit per saperne di più su questo fantastico componente aggiuntivo di Elementor.

Parole finali sul sito Web di scorrimento di una pagina di Elementor

Datti una pacca sulla spalla! Perché hai creato con successo un bellissimo sito Web dall'aspetto moderno con una navigazione di una pagina utilizzando Elementor ed ElementsKit. Utilizzando un sito Web a pagina singola, i clienti possono facilmente navigare 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 rimani colpito da ciò che hai creato, preparati a rimanere sorpreso 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 il tempo per controllarne 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 sui social media.


Commenti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *