elementor pro

Content Index

  • What is a Page Builder?
  • Elementor Pro
  • Hello Theme: the Theme from Elementor for Elementor
  • Interface and Main Functions
  • Theme Builder: How To Customise Every Single Part of Your Website
  • Other Functions

What Is a Page Builder?

CMS programs such as WordPress have been spreading faster and faster and so creating both simple and complex websites has been becoming a faster and more accessible process as it used to be back in the days.
You have certainly heard of the so-called “page builders” already, no matter if you are a web developer, a web designer or just an inexperienced user.
Page builders are plugins that are installed in WordPress to add editing functions to web pages.
Using a drag and drop system, it is possible to create web pages anew, or to modify web pages already existing.

Elementor Pro

There are several page builders available, but in my opinion Elementor is hands down the best and most performing one.
Most of the functions described in this article are related to the Elementor Pro version, which requires the payment of a fee to be used.
The free version is a good tool anyway, allowing users to create an entire website but with less functions and less customisation options available.
My advice is to think accurately about choosing a version requiring the payment of a fee, because visiting the
Elementor official site it is possible to choose among different subscriptions, according to the different needs a user may have, such as using Elementor Pro to create a personal website or to develop one or more business websites for your customers.
Elementor currently counts more than 8 million professionals using it to create websites. In the near future this number is expected to increase more and more thanks to the support developers are going to provide, right in the next few months.
Elementor definitely towers over other page builders thanks to the fact it is easy to use, immediate and versatile, thanks to a real-time view editor allowing a regular and complete overview on the work being done.

Hello Theme: the Theme from Elementor for Elementor

Elementor creators developed a tailored theme called Hello Theme.
Built on a simple code, this theme provides excellent performance both from the speed and the layout point of view, focusing on SEO as well.
This theme shows a minimal style and just a few customisation options are available as far as its interface is concerned, being left blank right to be modified and customised using Elementor itself.
This gives remarkable benefits in terms of website performance and navigation speed.
Nowadays, most of the themes often have CSS code stripes which are useless, slowing the website navigation speed down massively.
If your intent is to create a website you can surf fast and with no problems and which is completely customisable, then Hello Theme is the right option for you.
You could import preset template kits anyway, useful whether you want to start from a graphic base already existing.

Interface and Main Functions

Whether you want to develop a showcase website, a blog or an e-commerce website, every web page created using Elementor is completely customisable.
In order to do so, you can click on the “Modify with Elementor” button on the page you want to interact with.
If this option is not available you can modify the page as you usually would, and then, right at the top of it, the same button will be displayed.
After clicking on it, you reach the core of the view editor system, right from the website front-end page.
On the left sidebar of the editing page you can select and drag one or more widgets to add sections, columns, texts, images, slides, contact forms and so on.
Everything is possible according to a responsive-style attitude, with every page that can be modified for the needs of different devices: Desktop, Tablet or Mobile.
Elementor currently counts more than 90 different widgets, with more to come in the next few months. If you wish to keep yourself updated on the latest news about Elementor, please visit Elementor’s
YouTube Official Page: gimmicks and video tutorials are at your disposal, right there to help you understand how page builders work.
Every widget can be customised according to your will and needs, from the text, context and graphic aspects to padding values, without using any CSS code.
A dedicated option called “Customised CSS” is available too, allowing a complete customisation of every single widget.
For instance, the “Form” widget gives you the opportunity to create a contact form which is completely customisable, starting from the personal data required to the graphic style wanted.
This widget can integrate newsletter platforms such as Mailchimp or address users to a particular Thank You page once the form has been filled and sent.

Theme Builder: How To Customise Every Single Part of Your Website

One of the most interesting options available in Elementor, making it a really excellent product, is that of creating graphic templates of particular WordPress pages which are usually hard to be modified, unless using a proper code.
This is possible thanks to the Theme builder section, one of the most powerful instruments Elementor Pro has to create pages giving them proper viewing conditions.
In the WordPress settings section find this option at Template > theme builder.
Theme builder gives you the opportunity to create ad customise sections and pages of a website such as header, footer, article archive, 404 page and so on.
The view editor is the same you can use when changing a standard web page, with the new option of showing viewing conditions before publishing.
For example, once the template header is created, the “entire site” option allows Elementor to show it in the whole website.
Exclusion options can be activated too. For example we can choose not to show any header, or maybe to show a different header in a specific landing page of the website.

Other Functions

Please find a list of some other properties and functions available on Elementor Pro:

  • Customisation of the global graphic aspect of a website (colours and main fonts)
  • Uploading of files including specific fonts and customised icons
  • Creation of a Maintenance or Coming Soon page to be applied to the entire website
  • Integration to different third-party platforms such as Google Maps, Mailchimp, Font Awesome and so on
    Chance to modify, wholly or partly, Woocommerce preset pages, like Cart, Checkout, Product Archive, Product Page and so on
  • Chance to add slides and animations to every single element or widget
  • Chance to create Pop-Ups, even complex ones

Conclusions

Elementor Pro is a powerful tool to edit web pages, making it possible for everyone, even with little experience and knowledge in the field, to create a performing, fast and responsive website, even without knowing pretty much anything about how codes work.
It goes without saying that having a little bit of knowledge about HTML and CSS systems helps understand what is hidden behind this page builder, helpingusers to be able to customise everything and making the website you want really unique!

For more information please visit the
Elementor official website, at www.elementor.com
Thank you for your attention and time!

Edoardo







 

 
 

Cos’è un page builder?

Con il progressivo diffondersi di CMS come WordPress, creare siti internet più o meno complessi oggi è diventato un processo molto più accessibile e veloce rispetto al passato.

Che tu sia uno sviluppatore web, un web designer o un utente alle prime armi, sicuramente avrai sentito parlare dei c.d. “page builder”.

Tali plugin vengono installati all’interno di WordPress per aggiungere funzionalità di editing delle pagine dei siti web.

Mediante un sistema drag and drop (la traduzione letterale è “clicca e trascina”), si ha la possibilità di poter creare da zero delle pagine web, o di modificarne di già esistenti.

 

Elementor Pro

Esistono diversi Page builder sul mercato, ma a mio parere quello migliore e più performante in circolazione è Elementor.

Prima di proseguire con la lettura, voglio precisare che la maggior parte delle funzionalità di cui parleremo sono relative alla versione a pagamento “Elementor Pro”.

La versione free, che è sì una valida scelta in quanto ti permette lo stesso di creare un intero sito, risulta più “castrata”, con poche funzionalità e possibilità di personalizzazione.

Il mio consiglio, quindi, è quello di valutare il passaggio alla versione a pagamento, anche perché sul sito ufficiale hai la possibilità di scegliere tra più abbonamenti in base alle tue necessità, sia che tu voglia utilizzare Elementor Pro per il tuo sito web personale, sia che tu voglia sviluppare siti per uno o più tuoi clienti.

Data la premessa, parliamo un po’ di numeri: Elementor conta più di 8 Milioni di professionisti che lo utilizzano per creare i propri siti internet, numeri che tendenzialmente andranno ad aumentare sempre di più grazie al grande supporto che gli sviluppatori stanno dando e daranno nei prossimi mesi.

Ciò che contraddistingue Elementor dalla maggior parte degli altri page builder è la sua facilità d’uso, l’immediatezza e la versatilità, anche e soprattutto grazie a un editor visivo in tempo reale che consente di avere una visione a 360 gradi del lavoro che si sta facendo.

 

Hello Theme: il tema di Elementor, per Elementor

I creatori di Elementor hanno sviluppato un tema gratuito su misura chiamato Hello Theme.

Costruito con un codice semplice e snello, tale tema garantisce prestazioni eccellenti sia in termini di leggerezza sia in termini di velocità, con un occhio di riguardo anche alla SEO.

Trattasi di un tema con uno stile minimale e pochissime personalizzazioni lato interfaccia, dato che è stato pensato per apparire come un foglio bianco proprio per essere modificato con Elementor.

Tutto ciò ha degli enormi vantaggi in termini di performance e velocità del sito.

La maggior parte dei temi in circolazione, infatti, presentano spesso stringhe di codice CSS superflue ed inutili che non fanno altro che rallentare il sito web.

Se la tua intenzione è quella di creare un sito internet leggero, veloce e totalmente personalizzabile, allora Hello theme è il tema giusto per te.

Avrai comunque la possibilità di importare dei template kit già preimpostati, che potrebbero tornarti utili qualora tu voglia partire già da una base grafica.

 

L’interfaccia e le funzionalità principali di Elementor

Che tu voglia sviluppare un sito vetrina, un blog o un e-commerce, ogni pagina web creata con Elementor è totalmente personalizzabile.

Per fare ciò, all’interno della sezione Pagine della bacheca WordPress, ti basta passare il cursore del mouse su una delle pagine e cliccare su “Modifica con Elementor”.

Se non dovessi visualizzare questa opzione, modifica la pagina normalmente e in alto noterai lo stesso pulsante, come puoi vedere nell’immagine seguente.

Una volta cliccato, entrerai nel cuore dell’editor visivo, direttamente dal front-end del sito.

Sulla barra laterale sinistra della pagina di editing hai la possibilità di selezionare e trascinare uno o più widget per aggiungere sezioni, colonne, testi, immagini, slider, moduli di contatto e chi più ne ha più ne metta.

Il tutto, chiaramente, in un’ottica responsive, in quanto è possibile modificare la pagina per dispositivi diversi: Desktop, Tablet o Mobile.

Al momento attuale, Elementor conta più di 90 widget differenti, con ulteriori che arriveranno nei prossimi mesi. Se vuoi restare aggiornato sulle ultime novità di Elementor, visita la pagina Youtube ufficiale: troverai anche trick e video tutorial (in inglese) che ti aiuteranno a capire l’effettivo funzionamento del page builder.

Ogni widget può essere personalizzato a tuo piacimento, dal contenuto testuale e lo stile grafico ai valori di margine e padding, il tutto senza utilizzare il codice CSS.

Per i più esigenti è comunque disponibile un’apposita funzione “CSS personalizzato” che consente una personalizzazione totale di ogni singolo widget.

Per esempio, il widget “Form” ti dà la possibilità di creare un modulo di contatto totalmente personalizzabile, a partire dai dati anagrafici che si vogliono richiedere, fino allo stile grafico.

Particolarità di tale widget è quella di poter integrare piattaforme di newsletter come Mailchimp, o reindirizzare gli utenti ad una Thank you page specifica una volta inviato il modulo.

 

Theme Builder: come personalizzare ogni singola parte del tuo sito web

Una delle opzioni più interessanti di Elementor, che lo rende un prodotto veramente eccezionale, è quella di poter creare dei template grafici di determinate pagine WordPress che solitamente sono difficili da modificare, se non intervenendo con il codice.

Parliamo della sezione Theme builder, un potentissimo strumento di Elementor Pro che ti consente di generare delle pagine con Elementor ed attribuirne delle condizioni di visualizzazione.

Direttamente dalla Bacheca di WordPress, puoi trovare tale strumento alla voce Template > Theme builder.

Quest’ultimo ti dà la possibilità di creare e personalizzare sezioni e pagine del sito come l’header, il footer, l’archivio degli articoli, la pagina 404 e così via.

L’editor visivo è lo stesso, ciò che cambia rispetto alla modifica di una pagina normale è la possibilità di aggiungere delle condizioni di visualizzazione prima della pubblicazione.

Per fare un esempio, una volta creato il template dell’header, tramite l’attribuzione della condizione “entire site” diciamo ad Elementor di mostrarlo in tutto il sito.

Da sottolineare che è anche possibile attribuire delle condizioni di esclusione: potremmo volere non mostrare l’header, oppure mostrarne uno diverso, in una particolare landing page del sito.

 

Altre funzionalità

Di seguito, ecco una lista di altre caratteristiche e funzionalità che offre Elementor Pro:

  • Personalizzazione della grafica globale del sito (es. colori e font principali del sito);
  • Caricamento di file contenenti font e icone personalizzate;
  • Creazione di una pagina Manutenzione/Coming Soon da applicare all’intero sito;
  • Integrazione con diverse piattaforme di terze parti (es. Google Maps, Mailchimp, Font Awesome etc.);
  • Possibilità di modifica, in tutto o in parte, delle pagine preimpostate di Woocommerce: Carrello, Checkout, Archivio Prodotti, Pagina Prodotto etc.
  • Possibilità di aggiungere Transizioni e animazioni a ogni singolo elemento/widget;
  • Possibilità di creare Pop-up, anche molto complessi.

Conclusioni

Elementor Pro è un potente strumento di editing di pagine web che permette a chiunque, con un minimo di studio ed esperienza sul campo, di creare un sito web performante, veloce e responsive, anche senza necessariamente conoscere il codice.
È chiaro che comunque avere delle competenze di HTML e CSS sicuramente aiuta a capire e comprendere le logiche dietro al funzionamento di tale page builder, oltre al fatto di poter personalizzare davvero qualsiasi cosa e rendere unico il tuo sito web o quello del tuo cliente!

Se sei interessato ad approfondire qualcosa in particolare, ti rimando al sito ufficiale di Elementor.

Grazie per l’attenzione!

Edoardo

Content Index

  • What is a Page Builder?
  • Elementor Pro
  • Hello Theme: the Theme from Elementor for Elementor
  • Interface and Main Functions
  • Theme Builder: How To Customise Every Single Part of Your Website
  • Other Functions

What Is a Page Builder?

CMS programs such as WordPress have been spreading faster and faster and so creating both simple and complex websites has been becoming a faster and more accessible process as it used to be back in the days.
You have certainly heard of the so-called “page builders” already, no matter if you are a web developer, a web designer or just an inexperienced user.
Page builders are plugins that are installed in WordPress to add editing functions to web pages.
Using a drag and drop system, it is possible to create web pages anew, or to modify web pages already existing.

Elementor Pro

There are several page builders available, but in my opinion Elementor is hands down the best and most performing one.
Most of the functions described in this article are related to the Elementor Pro version, which requires the payment of a fee to be used.
The free version is a good tool anyway, allowing users to create an entire website but with less functions and less customisation options available.
My advice is to think accurately about choosing a version requiring the payment of a fee, because visiting the 
Elementor official site it is possible to choose among different subscriptions, according to the different needs a user may have, such as using Elementor Pro to create a personal website or to develop one or more business websites for your customers.
Elementor currently counts more than 8 million professionals using it to create websites. In the near future this number is expected to increase more and more thanks to the support developers are going to provide, right in the next few months.
Elementor definitely towers over other page builders thanks to the fact it is easy to use, immediate and versatile, thanks to a real-time view editor allowing a regular and complete overview on the work being done.

Hello Theme: the Theme from Elementor for Elementor

Elementor creators developed a tailored theme called Hello Theme.
Built on a simple code, this theme provides excellent performance both from the speed and the layout point of view, focusing on SEO as well.
This theme shows a minimal style and just a few customisation options are available as far as its interface is concerned, being left blank right to be modified and customised using Elementor itself.
This gives remarkable benefits in terms of website performance and navigation speed.
Nowadays, most of the themes often have CSS code stripes which are useless, slowing the website navigation speed down massively.
If your intent is to create a website you can surf fast and with no problems and which is completely customisable, then Hello Theme is the right option for you.
You could import preset template kits anyway, useful whether you want to start from a graphic base already existing.

Interface and Main Functions

Whether you want to develop a showcase website, a blog or an e-commerce website, every web page created using Elementor is completely customisable.
In order to do so, you can click on the “Modify with Elementor” button on the page you want to interact with.
If this option is not available you can modify the page as you usually would, and then, right at the top of it, the same button will be displayed.
After clicking on it, you reach the core of the view editor system, right from the website front-end page.
On the left sidebar of the editing page you can select and drag one or more widgets to add sections, columns, texts, images, slides, contact forms and so on.
Everything is possible according to a responsive-style attitude, with every page that can be modified for the needs of different devices: Desktop, Tablet or Mobile.
Elementor currently counts more than 90 different widgets, with more to come in the next few months. If you wish to keep yourself updated on the latest news about Elementor, please visit Elementor’s 
YouTube Official Page: gimmicks and video tutorials are at your disposal, right there to help you understand how page builders work.
Every widget can be customised according to your will and needs, from the text, context and graphic aspects to padding values, without using any CSS code.
A dedicated option called “Customised CSS” is available too, allowing a complete customisation of every single widget.
For instance, the “Form” widget gives you the opportunity to create a contact form which is completely customisable, starting from the personal data required to the graphic style wanted.
This widget can integrate newsletter platforms such as Mailchimp or address users to a particular Thank You page once the form has been filled and sent.

Theme Builder: How To Customise Every Single Part of Your Website

One of the most interesting options available in Elementor, making it a really excellent product, is that of creating graphic templates of particular WordPress pages which are usually hard to be modified, unless using a proper code.
This is possible thanks to the Theme builder section, one of the most powerful instruments Elementor Pro has to create pages giving them proper viewing conditions.
In the WordPress settings section find this option at Template > theme builder.
Theme builder gives you the opportunity to create ad customise sections and pages of a website such as header, footer, article archive, 404 page and so on.
The view editor is the same you can use when changing a standard web page, with the new option of showing viewing conditions before publishing.
For example, once the template header is created, the “entire site” option allows Elementor to show it in the whole website.
Exclusion options can be activated too. For example we can choose not to show any header, or maybe to show a different header in a specific landing page of the website.

Other Functions

Please find a list of some other properties and functions available on Elementor Pro:

  • Customisation of the global graphic aspect of a website (colours and main fonts)
  • Uploading of files including specific fonts and customised icons
  • Creation of a Maintenance or Coming Soon page to be applied to the entire website
  • Integration to different third-party platforms such as Google Maps, Mailchimp, Font Awesome and so on
    Chance to modify, wholly or partly, Woocommerce preset pages, like Cart, Checkout, Product Archive, Product Page and so on
  • Chance to add slides and animations to every single element or widget
  • Chance to create Pop-Ups, even complex ones

Conclusions

Elementor Pro is a powerful tool to edit web pages, making it possible for everyone, even with little experience and knowledge in the field, to create a performing, fast and responsive website, even without knowing pretty much anything about how codes work.
It goes without saying that having a little bit of knowledge about HTML and CSS systems helps understand what is hidden behind this page builder, helpingusers to be able to customise everything and making the website you want really unique!

For more information please visit the 
Elementor official website, at www.elementor.com
Thank you for your attention and time!

Edoardo

Articoli Collegati

adobe xd

Adobe XD: Come realizzare interfacce di siti web… e non solo!

Leggi
tema child wordpress

Anche i Temi hanno una famiglia. Tema Child: cos’è e come si crea

Leggi