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 600.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 WordPress che ti consente di creare facilmente i tuoi layout WordPress personalizzati senza alcuna abilità di codifica.

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

Offre diversi modelli di pagine dal design professionale che è possibile 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

Innanzitutto, dovrai acquistare il plug-in 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 come installare un plugin per WordPress.

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

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.

È possibile escludere o includere ruoli utente che possono utilizzare Elementor durante la scrittura di articoli o pagine. Per impostazione predefinita, è abilitato solo per gli amministratori.

Scopri la nostra Plugin 8 WordPress per gestire ruoli e utenti

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]

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

Creazione di un layout personalizzato con Elementor

Innanzitutto, devi creare una nuova pagina (o pubblicare) sul tuo sito Web WordPress. Nella pagina delle pubblicazioni, noterai il nuovo pulsante "Modifica con Elementor".

Cliccandoci sopra si avvierà l'interfaccia utente di Elementor in cui è possibile modificare la pagina utilizzando il generatore di pagine con la funzione di trascinamento della selezione.

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.

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 puoi iniziare a modificare il modello in base alle tue esigenze. Basta puntare e fare clic su qualsiasi elemento per selezionarlo ed Elementor mostrerà le sue impostazioni nella colonna di sinistra.

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.

Puoi aggiungere elementi alle tue colonne e sezioni usando i widget forniti da Elementor.

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

Basta selezionare un widget e rilasciarlo nella sezione o colonna. È disponibile una vasta gamma di widget che coprono tutti i più diffusi elementi di web design che puoi immaginare.

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]

Puoi aggiungere immagini, testo, argomenti, gallerie di immagini, video, mappe, icone, testimonianze, cursori, giostre e altro.

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

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

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

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 l'anteprima della tua pagina o accedere alla dashboard di WordPress. Il che ti riporterà all'editore predefinito di WordPress. Ora puoi salvare la tua pagina WordPress o pubblicarla sul tuo sito web.

Ecco fatto, quindi hai finito di creare una pagina con il plugin WordPress Elementor.

Ma come molti generatori di pagine, offre anche estensioni che ti permetterà di creare facilmente e rapidamente nuovi layout aggiungendo più elementi di design al plugin 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 plug-in migliorerà il tuo pacchetto Elementor con una vasta gamma di moduli, che saranno estremamente utili durante la creazione del tuo sito web. Elementi potenti sono stati appositamente creati per essere integrati nelle funzionalità di Elementor e infine per offrire soluzioni versatili ed elementi eleganti.

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 fantastico, che ti consente di aggiungere i tuoi moduli di contatto e integrarli 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.

Le sue caratteristiche principali sono: Non è necessaria alcuna conoscenza della codifica, da 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. [FREE]

3. JetWooBuilder

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

Come caratteristiche troverete tra gli altri: diversi modelli di pagine di prodotti unici, molti elementi visivi per creare pagine di prodotti WooCommerce, molti widget di contenuti accattivanti, come Aggiungi al carrello, Anteprima, Immagine, Notazione, 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 23
  1. Ciao Thierry
    Dal profondo del cuore, grazie mille per l'articolo. Ora ho una preoccupazione che mi ha infastidito per un giorno. Ho iniziato con wordpress e utilizzo ocean WP come tema, quindi ho installato elementor in versione gratuita, quindi con questa versione gratuita ho iniziato a creare le mie pagine e va bene, ma il problema che mi è venuto in mente è che quando pubblico la mia pagina o l'articolo una volta che hanno le lettere maiuscole non compaiono dopo un punto o all'inizio della mia frase è necessario le impostazioni sulla tipografia o sulla famiglia di caratteri hanno scelto in breve di aiutarmi a capire meglio dove si trova la versione gratuita che non ha capitale dopo un punto. 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.

  2. 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

  3. Buongiorno,
    Ho un problema Negli ultimi mesi, non ho aggiornato il mio sito Web su cui utilizzo questo elemento; oggi ho provato a farlo ma ho un problema, molte sezioni mi mostrano una scatola con la parola OFF SECTION e non posso fare nulla. Posso modificare solo una sezione della pagina, quella in cui ho il testo stesso.
    Sai cosa può funzionare?

  4. ciao, come e dove si modifica un modello di archivio in elementor pro? Non riesco a inserire il contenuto nella colonna laterale del blog

  5. Buongiorno,
    Imparo a costruire un sito Web con WordPress, Elementor è un ottimo plugin, consente molto, scopro qualcosa di nuovo.
    Anche problemi;) Di solito mi occupo di soluzioni. Non ora

    Ho un problema con il text editing. Il paragrafo e le intestazioni sono entrambi rigidi e non posso modificare il carattere, il colore, lo spessore, ecc. Nonostante i cambiamenti nelle impostazioni, non cambia nulla. Questo non è un problema di pattern perché il suo font e la sua combinazione di colori sono diversi da quelli di Elementor.
    Non so come modificare questo parametro template mi è successo lo stesso con l'intestazione 1, ma l'ho modificato inserendo il codice html nell'intestazione e aiutato, ora non funziona.

    Come cambierà? - 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.

  6. Buonasera.
    Ho aggiunto una foto sul sito (pagina di destinazione) e ho provato a cambiare per un'altra che non potevo ... eliminare più volte e ho messo la nuova foto ma non carica ... la vecchia foto rimane ...
    Saresti in grado di aiutarmi?

  7. Ciao e grazie per questo articolo che mi rafforza nella scelta di Elementor come page builder. ^^

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

    La mia paura è che tutte le modifiche apportate vengano sovrascritte durante l'aggiornamento del tema? Non c'è un rischio?

    Ringraziandoti per la tua risposta,
    Bien à vous,
    Nicolas

  8. Ciao e grazie per questo articolo molto interessante.
    Ho iniziato ad usare Elementor e mi chiedevo se non fosse necessario prima di continuare a creare un tema figlio di quello che uso. In caso contrario, non c'è il rischio che il tema oi plug-in maJs sovrascrivano il layout integrato con Elementor?
    Ringraziandoti per il tuo ritorno,

  9. Buongiorno,

    Mi piacerebbe sapere come avere il codice PHP dell'estensione ELEMENTOR per integrarlo nella mia homepage?

    Ti ringrazio per la tua attenzione alla mia richiesta.

  10. Buongiorno,

    articolo molto interessante.
    Ho una domanda per l'elemento principale che sei.
    È possibile aggiungere i moduli generati, un metodo = "POST"?

    Jeanson

  11. ottimo articolo, voglio chiedere, quando ho iniziato ad andare all'elemento elementare, o perché sembra che ci sia un'intestazione e un footernya, 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