Vai al contenuto principale

Come creare un layout personalizzato con Elementor

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 701.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Vuoi creare i tuoi layout personalizzati su WordPress? Vuoi creare facilmente un sito Web con un aspetto professionale? Quindi devi farlo Scarica qui il plug-in Elementor per WordPress.

 Elementor è un generatore di pagine visive che offre la funzione "Trascina selezione" che ti consente di creare facilmente layout personalizzati su WordPress senza alcuna conoscenza di codifica.

In questo tutorial, ti mostreremo come creare facilmente layout personalizzati di WordPress con Elementor con pochi clic. Offriamo anche controlla le altre alternative di questo bellissimo plugin per WordPress.

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.

Perché e quando creare layout personalizzati su WordPress?

Prima di iniziare, puoi scoprire su questo plugin WordPress consultando gli articoli Presentazione di una pagina del costruttore di WordPress: Elementor o scoprire il Tutorial Elementor: Presentazione dell'interfaccia 

Molti temi WordPress gratuiti e premium offrono diverse opzioni di layout per diversi tipi di pagine. Tuttavia, a volte nessuno di questi modelli di layout soddisfa le tue esigenze.

Tuttavia, se sei un fan di PHP, HTML e CSS, hai la possibilità di creare i tuoi modelli di pagina o persino creare un tema figlio per il tuo sito web. Ma la maggior parte degli utenti di WordPress non sono sviluppatori, quindi questa opzione non funziona per loro.

Scopri anche questi Plugin 8 WordPress per creare facilmente i tuoi layout

Non sarebbe bello creare layout usando una semplice interfaccia (trascina e rilascia)?

Questo è esattamente ciò che fa Elementor. Questo è un plug-in per la creazione di pagine di WordPress che ti consente di creare facilmente i tuoi layout WordPress personalizzati senza alcuna capacità di codifica.

Ha un'interfaccia utente intuitiva che ti consente di creare layout personalizzati con anteprima in tempo reale. Viene fornito con molti moduli già pronti per tutti i tipi di elementi di web design.

Offre diversi modelli di pagina progettati in modo professionale che puoi caricare e utilizzare immediatamente come punto di partenza. Detto questo, diamo un'occhiata a come creare layout WordPress personalizzati con il plug-in Elementor di WordPress.

Introduzione a Elementor

Per prima cosa dovrai acquistare il plugin " Elementor Pro ". Questa è la versione a pagamento del plugin " Elementor Gratuito che ti dà accesso a funzionalità aggiuntive e all'assistenza clienti di 1.

Quindi dovrai installare e attivare il plugin Elementor. Per maggiori dettagli, consulta la nostra guida dettagliata su modo per installare un plugin per WordPress.

Dopo l'attivazione, visita il " Elementor> Impostazioni Per configurare il funzionamento di questo plugin.

Elementorsettings

Qui è possibile attivare "Elementor" per diversi tipi di pubblicazione. Per impostazione predefinita, è abilitato per i tuoi articoli e le pagine di WordPress. Se sul tuo sito web sono presenti formati di pubblicazione personalizzati, questi verranno visualizzati anche qui e puoi anche abilitarli.

Sarai in grado di escludere o includere ruoli utente che possono utilizzare Elementor durante la scrittura di post o pagine. Per impostazione predefinita, è abilitato solo per gli amministratori.

Scopri la nostra Plugin 8 WordPress per gestire ruoli e utenti

Non dimenticare di fare clic sul pulsante « Salva modifiche Per salvare le tue impostazioni.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Creazione di un layout personalizzato con Elementor

Innanzitutto, devi creare una nuova pagina (o post) sul tuo sito Web WordPress. Nella pagina di modifica del post, noterai il nuovo pulsante "Modifica con Elementor".

Modifica con elementor

Facendo clic su di esso verrà avviata l'interfaccia utente di Elementor in cui è possibile modificare la pagina utilizzando il generatore di pagine visive con funzionalità di trascinamento della selezione.

Trascina e rilascia elementor

Ora puoi aggiungere sezioni e creare la tua pagina da zero, oppure puoi ancora caricare uno dei modelli di spedizione predefiniti.

I modelli sono un modo più veloce per iniziare rapidamente. Pertanto, Elementor offre diversi modelli progettati in modo professionale che è possibile personalizzare quanto si desidera.

Cominciamo con un modello facendo clic sul pulsante " Aggiungi un modello '.

Verrà visualizzata una finestra pop-up in cui è possibile visualizzare i diversi modelli disponibili. Dovresti cercare un modello che assomigli a quello che vuoi. 

Plugin elemntor di layout

Ora fai clic per selezionare il modello desiderato, quindi fai clic sul pulsante inserire Per aggiungerlo alla tua pagina.

Elementor caricherà il modello per te.

È ora possibile iniziare a modificare il modello in base alle proprie esigenze. Basta puntare e fare clic su qualsiasi elemento per selezionarlo ed Elementor ti mostrerà le sue impostazioni nella colonna di sinistra.

Inizio della modifica della pagina su elementor

Ora parliamo di come funzionano i layout di Elementor.

I modelli offerti dal plugin Elementor sono basati su sezioni, colonne e widget. Le sezioni sono come linee o blocchi che inserisci nella tua pagina.

Ogni sezione può avere più colonne e ogni sezione e colonna può avere i propri stili, colori, contenuti, ecc.

Modifica di una pagina con elementor

Hai la possibilità di aggiungere elementi nelle tue colonne e sezioni utilizzando i widget offerti da Elementor.

Questi widget sono tipi di blocchi di contenuto che puoi posizionare in sezioni delle tue pagine.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Seleziona un widget e rilascialo nella tua sezione o colonna. È disponibile una vasta gamma di widget che coprono ogni elemento di web design popolare che puoi immaginare.

Element e design con elementor

Puoi aggiungere immagini, testi, argomenti, gallerie di immagini, video, mappe, icone, testimonianze, slider, caroselli e molto altro.

Vedi anche il nostro Temi e modelli di 15 Elementor per creare un sito Web

Puoi anche aggiungere widget WordPress predefiniti e persino widget creati da altri plugin WordPress al tuo sito web.

Una volta terminata la creazione o la modifica del layout, puoi fare clic sul pulsante " Enregistrer Per mantenere le tue modifiche.

Personalizza il layout con elementor

osservazione: Il salvataggio di un layout non pubblicherà la pagina sul tuo sito Web WordPress. Salverà semplicemente il tuo layout.

A questo punto hai la possibilità di visualizzare in anteprima la tua pagina o andare alla dashboard di WordPress. Il che ti riporterà all'editor di post predefinito di WordPress. Ora puoi salvare la tua pagina WordPress o pubblicarla sul tuo sito web.

Pubblicazione del layout con elementor

Questo è tutto, quindi ho finito di creare una pagina con il plugin Elementor di WordPress.

Ma come molti generatori di pagine, offre anche estensioni che ti consentirà di creare facilmente e rapidamente nuovi layout portando più elementi di design al plug-in predefinito.

Scarica Elementor

Scopri anche alcuni plugin WordPress premium  

Puoi utilizzare altri plugin di WordPress per dare un aspetto moderno e ottimizzare la presa del tuo blog o sito Web.

Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. JetElements 

Questo plugin migliorerà il tuo pacchetto Elementor con un'ampia varietà di moduli, che saranno estremamente utili durante la creazione del tuo sito web. Elementi potenti sono stati creati appositamente per essere integrati con la funzionalità di Elementor per offrirti finalmente soluzioni versatili ed elementi eleganti.

Elementor wordpress plugin jetelement

Le sue caratteristiche principali sono: molti moduli utili, contenenti molte opzioni di stile, parametri funzionali ed elementi assolutamente personalizzabili, incredibili elementi per avviare rapidamente il tuo negozio online, supporto per le lingue RTL, Supporto plug-in WPML e un modulo Contattare 7 Modulo incredibile, che ti consente di aggiungere i tuoi moduli di contatto e incorporarli nel tuo sito web.

Download | Demo | Web hosting

2. JetMenu 

JetMenu è un'estensione molto funzionale plug-in Elementor, che ti permette di creare megamenus con elementi di scorrimento facili da usare. Questo plugin non limita la tua immaginazione e ha il potenziale per creare menu straordinari e rinnovarli in base alla tua visione e alle tue esigenze.

Plugin elementor per wordpress Jetmenu

Le sue caratteristiche principali sono: non è richiesta alcuna conoscenza di codifica, funzioni ricche che si combinano perfettamente con semplicità e chiarezza, una vasta selezione di moduli di contenuto, appositamente sviluppati per aiutarti a creare i tuoi menu, un layout altamente reattivo e altro ancora.

Se vuoi ravvivare i menu o i megameni del tuo sito Web, consulta questo plugin WordPress.

Download | Demo | Web hosting

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

3. JetWooBuilder 

JetWooBuilder è un componente aggiuntivo indispensabile che consente di creare pagine di prodotti WooCommerce complete con Elementor.

Jetwoobuilder wordpress elementor plugin

Come caratteristiche troverete tra gli altri: diversi modelli di pagina di prodotto unici, molte immagini per creare pagine di prodotti WooCommercemolti widget di contenuti accattivanti, come Aggiungi al carrello, Anteprima, Immagine, Valutazione, Correlati e molti altri, la possibilità di visualizzare tassonomie del prodotto e più.

Download | Demo | Web hosting

Alcune risorse utili:

Conclusione:

Questo è tutto per questo tutorial, spero che ti permetta di creare layout moderni e professionali con il plugin Elementor.

Tuttavia, sarai anche in grado di consultare il nostro 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.

Soprattutto condividi questo articolo sui tuoi diversi social network.

...

Questo articolo contiene i commenti 24

  1. Thierry Ciao!

    Molte grazie per questo fantastico post.
    Uso ELEMENTOR PRO e ho creato una pagina nella quale ho scaricato tramite ELEMENTOR un layout già realizzato, però non capisco, si trova in TUTTO il mio sito ... tutta la mia architettura web è cambiato ed è questo layout che trovo in tutte le pagine del mio sito. Il vecchio layout invece non è stato cancellato ma si trova in fondo alla pagina. Quando clicco su "MODIFICA con ELEMENTOR" non riesco a cancellarlo ... qualche idea da dove provenga?
    Un grande grazie!

  2. Ciao Thierry
    Dal profondo del mio cuore grazie mille per l'articolo. Ora ho una preoccupazione che mi da fastidio da alcuni giorni, sono nuovo di wordpress e utilizzo ocean WP come tema e poi ho installato elementor come versione gratuita quindi con questa versione gratuita ho iniziato creando le mie pagine e va bene ma il problema che mi è sorto è che quando pubblico la mia pagina o l'articolo una volta che ce l'ho le lettere maiuscole non compaiono dopo un punto o all'inizio della mia frase è necessario impostazioni sulla tipografia o sulla famiglia di caratteri scelti insomma per aiutarmi a capire meglio dov'è la versione gratuita che dopo un punto non ha le maiuscole. Grazie per la comprensione.

    1. Buongiorno,

      Ti consiglio di contattare il supporto del plugin Elementor sulla sua pagina WordPress.org. Troverai sicuramente una risposta dagli autori.

  3. Ciao
    Ho creato la mia homepage tramite la scheda personalizzata della mia interfaccia wordpress. Perché non trovo lo stesso in elementor? su elementor la mia barra dei menu non è nello stesso posto e non ho il mio logo che appare! Preferisco quello su wordpress ma quando faccio una visualizzazione del mio sito è la homepage di elementor che appare! Puoi dirmi come si fa?
    Ringraziandoti p

  4. Buongiorno,
    Ho un problema Da alcuni mesi non aggiorno il mio sito web dove utilizzo questo elemento; oggi ho provato a farlo ma ho un problema, la maggior parte delle sezioni mi mostra una casella barrata con la parola OFF SECTION e non c'è niente che posso fare. Posso modificare solo una sezione della pagina, quella in cui ho il testo stesso.
    Sai cosa può funzionare?

  5. ciao, come e dove modifichi un modello di archivio in elementor pro? Non riesco a inserire contenuti nella colonna laterale del blog

  6. Buongiorno,
    Sto imparando a costruire un sito web con WordPress, Elementor è un ottimo plugin, aiuta molto, scopro qualcosa di nuovo.
    Anche problemi;) Di solito mi occupo di soluzioni. Non ora

    Ho un problema con la modifica del testo. Il paragrafo e le intestazioni sono entrambi rigidi e non posso cambiare il carattere, il colore, il peso, ecc. Nonostante i cambiamenti nelle impostazioni, non cambia nulla. Non è un problema di pattern, in quanto ha un carattere tipografico e uno schema di colori diversi da quello che mi dà Elementor.
    Non so come cambiare questo parametro del modello mi è successo anche con l'intestazione 1, ma l'ho cambiato inserendo il codice html nell'intestazione e ho aiutato, ora non funziona.

    Come cambierà questo? - per favore aiuto.

    1. Buongiorno,

      Prova a disabilitare tutti i plugin di WordPress e riprova. Se il tuo problema viene risolto quando sono tutti disabilitati, inizia attivandoli uno per uno, quindi controlla ogni volta.

      Se si tratta di un problema di compatibilità con un altro plug-in, saprai quale.

  7. Buonasera.
    Ho aggiunto una foto sul sito (Landing Page) e stavo cercando di cambiarla con un'altra che non potevo ... eliminare più volte e ho inserito la nuova foto ma non si carica ... la vecchia foto rimane ...
    Potresti aiutarmi?

  8. Ciao e grazie per questo articolo che conferma la mia scelta di Elementor come mio page builder. ^^

    D'altra parte, cosa ne pensi della creazione di un sito figlio prima delle modifiche. È necessario con Elementor?

    Il mio timore è che tutte le modifiche apportate vengano sovrascritte durante l'aggiornamento del tema? Non c'è un rischio?

    Ringraziandoti per la tua risposta,
    Bien à vous,
    Nicolas

  9. Ciao e grazie per questo articolo molto interessante.
    Ho iniziato a usare Elementor e mi chiedevo se fosse necessario prima di procedere a creare un tema figlio di quello che sto usando. Altrimenti, non c'è il rischio che gli aggiornamenti del tema o dei plugin sovrascriveranno semplicemente il layout costruito con Elementor?
    Ringraziandoti per il tuo ritorno,

  10. Buongiorno,

    Vorrei sapere come ottenere il codice PHP dell'estensione ELEMENTOR per integrarlo nella mia home page?

    Grazie per l'attenzione alla mia richiesta.

  11. Buongiorno,

    articolo molto interessante.
    Ho una domanda per il pro elementor che sei.
    È possibile aggiungere nei form generati un metodo = "POST"?

    Jeanson

  12. articolo molto buono, voglio chiedere, quando ho iniziato ad andare su elementor, o perché sembra che ci siano un'intestazione e un piè di pagina, come sembrare vuoto

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
23 azioni
quota18
Tweet
Enregistrer5