Oxygen Builder: panoramica del visual editor

Sei alle prime armi con Oxygen Builder? Niente paura, sul nostro blog troverai moltissime guide pratiche, come questa, che ti insegneranno a realizzare siti web tramite il page builder Oxygen!

Questa guida in particolare serve a prendere dimestichezza con l'interfaccia grafica del visual editor, ovvero lo strumento che permette di costruire le nostre pagine web.

Se hai appena installato Oxygen ti consiglio di leggere questo articolo che spiega come accedere al visual editor.

Dunque il visual editor appena aperto si presenta così:

Molto semplicemente, la colonna di sinistra è la nostra "barra degli strumenti", da qui potrai aggiungere elementi alla pagina e modificarne l'aspetto grafico. Sulla destra invece, in quello spazio bianco, viene visualizzato in tempo reale il contenuto della pagina che stiamo modificando.

Quindi aggiungendo un testo tramite la barra degli strumenti, lo visualizzerai sulla destra e potrai modificarne il contenuto, spostarlo, ridimensionarlo e molto altro ancora.

Nella parte superiore invece abbiamo una barra che permette di svolgere diverse funzioni: aprire la struttura (o alberatura) della pagina, visualizzare la cronologia delle modifiche, opzione indietro, opzione avanti, modificare le impostazioni della pagina, le impostazioni globali e abbandonare l'editor.

Il tasto "Hide", posto subito sotto al tasto "+ Add", sulla sinistra, nasconde la colonna di sinistra, permettendo una visualizzazione a schermo intero della pagina in costruzione.

Come aggiungere elementi alla pagina con Oxygen Builder

Per aggiungere degli elementi alla pagina ti basterà cliccare sul pulsante blu "+ Add" e selezionare l'elemento desiderato. Gli elementi per intenderci non sono altro che testi, titoli, immagini, video, icone e qualsiasi altro elemento che può essere inserito in una pagina web.

Questo navigatore degli elementi è suddiviso in macro categorie, proverò a schematizzarle per aiutarti a capirne la logica di suddivisione:

• Basic: elementi classici come sezioni, testi, contenitori (div), pulsanti, immagini ecc;
• Helpers: elementi avanzati come recensioni, barre progressive, gallerie di immagini, articoli correlati ecc;
• WordPress: elementi che richiamano dati di WordPress come menu, lista dei commenti, shortcode, form di ricerca ecc;
• Library: qui puoi trovare dei set grafici predefiniti, sono delle sorta di template da modificare su misura per il tuo sito web;
• Reusable: su Oxygen puoi creare contenuti da rendere riutilizzabili su altre pagine, li troverai qui!

Per agevolarne l'utilizzo, Oxygen ha previsto una barra di ricerca in cima al navigatore, così da poter richiamare rapidamente gli elementi che intendiamo utilizzare nella pagina.

Come modificare un elemento con il page builder Oxygen

Selezioniamo per esempio l'elemento "text" cliccando su di esso. Ora nella pagina verrà inserito un testo di default, mentre nella barra degli strumenti visualizzeremo un menu di personalizzazione.

Tramite tale menu è possibile personalizzare gli stili degli elementi e ogni elemento presente nella pagina avrà il suo menu di personalizzazione. Quindi, ogni modifica che viene fatta tramite questo menu, viene applicata al singolo elemento selezionato (oppure a una classe, ma ne parleremo in un altro articolo).

Il menu di personalizzazione è suddiviso in tre aree: intestazione, primary e advanced.

Intestazione del menu di personalizzazione

L'intestazione è composta da due menu a tendina. Il primo permette di cambiare risoluzione (desktop, tablet o smartphone), quindi le modifiche fatte a un elemento possono variare da una risoluzione all'altra.

Mentre il secondo permette di rinominare l'ID dell'elemento, di aggiungere una classe o di modificare l'elemento in base a degli stati, come ad esempio "al passaggio del mouse" (hover).

Oltre a questi menu a tendina sono presenti 4 pulsanti, che da sinistra verso destra permettono di:

• Gestire le condizioni logiche di visualizzazione;
• Rendere "cliccabile" un elemento
• Duplicare un elemento
• Cancellare un elemento

Infine, subito sopra al menu della risoluzione, abbiamo delle "briciole di pane", che tornano molto utili quando dobbiamo spostarci in una sezione che contiene molti elementi.

Menu primary

Il contenuto del menu primary varia in funzione del tipo di elemento selezionato. Al suo interno troverai sempre le proprietà specifiche dell'elemento selezionato.

Quindi, per titoli e testi troverai impostazioni come colore del testo, dimensione del font e spessore del font, mentre per un'immagine troverai il campo per specificare quale immagine usare, larghezza e altezza.

Menu advanced

Il menu advanced invece fornisce una serie di opzioni generiche, per una personalizzazione completa dell'elemento. In linea di massima, tutti gli elementi dispongono delle stesse impostazioni avanzate.

Per citarne alcune, qui puoi trovare impostazioni relative allo sfondo, padding, margine, visualizzazione, tipografia, bordi e molto altro ancora. Sempre in avanzate puoi anche aggiungere del codice CSS o Javascript personalizzato da applicare all'elemento selezionato.

Tornando al nostro testo, per modificarne il contenuto è sufficiente fare doppio click su di esso. Si attiverà così la modalità di editing, che ci permetterà di cancellare il testo e scriverne uno nuovo come se fossimo su Word.

Inserimento di più elementi nella pagina

Per inserire più elementi della pagina basterà cliccare su "+ Add" e aggiungere nuovi elementi. Proviamo ora a realizzare una sezione con dentro un titolo, un testo e un immagine.

Quindi cancelliamo il nostro testo e aggiungiamo nel seguente odine questi elementi:

- Sezione
- Titolo (heading)
- Testo
- Immagine

Se provi a cliccare sui vari elementi noterai che cambierà il menu primary e potrai modificare ogni singolo elemento a tuo piacimento. Sempre a scopo di esempio andiamo a fare le seguenti modifiche per creare un po' di ordine all'interno della nostra sezione:

- Sezione: allineamento verticale e centrato
- Titolo: 50px di dimensione, 40px di margine
- Testo: colore blu, 30px di margine
- Immagine: larghezza 500px, altezza "auto"

Ora la sezione si presenta così:

Funzioni "drag & drop"

Oxygen permette di muoversi molto rapidamente nel visual editor grazie ad apposite funzioni drag & drop. Una di queste funzioni consiste nello spostare gli elementi semplicemente trascinandoli da un punto all'altro nella pagina, riorganizzando i contenuti in modo semplice e veloce.

Un altra funzionalità è quella di poter modificare il padding o il margine degli elementi trascinando la banda viola che compare quando posizioniamo il mouse subito sotto a un elemento (vedi immagine sottostante).

Spostarsi da un elemento all'altro

A volte può capitare che alcuni elementi, come sezioni e div, non siano cliccabili direttamente col mouse poiché sono presenti altri elementi al loro interno.

Quindi per selezionare una sezione che non è direttamente cliccabile, dovrai selezionare un suo sotto-elemento e cliccare su uno di questi tre pulsanti:

• Linguetta rosa che compare nella cornice della sezione (o dell'elemento superiore in generale);
• Freccetta presente nella linguetta blu dell'elemento selezionato;
• Link della sezione nelle briciole di pane.

Organizzare gli elementi tramite la struttura

Ora che abbiamo chiarito diversi aspetti del page builder di Oxygen passiamo ad altre funzionalità che abbiamo a nostra disposizione. La prima di cui vorrei parlarti è la struttura.

Cliccando sul tasto "Structure" nella barra superiore si aprirà sulla sinistra una sorta di alberatura dei contenuti. Qui ci è consentito selezionare e riordinare gli elementi in modo molto semplice, infatti basta trascinarli e rilasciarli nel punto desiderato.

Oltre all'ordinazione, è possibile rinominare, duplicare, cancellare e svolgere altre funzioni cliccando sull'hamburger menu presente su ogni elemento (comparirà al passaggio del mouse).

Ti consiglio di prendere subito dimestichezza con la struttura, poiché quando avrai molti elementi nella pagina risulterà essere molto pratica per organizzare i contenuti.

Cancellazione dei contenuti e cronologia

Per cancellare un elemento dovrai selezionarlo e cliccare l'icona del cestino presente nell'intestazione. In alternativa, potrai aprire la struttura e passare il mouse sull'elemento desiderato, a questo punto comparirà l'icona di una "X" e basterà cliccarci sopra per eliminare l'elemento.

Qualora avessi commesso un errore, potrai tornare indietro tramite la cronologia delle modifiche (pulsante "History" nella barra superiore) o tramite il pulsante "indietro". Mentre il pulsante "avanti" consente di annullare l'operazione "indietro".

La cronologia permette di tornare indietro con le modifiche fino all'apertura della sessione di modifica. Non sarà quindi possibile tornare indietro a modifiche precedenti alla sessione attuale.

Salvataggio e chiusura del visual editor

Per concludere questo tutorial vediamo come chiudere il page builder e tornare al nostro sito web. Prima di tutto, se hai concluso le modifiche clicca sul tasto "Save", in alto a destra.

Ti consiglio di abituarti a salvare le modifiche ogni volta che raggiungi dei traguardi importanti (in termini di realizzazione), proprio come se stessi scrivendo una tesina scolastica. In questo modo ti assicuri di non perdere il lavoro svolto qualora il server dovesse andare in down per qualsiasi motivo.

Per abbandonare il builder di Oxygen dovrai quindi cliccare sul tasto "Back to WP", nella barra superiore. Si aprirà un menu a tendina che ti proporrà due opzioni:

• Admin: torna all'editor di WordPress della pagina in questione
• Frontend: visualizza la pagina modificata e pubblicata

Conclusioni

Quando ho pensato di realizzare questo articolo sapevo che avrei scritto parecchio, ma onestamente non pensavo di dilungarmi così tanto! Pensa inoltre che di cose da dire ne avrei ancora molte!

Per semplificare il tutto però, preferisco trattarle in articoli differenti e schematizzati, quindi rimani aggiornato! 🙂

Nel frattempo, per maggiori approfondimenti su quanto abbiamo visto in questo tutorial, ti invito a visitare la guida ufficiale di Oxygen (in lingua inglese).

Se hai domande in merito a questo articolo postale pure qui sotto. Ti ringrazio per la lettura, a presto!