Italian 
English 
German 
Spanish 
French 
Danish 
Portuguese 
Swedish 
Polish 
Korean 
Japanese 
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:
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.
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:
- Innanzitutto è ottimizzato per i dispositivi mobili. Questa è una cosa cruciale da considerare quando si tratta di SEO del sito web (ottimizzazione per i motori di ricerca). A partire dal 2021, 70% di un cittadino statunitense utilizza un dispositivo mobile per effettuare ricerche su Internet. Dati come questi sono il motivo Google dà priorità a un sito web ottimizzato per i dispositivi mobili. Con il design a pagina singola, il tuo sito web entra nei migliori libri di Google fin dall'inizio.
- 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.
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:
- Elementor (Versione gratuita)
- ElementsKit (Versione gratuita e Pro entrambe)
- MetForm (Versione gratuita)
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
- 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
- Fai clic sul pulsante ElementsKit (EK) una volta aperta la finestra Elementor Builder
- Vai a Pagina scheda, Cerca Nozze Pagina e fare clic su inserire
Ora clic in aggiornamento per salvare
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
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
Nota: Se non riesci a trovare l'opzione Impostazione scorrimento di una pagina, probabilmente non l'hai trovata attivato il tuo ElementsKit Pro
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.
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
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.
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
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.
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
- Scegli Digita come Intestazione, Condizioni come Intero sito, Accendere l'opzione Attiva/Disattiva e infine fare clic su Salvare le modifiche.
- 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
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.
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
- 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
- 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
- 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)
- 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.
- 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
Puoi controllare maggiori dettagli sul nostro blog su diversi modi per utilizzare il widget modale pop-up di ElementsKit sul tuo sito WordPress
- 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
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.
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:
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.
Lascia un commento