Come rendere la pagina full width con Elementor

E Alcune semplici mosse per assicurarsi che la pagina su cui stiamo lavorando con Elementor sia full width, quindi occupi tutta la larghezza disponibile.

Pagina full width con Elementor | Cecilia Quinterio | www.ceciliaquinterio.it

Pagina full width

Accedi alla pagina su cui vuoi lavorare e scegli di modificarla con Elementor. In questo modo, dovresti trovarti di fronte a una pagina bianca con una sidebar sulla sinistra, che contiene tutti gli elementi del Plugin.

Trascina elemento con Elementor | Cecilia Quinterio | www.ceciliaquinterio.it

Comincia con il predisporre la prima sezione, quindi clicca sul pulsante colorato con il simbolo + e scegli la tua struttura; prova selezionando il blocco intero (1/1).

Elementor scegli la struttura | Cecilia Quinterio | www.ceciliaquinterio.it

Ora puoi procedere alla modifica della sezione per renderla full width. Seleziona quindi la sezione appena creata e spostati col mouse nella barra laterale alla voce Layout. Clicca sul menu a tendina Larghezza contenuto e scegli Larghezza piena.

Larghezza piena pagina Elementor | Cecilia Quinterio | www.ceciliaquinterio.it

Prova a inserire del contenuto. La larghezza full width che hai impostato è perfetta, ad esempio, per un’immagine di sfondo, ma magari può risultare poco indicata per un testo, che rischia di non avere l’adeguata spaziatura laterale.

Verifichiamo insieme: scegli tra gli elementi drag&drop quello nominato Editor di testo e trascinalo nella sezione creata in precedenza.

Editor di testo Elementor | Cecilia Quinterio | www.ceciliaquinterio.it

Come puoi notare, il testo occupa tutta la larghezza della pagina. Per migliorarne la leggibilità, sarebbe meglio che questo elemento avesse deigli spazi. Per ottenerli, seleziona nella sidebar le opzioni avanzate e regola i rientri.
Puoi personalizzare quelli dei differenti device, scegliere se esprimere le distanze in pixel oppure percentuale e se differenziare le distanze tra sopra, sotto, destra e sinistra, oppure mettere un valore uguale.

Fai delle prove, ricordandoti di visualizzare le modifiche che stai apportando sia direttamente sul foglio di lavoro che in una pagina autonoma, cliccando sull’icona con l’occhio, che trovi in basso a sinistra accanto al pulsante Pubblica/Aggiorna.

Editor di testo Avanzato Rientro Elementor | Cecilia Quinterio | www.ceciliaquinterio.it

Buon lavoro! 😉