Come costruire un sito web completo con Elementor

Elementor offre regolarmente temi che ti aiutano a costruire un sito web completo con questi. Ogni mese rilasciamo nuovi temi che sono costruiti attorno a una nicchia specifica, ma abbastanza flessibili da poterli finalmente personalizzare in base alle proprie esigenze.

Combinati con Elementor Pro, questi temi ti aiutano a iniziare rapidamente con ogni parte del tuo sito web, tra cui:

il petà statiche, come la home page,

• l'intestazione
• il piè di pagina
• pagina 404
• la sezione Archivio 
• il blog
• Popup e altri

Quindi, in questo tutorial, ti mostreremo come creare un sito Web completo utilizzando il generatore di pagine visive Elementor.

Ma prima, se non hai mai installato WordPress, scopri Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog 

Quindi torniamo al perché siamo qui.

Come costruire un sito web completo con temi Elementor

In questo tutorial imparerai come utilizzare un tema come base per tutte le parti importanti del tuo sito Web, quindi metterlo insieme per creare un sito Web coerente.

Più precisamente, il tema Digital Agency.

Il tuo sito web avrà una serie di pagine di base, come le pagine:

• Home
• Gruppo LFPI
• Servizi
• Clienti
• Blog
• Contatti

E offre anche sezioni dedicate anche ai contenuti dinamici. Ad esempio, gli archivi dei post del tuo blog e i modelli di post corrispondono automaticamente alle tue pagine autonome. Puoi anche modificare l'intestazione, il piè di pagina e pagine 404

Quindi, ecco come creare un sito Web con un tema Elementor:

1. Installa e attiva il tema Elementor Hello 

Poiché utilizzerai Elementor e un modello di tema per creare l'intero sito Web, non è necessario cercare altri elementi.

Invece, avrai solo bisogno di un sito Web leggero e ottimizzato per le prestazioni, fornito dal tema Elementor Hello.

Per iniziare, vai a Aspetto → Temi → Aggiungi e cerca " Ciao Elementor". Quindi installa e attiva il tema. 

2. Configura le pagine statiche di base del tuo sito web

Quindi vai al menu Pages → Aggiungi per creare le pagine di base del tuo sito web.

Innanzitutto, crea una pagina chiamata " Home E fai clic sul pulsante Modifica con Elementor per avviare Elementor.

aperto Impostazioni pagina e modificare il suo disposizione in modo che sia uguale a Elementor a tutta larghezza.

Quindi apri la libreria di modelli Elementor e cerca "Agenzia digitale" in Pagine :

Dovresti vedere un elenco di modelli di pagina di questo tema. Inserisci modello Pagina dall'elenco dei modelli.

Ora dovresti vedere una home page completa. L'intestazione per ora sembra un po 'noiosa, ma non preoccuparti, lo sistemeremo presto.

Quindi utilizza Elementor Finder per aggiungere un'altra pagina da utilizzare per la tua pagina " Gruppo LFPI".

Come prima, cambia il layout - Layout di pagina - à Elementor a tutta larghezza. Quindi apri la libreria dei modelli e inserisci il modello About del tema Agenzia Digitale.

Ora ripeti lo stesso processo per creare tutte le altre pagine, tra cui: Servizi, Clienti e Contatto.

Non preoccuparti ancora per la pagina del blog. Questa pagina non è statica come le altre. Per questo motivo, lo creerai lì tramite un metodo diverso (che tratteremo più avanti in questo tutorial).

Per completare la configurazione delle tue pagine statiche, devi dire alla tua installazione di WordPress di utilizzare una home page statica. Per farlo…

• andare a Impostazioni → Lettura
• Choisir  Pagina statica nelle impostazioni della tua home page 
• Seleziona la pagina che incorpora il modello di home page del tema

3. Crea le altre parti del tuo sito web

Ora sei pronto per costruire le altre parti del tuo sito web usando Elementor. Elementor ti permette di andare oltre la creazione di pagine statiche (come hai fatto sopra).

Con Elementor, puoi anche progettare sezioni come: en-testa; il piè di pagina, ecc ...

E grazie al tema Elementor, sarai in grado di importare modelli per tutte le sezioni che sono già nelle pagine statiche che hai creato nel passaggio precedente.

Per accedere al visual builder di Elementor, vai a Modelli → Crea temi. Dovrai installare Elementor Pro per potervi accedere.

Ora è il momento di creare le tue sezioni

Top della mente

Per iniziare, vai alla scheda testata dell'interfaccia del visual builder, quindi fare clic su Aggiungi nuova intestazione. Nella schermata successiva, assegnagli un nome, quindi fai clic su Crea modello.

Quindi vedrai una selezione di modelli nella libreria Elementor. Proprio come hai fatto con le pagine statiche, cerca "Agenzia digitale" e poi inseriscilo:

Ora dovresti vedere un'anteprima visiva della tua intestazione, insieme a uno spazio vuoto per il tuo menu di navigazione.

Attualmente il menu di navigazione è vuoto perché non hai ancora creato un menu. Per creare il tuo menu ...

• andare a  Aspetto → Menu nella dashboard di WordPress
• Dai un nome al tuo menu
• Fare clic Crea il menu

Dopo aver creato un menu, puoi aggiungere le pagine che hai creato nel passaggio 2 al tuo menu di navigazione.

Leggi anche: 10 strumenti di automazione per il marketing delle piccole imprese

Quando hai finito di aggiungere voci di menu, salva il menu e torna al modello di intestazione nell'interfaccia di Elementor.

con bagno, pubblicare l'intestazione e utilizza le condizioni di visualizzazione per visualizzare il modello di intestazione in tutto il tuo sito web. Se lo desideri, puoi anche utilizzare le condizioni di visualizzazione per creare intestazioni diverse per diversi tipi di contenuto:

Quindi premere Salva e chiudi.

footer

Ora è il momento di creare il piè di pagina del tuo sito web:

• Torna all'interfaccia del generatore di pagine visive
• Fare clic sulla scheda footer 
• Fare clic sul pulsante per Aggiungi nuovo piè di pagina
• Nel pop-up, dai un nome al tuo piè di pagina e fai clic su Crea modello

Ora dovresti vedere un elenco di modelli di piè di pagina proprio come hai fatto con l'intestazione. Cerca "Agenzia digitale" e inserisci il modello del piè di pagina.

Dopo aver inserito il modello del piè di pagina, dovresti vedere un'anteprima del tuo piè di pagina:

con bagno, pubblicare il modello del piè di pagina e utilizza i termini di visualizzazione per visualizzarlo sull'intero sito web.

pagina del blog

A differenza delle pagine statiche che hai creato nel passaggio 2, la pagina del blog del tuo sito web è un " archiviare ". Fondamentalmente, questo significa che visualizza dinamicamente i contenuti più recenti sul tuo sito web.

Se un utente fa clic su un elemento specifico nella pagina del blog, verrà indirizzato a una pagina con il contenuto di tale elemento. Questa è chiamata la pagina "singola". Il tuo design unico garantisce che tutti i tuoi contenuti abbiano lo stesso stile di base: l'unica cosa che cambia è il contenuto effettivo (come il titolo del post, il corpo, l'immagine in primo piano, ecc ...).

Scopri Come aggiungere un sommario in WordPress con Elementor

Per creare pagine di archivio e modelli di pagina univoci, è necessario utilizzare il visual builder Elementor, non le zone pagina ou articolo Default di WordPress.

Iniziare…

• Apri l'interfaccia Theme Builder
• Vai alla scheda Archivio
• Fare clic su Aggiungi nuovo archivio
• Dagli un nome e fai clic su Crea modello

Come con l'intestazione e il piè di pagina, vedrai un elenco di modelli di pagina di archivio. Cerca il modello "Agenzia digitale" e inseriscilo.

Ora dovresti vedere il design di base della tua pagina di notizie, anche se l'unico contenuto sarà l'impostazione predefinita "Hello World!" Da WordPress:

Per ora, tutto ciò che devi fare è Pubblicare la tua pagina di archivio e impostala per la visualizzazione su tutti gli archivi.

Leggi la nostra guida su Come migrare manualmente un sito Web WordPress

Quindi puoi andare alla normale area dei post di WordPress e creare nuovi post sul blog. Assegna a ciascun articolo una categoria denominata "Oltre le notizie".

Ora, quando navighi nella pagina dell'archivio, dovresti vedere automaticamente tutti questi nuovi post:

Creazione della pagina del modello di post del blog

A questo punto, la pagina del tuo blog ha un aspetto abbastanza user-friendly. Ma se fai clic su un post del blog specifico, il layout non corrisponderà al resto del tuo sito web.

Per risolvere questo problema, è necessario creare un modello "unico" con Elementor:

• Apri il visual builder di Elementor
• Vai alla scheda Singolo
• Fare clic Aggiungi nuovo singolo

Nel pop-up Nuovo modello :

• Dategli un nome
• selezionare Inviare nell'elenco a discesa Seleziona Post Type. Questo dice a Elementor che desideri utilizzare questo modello per i tuoi post sul blog (al contrario di Pages o di qualche altro tipo di post personalizzato che potresti usare)

Ancora una volta, vedrai la libreria di modelli Elementor. Trova il modello di articolo unico del modello "Agenzia digitale" e inseriscilo.

Leggi anche Modalità di manutenzione su WordPress: spiegazione e configurazione

Se lo desideri, puoi utilizzare i numerosi widget di dati di pubblicazione dinamica per controllare l'aspetto della tua pagina.

Ad esempio, se modifichi il widget  Informazioni sul post, sarai in grado di controllare gli elementi di metadati che appaiono, come sulla pubblicazione ...

• Auteur
• Data di pubblicazione
• commenti
• Etc.

Una volta che sei soddisfatto del modello del tuo articolo, fai clic su Pubblica. Quindi puoi utilizzare le opzioni di visualizzazione in modo che questo modello unico si applichi solo ai post nella categoria "Oltre le notizie":

• Seleziona dal file catégorie
• Scegli la categoria Oltre le notizie

Quindi premere Enregistrer et chiudere.

Ora tutti i post del tuo blog dovrebbero avere un design che corrisponda al resto del tuo sito web.

Per finire le cose, vai a Aspetto → Menu e aggiungi la pagina del tuo blog al menu di navigazione. Per fare ciò, puoi aggiungere un collegamento alla categoria "Oltre le notizie" nella sezione Categorie.

pagina 404

Infine, devi creare la pagina 404 del tuo sito web. La pagina 404 del tuo sito web è ciò che i visitatori vedranno se seguono un collegamento interrotto o tentano di visitare una pagina che non esiste.

Scopri anche il nostro 5 WordPress plugin per gestire al meglio gli errori 404

Per creare la tua pagina 404, usa il visual builder di Elementor per aggiungere un altro modello unico. Solo ora usa l'elenco a discesa Seleziona Post Type selezionare 404 Pagina :

Inserisci il modello di pagina 404 come fatto sopra. Quindi pubblica il tuo modello per completare il tuo sito web.

Ottieni Elementor Pro ora!

Conclusione

Ecco ! Questo è tutto per questa guida che ti mostra passo dopo passo come costruire un sito web completo con Elementor. Se ne hai commenti o suggerimenti, non esitate a farcelo sapere nella sezione riservata.

Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ma nel frattempo, condividi questo articolo sui tuoi diversi social network. 

...