Elementor offre regolarmente temi che ti aiutano creare un sito Web completo da 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.
Combinato 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
In questo tutorial, ti mostreremo come creare un sito web completare 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 mettere insieme tutto 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:
- Bem-vindo
- Chi siamo
- 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
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 " Bem-vindo "E fai clic sul pulsante Modifica con Elementor per avviare Elementor.
Fare clic impostazioni per aprire il file impostazioni della pagina e modificarne il layout in modo che sia uguale a Elementor a larghezza intera.
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 Homepage 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, aggiungi un'altra pagina da utilizzare per il tuo " Chi siamo".
Come prima, crea una pagina e cambia il layout in Elementor a larghezza intera. Quindi apri la libreria dei modelli e inserisci il modello Chi siamo 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 → Riproduzione
- Choisir Una pagina statica (scegli sotto) 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 consente 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→ Generatore di 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 Nuovo. Nella schermata successiva, vedrai una selezione di modelli nella libreria di Elementor. Proprio come hai fatto con le pagine statiche, cerca “Agenzia Digitale”, quindi inserisci:
Ora dovresti vedere un'anteprima visiva della tua intestazione, oltre a un menu di navigazione dal modello che hai inserito.
Se vuoi cambiarlo
- andare a Aspetto → Menu nella dashboard di WordPress
- Crea un nuovo 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, ciò significa che mostra dinamicamente i contenuti più recenti dal tuo sito web.
Se un utente fa clic su un elemento specifico nella pagina del blog, verrà indirizzato a una pagina che visualizza il contenuto di tale elemento. Questa è chiamata la pagina "singola". Il tuo design unico assicura che tutti i tuoi contenuti abbiano lo stesso aspetto: 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 di Generatore di temi
- Vai alla scheda Archivio
- Fare clic su Aggiungi nuovo
- 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 pagina dei tuoi articoli.
Va notato che se vedi solo un articolo è normale, perché WordPress viene fornito solo con un esempio predefinito che è "Hello World! ".
Per ora, tutto ciò che devi fare è Pubblicare la tua pagina di archivio e impostala in modo che venga visualizzata su tutti gli archivi.
Leggi la nostra guida su Come migrare manualmente un sito Web WordPress
Quindi puoi andare al menu dei post nella tua dashboard e creare nuovi post del blog. Assegna ogni elemento a una categoria denominata "Notizie".
Ora, quando vai alla pagina del tuo blog, 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 piuttosto intuitivo. Ma se fai clic su un post specifico del blog, 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 Post
- Fare clic aggiungi Nuovo
Nel pop-up Nuovo modello :
- Dategli un nome
- selezionare Post 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 pubblicare. 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 Notizie
Quindi premere Salva e chiudi.
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 link alla categoria "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, utilizza Elementor visual builder per aggiungere un altro modello unico.
- Apri il visual builder di Elementor
- Vai alla scheda Errore 404
- Fare clic aggiungi Nuovo
- Inserisci il modello di agenzia digitale dalla pagina 404
Successivamente, pubblica il tuo modello per completare il tuo sito web.
Ottieni Elementor Pro ora!
Conclusione
Ecco ! Questo è tutto per questa guida che te lo mostra passo dopo passo come creare un sito web completo di 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.
...
