{"id":24532,"date":"2022-07-14T08:48:54","date_gmt":"2022-07-14T08:48:54","guid":{"rendered":"https:\/\/supporthost.com\/it\/?p=24532"},"modified":"2025-09-08T11:21:46","modified_gmt":"2025-09-08T09:21:46","slug":"oxygen-builder","status":"publish","type":"post","link":"https:\/\/supporthost.com\/it\/oxygen-builder\/","title":{"rendered":"Come usare Oxygen Builder"},"content":{"rendered":"\n<p>Vuoi imparare a usare Oxygen Builder con <strong>WordPress <\/strong>per creare il tuo sito? <\/p>\n\n\n\n<p>Con questo <strong>plugin <\/strong>semplice da usare potrai personalizzare l&#8217;aspetto del sito in ogni suo elemento. <\/p>\n\n\n\n<p>Iniziamo dal vedere come funziona il plugin, cosa lo differenzia da altri <em>page builder<\/em> e quali sono i <strong>prezzi <\/strong>delle licenze. <\/p>\n\n\n\n<p>Dopo questa introduzione vedremo un tutorial per Oxygen Builder in cui scopriremo <strong>come usare<\/strong> il plugin.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Indice<\/h2><nav><ul><li><a href=\"#cose-oxygen-builder\">Cos&#8217;\u00e8 Oxygen Builder<\/a><ul><li><a href=\"#oxygen-builder-vs-elementor\">Oxygen Builder vs Elementor<\/a><\/li><li><a href=\"#con-oxygen-ho-bisogno-di-usare-un-tema\">Con Oxygen ho bisogno di usare un tema?<\/a><\/li><\/ul><\/li><li><a href=\"#oxygen-builder-prezzi-e-licenze\">Oxygen Builder: prezzi e licenze<\/a><\/li><li><a href=\"#come-installare-oxygen-builder-su-word-press\">Come installare Oxygen Builder su WordPress<\/a><ul><li><a href=\"#installazione-di-oxygen-su-word-press\">Installazione di Oxygen su WordPress<\/a><\/li><li><a href=\"#attivazione-di-oxygen\">Attivazione di Oxygen<\/a><\/li><\/ul><\/li><li><a href=\"#come-usare-oxygen-builder\">Come usare Oxygen Builder<\/a><ul><li><a href=\"#leditor-di-oxygen-e-le-operazioni-di-base\">L&#8217;editor di Oxygen e le operazioni di base<\/a><ul><li><a href=\"#accedere-alleditor-di-oxygen-builder\">Accedere all&#8217;editor di Oxygen Builder<\/a><ul><li><a href=\"#accedere-a-oxygen-dalleditor-di-word-press\">Accedere a Oxygen dall&#8217;editor di WordPress<\/a><\/li><li><a href=\"#accedere-a-oxygen-dallelenco-delle-pagine\">Accedere a Oxygen dall&#8217;elenco delle pagine<\/a><\/li><li><a href=\"#accedere-a-oxygen-dal-front-end\">Accedere a Oxygen dal front-end<\/a><\/li><\/ul><\/li><li><a href=\"#oxygen-builder-la-struttura-delleditor\">Oxygen Builder: la struttura dell&#8217;editor<\/a><\/li><li><a href=\"#salvare-o-annullare-le-modifiche\">Salvare o annullare le modifiche<\/a><\/li><li><a href=\"#aggiungere-un-elemento\">Aggiungere un elemento<\/a><\/li><li><a href=\"#modificare-gli-elementi\">Modificare gli elementi<\/a><\/li><li><a href=\"#navigare-tra-gli-elementi\">Navigare tra gli elementi<\/a><\/li><li><a href=\"#spostare-gli-elementi\">Spostare gli elementi<\/a><\/li><li><a href=\"#modificare-la-spaziatura-tra-gli-elementi\">Modificare la spaziatura tra gli elementi<\/a><\/li><\/ul><\/li><li><a href=\"#leditor-di-oxygen-il-layout\">L&#8217;editor di Oxygen: il layout<\/a><ul><li><a href=\"#sezioni\">Sezioni<\/a><\/li><li><a href=\"#colonne\">Colonne<\/a><\/li><li><a href=\"#div\">Div<\/a><\/li><\/ul><\/li><li><a href=\"#gli-elementi-di-oxygen-builder\">Gli elementi di Oxygen Builder<\/a><ul><li><a href=\"#basic\">Basic<\/a><\/li><li><a href=\"#helper\">Helper<\/a><\/li><li><a href=\"#word-press\">WordPress<\/a><\/li><li><a href=\"#library\">Library<\/a><\/li><li><a href=\"#reusable\">Reusable<\/a><\/li><\/ul><\/li><li><a href=\"#opzioni-di-stile-degli-elementi-scheda-advanced\">Opzioni di stile degli elementi: scheda advanced<\/a><ul><li><a href=\"#background\">Background<\/a><\/li><li><a href=\"#size-spacing\">Size &amp; Spacing<\/a><\/li><li><a href=\"#layout\">Layout<\/a><\/li><li><a href=\"#typography\">Typography<\/a><\/li><li><a href=\"#borders\">Borders<\/a><\/li><li><a href=\"#effects\">Effects<\/a><\/li><li><a href=\"#custom-css-java-script-e-code-block\">Custom CSS, JavaScript e Code block<\/a><\/li><li><a href=\"#attributes\">Attributes<\/a><\/li><\/ul><\/li><li><a href=\"#opzioni-di-stile-degli-elementi-gli-stati\">Opzioni di stile degli elementi: gli stati<\/a><\/li><li><a href=\"#creare-un-template\">Creare un template<\/a><ul><li><a href=\"#creare-un-nuovo-template\">Creare un nuovo template<\/a><\/li><li><a href=\"#creare-la-struttura-del-template-con-leditor\">Creare la struttura del template con l&#8217;editor<\/a><\/li><li><a href=\"#utilizzare-i-template-con-oxygen\">Utilizzare i template con Oxygen<\/a><\/li><\/ul><\/li><li><a href=\"#incorporare-uno-shortcode\">Incorporare uno shortcode<\/a><\/li><li><a href=\"#rendere-le-pagine-responsive\">Rendere le pagine responsive<\/a><ul><li><a href=\"#gestire-le-colonne\">Gestire le colonne<\/a><\/li><li><a href=\"#nascondere-o-mostrare-gli-elementi\">Nascondere o mostrare gli elementi<\/a><\/li><li><a href=\"#creare-menu-responsivi\">Creare menu responsivi<\/a><\/li><li><a href=\"#eliminare-stili-responsivi\">Eliminare stili responsivi<\/a><\/li><\/ul><\/li><li><a href=\"#impostazioni\">Impostazioni<\/a><ul><li><a href=\"#global-styles-colors\">Global styles: colors<\/a><\/li><li><a href=\"#global-styles-fonts\">Global styles: fonts<\/a><\/li><li><a href=\"#global-styles-headings\">Global styles: headings<\/a><\/li><li><a href=\"#global-styles-body-text\">Global styles: body text<\/a><\/li><li><a href=\"#global-styles-links\">Global styles: links<\/a><\/li><li><a href=\"#global-styles-width-breakpoints\">Global styles: width &amp; breakpoints<\/a><\/li><li><a href=\"#global-styles-sections-columns\">Global styles: sections &amp; columns<\/a><\/li><li><a href=\"#global-styles-animate-on-scroll\">Global styles: animate on scroll<\/a><\/li><li><a href=\"#global-styles-scripts\">Global styles: scripts<\/a><\/li><\/ul><\/li><\/ul><\/li><li><a href=\"#conclusioni\">Conclusioni<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-guida-1024x538.png\" alt=\"Oxygen Builder Guida\" class=\"wp-image-24733\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-guida-1024x538.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-guida-300x158.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-guida-768x403.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-guida-120x63.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-guida.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cose-oxygen-builder\">Cos&#8217;\u00e8 Oxygen Builder<\/h2>\n\n\n\n<p>Oxygen Builder \u00e8 un <strong>site builder<\/strong> visuale per WordPress creato dalla stessa azienda del builder <a href=\"https:\/\/supporthost.com\/it\/breakdance\/\">Breakdance<\/a>.<\/p>\n\n\n\n<p>Attraverso questo plugin \u00e8 possibile creare un sito web senza avere conoscenze di programmazione e senza dover scrivere codice. La creazione del sito, infatti, si basa su un <strong>editor<\/strong> che ci permette di vedere le <strong>modifiche in tempo reale<\/strong>, come succede anche per altri builder come <a href=\"https:\/\/supporthost.com\/it\/wpbakery\/\">WP Bakery<\/a>, <a href=\"https:\/\/supporthost.com\/it\/bricks-builder\/\">Bricks builder<\/a> ed Elementor (di quest&#8217;ultimo ne parleremo a breve).<\/p>\n\n\n\n<p>Tra le caratteristiche principali ricordiamo la presenza di un editor che supporta il <strong>drag &amp; drop<\/strong>. Questo significa che possiamo spostare gli elementi all&#8217;interno della pagina semplicemente trascinandoli. Inoltre \u00e8 anche possibile impostare lo spazio tra gli elementi sempre con il drag &amp; drop.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"oxygen-builder-vs-elementor\">Oxygen Builder vs Elementor<\/h3>\n\n\n\n<p>\u00c8 importante tenere presente che un <strong>site builder<\/strong>, come appunto Oxygen Builder, ci permette di creare ogni parte del sito. Nello specifico possiamo creare dei template e modificare il sito ogni sua componente: header, footer, menu e cos\u00ec via.<\/p>\n\n\n\n<p>I <strong>page builder<\/strong>, come per esempio Elementor, invece, nascono nello specifico per personalizzare la struttura delle pagine. <\/p>\n\n\n\n<p>Nel caso di Elementor per creare anche gli altri elementi del sito come header e footer \u00e8 possibile utilizzare il Theme Builder che \u00e8 disponibile solo con la versione <strong>Pro<\/strong> del plugin. Per approfondire le caratteristiche di questo page builder e imparare a usarlo, puoi controllare la nostra guida a <a href=\"https:\/\/supporthost.com\/it\/elementor\/\">Elementor<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"con-oxygen-ho-bisogno-di-usare-un-tema\">Con Oxygen ho bisogno di usare un tema?<\/h3>\n\n\n\n<p>Con Oxygen Builder non hai bisogno di un tema, perch\u00e9 attivando il plugin la gestione interna dei <a href=\"https:\/\/supporthost.com\/it\/temi-wordpress\/\" data-type=\"post\" data-id=\"14979\">temi WordPress<\/a> verr\u00e0 disattivata. Potrai gestire il layout e lo stile del sito direttamente attraverso il plugin.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"109\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-temi-disattivati-1024x109.png\" alt=\"Oxygen Builder Temi Disattivati\" class=\"wp-image-24533\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-temi-disattivati-1024x109.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-temi-disattivati-300x32.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-temi-disattivati-768x82.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-temi-disattivati-120x13.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-temi-disattivati.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"oxygen-builder-prezzi-e-licenze\">Oxygen Builder: prezzi e licenze<\/h2>\n\n\n\n<p>Oxygen Builder \u00e8 un plugin WordPress a pagamento. \u00c8 possibile provare le funzioni del plugin usando la <a href=\"https:\/\/oxygenbuilder.com\/try\/\" rel=\"noopener\">demo<\/a> messa a disposizione dal sito ufficiale.<\/p>\n\n\n\n<p>Ci sono diverse licenze: Basic, WooCommerce, Agency e Ultimate.<\/p>\n\n\n\n<p>Attualmente i costi regolari delle licenze sono i seguenti:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Basic <\/strong>a 129$;<\/li>\n\n\n\n<li><strong>WooCommerce <\/strong>a 199$ (ora in sconto a 169$);<\/li>\n\n\n\n<li><strong>Agency <\/strong>a 279$ (ora in sconto a 199$);<\/li>\n\n\n\n<li><strong>Ultimate <\/strong>a 349$ (ora in sconto a 229$).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-prezzi-1024x576.png\" alt=\"Oxygen Builder Prezzi\" class=\"wp-image-24534\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-prezzi-1024x576.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-prezzi-300x169.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-prezzi-768x432.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-prezzi-112x63.png 112w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-prezzi.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In tutti i casi sono sempre inclusi aggiornamenti, supporto a vita e <strong>installazioni illimitate<\/strong>.<\/p>\n\n\n\n<p>Questo significa che con una sola licenza puoi utilizzare il plugin su tutti i siti che vuoi. Se sei una <a href=\"https:\/\/supporthost.com\/it\/web-agency\/\">web agency<\/a> o uno sviluppatore puoi utilizzare Oxygen per creare i siti dei clienti, senza che i singoli clienti debbano acquistare una licenza.<\/p>\n\n\n\n<p>Le licenze si differenziano per funzioni aggiuntive. Per esempio con la licenza WooCommerce hai a disposizione anche l&#8217;integrazione di WooCommerce e puoi personalizzare l&#8217;aspetto del tuo ecommerce.<\/p>\n\n\n\n<p>La licenza <strong>Agency<\/strong> include anche il builder per <a href=\"https:\/\/supporthost.com\/it\/gutenberg\/\">Gutenberg<\/a> che ti permette di creare blocchi personalizzati e utilizzarli poi dall&#8217;editor di WordPress.<\/p>\n\n\n\n<p>Con la licenza <strong>Ultimate<\/strong> hai a disposizione anche l&#8217;accesso per sempre alla libreria di Composite Elements con elementi gi\u00e0 pronti all&#8217;uso.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"come-installare-oxygen-builder-su-word-press\">Come installare Oxygen Builder su WordPress<\/h2>\n\n\n\n<p>Oxygen Builder si installa come tutti i <a href=\"https:\/\/supporthost.com\/it\/plugin-wordpress\/\">plugin WordPress<\/a>.<\/p>\n\n\n\n<p class=\"note\">Il prerequisito \u00e8 quello di avere gi\u00e0 un sito WordPress. Se stai ancora cercando un hosting, dai un&#8217;occhiata ai nostri piani <a href=\"https:\/\/supporthost.com\/it\/hosting-wordpress\/\" data-type=\"page\" data-id=\"22570\">hosting WordPress<\/a> o attiva una prova senza impegno con il nostro <a href=\"https:\/\/supporthost.com\/it\/hosting-gratis\/\" data-type=\"page\" data-id=\"56333\">hosting gratis<\/a>.<\/p>\n\n\n\n<p>Se hai gi\u00e0 familiarit\u00e0 con WordPress, saprai che i plugin si possono installare in diversi modi. I plugin gratuiti si possono installare direttamente dalla dashboard cliccando su <em>Plugin <\/em>&gt; <em>Aggiungi nuovo<\/em> e poi ricercando il plugin nella directory.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"404\" height=\"124\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2021\/12\/plugin-aggiungi-nuovo.png\" alt=\"Plugin Aggiungi Nuovo\" class=\"wp-image-22172\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2021\/12\/plugin-aggiungi-nuovo.png 404w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2021\/12\/plugin-aggiungi-nuovo-300x92.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2021\/12\/plugin-aggiungi-nuovo-120x37.png 120w\" sizes=\"auto, (max-width: 404px) 100vw, 404px\" \/><\/figure>\n\n\n\n<p>Da questa stessa sezione possiamo anche <strong>caricare <\/strong>i file compressi dei plugin.<\/p>\n\n\n\n<p>Questa seconda opzione \u00e8 proprio quella che ci permette di installare i plugin <strong>premium <\/strong>che acquistiamo e di cui ci viene fornito il file .zip.<\/p>\n\n\n\n<p>Preferisci la versione video? In questo tutorial Ivan ti mostra come usare <strong>Oxygen <\/strong>per creare un sito dall&#8217;aspetto professionale<strong> in meno di un&#8217;ora<\/strong>:<\/p>\n\n\n\n<div data-video-id=\"BVg51-QBVOU\" style=\"--btn-hover-color:#ff0000;--btn-hover-scale:1;\" class=\"wp-block-supporthost-supporthost-youtube-block\">\n    <div class=\"youtube-video-play youtube-video-play--youtube\" style=\"height:60px;\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 71.412 50\" style=\"height:60px;\"><g transform=\"scale(.58824)\"><path class=\"yt-bg\" fill=\"rgba(0,0,0,0.8)\" d=\"M118.9 13.3c-1.4-5.2-5.5-9.3-10.7-10.7C98.7 0 60.7 0 60.7 0s-38 0-47.5 2.5C8.1 3.9 3.9 8.1 2.5 13.3 0 22.8 0 42.5 0 42.5s0 19.8 2.5 29.2C3.9 76.9 8 81 13.2 82.4 22.8 85 60.7 85 60.7 85s38 0 47.5-2.5c5.2-1.4 9.3-5.5 10.7-10.7 2.5-9.5 2.5-29.2 2.5-29.2s.1-19.8-2.5-29.3z\"\/><path fill=\"#ffffff\" d=\"M80.2 42.5L48.6 24.3v36.4z\"\/><\/g><\/svg><\/div>            <img src=\"https:\/\/img.youtube.com\/vi\/BVg51-QBVOU\/maxresdefault.jpg\" loading=\"lazy\" decoding=\"async\">    <\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"installazione-di-oxygen-su-word-press\">Installazione di Oxygen su WordPress<\/h3>\n\n\n\n<p>Clicchiamo su <em>Plugin <\/em>&#8211; &gt; <em>Aggiungi nuovo <\/em>e poi sul pulsante <strong>Carica plugin<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"717\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2020\/12\/carica-plugin-wordpress-1024x717.png\" alt=\"Carica Plugin WordPress\" class=\"wp-image-16121\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2020\/12\/carica-plugin-wordpress-1024x717.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2020\/12\/carica-plugin-wordpress-300x210.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2020\/12\/carica-plugin-wordpress-768x538.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2020\/12\/carica-plugin-wordpress-90x63.png 90w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2020\/12\/carica-plugin-wordpress.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Trasciniamo il file .zip nell&#8217;area evidenziata per caricarlo e poi clicchiamo su <em>Installa adesso<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"449\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/installare-oxygen-builder-1024x449.png\" alt=\"Installare Oxygen Builder\" class=\"wp-image-24535\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/installare-oxygen-builder-1024x449.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/installare-oxygen-builder-300x132.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/installare-oxygen-builder-768x337.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/installare-oxygen-builder-120x53.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/installare-oxygen-builder.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Dopo aver installato Oxygen Builder, vedremo un avviso come questo e potremo attivarlo cliccando su<em> Attiva plugin<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"498\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/attivare-oxygen-builder-1024x498.png\" alt=\"Attivare Oxygen Builder\" class=\"wp-image-24536\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/attivare-oxygen-builder-1024x498.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/attivare-oxygen-builder-300x146.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/attivare-oxygen-builder-768x374.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/attivare-oxygen-builder-120x58.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/attivare-oxygen-builder.png 1034w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Ci verr\u00e0 chiesto se partire da un&#8217;installazione &#8220;vuota&#8221; o se caricare un sito gi\u00e0 pronto da personalizzare. La seconda opzione \u00e8 indicata per chi sta iniziando, perch\u00e9 consente di partire gi\u00e0 da una base.<\/p>\n\n\n\n<p>Se vuoi partire dall&#8217;opzione pi\u00f9 semplice scegli <strong>Default install<\/strong>, se invece vuoi partire da zero scegli <strong>Blank Install<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"954\" height=\"752\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-tipo-di-installazione.png\" alt=\"Oxygen Tipo Di Installazione\" class=\"wp-image-24537\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-tipo-di-installazione.png 954w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-tipo-di-installazione-300x236.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-tipo-di-installazione-768x605.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-tipo-di-installazione-80x63.png 80w\" sizes=\"auto, (max-width: 954px) 100vw, 954px\" \/><\/figure>\n\n\n\n<p>Ai fini di questa guida utilizzeremo un sito di base, clicchiamo quindi su <em>Default Install<\/em> per proseguire.<\/p>\n\n\n\n<p>L&#8217;opzione di default prevede di installare il sito di base &#8220;<strong>Atomic<\/strong>&#8221; e importare template, fogli di stile e pagine. Possiamo anche scegliere un altro sito di base cliccando su <em>Browse Library<\/em>.<\/p>\n\n\n\n<p>Dopodich\u00e9 clicchiamo su <em>Confirm &amp; install<\/em> per proseguire.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"686\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/installare-atomic-sito-base-oxygen-1024x686.png\" alt=\"Installare Atomic Sito Base Oxygen\" class=\"wp-image-24538\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/installare-atomic-sito-base-oxygen-1024x686.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/installare-atomic-sito-base-oxygen-300x201.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/installare-atomic-sito-base-oxygen-768x514.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/installare-atomic-sito-base-oxygen-94x63.png 94w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/installare-atomic-sito-base-oxygen.png 1193w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"attivazione-di-oxygen\">Attivazione di Oxygen<\/h3>\n\n\n\n<p>Dopo l&#8217;installazione possiamo <strong>attivare <\/strong>il plugin inserendo la chiave di licenza che ci \u00e8 stata fornita con l&#8217;acquisto.<\/p>\n\n\n\n<p>Per farlo clicchiamo su <em>Oxygen &#8211; &gt; Settings.<\/em><\/p>\n\n\n\n<p>Da questa sezione dobbiamo aprire la scheda <strong>License<\/strong> e possiamo inserire la chiave nel campo indicato in questa schermata. Dopodich\u00e9 clicchiamo su <em>Save Oxygen License<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"368\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/attivare-licenza-oxygen-1024x368.png\" alt=\"Attivare Licenza Oxygen\" class=\"wp-image-24539\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/attivare-licenza-oxygen-1024x368.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/attivare-licenza-oxygen-300x108.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/attivare-licenza-oxygen-768x276.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/attivare-licenza-oxygen-120x43.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/attivare-licenza-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Dopo aver inserito la licenza, comparir\u00e0 lo stato <em>valid<\/em> accanto alla chiave inserita.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"389\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-licenza-attivata-1024x389.png\" alt=\"Oxygen Licenza Attivata\" class=\"wp-image-24540\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-licenza-attivata-1024x389.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-licenza-attivata-300x114.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-licenza-attivata-768x292.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-licenza-attivata-120x46.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-licenza-attivata.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"come-usare-oxygen-builder\">Come usare Oxygen Builder<\/h2>\n\n\n\n<p>In questa sezione vedremo come imparare a usare Oxygen Builder passo passo.<\/p>\n\n\n\n<p>Iniziamo con una panoramica dell&#8217;<strong>editor visuale<\/strong> e con le operazioni principali.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"leditor-di-oxygen-e-le-operazioni-di-base\">L&#8217;editor di Oxygen e le operazioni di base<\/h3>\n\n\n\n<p>Oxygen Builder ha un editor visuale che ci permette di creare le pagine e modificarle vedendo in tempo reale le modifiche.<\/p>\n\n\n\n<p>In questa sezione vedremo come accedere all&#8217;editor visuale e come effettuare le operazioni di base: aggiunta e gestione degli elementi.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"accedere-alleditor-di-oxygen-builder\">Accedere all&#8217;editor di Oxygen Builder<\/h4>\n\n\n\n<p>Ci sono diversi modi per accedere all&#8217;editor di Oxygen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>dall&#8217;editor di WordPress;<\/li>\n\n\n\n<li>dall&#8217;elenco delle pagine;<\/li>\n\n\n\n<li>dal front-end.<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"accedere-a-oxygen-dalleditor-di-word-press\">Accedere a Oxygen dall&#8217;editor di WordPress<\/h5>\n\n\n\n<p>Per prima cosa possiamo creare una nuova pagina (o anche un articolo) e pubblicarla.<\/p>\n\n\n\n<p class=\"note\">Se non hai ancora familiarit\u00e0 a sufficienza con il CMS, controlla il nostro <a href=\"https:\/\/supporthost.com\/it\/tutorial-wordpress\/\" data-type=\"post\" data-id=\"21780\">tutorial WordPress<\/a> per una spiegazione passo-passo su come creare pagine, articoli e molto altro.<\/p>\n\n\n\n<p>Dopodich\u00e9 ci basta cliccare sul pulsante <strong>Edit with oxygen<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"489\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/edit-with-oxygen-1024x489.png\" alt=\"Edit With Oxygen\" class=\"wp-image-24541\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/edit-with-oxygen-1024x489.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/edit-with-oxygen-300x143.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/edit-with-oxygen-768x367.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/edit-with-oxygen-120x57.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/edit-with-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"accedere-a-oxygen-dallelenco-delle-pagine\">Accedere a Oxygen dall&#8217;elenco delle pagine<\/h5>\n\n\n\n<p>Se abbiamo installato un sito di base, avremo gi\u00e0 delle pagine di esempio.<\/p>\n\n\n\n<p>In questo caso dall&#8217;elenco delle Pagine ci basta cliccare su <em>Edit with Oxygen<\/em> per modificare una pagina, per esempio la home.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"215\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-pagina-con-oxygen-1024x215.png\" alt=\"Modificare Pagina Con Oxygen\" class=\"wp-image-24542\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-pagina-con-oxygen-1024x215.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-pagina-con-oxygen-300x63.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-pagina-con-oxygen-768x161.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-pagina-con-oxygen-120x25.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-pagina-con-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In questo modo possiamo aprire l&#8217;editor e aggiungere elementi o modificare quelli gi\u00e0 presenti.<\/p>\n\n\n\n<p>Ecco come si presenta l&#8217;editor quando andiamo a modificare una pagina gi\u00e0 creata.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"497\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/editor-oxygen-builder-1024x497.png\" alt=\"Editor Oxygen Builder\" class=\"wp-image-24543\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/editor-oxygen-builder-1024x497.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/editor-oxygen-builder-300x146.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/editor-oxygen-builder-768x372.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/editor-oxygen-builder-120x58.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/editor-oxygen-builder.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"accedere-a-oxygen-dal-front-end\">Accedere a Oxygen dal front-end<\/h5>\n\n\n\n<p>Se stiamo visualizzando il sito dal front end e abbiamo gi\u00e0 effettuato l&#8217;accesso a WordPress, possiamo modificare la pagina che stiamo visitando cliccando su <em>Oxygen &gt; Edit with Oxygen <\/em>dalla barra superiore.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"85\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/edit-with-oxygen-front-end-wordpress-1024x85.png\" alt=\"Edit With Oxygen Front End WordPress\" class=\"wp-image-24544\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/edit-with-oxygen-front-end-wordpress-1024x85.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/edit-with-oxygen-front-end-wordpress-300x25.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/edit-with-oxygen-front-end-wordpress-768x64.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/edit-with-oxygen-front-end-wordpress-120x10.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/edit-with-oxygen-front-end-wordpress.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"oxygen-builder-la-struttura-delleditor\">Oxygen Builder: la struttura dell&#8217;editor<\/h4>\n\n\n\n<p>Prima di vedere nella pratica come aggiungere gli elementi e cominciare a costruire le pagine del sito, vediamo quali opzioni ci sono nell&#8217;editor.<\/p>\n\n\n\n<p>A partire da sinistra nella barra superiore troviamo una serie di pulsanti.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"45\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-barra-superiore-1024x45.png\" alt=\"Oxygen Builder Barra Superiore\" class=\"wp-image-24545\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-barra-superiore-1024x45.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-barra-superiore-300x13.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-barra-superiore-768x34.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-barra-superiore-120x5.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-builder-barra-superiore.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Add<\/strong>: ci permette di aggiungere un elemento alla pagina.<\/p>\n\n\n\n<p><strong>Hide<\/strong> \/ <strong>Show<\/strong>: con questo pulsante possiamo mostrare o nascondere la sidebar di sinistra in cui ci vengono mostrate le opzioni dell&#8217;elemento selezionato o la lista degli elementi che possiamo aggiungere alla pagina.<\/p>\n\n\n\n<p><strong>Structure<\/strong>: ci permette di aprire il pannello struttura, che verr\u00e0 mostrato a destra dello schermo. La struttura ci mostra la gerarchia tra gli elementi della pagina. Nelle sezioni successive di questa guida a Oxygen Builder vedremo meglio come si presenta il pannello.<\/p>\n\n\n\n<p><strong>History \/ Undo \/ Redo<\/strong>: ci permettono di aprire la cronologia e annullare o ripristinare le modifiche. Vedremo nella sezione successiva come fare.<\/p>\n\n\n\n<p><strong>Manage<\/strong>: ci permette di accedere a impostazioni, fogli di stile e selettori.<\/p>\n\n\n\n<p><strong>Back to WP<\/strong>: da qui possiamo tornare al back-end di WordPress o al front-end del sito.<\/p>\n\n\n\n<p><strong>Save<\/strong>: ci consente di salvare le modifiche apportate.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"salvare-o-annullare-le-modifiche\">Salvare o annullare le modifiche<\/h4>\n\n\n\n<p>Nella barra superiore dell&#8217;editor di Oxygen Builder troviamo questi tre elementi: <strong>History<\/strong>, <strong>Undo <\/strong>e <strong>Redo<\/strong> che ci permettono di annullare le modifiche fatte.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"126\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/history-undo-redo-oxygen-1024x126.png\" alt=\"History Undo Redo Oxygen\" class=\"wp-image-24546\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/history-undo-redo-oxygen-1024x126.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/history-undo-redo-oxygen-300x37.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/history-undo-redo-oxygen-768x95.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/history-undo-redo-oxygen-120x15.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/history-undo-redo-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Cliccando su <strong>Undo<\/strong> possiamo annullare l&#8217;ultima azione, <strong>Redo<\/strong> ripete l&#8217;azione annullata. Cliccando su <strong>History<\/strong> si apre un pannello che ci mostra la cronologia delle modifiche apportate in questa sessione.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"341\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-history-1024x341.png\" alt=\"Oxygen History\" class=\"wp-image-24547\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-history-1024x341.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-history-300x100.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-history-768x256.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-history-120x40.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-history.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Per salvare le modifiche alla pagina ci basta cliccare sul pulsante <strong>Save<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aggiungere-un-elemento\">Aggiungere un elemento<\/h4>\n\n\n\n<p>Il pulsante <strong>Add <\/strong>in alto a sinistra ci permette di aggiungere nuovi elementi. Cliccando su di esso, possiamo accedere a tutti gli elementi gi\u00e0 pronti: icone, testi, titoli e cos\u00ec via.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"501\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-aggiungere-elementi-1024x501.png\" alt=\"Oxygen Aggiungere Elementi\" class=\"wp-image-24548\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-aggiungere-elementi-1024x501.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-aggiungere-elementi-300x147.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-aggiungere-elementi-768x376.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-aggiungere-elementi-120x59.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-aggiungere-elementi.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Per aggiungere un elemento ci basta cliccare su di esso e verr\u00e0 aggiunto direttamente alla pagina nella posizione selezionata.<\/p>\n\n\n\n<p>Per esempio aggiungiamo un&#8217;intestazione alla nostra home page e modifichiamo il testo.<\/p>\n\n\n\n<p>Per prima cosa clicca su <em>Add <\/em>&gt;<em> Heading<\/em> per inserire l&#8217;heading.<\/p>\n\n\n\n<p>Dopodich\u00e9 per modificare il testo ti basta fare doppio click<em> <\/em>sull&#8217;elemento e scrivere.<\/p>\n\n\n\n<p>Nella schermata qui sotto puoi vedere i passaggi che ho appena descritto.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"503\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-heading-oxygen-1024x503.png\" alt=\"Aggiungere Heading Oxygen\" class=\"wp-image-24549\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-heading-oxygen-1024x503.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-heading-oxygen-300x147.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-heading-oxygen-768x377.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-heading-oxygen-120x59.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-heading-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Quando modifichi un elemento di testo, vedrai comparire la barra indicata qui sopra con accanto il numero 4.<\/p>\n\n\n\n<p>Da questa barra possiamo modificare rapidamente l&#8217;allineamento e la <strong>formattazione<\/strong>. Dopo aver apportato le modifiche possiamo cliccare su <em>Done<\/em> oppure fare click in un altro punto della pagina (al di fuori dell&#8217;elemento), per uscire dalla modifica.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"modificare-gli-elementi\">Modificare gli elementi<\/h4>\n\n\n\n<p>Ogni elemento pu\u00f2 essere modificato, vediamo come fare con un esempio.<\/p>\n\n\n\n<p>Per modificare un elemento con Oxygen dobbiamo selezionarlo facendo click su di esso. Per esempio vediamo come modificare un tipo di pulsante (<em>text link<\/em>).<\/p>\n\n\n\n<p>Cliccando sull&#8217;elemento si aprir\u00e0 il menu laterale di sinistra, dandoci una serie di informazioni.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"374\" height=\"138\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/elemento-text-link-oxygen.png\" alt=\"Elemento Text Link Oxygen\" class=\"wp-image-24550\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/elemento-text-link-oxygen.png 374w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/elemento-text-link-oxygen-300x111.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/elemento-text-link-oxygen-120x44.png 120w\" sizes=\"auto, (max-width: 374px) 100vw, 374px\" \/><\/figure>\n\n\n\n<p>All&#8217;inizio vediamo il <strong>nome<\/strong> dell&#8217;elemento: text link (#7).<\/p>\n\n\n\n<p>Subito sotto il nome troviamo la <strong>gerarchia<\/strong> degli elementi, in questo caso il nostro pulsante \u00e8 contenuto in un <em>div <\/em>che \u00e8 a sua volta incluso in una sezione (<em>section<\/em>). L&#8217;intera gerarchia sar\u00e0 quindi <em>Section &gt; Div &gt; Text Link<\/em>.<\/p>\n\n\n\n<p>Ogni elemento \u00e8 anche contraddistinto da un <strong>id<\/strong> univoco.<\/p>\n\n\n\n<p>Accanto al nome vediamo quattro pulsanti, da sinistra troviamo: <em>Conditions settings<\/em>, <em>Link settings, Duplicate component<\/em> e <em>Remove component<\/em>.<\/p>\n\n\n\n<p><em>Conditions settings <\/em>ci permette di impostare delle condizioni in cui mostrare o nascondere quell&#8217;elemento.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"522\" height=\"404\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-conditions-settings.png\" alt=\"Oxygen Conditions Settings\" class=\"wp-image-24551\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-conditions-settings.png 522w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-conditions-settings-300x232.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-conditions-settings-81x63.png 81w\" sizes=\"auto, (max-width: 522px) 100vw, 522px\" \/><\/figure>\n\n\n\n<p><em>Link settings<\/em> ci consente di modificare il link, cliccandolo si aprir\u00e0 una nuova finestra da cui potremo inserire l&#8217;URL.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-link-settings-1024x486.png\" alt=\"Oxygen Link Settings\" class=\"wp-image-24552\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-link-settings-1024x486.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-link-settings-300x142.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-link-settings-768x364.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-link-settings-120x57.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-link-settings.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><em>Duplicate component<\/em> serve a duplicare l&#8217;elemento selezionato.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"377\" height=\"127\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-duplicate-component.png\" alt=\"Oxygen Duplicate Component\" class=\"wp-image-24553\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-duplicate-component.png 377w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-duplicate-component-300x101.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-duplicate-component-120x40.png 120w\" sizes=\"auto, (max-width: 377px) 100vw, 377px\" \/><\/figure>\n\n\n\n<p><em>Remove component<\/em> ci permette di eliminare l&#8217;elemento.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"376\" height=\"144\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-remove-component.png\" alt=\"Oxygen Remove Component\" class=\"wp-image-24554\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-remove-component.png 376w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-remove-component-300x115.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-remove-component-120x46.png 120w\" sizes=\"auto, (max-width: 376px) 100vw, 376px\" \/><\/figure>\n\n\n\n<p>Per ogni elemento abbiamo due schede: <strong>Primary <\/strong>e <strong>Advanced<\/strong>.<\/p>\n\n\n\n<p>Nella scheda <strong>Primary<\/strong> troviamo le opzioni principali, come colori e dimensioni del font.<\/p>\n\n\n\n<p>Le opzioni variano in base all&#8217;elemento, per esempio se selezioniamo un&#8217;immagine in questa scheda vedremo l&#8217;URL dell&#8217;immagine, le dimensioni e il testo alternativo.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"377\" height=\"568\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/scheda-primary-immagine-oxygen.png\" alt=\"Scheda Primary Immagine Oxygen\" class=\"wp-image-24555\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/scheda-primary-immagine-oxygen.png 377w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/scheda-primary-immagine-oxygen-199x300.png 199w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/scheda-primary-immagine-oxygen-42x63.png 42w\" sizes=\"auto, (max-width: 377px) 100vw, 377px\" \/><\/figure>\n\n\n\n<p>La scheda <strong>Advanced <\/strong>ci permette di accedere a maggiori opzioni che riguardano le dimensioni degli elementi, il colore di sfondo e il layout. Nelle sezioni successive di questo tutorial su Oxygen Builder, vedremo quali sono tutte le opzioni.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"449\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/scheda-advanced-text-link-oxygen-1024x449.png\" alt=\"Scheda Advanced Text Link Oxygen\" class=\"wp-image-24556\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/scheda-advanced-text-link-oxygen-1024x449.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/scheda-advanced-text-link-oxygen-300x132.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/scheda-advanced-text-link-oxygen-768x337.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/scheda-advanced-text-link-oxygen-120x53.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/scheda-advanced-text-link-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"navigare-tra-gli-elementi\">Navigare tra gli elementi<\/h4>\n\n\n\n<p>Possiamo navigare tra gli elementi direttamente dall&#8217;editor visuale, dalla sidebar di sinistra o dal pannello Structure, vediamo come fare.<\/p>\n\n\n\n<p>Se abbiamo selezionato un elemento che fa parte di un elemento genitore possiamo cliccare sulla freccia verso l&#8217;alto per passare all&#8217;elemento superiore.<\/p>\n\n\n\n<p>Per esempio se selezioniamo l&#8217;elemento <em>text link<\/em> e vogliamo passare all&#8217;elemento superiore clicchiamo sulla freccia (1) indicata in questa schermata.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"172\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/navigare-tra-gli-elementi-oxygen.png\" alt=\"Navigare Tra Gli Elementi Oxygen\" class=\"wp-image-24557\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/navigare-tra-gli-elementi-oxygen.png 760w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/navigare-tra-gli-elementi-oxygen-300x68.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/navigare-tra-gli-elementi-oxygen-120x27.png 120w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><\/figure>\n\n\n\n<p>In alternativa possiamo cliccare su <em>Div<\/em> come vedi nella schermata qui sopra (2).<\/p>\n\n\n\n<p>In entrambi i casi, passeremo all&#8217;elemento superiore, in questo caso un <em>div<\/em>.<\/p>\n\n\n\n<p>Un altro modo per navigare tra gli elementi \u00e8 fare click sull&#8217;elemento che vogliamo selezionare direttamente dalla gerarchia che ci viene mostrata sotto il nome di un elemento nella sidebar.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"369\" height=\"142\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/navigare-tra-elementi-oxygen-metodo-2.png\" alt=\"Navigare Tra Elementi Oxygen Metodo 2\" class=\"wp-image-24558\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/navigare-tra-elementi-oxygen-metodo-2.png 369w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/navigare-tra-elementi-oxygen-metodo-2-300x115.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/navigare-tra-elementi-oxygen-metodo-2-120x46.png 120w\" sizes=\"auto, (max-width: 369px) 100vw, 369px\" \/><\/figure>\n\n\n\n<p>Inoltre, per individuare un elemento specifico nella pagina possiamo cliccare sul pulsante <strong>Structure<\/strong> dalla barra superiore. Si aprir\u00e0 un pannello in cui ci verr\u00e0 mostrata la struttura della pagina con la gerarchia tra gli elementi.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"500\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-structure-1024x500.png\" alt=\"Oxygen Structure\" class=\"wp-image-24559\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-structure-1024x500.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-structure-300x147.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-structure-768x375.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-structure-120x59.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-structure.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"spostare-gli-elementi\">Spostare gli elementi<\/h4>\n\n\n\n<p>L&#8217;editor di Oxygen Builder supporta il <strong>drag and drop<\/strong> e tutti gli elementi nella pagina possono essere spostati trascinandoli da una posizione all&#8217;altra.<\/p>\n\n\n\n<p>Un altro modo di spostare gli elementi \u00e8 utilizzare il pannello <strong>Structure<\/strong> che abbiamo appena visto. Anche in questo caso ci basta trascinare gli elementi per cambiarne la posizione.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"modificare-la-spaziatura-tra-gli-elementi\">Modificare la spaziatura tra gli elementi<\/h4>\n\n\n\n<p>Con Oxygen possiamo modificare la struttura della pagina e in particolare lo spazio tra gli elementi direttamente dall&#8217;editor visuale.<\/p>\n\n\n\n<p>Per prima cosa selezioniamo l&#8217;elemento che vogliamo modificare.<\/p>\n\n\n\n<p>Possiamo modificare sia lo spazio all&#8217;esterno dell&#8217;elemento e quindi i <strong>margini<\/strong>, che quello all&#8217;interno vale a dire il <strong>padding<\/strong>.<\/p>\n\n\n\n<p>Passiamo quindi col mouse vicino al bordo esterno dell&#8217;elemento finch\u00e9 non vediamo una barra viola come quella indicata in questa schermata.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"449\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-spaziatura-oxygen-builder-1024x449.png\" alt=\"Modificare Spaziatura Oxygen Builder\" class=\"wp-image-24560\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-spaziatura-oxygen-builder-1024x449.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-spaziatura-oxygen-builder-300x132.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-spaziatura-oxygen-builder-768x337.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-spaziatura-oxygen-builder-120x53.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-spaziatura-oxygen-builder.png 1138w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Ci basta quindi trascinare il cursore in modo da modificare le dimensioni della barra e aumentare o ridurre lo spazio tra i diversi elementi.<\/p>\n\n\n\n<p>Oltre a questo sistema possiamo anche modificare margini e padding dalla scheda <strong>Advanced<\/strong> &gt; <strong>Size &amp; Spacing<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"375\" height=\"660\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/padding-e-margini-oxygen.png\" alt=\"Padding E Margini Oxygen\" class=\"wp-image-24561\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/padding-e-margini-oxygen.png 375w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/padding-e-margini-oxygen-170x300.png 170w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/padding-e-margini-oxygen-36x63.png 36w\" sizes=\"auto, (max-width: 375px) 100vw, 375px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"leditor-di-oxygen-il-layout\">L&#8217;editor di Oxygen: il layout<\/h3>\n\n\n\n<p>Con Oxygen Builder possiamo creare la struttura della pagina usando tre elementi principali: sezioni, colonne e divisori (che chiameremo<em> div<\/em>).<\/p>\n\n\n\n<p>Questi elementi saranno contenitori per tutti gli altri elementi come testi, icone, pulsanti, immagini e cos\u00ec via.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"sezioni\">Sezioni<\/h4>\n\n\n\n<p>Le<strong> sezioni<\/strong> sono il container principale, all&#8217;interno del quale possiamo posizionare tutti gli altri elementi.<\/p>\n\n\n\n<p>Di default le sezioni sono impostate per avere una dimensione <em>page-width<\/em>. Possiamo anche modificarle affinch\u00e9 abbiano dimensioni personalizzate o siano mostrate a tutto schermo.<\/p>\n\n\n\n<p>Per modificare le impostazioni ci basta selezionare la sezione e poi aprire la scheda Advanced &gt; <em>Size &amp; Spacing<\/em> &gt; Section Container Width<em>.<\/em> Da qui attraverso un menu a tendina possiamo modificare la scelta sulla dimensione della sezione.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"373\" height=\"795\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/scheda-advanced-sezione-larghezza.png\" alt=\"Scheda Advanced Sezione Larghezza\" class=\"wp-image-24562\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/scheda-advanced-sezione-larghezza.png 373w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/scheda-advanced-sezione-larghezza-141x300.png 141w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/scheda-advanced-sezione-larghezza-30x63.png 30w\" sizes=\"auto, (max-width: 373px) 100vw, 373px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"colonne\">Colonne<\/h4>\n\n\n\n<p>Le colonne sono un elemento preimpostato che ci permette di creare un layout a colonne partendo da quelli predefiniti o modificandoli.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"382\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-colonne-1024x382.png\" alt=\"Oxygen Colonne\" class=\"wp-image-24563\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-colonne-1024x382.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-colonne-300x112.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-colonne-768x287.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-colonne-120x45.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-colonne.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"div\">Div<\/h4>\n\n\n\n<p>I div sono i contenitori che vengono utilizzati per raggruppare pi\u00f9 elementi all&#8217;interno di una colonna o di una sezione.<\/p>\n\n\n\n<p>In questo modo possiamo modificare l&#8217;allineamento di alcuni elementi che fanno parte di una sezione. I div, infatti, ci permettono anche di modificare il layout e creare layout verticali o a griglia in una sezione in cui viene usato un layout orizzontale.<\/p>\n\n\n\n<p>Per esempio se creiamo una colonna con layout 50-50, verranno creati due <em>div<\/em> ognuno corrispondente a met\u00e0 colonna. Gli elementi all&#8217;interno di ogni div possono essere disposti verticalmente o orizzontalmente. Per farlo ci basta selezionare il layout preferito dalla scheda <strong>Primary<\/strong> &gt; <em>Layout child elements<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/layout-child-elements-1024x451.png\" alt=\"Layout Child Elements\" class=\"wp-image-24564\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/layout-child-elements-1024x451.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/layout-child-elements-300x132.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/layout-child-elements-768x338.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/layout-child-elements-120x53.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/layout-child-elements.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Questo qui sotto \u00e8 un esempio in cui nel div a sinistra abbiamo usato un layout verticale e in quello a destra uno orizzontale.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"456\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/layout-child-elements-oxygen-1024x456.png\" alt=\"Layout Child Elements Oxygen\" class=\"wp-image-24565\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/layout-child-elements-oxygen-1024x456.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/layout-child-elements-oxygen-300x134.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/layout-child-elements-oxygen-768x342.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/layout-child-elements-oxygen-120x53.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/layout-child-elements-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Dalle opzioni <em>Layout child elements <\/em>possiamo scegliere se disporre gli elementi in verticale, in orizzontale o a griglia.<\/p>\n\n\n\n<p>Possiamo poi impostare anche l&#8217;allineamento degli oggetti e la spaziatura dalle opzioni <em>Horizontal<\/em> e<em> Vertical item alignment<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"452\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/item-alignment-oxygen-1024x452.png\" alt=\"Item Alignment Oxygen\" class=\"wp-image-24566\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/item-alignment-oxygen-1024x452.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/item-alignment-oxygen-300x133.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/item-alignment-oxygen-768x339.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/item-alignment-oxygen-120x53.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/item-alignment-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"gli-elementi-di-oxygen-builder\">Gli elementi di Oxygen Builder<\/h3>\n\n\n\n<p>Oxygen ha una raccolta di elementi suddivisi in categorie: basic, helper, WordPress, library e reusable.<\/p>\n\n\n\n<p>Dopo aver visto come aggiungere un elemento, facciamo una panoramica degli elementi principali.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"basic\">Basic<\/h4>\n\n\n\n<p>In questa sezione sono presenti queste categorie: container, text, link, visual e other.<\/p>\n\n\n\n<p>I <strong>container <\/strong>includono sezioni, colonne e div, gli elementi che abbiamo visto prima in dettaglio nella sezione layout.<\/p>\n\n\n\n<p>Gli elementi <strong>text<\/strong> includono titoli (h1, h2, h3, ecc.), testo e rich text, vale a dire testo che pu\u00f2 essere formattato attraverso l&#8217;editor di WordPress.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"567\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-rich-text-1024x567.png\" alt=\"Oxygen Rich Text\" class=\"wp-image-24567\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-rich-text-1024x567.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-rich-text-300x166.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-rich-text-768x425.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-rich-text-114x63.png 114w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-rich-text.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>I <strong>link <\/strong>includono pulsanti, testo con link, pulsanti con icone e cos\u00ec via.<\/p>\n\n\n\n<p>Tra gli elementi <strong>visual<\/strong> troviamo immagini, video, icone ed elenchi con icone.<\/p>\n\n\n\n<p>Nella sezione <strong>other<\/strong> troviamo il blocco codice che ci permette di incorporare nella pagina codice JavaScript, CSS personalizzati e cos\u00ec via.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"helper\">Helper<\/h4>\n\n\n\n<p>Nella lista <em>helper<\/em> troviamo elementi composti o dinamici come box per le recensioni, barre di avanzamento, contatori, indici e slider.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"372\" height=\"824\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/elementi-helpers-oxygen.png\" alt=\"Elementi Helpers Oxygen\" class=\"wp-image-24568\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/elementi-helpers-oxygen.png 372w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/elementi-helpers-oxygen-135x300.png 135w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/elementi-helpers-oxygen-28x63.png 28w\" sizes=\"auto, (max-width: 372px) 100vw, 372px\" \/><\/figure>\n\n\n\n<p>Si tratta di elementi predefiniti che possiamo inserire nelle pagine e poi personalizzare.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"word-press\">WordPress<\/h4>\n\n\n\n<p>In questa sezione troviamo menu, <a href=\"https:\/\/supporthost.com\/it\/ricerca-wordpress\/\">barre di ricerca<\/a>, form per i commenti, l&#8217;elemento shortcode che ci permette di incorporare gli shortcode e cos\u00ec via.<\/p>\n\n\n\n<p>Vedremo pi\u00f9 avanti come utilizzare alcuni di questi elementi, come lo shortcode per incorporare un form di contatto.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"library\">Library<\/h4>\n\n\n\n<p>Nella libreria troviamo elementi gi\u00e0 pronti come <strong>intere sezioni <\/strong>del sito o <strong>pagine <\/strong>gi\u00e0 impostate.<\/p>\n\n\n\n<p>Per aggiungerle ci basta cliccare su <em>Add &gt; Library &gt; Design Sets<\/em>.<\/p>\n\n\n\n<p>Attualmente troviamo <strong>18 set<\/strong> composti da elementi e sezioni del sito in diversi stili.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"373\" height=\"864\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/library-design-sets-oxygen.png\" alt=\"Library Design Sets Oxygen\" class=\"wp-image-24569\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/library-design-sets-oxygen.png 373w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/library-design-sets-oxygen-130x300.png 130w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/library-design-sets-oxygen-27x63.png 27w\" sizes=\"auto, (max-width: 373px) 100vw, 373px\" \/><\/figure>\n\n\n\n<p>Per prima cosa dobbiamo selezionare un design e poi cliccare su <em>Pages<\/em> per vedere le pagine gi\u00e0 pronte disponibili o su <em>Sections &amp; Elements <\/em>per accedere alla lista delle sezioni e degli elementi.<\/p>\n\n\n\n<p>Tra questi ci sono header, footer, showcase, titoli, slider, call to action e cos\u00ec via.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"743\" height=\"924\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-library.png\" alt=\"Oxygen Library\" class=\"wp-image-24570\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-library.png 743w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-library-241x300.png 241w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-library-51x63.png 51w\" sizes=\"auto, (max-width: 743px) 100vw, 743px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"reusable\">Reusable<\/h4>\n\n\n\n<p>In questa sezione troveremo gli elementi che abbiamo salvato come <em>riutilizzabili<\/em>.<\/p>\n\n\n\n<p>Per aggiungere un elemento a questa lista ci basta selezionare l&#8217;elemento e aprire il pannello <em>Structure<\/em>. <\/p>\n\n\n\n<p>Dopodich\u00e9 possiamo cliccare sull&#8217;icona a forma di matita e cliccare su <em>Make Re-Usable <\/em>per salvare l&#8217;elemento nella lista <strong>Reusable<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"595\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/creare-elemento-reusable-oxygen-1024x595.png\" alt=\"Creare Elemento Reusable Oxygen\" class=\"wp-image-24571\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/creare-elemento-reusable-oxygen-1024x595.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/creare-elemento-reusable-oxygen-300x174.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/creare-elemento-reusable-oxygen-768x446.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/creare-elemento-reusable-oxygen-108x63.png 108w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/creare-elemento-reusable-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Ci verr\u00e0 chiesto di inserire un nome per l&#8217;elemento, dopodich\u00e9 clicchiamo su <em>Ok<\/em> per salvare.<\/p>\n\n\n\n<p>Quando aggiungiamo un elemento riutilizzabile abbiamo due opzioni: single o editable.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"376\" height=\"610\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-elementi-reusable-oxygen.png\" alt=\"Aggiungere Elementi Reusable Oxygen\" class=\"wp-image-24572\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-elementi-reusable-oxygen.png 376w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-elementi-reusable-oxygen-185x300.png 185w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-elementi-reusable-oxygen-39x63.png 39w\" sizes=\"auto, (max-width: 376px) 100vw, 376px\" \/><\/figure>\n\n\n\n<p>Se aggiungiamo l&#8217;elemento come <strong>single<\/strong>, le modifiche apportate all&#8217;elemento riutilizzabile si rifletteranno sull&#8217;elemento aggiunto nella pagina.<\/p>\n\n\n\n<p>Se, invece, vogliamo che l&#8217;elemento in questione non subisca modifiche quando modifichiamo il<em> modello originale<\/em>, dobbiamo inserirlo come <strong>editable<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"opzioni-di-stile-degli-elementi-scheda-advanced\">Opzioni di stile degli elementi: scheda advanced<\/h3>\n\n\n\n<p>Come abbiamo visto possiamo personalizzare ogni elemento utilizzando le opzioni delle schede <strong>primary <\/strong>e <strong>advanced<\/strong>.<\/p>\n\n\n\n<p>Vediamo quali impostazioni ci sono nella scheda <strong>advanced<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>background<\/li>\n\n\n\n<li>size &amp; spacing<\/li>\n\n\n\n<li>layout<\/li>\n\n\n\n<li>typography<\/li>\n\n\n\n<li>borders<\/li>\n\n\n\n<li>effects<\/li>\n\n\n\n<li>custom CSS<\/li>\n\n\n\n<li>JavaScript<\/li>\n\n\n\n<li>attribute.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"background\">Background<\/h4>\n\n\n\n<p>Dalle impostazioni <em>Advanced &gt; Background<\/em> possiamo modificare tutte le impostazioni sullo sfondo dell&#8217;elemento.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"377\" height=\"852\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-background-oxygen.png\" alt=\"Advanced Background Oxygen\" class=\"wp-image-24573\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-background-oxygen.png 377w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-background-oxygen-133x300.png 133w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-background-oxygen-28x63.png 28w\" sizes=\"auto, (max-width: 377px) 100vw, 377px\" \/><\/figure>\n\n\n\n<p>Da qui possiamo modificare il colore di sfondo, utilizzare un&#8217;immagine come sfondo di un elemento e modificarne l&#8217;aspetto.<\/p>\n\n\n\n<p>Per modificare il colore di sfondo ci basta cliccare su <strong>Background color<\/strong> e scegliere il colore con il selettore. Ci verranno proposti alcuni colori, nel nostro caso quelli dello stile &#8220;atomic&#8221; visto che stiamo lavorando su un template gi\u00e0 pronto.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"355\" height=\"852\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/background-color-oxygen.png\" alt=\"Background Color Oxygen\" class=\"wp-image-24574\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/background-color-oxygen.png 355w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/background-color-oxygen-125x300.png 125w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/background-color-oxygen-26x63.png 26w\" sizes=\"auto, (max-width: 355px) 100vw, 355px\" \/><\/figure>\n\n\n\n<p>Oltre a selezionare il colore possiamo anche modificare l&#8217;<strong>opacit\u00e0 <\/strong>agendo sulla barra indicata in questa schermata.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"372\" height=\"622\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/opacita-background-color-oxygen.png\" alt=\"Opacita Background Color Oxygen\" class=\"wp-image-24575\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/opacita-background-color-oxygen.png 372w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/opacita-background-color-oxygen-179x300.png 179w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/opacita-background-color-oxygen-38x63.png 38w\" sizes=\"auto, (max-width: 372px) 100vw, 372px\" \/><\/figure>\n\n\n\n<p>Per utilizzare un&#8217;immagine come sfondo di un elemento ci basta farlo con il tasto <em>browse<\/em> dalla sezione <strong>Background Image<\/strong>. Possiamo scegliere un&#8217;immagine dalla libreria media di WordPress o caricarne una nuova.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"355\" height=\"845\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/background-image-oxygen.png\" alt=\"Background Image Oxygen\" class=\"wp-image-24576\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/background-image-oxygen.png 355w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/background-image-oxygen-126x300.png 126w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/background-image-oxygen-26x63.png 26w\" sizes=\"auto, (max-width: 355px) 100vw, 355px\" \/><\/figure>\n\n\n\n<p>La voce successiva, <strong>Image Overlay Color<\/strong>, ci permette di applicare una sfumatura colorata, ma anche schiarire o scurire l&#8217;immagine di sfondo.<\/p>\n\n\n\n<p>Attraverso <strong>Background size<\/strong> possiamo modificare l&#8217;aspetto dell&#8217;immagine e scalarla, abbiamo diverse opzioni, per esempio <em>auto<\/em><em> <\/em>ci permette di utilizzare l&#8217;immagine nelle dimensioni originali.<\/p>\n\n\n\n<p><strong>Background Repeat<\/strong> ci permette di creare dei pattern duplicando l&#8217;immagine in verticale (repeat-y), orizzontale (repeat-x), in entrambi i versi (repeat). Di default l&#8217;immagine non viene duplicata (no-repeat).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"size-spacing\">Size &amp; Spacing<\/h4>\n\n\n\n<p>Dalle impostazioni <em>Advanced &gt; Size &amp; Spacing <\/em>possiamo modificare padding e margini nonch\u00e9 le dimensioni degli elementi.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"374\" height=\"644\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-size-and-spacing-oxygen.png\" alt=\"Advanced Size And Spacing Oxygen\" class=\"wp-image-24577\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-size-and-spacing-oxygen.png 374w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-size-and-spacing-oxygen-174x300.png 174w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-size-and-spacing-oxygen-37x63.png 37w\" sizes=\"auto, (max-width: 374px) 100vw, 374px\" \/><\/figure>\n\n\n\n<p>Come abbiamo visto nella sezione <em>Modificare la spaziatura tra gli elementi<\/em>, \u00e8 possibile modificare padding e margini direttamente dall&#8217;editor trascinando la barre viola che compaiono vicino al bordo dell&#8217;elemento selezionato.<\/p>\n\n\n\n<p>Da questa sezione possiamo anche modificare le dimensioni degli elementi impostando una larghezza o un&#8217;altezza specifica, oppure altezza o larghezza massime e minime.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"layout\">Layout<\/h4>\n\n\n\n<p>Dalla sezione <em>Advanced &gt; Layout<\/em> possiamo modificare le opzioni display, float, overflow, clear, visibility, z-index e position.<\/p>\n\n\n\n<p>Queste opzioni ci permettono di avere un controllo pi\u00f9 preciso sul posizionamento degli elementi.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"374\" height=\"841\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-layout-oxygen.png\" alt=\"Advanced Layout Oxygen\" class=\"wp-image-24578\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-layout-oxygen.png 374w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-layout-oxygen-133x300.png 133w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-layout-oxygen-28x63.png 28w\" sizes=\"auto, (max-width: 374px) 100vw, 374px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"typography\">Typography<\/h4>\n\n\n\n<p>Le opzioni in <em>Advanced &gt; Typography<\/em> ci permettono di modificare lo stile dei testi.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"382\" height=\"816\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-typography-oxygen.png\" alt=\"Advanced Typography Oxygen\" class=\"wp-image-24579\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-typography-oxygen.png 382w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-typography-oxygen-140x300.png 140w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-typography-oxygen-29x63.png 29w\" sizes=\"auto, (max-width: 382px) 100vw, 382px\" \/><\/figure>\n\n\n\n<p>Da qui possiamo modificare il font utilizzato, la dimensione e il peso.<\/p>\n\n\n\n<p>Possiamo cambiare il colore, l&#8217;allineamento del testo e la spaziatura tra i caratteri, oltre a modificare il testo (solo maiuscole, solo minuscole o iniziali maiuscole).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"borders\">Borders<\/h4>\n\n\n\n<p>L&#8217;opzione <em>Advanced &gt; Borders<\/em> \u00e8 indicata per modificare i bordi di elementi per esempio container o pulsanti.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"371\" height=\"727\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-borders-oxygen.png\" alt=\"Advanced Borders Oxygen\" class=\"wp-image-24580\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-borders-oxygen.png 371w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-borders-oxygen-153x300.png 153w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-borders-oxygen-32x63.png 32w\" sizes=\"auto, (max-width: 371px) 100vw, 371px\" \/><\/figure>\n\n\n\n<p>Da qui possiamo impostare colore, dimensioni e stile dei bordi, oltre che il raggio. Attraverso l&#8217;opzione<strong> Border radius<\/strong> possiamo, per esempio, rendere i pulsanti arrotondati.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"439\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/border-radius-oxygen-1024x439.png\" alt=\"Border Radius Oxygen\" class=\"wp-image-24581\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/border-radius-oxygen-1024x439.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/border-radius-oxygen-300x129.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/border-radius-oxygen-768x330.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/border-radius-oxygen-120x52.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/border-radius-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Cliccando su <em>edit individual radius<\/em> possiamo modificare il raggio degli angoli separatamente, come in questo esempio.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"456\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/edit-individual-radius-oxygen-1024x456.png\" alt=\"Edit Individual Radius Oxygen\" class=\"wp-image-24582\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/edit-individual-radius-oxygen-1024x456.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/edit-individual-radius-oxygen-300x134.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/edit-individual-radius-oxygen-768x342.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/edit-individual-radius-oxygen-120x53.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/edit-individual-radius-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"effects\">Effects<\/h4>\n\n\n\n<p>La sezione <em>Advanced &gt; Effects<\/em> ci permette di aggiungere animazioni e filtri agli elementi. Vediamo quali opzioni ci sono.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"368\" height=\"713\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-advanced-effects.png\" alt=\"Oxygen Advanced Effects\" class=\"wp-image-24584\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-advanced-effects.png 368w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-advanced-effects-155x300.png 155w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-advanced-effects-33x63.png 33w\" sizes=\"auto, (max-width: 368px) 100vw, 368px\" \/><\/figure>\n\n\n\n<p><strong>Animate on scroll<\/strong>: da qui possiamo impostare diversi tipi di animazione per l&#8217;elemento e gestirne la durata e altre impostazioni.<\/p>\n\n\n\n<p><strong>Opacity<\/strong>: possiamo modificare l&#8217;opacit\u00e0 degli elementi, impostando un valore da 0 a 1.<\/p>\n\n\n\n<p><strong>Transition<\/strong>: questa opzione ci permette di creare una transizione tra due valori CSS.<\/p>\n\n\n\n<p><strong>Box shadow<\/strong>: da qui possiamo applicare un&#8217;ombra all&#8217;interno o all&#8217;esterno dell&#8217;elemento. Possiamo definire il colore, il blur e la posizione dell&#8217;ombra.<\/p>\n\n\n\n<p><strong>Text shadow<\/strong>: questa opzione ci permette di applicare un&#8217;ombra al testo, anche in questo caso possiamo modificare il posizionamento e il blur.<\/p>\n\n\n\n<p><strong>Filter<\/strong>: ci consente di applicare un filtro per modificare la saturazione, il contrasto, la scala di grigi, invertire i colori e cos\u00ec via.<\/p>\n\n\n\n<p><strong>Transform<\/strong>: da qui possiamo applicare diverse modifiche, come scalare, ruotare o spostare gli elementi.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"custom-css-java-script-e-code-block\">Custom CSS, JavaScript e Code block<\/h4>\n\n\n\n<p>Dalle opzioni <em>Advanced &gt; Custom CSS \/ JavaScript<\/em> possiamo inserire del codice personalizzato per aggiungere nuove <strong>propriet\u00e0<\/strong> agli elementi.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"945\" height=\"807\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-custom-css-oxygen.png\" alt=\"Advanced Custom Css Oxygen\" class=\"wp-image-24585\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-custom-css-oxygen.png 945w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-custom-css-oxygen-300x256.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-custom-css-oxygen-768x656.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-custom-css-oxygen-74x63.png 74w\" sizes=\"auto, (max-width: 945px) 100vw, 945px\" \/><\/figure>\n\n\n\n<p>Possiamo anche inserire un blocco &#8220;codice&#8221; all&#8217;interno della pagina e aggiungere codice php, CSS o JavaScript.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"374\" height=\"693\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/add-code-block-oxygen.png\" alt=\"Add Code Block Oxygen\" class=\"wp-image-24586\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/add-code-block-oxygen.png 374w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/add-code-block-oxygen-162x300.png 162w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/add-code-block-oxygen-34x63.png 34w\" sizes=\"auto, (max-width: 374px) 100vw, 374px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"attributes\">Attributes<\/h4>\n\n\n\n<p>Dalla sezione <em>Advanced &gt; Attributes<\/em> possiamo aggiungere degli attributi HTML agli elementi.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"372\" height=\"463\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-attributes-oxygen.png\" alt=\"Advanced Attributes Oxygen\" class=\"wp-image-24587\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-attributes-oxygen.png 372w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-attributes-oxygen-241x300.png 241w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/advanced-attributes-oxygen-51x63.png 51w\" sizes=\"auto, (max-width: 372px) 100vw, 372px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"opzioni-di-stile-degli-elementi-gli-stati\">Opzioni di stile degli elementi: gli stati<\/h3>\n\n\n\n<p>Con Oxygen Builder possiamo gestire gli <strong>stati<\/strong>, vale a dire pseudo-classi che modificano lo stile degli elementi in base al loro stato.<\/p>\n\n\n\n<p>Puoi approfondire le pseudo-classi CSS nelle <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Pseudo-classes#Index_of_standard_pseudo-classes\" rel=\"noopener\">documentazione<\/a> per sviluppatori di Mozilla.<\/p>\n\n\n\n<p>Per esempio possiamo apportare delle modifiche quando un elemento passa allo stato <em>hover<\/em>. Un esempio comune \u00e8 un pulsante che cambia colore quando ci spostiamo sopra il cursore del mouse.<\/p>\n\n\n\n<p>Per modificare lo stile in base allo stato, selezioniamo un elemento e clicchiamo su <em>State<\/em>, poi selezioniamo quale stato vogliamo modificare, per esempio <em>hover<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"377\" height=\"324\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-stato-elemento-oxygen.png\" alt=\"Modificare Stato Elemento Oxygen\" class=\"wp-image-24588\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-stato-elemento-oxygen.png 377w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-stato-elemento-oxygen-300x258.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-stato-elemento-oxygen-73x63.png 73w\" sizes=\"auto, (max-width: 377px) 100vw, 377px\" \/><\/figure>\n\n\n\n<p>A questo punto ci basta apportare le modifiche che verranno applicare solo a quello stato. <\/p>\n\n\n\n<p>Per esempio vogliamo che il colore di sfondo del pulsante cambi quando l&#8217;elemento \u00e8 nello stato hover. Per farlo apriamo la scheda <em>Advanced &gt; Background <\/em>e modifichiamo il colore di sfondo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"creare-un-template\">Creare un template<\/h3>\n\n\n\n<p>Oxygen Builder ci permette di creare dei template per utilizzarli come base per creare pagine, post del blog e cos\u00ec via.<\/p>\n\n\n\n<p>Vediamo come creare un template.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"creare-un-nuovo-template\">Creare un nuovo template<\/h4>\n\n\n\n<p>Per prima cosa dalla dashboard di WordPress clicchiamo su <em>Oxygen <\/em>&gt; <em>Templates<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"241\" height=\"773\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-templates.png\" alt=\"Oxygen Templates\" class=\"wp-image-24589\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-templates.png 241w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-templates-20x63.png 20w\" sizes=\"auto, (max-width: 241px) 100vw, 241px\" \/><\/figure>\n\n\n\n<p>In questa sezione troviamo i template e gli elementi <em>reusable<\/em> che abbiamo creato.<\/p>\n\n\n\n<p>Per creare un nuovo template clicchiamo su <em>Add New Template<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"301\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-add-new-template-1024x301.png\" alt=\"Oxygen Add New Template\" class=\"wp-image-24590\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-add-new-template-1024x301.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-add-new-template-300x88.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-add-new-template-768x226.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-add-new-template-120x35.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-add-new-template.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Inseriamo un nome per il template e clicchiamo su pubblica.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"942\" height=\"671\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-nuovo-template-oxygen.png\" alt=\"Aggiungere Nuovo Template Oxygen\" class=\"wp-image-24591\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-nuovo-template-oxygen.png 942w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-nuovo-template-oxygen-300x214.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-nuovo-template-oxygen-768x547.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-nuovo-template-oxygen-88x63.png 88w\" sizes=\"auto, (max-width: 942px) 100vw, 942px\" \/><\/figure>\n\n\n\n<p>Scorrendo nella pagina possiamo specificare a quali sezioni del sito dovr\u00e0 essere applicato questo template.<\/p>\n\n\n\n<p>Dalla sezione <em>Where Does This Template Apply? <\/em>possiamo scegliere se applicare il template ad articoli, menu, pagine, media e cos\u00ec via.<\/p>\n\n\n\n<p>Nel nostro esempio selezioniamo <em>Pagine<\/em> per creare un template per le pagine principali. Dopo aver modificato le impostazioni, clicchiamo su <em>Aggiorna <\/em>per convalidare le modifiche.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"487\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/impostazioni-template-oxygen-1024x487.png\" alt=\"Impostazioni Template Oxygen\" class=\"wp-image-24592\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/impostazioni-template-oxygen-1024x487.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/impostazioni-template-oxygen-300x143.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/impostazioni-template-oxygen-768x365.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/impostazioni-template-oxygen-120x57.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/impostazioni-template-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Per creare il template con l&#8217;editor di Oxygen Builder clicchiamo su <em>Edit with Oxygen<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"449\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-template-oxygen-1024x449.png\" alt=\"Modificare Template Oxygen\" class=\"wp-image-24593\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-template-oxygen-1024x449.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-template-oxygen-300x132.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-template-oxygen-768x337.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-template-oxygen-120x53.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-template-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"creare-la-struttura-del-template-con-leditor\">Creare la struttura del template con l&#8217;editor<\/h4>\n\n\n\n<p>Vediamo ad esempio come creare il template delle pagine del nostro sito. <\/p>\n\n\n\n<p>Ai fini di questa guida a Oxygen, creeremo un template in cui header e footer vengono mantenuti in tutte le pagine, mentre la porzione centrale della pagina cambier\u00e0 di volta in volta.<\/p>\n\n\n\n<p>Per prima cosa possiamo creare l&#8217;<strong>header<\/strong> o utilizzare uno di quelli pronti disponibili nella libreria.<\/p>\n\n\n\n<p>Per farlo clicchiamo su <em>Add <\/em>&gt;<em> Library &gt; Designs Sets &gt; Nome del design &gt; Sections &amp; Elements &gt; Headers<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"505\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-header-oxygen-1024x505.png\" alt=\"Aggiungere Header Oxygen\" class=\"wp-image-24594\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-header-oxygen-1024x505.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-header-oxygen-300x148.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-header-oxygen-768x379.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-header-oxygen-120x59.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-header-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Dopodich\u00e9 possiamo modificare l&#8217;header che abbiamo scelto, per esempio andando a modificare il logo oppure modificando i link degli elementi del menu.<\/p>\n\n\n\n<p>Vediamo un esempio pratico, abbiamo aggiunto un header gi\u00e0 presente, modificato i colori e il logo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"289\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/esempio-header-oxygen-1024x289.png\" alt=\"Esempio Header Oxygen\" class=\"wp-image-24595\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/esempio-header-oxygen-1024x289.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/esempio-header-oxygen-300x85.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/esempio-header-oxygen-768x217.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/esempio-header-oxygen-120x34.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/esempio-header-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>A questo punto possiamo modificare gli elementi del <strong>menu <\/strong>che sono dei text link.<\/p>\n\n\n\n<p>Per farlo, selezioniamo un elemento, per esempio &#8220;home&#8221; e andiamo a inserire l&#8217;indirizzo della home nel campo URL.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"386\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-link-header-oxygen-1024x386.png\" alt=\"Modificare Link Header Oxygen\" class=\"wp-image-24596\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-link-header-oxygen-1024x386.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-link-header-oxygen-300x113.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-link-header-oxygen-768x289.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-link-header-oxygen-120x45.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modificare-link-header-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Possiamo ripetere la stessa operazione per tutte le voci del menu.<\/p>\n\n\n\n<p>Dopo aver ultimato le modifiche all&#8217;header, possiamo aggiungere un nuovo elemento: <strong>Inner Content<\/strong>.<\/p>\n\n\n\n<p>Clicchiamo su <em>Add <\/em>e cerchiamo <em>inner content<\/em> per aggiungerlo.<\/p>\n\n\n\n<p>Questo elemento sar\u00e0 modificabile in tutte le pagine, in questo modo potremo creare le pagine del nostro sito mantenendo gli altri elementi, ma potendo modificare solo la sezione centrale.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"470\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-inner-content-template-oxygen-1024x470.png\" alt=\"Aggiungere Inner Content Template Oxygen\" class=\"wp-image-24597\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-inner-content-template-oxygen-1024x470.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-inner-content-template-oxygen-300x138.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-inner-content-template-oxygen-768x353.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-inner-content-template-oxygen-120x55.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-inner-content-template-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Non ci resta che aggiungere il <strong>footer<\/strong>. Anche in questo caso possiamo utilizzare un elemento gi\u00e0 pronto e poi personalizzarlo.<\/p>\n\n\n\n<p>Ci basta cliccare su <em>Add <\/em>&gt;<em> Library &gt; Designs Sets &gt; Nome del design &gt; Sections &amp; Elements &gt; Footers<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"502\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-footer-oxygen-1024x502.png\" alt=\"Aggiungere Footer Oxygen\" class=\"wp-image-24598\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-footer-oxygen-1024x502.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-footer-oxygen-300x147.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-footer-oxygen-768x376.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-footer-oxygen-120x59.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-footer-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Anche in questo caso possiamo modificare il footer nell&#8217;aspetto e nei testi, come in questo esempio.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"479\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/esempio-footer-oxygen-1024x479.png\" alt=\"Esempio Footer Oxygen\" class=\"wp-image-24599\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/esempio-footer-oxygen-1024x479.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/esempio-footer-oxygen-300x140.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/esempio-footer-oxygen-768x359.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/esempio-footer-oxygen-120x56.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/esempio-footer-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Dopo aver completato il nostro template, clicchiamo su <em>Save<\/em> per salvare le modifiche.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"utilizzare-i-template-con-oxygen\">Utilizzare i template con Oxygen<\/h4>\n\n\n\n<p>Come abbiamo visto prima quando creiamo un template, possiamo scegliere se applicarlo direttamente ad alcune sezioni del sito, per esempio a tutte le pagine.<\/p>\n\n\n\n<p>Possiamo creare pi\u00f9 template che si applichino alle pagine. In questo caso possiamo gestire quale template verr\u00e0 applicato di default grazie alla <strong>priorit\u00e0<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"563\" height=\"155\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/template-priority-oxygen.png\" alt=\"Template Priority Oxygen\" class=\"wp-image-24600\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/template-priority-oxygen.png 563w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/template-priority-oxygen-300x83.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/template-priority-oxygen-120x33.png 120w\" sizes=\"auto, (max-width: 563px) 100vw, 563px\" \/><\/figure>\n\n\n\n<p class=\"note\">Il template che ha il numero pi\u00f9 alto in questo campo verr\u00e0 utilizzato come predefinito.<\/p>\n\n\n\n<p>In ogni caso, quando creiamo una nuova pagina possiamo anche scegliere quale template applicare. In questo modo possiamo utilizzare un template specifico per una sola pagina.<\/p>\n\n\n\n<p>Per farlo ci basta creare una nuova pagina e scegliere dal menu a tendina <em>Render Page Using Template<\/em> quale template usare.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"506\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/applicare-template-alla-pagina-1024x506.png\" alt=\"Applicare Template Alla Pagina\" class=\"wp-image-24601\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/applicare-template-alla-pagina-1024x506.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/applicare-template-alla-pagina-300x148.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/applicare-template-alla-pagina-768x380.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/applicare-template-alla-pagina-120x59.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/applicare-template-alla-pagina.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"incorporare-uno-shortcode\">Incorporare uno shortcode<\/h3>\n\n\n\n<p>Ci sono diversi casi in cui pu\u00f2 essere necessario incorporare nella pagina uno shortcode per mostrare elementi creati con un plugin.<\/p>\n\n\n\n<p>Per esempio <a href=\"https:\/\/supporthost.com\/it\/contact-form-7\/\">Contact Form 7<\/a> ci permette di creare dei form di contatto per WordPress e di aggiungerli alla pagina tramite uno <strong>shortcode<\/strong>.<\/p>\n\n\n\n<p>Per capire come fare a incorporare uno shortcode, creiamo una pagina di contatto.<\/p>\n\n\n\n<p>Facciamo questo esempio con Contact Form 7, ma puoi usare lo stesso procedimento per incorporare shortcode creati da altri plugin per incorporare calendari eventi, slider e cos\u00ec via.<\/p>\n\n\n\n<p>Nel caso di Contact Form 7, ci basta cliccare su <em>Contatto &gt; Moduli di contatto <\/em>dalla dashboard di WordPress e poi copiare lo shortcode corrispondente al modulo che vogliamo incorporare.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"416\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/shortcode-contact-form-7-1024x416.png\" alt=\"Shortcode Contact Form 7\" class=\"wp-image-24602\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/shortcode-contact-form-7-1024x416.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/shortcode-contact-form-7-300x122.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/shortcode-contact-form-7-768x312.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/shortcode-contact-form-7-120x49.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/shortcode-contact-form-7.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Creiamo una pagina per i contatti e aggiungiamo l&#8217;elemento <em>Shortcode <\/em>(Add &gt; WordPress &gt; Shortcode).<\/p>\n\n\n\n<p>Dopodich\u00e9 incolliamo lo shortcode nel campo <em>Full shorcode <\/em>come vedi in questo esempio.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"358\" height=\"520\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-shortcode.png\" alt=\"Oxygen Shortcode\" class=\"wp-image-24603\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-shortcode.png 358w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-shortcode-207x300.png 207w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/oxygen-shortcode-43x63.png 43w\" sizes=\"auto, (max-width: 358px) 100vw, 358px\" \/><\/figure>\n\n\n\n<p>Anche in questo caso possiamo inserire l&#8217;elemento shortcode in una sezione specifica del sito, come in questo esempio in cui abbiamo usato un layout a colonne.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"509\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modulo-di-contatto-esempio-oxygen-1024x509.png\" alt=\"Modulo Di Contatto Esempio Oxygen\" class=\"wp-image-24604\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modulo-di-contatto-esempio-oxygen-1024x509.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modulo-di-contatto-esempio-oxygen-300x149.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modulo-di-contatto-esempio-oxygen-768x382.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modulo-di-contatto-esempio-oxygen-120x60.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/modulo-di-contatto-esempio-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Per personalizzare l&#8217;aspetto del form di contatto possiamo creare un foglio di stile cliccando su <em>Manage &gt; Stylesheets <\/em>e aggiungere il codice CSS.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/foglio-di-stile-form-di-contatto-oxygen-1024x575.png\" alt=\"Foglio Di Stile Form Di Contatto Oxygen\" class=\"wp-image-24605\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/foglio-di-stile-form-di-contatto-oxygen-1024x575.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/foglio-di-stile-form-di-contatto-oxygen-300x169.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/foglio-di-stile-form-di-contatto-oxygen-768x431.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/foglio-di-stile-form-di-contatto-oxygen-112x63.png 112w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/foglio-di-stile-form-di-contatto-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"rendere-le-pagine-responsive\">Rendere le pagine responsive<\/h3>\n\n\n\n<p>\u00c8 importante assicurarsi che le pagine vengano visualizzate correttamente anche da dispositivi mobili.<\/p>\n\n\n\n<p>Per venirci incontro, Oxygen Builder ci permette di visualizzare le pagine in base a come appariranno sui diversi schermi.<\/p>\n\n\n\n<p>Quando apriamo l&#8217;editor di default ci viene mostrato l&#8217;aspetto delle pagine su <em>tutti i dispositivi<\/em>. Attraverso il menu a tendina dei dispositivi, possiamo selezionare i dispositivi per dimensioni e verificare l&#8217;anteprima della pagina.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"367\" height=\"413\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/anteprima-dispositivi-oxygen.png\" alt=\"Anteprima Dispositivi Oxygen\" class=\"wp-image-24606\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/anteprima-dispositivi-oxygen.png 367w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/anteprima-dispositivi-oxygen-267x300.png 267w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/anteprima-dispositivi-oxygen-56x63.png 56w\" sizes=\"auto, (max-width: 367px) 100vw, 367px\" \/><\/figure>\n\n\n\n<p>In questo modo possiamo scegliere tra le dimensioni standard. Possiamo anche modificare la larghezza dell&#8217;anteprima agendo sul righello che comparir\u00e0 in basso.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"503\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/anteprima-dispositivi-mobili-righello-oxygen-1024x503.png\" alt=\"Anteprima Dispositivi Mobili Righello Oxygen\" class=\"wp-image-24607\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/anteprima-dispositivi-mobili-righello-oxygen-1024x503.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/anteprima-dispositivi-mobili-righello-oxygen-300x148.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/anteprima-dispositivi-mobili-righello-oxygen-768x378.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/anteprima-dispositivi-mobili-righello-oxygen-120x59.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/anteprima-dispositivi-mobili-righello-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Selezionando uno dei dispositivi, per esempio<em> less than 768px<\/em> possiamo apportare delle modifiche che verranno applicate solo a quella dimensione e a quelle inferiori.<\/p>\n\n\n\n<p>Vediamo alcune delle modifiche che possiamo apportare.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"gestire-le-colonne\">Gestire le colonne<\/h4>\n\n\n\n<p>Le colonne in Oxygen Builder sono responsive e si trasformano dal layout orizzontale a quello verticale in automatico quando viene modificata la dimensione dello schermo.<\/p>\n\n\n\n<p>Ci sono casi, per\u00f2, in cui \u00e8 necessario modificare queste impostazioni.<\/p>\n\n\n\n<p>Selezionando l&#8217;elemento <em>colonne<\/em> vedremo alcune opzioni nella scheda <strong>primary<\/strong>.<\/p>\n\n\n\n<p><strong>Stack columns vertically<\/strong>: da qui possiamo impostare la dimensione al di sotto della quale le colonne devono essere allineate in verticale.<\/p>\n\n\n\n<p><strong>Set Column Width to 50%<\/strong>: questa opzione ci permette di disporre gli elementi su pi\u00f9 righe, come in questo esempio.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"997\" height=\"923\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/elementi-colonna-responsive-oxygen.png\" alt=\"Elementi Colonna Responsive Oxygen\" class=\"wp-image-24608\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/elementi-colonna-responsive-oxygen.png 997w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/elementi-colonna-responsive-oxygen-300x278.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/elementi-colonna-responsive-oxygen-768x711.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/elementi-colonna-responsive-oxygen-68x63.png 68w\" sizes=\"auto, (max-width: 997px) 100vw, 997px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"nascondere-o-mostrare-gli-elementi\">Nascondere o mostrare gli elementi<\/h4>\n\n\n\n<p>Possiamo scegliere se mostrare o nascondere alcuni elementi al variare delle dimensioni dello schermo.<\/p>\n\n\n\n<p>Per nascondere un elemento al di sotto di una determinata dimensione possiamo nascondere l&#8217;elemento per tutti i dispositivi e poi riattivare la visualizzazione solo per alcune dimensioni specifiche dello schermo.<\/p>\n\n\n\n<p>Per vedere come fare, prendiamo in considerazione il caso di voler mostrare un elemento solo per gli schermi al di sotto dei 768px.<\/p>\n\n\n\n<p>Scegliamo come dispositivo: <em>All device<\/em>.<\/p>\n\n\n\n<p>Per <strong>nascondere<\/strong> un elemento, selezioniamolo e clicchiamo su <em>Advanced<\/em><em>&gt; Layout<\/em>.<\/p>\n\n\n\n<p>Da qui possiamo modificare l&#8217;opzione <em>display<\/em>,<em> <\/em>selezionando<em> none<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"374\" height=\"429\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/display-none-oxygen.png\" alt=\"Display None Oxygen\" class=\"wp-image-24609\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/display-none-oxygen.png 374w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/display-none-oxygen-262x300.png 262w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/display-none-oxygen-55x63.png 55w\" sizes=\"auto, (max-width: 374px) 100vw, 374px\" \/><\/figure>\n\n\n\n<p>Dopodich\u00e9 scegliamo la dimensione dello schermo in cui l&#8217;elemento dovr\u00e0 essere mostrato, per esempio <em>lesser than 768px<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"983\" height=\"924\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/mostrare-nascondere-elementi-oxygen.png\" alt=\"Mostrare Nascondere Elementi Oxygen\" class=\"wp-image-24610\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/mostrare-nascondere-elementi-oxygen.png 983w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/mostrare-nascondere-elementi-oxygen-300x282.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/mostrare-nascondere-elementi-oxygen-768x722.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/mostrare-nascondere-elementi-oxygen-67x63.png 67w\" sizes=\"auto, (max-width: 983px) 100vw, 983px\" \/><\/figure>\n\n\n\n<p>Quindi clicchiamo su <em>Advanced<\/em><em>&gt; Layout<\/em> e da qui possiamo impostare di nuovo l&#8217;opzione <em>display<\/em> in modo che l&#8217;elemento sia visibile, per esempio scegliendo l&#8217;opzione flex.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"creare-menu-responsivi\">Creare menu responsivi<\/h4>\n\n\n\n<p>Per modificare le impostazioni di un menu, clicchiamo su <em>Mobile responsive <\/em>dalla scheda <strong>primary<\/strong> del menu.<\/p>\n\n\n\n<p>Possiamo quindi modificare le impostazioni per il menu mobile e scegliere al di sotto di quale dimensione il menu deve essere<em> compresso<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"688\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/menu-responsivo-oxygen-1024x688.png\" alt=\"Menu Responsivo Oxygen\" class=\"wp-image-24611\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/menu-responsivo-oxygen-1024x688.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/menu-responsivo-oxygen-300x202.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/menu-responsivo-oxygen-768x516.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/menu-responsivo-oxygen-94x63.png 94w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/menu-responsivo-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"eliminare-stili-responsivi\">Eliminare stili responsivi<\/h4>\n\n\n\n<p>Se creiamo dei layout specifici per dei dispositivi, li vedremo evidenziati nell&#8217;elenco dei dispositivi.<\/p>\n\n\n\n<p>In questo caso per eliminarli ci basta cliccare sulla X rossa accanto alla dimensione dello schermo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"407\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/eliminare-sitle-responsivo-oxygen-1024x407.png\" alt=\"Eliminare Sitle Responsivo Oxygen\" class=\"wp-image-24612\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/eliminare-sitle-responsivo-oxygen-1024x407.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/eliminare-sitle-responsivo-oxygen-300x119.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/eliminare-sitle-responsivo-oxygen-768x305.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/eliminare-sitle-responsivo-oxygen-120x48.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/eliminare-sitle-responsivo-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"impostazioni\">Impostazioni<\/h3>\n\n\n\n<p>Nella barra superiore dell&#8217;editor di Oxygen Builder troviamo la voce <em>Manage<\/em>, da qui possiamo accedere alle impostazioni (<strong>Settings<\/strong>).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"101\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/manage-settings-oxygen-1024x101.png\" alt=\"Manage Settings Oxygen\" class=\"wp-image-24613\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/manage-settings-oxygen-1024x101.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/manage-settings-oxygen-300x30.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/manage-settings-oxygen-768x76.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/manage-settings-oxygen-120x12.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/manage-settings-oxygen.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Nelle impostazioni troviamo: Page settings e Global Styles.<\/p>\n\n\n\n<p><strong>Page settings<\/strong>: ci permette di modificare la larghezza della pagina. Tieni presente che di default \u00e8 impostata a 1120px.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"367\" height=\"490\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/settings-page-settings-oxygen.png\" alt=\"Settings Page Settings Oxygen\" class=\"wp-image-24614\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/settings-page-settings-oxygen.png 367w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/settings-page-settings-oxygen-225x300.png 225w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/settings-page-settings-oxygen-47x63.png 47w\" sizes=\"auto, (max-width: 367px) 100vw, 367px\" \/><\/figure>\n\n\n\n<p><strong>Global Styles<\/strong>: da qui possiamo accedere alle impostazioni per colori, font, heading, body text, link, selezioni e cos\u00ec via.<\/p>\n\n\n\n<p>Vediamo nello specifico cosa possiamo modificare da queste impostazioni.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"global-styles-colors\">Global styles: colors<\/h4>\n\n\n\n<p>Cliccando su <em>Settings &gt; Global Styles &gt; Colors<\/em> possiamo definire i <strong>Global colors<\/strong>.<\/p>\n\n\n\n<p>In questo modo possiamo creare e salvare una palette di colori da utilizzare nelle pagine.<\/p>\n\n\n\n<p>Vediamo come fare.<\/p>\n\n\n\n<p>Per prima cosa possiamo scegliere se aggiungere i colori a uno dei set gi\u00e0 presenti, come <strong>Global colors<\/strong> oppure creare un nuovo set. In quest&#8217;ultimo caso clicca su <em>Add color Set<\/em> e scegli il nome.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"367\" height=\"530\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/add-color-set-oxygen.png\" alt=\"Add Color Set Oxygen\" class=\"wp-image-24615\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/add-color-set-oxygen.png 367w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/add-color-set-oxygen-208x300.png 208w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/add-color-set-oxygen-44x63.png 44w\" sizes=\"auto, (max-width: 367px) 100vw, 367px\" \/><\/figure>\n\n\n\n<p>Dopo aver cliccato sul set, clicca su <strong>Add color<\/strong>. Potrai quindi specificare il nome del colore e sceglierlo da un selettore o inserire il codice esadecimale corrispondente, come in questo esempio.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"365\" height=\"388\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-colore-global-colors.png\" alt=\"Aggiungere Colore Global Colors\" class=\"wp-image-24616\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-colore-global-colors.png 365w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-colore-global-colors-282x300.png 282w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/aggiungere-colore-global-colors-59x63.png 59w\" sizes=\"auto, (max-width: 365px) 100vw, 365px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"global-styles-fonts\">Global styles: fonts<\/h4>\n\n\n\n<p>Da <em>Settings &gt; Global Styles &gt; Fonts <\/em>possiamo impostare i font che utilizzeremo sul nostro sito.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"369\" height=\"412\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-fonts.png\" alt=\"Global Styles Fonts\" class=\"wp-image-24617\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-fonts.png 369w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-fonts-269x300.png 269w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-fonts-56x63.png 56w\" sizes=\"auto, (max-width: 369px) 100vw, 369px\" \/><\/figure>\n\n\n\n<p><strong>Display font<\/strong>: da qui possiamo impostare i font per gli heading.<\/p>\n\n\n\n<p><strong>Text font<\/strong>: da qui possiamo impostare i font per tutti gli altri elementi di testo.<\/p>\n\n\n\n<p>Per opzione predefinita Oxygen utilizza i <a href=\"https:\/\/supporthost.com\/it\/google-fonts\/\" data-type=\"post\" data-id=\"55719\">Google Fonts<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"global-styles-headings\">Global styles: headings<\/h4>\n\n\n\n<p>Da <em>Settings &gt; Global Styles &gt; <\/em><em>Headings<\/em> possiamo gestire le impostazioni per le intestazioni H1, H2, H3 e cos\u00ec via.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"373\" height=\"776\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-headings.png\" alt=\"Global Styles Headings\" class=\"wp-image-24618\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-headings.png 373w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-headings-144x300.png 144w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-headings-30x63.png 30w\" sizes=\"auto, (max-width: 373px) 100vw, 373px\" \/><\/figure>\n\n\n\n<p>Per ogni heading possiamo impostare: dimensione, peso del font e colore.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"global-styles-body-text\">Global styles: body text<\/h4>\n\n\n\n<p>Le impostazioni in <em>Settings &gt; Global Styles &gt;Body Text <\/em>ci permettono di modificare le opzioni globali per i testi nelle pagine.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"358\" height=\"518\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-body-text-oxygen.png\" alt=\"Global Styles Body Text Oxygen\" class=\"wp-image-24619\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-body-text-oxygen.png 358w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-body-text-oxygen-207x300.png 207w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-body-text-oxygen-44x63.png 44w\" sizes=\"auto, (max-width: 358px) 100vw, 358px\" \/><\/figure>\n\n\n\n<p>Possiamo modificare dimensioni, peso del font, interlinea e colore.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"global-styles-links\">Global styles: links<\/h4>\n\n\n\n<p>Da <em>Settings &gt; Global Styles &gt;<\/em><em>Links <\/em>possiamo modificare le impostazioni su tutti i tipi di elementi link (<em>All<\/em>) o su uno specifico.<\/p>\n\n\n\n<p>Scegliendo l&#8217;opzione <em>All<\/em> le modifiche si applicheranno anche ai link nel sito, non solo agli elementi aggiunti attraverso il builder.<\/p>\n\n\n\n<p>Oxygen Builder include tre elementi di questo tipo: button, text link e link wrapper.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"363\" height=\"714\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-links-oxygen.png\" alt=\"Global Styles Links Oxygen\" class=\"wp-image-24620\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-links-oxygen.png 363w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-links-oxygen-153x300.png 153w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-links-oxygen-32x63.png 32w\" sizes=\"auto, (max-width: 363px) 100vw, 363px\" \/><\/figure>\n\n\n\n<p>Le impostazioni ci permettono di modificare colore e peso del font e colore dell&#8217;elemento nello stato hover.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"global-styles-width-breakpoints\">Global styles: width &amp; breakpoints<\/h4>\n\n\n\n<p>Tramite <em>Settings &gt; Global Styles &gt;Width &amp; Breakpoints<\/em> possiamo modificare le dimensioni della pagina e le dimensioni dei breakpoint.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"362\" height=\"595\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-width-and-breakpoints-oxygen.png\" alt=\"Global Styles Width And Breakpoints Oxygen\" class=\"wp-image-24621\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-width-and-breakpoints-oxygen.png 362w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-width-and-breakpoints-oxygen-183x300.png 183w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-width-and-breakpoints-oxygen-38x63.png 38w\" sizes=\"auto, (max-width: 362px) 100vw, 362px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"global-styles-sections-columns\">Global styles: sections &amp; columns<\/h4>\n\n\n\n<p>Da <em>Settings &gt; Global Styles &gt;<\/em><em>S<\/em><em>ections &amp; <\/em><em>C<\/em><em>olumns<\/em> possiamo impostare il padding per gli elementi sezione e colonne.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"363\" height=\"557\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-sections-and-columns-oxygen.png\" alt=\"Global Styles Sections And Columns Oxygen\" class=\"wp-image-24622\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-sections-and-columns-oxygen.png 363w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-sections-and-columns-oxygen-196x300.png 196w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-sections-and-columns-oxygen-41x63.png 41w\" sizes=\"auto, (max-width: 363px) 100vw, 363px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"global-styles-animate-on-scroll\">Global styles: animate on scroll<\/h4>\n\n\n\n<p>Tramite <em>Settings &gt; Global Styles &gt;<\/em><em>Animate on Scroll<\/em> possiamo impostare un&#8217;animazione come default.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"368\" height=\"858\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-animate-on-scroll-oxygen.png\" alt=\"Global Styles Animate On Scroll Oxygen\" class=\"wp-image-24623\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-animate-on-scroll-oxygen.png 368w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-animate-on-scroll-oxygen-129x300.png 129w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-animate-on-scroll-oxygen-27x63.png 27w\" sizes=\"auto, (max-width: 368px) 100vw, 368px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"global-styles-scripts\">Global styles: scripts<\/h4>\n\n\n\n<p>Dalla sezione <em>Settings &gt; Global Styles &gt; Scripts <\/em>possiamo attivare la funzione <em>Smooth Scroll to Hash Links<\/em> e impostare il tempo di scroll.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"365\" height=\"409\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-script-oxygen.png\" alt=\"Global Styles Script Oxygen\" class=\"wp-image-24624\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-script-oxygen.png 365w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-script-oxygen-268x300.png 268w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/global-styles-script-oxygen-56x63.png 56w\" sizes=\"auto, (max-width: 365px) 100vw, 365px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusioni\">Conclusioni<\/h2>\n\n\n\n<p>Oxygen Builder \u00e8 senza dubbio uno dei site builder pi\u00f9 completi sul mercato. Ci garantisce un alto livello di personalizzazione e al tempo stesso \u00e8 facile da utilizzare. <\/p>\n\n\n\n<p>L&#8217;editor visuale con il drag &amp; drop e la libreria di elementi gi\u00e0 pronti rendono, infatti, questo plugin alla portata di tutti.<\/p>\n\n\n\n<p>Questo tutorial a Oxygen Builder vuole essere da guida per comprendere come \u00e8 strutturata l&#8217;interfaccia e come compiere le operazioni pi\u00f9 importanti. Dall&#8217;aggiunta degli elementi alla creazione di template e pagine responsive, abbiamo cercato di coprire tutte le operazioni di base che si possono fare con questo builder.<\/p>\n\n\n\n<p>E tu, avevi gi\u00e0 provato Oxygen o utilizzi altri site\/page builder? Facci sapere con un commento la tua esperienza.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vuoi imparare a usare Oxygen Builder con WordPress per creare il tuo sito? Con questo plugin semplice da usare potrai personalizzare l&#8217;aspetto del sito in ogni suo elemento. Iniziamo dal vedere come funziona il plugin, cosa lo differenzia da altri page builder e quali sono i prezzi delle licenze. Dopo questa introduzione vedremo un tutorial [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":63848,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[33],"tags":[],"class_list":["post-24532","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/24532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/comments?post=24532"}],"version-history":[{"count":10,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/24532\/revisions"}],"predecessor-version":[{"id":131335,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/24532\/revisions\/131335"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media\/63848"}],"wp:attachment":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media?parent=24532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/categories?post=24532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/tags?post=24532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}