Come creare una pagina web in 20 minuti con Oxygen
Realizzare un sito web performante e su misura è fondamentale per distinguersi nel mondo digitale. Oxygen è uno strumento avanzato che ti permette di avere il controllo totale sul design e sulle funzionalità del tuo sito WordPress.
Oxygen è un page builder potente e veloce poiché genera codice pulito e leggero, migliorando la velocità di caricamento e l'esperienza utente complessiva. Permette di personalizzare ogni aspetto del tuo sito senza limitazioni e senza il bisogno di un tema WordPress tradizionale, permettendoti di partire da una tela bianca.
Richiedi il nostro supporto
Se desideri un sito web professionale realizzato con Oxygen ma preferisci affidarti a degli esperti, siamo qui per aiutarti. Con la nostra esperienza nello sviluppo web, possiamo trasformare le tue idee in realtà, garantendo un sito veloce, ottimizzato e dal design unico.
Ti consigliamo di leggere il nostro articolo su come creare un sito web con WordPress, dove spieghiamo passo dopo passo come acquistare un hosting, registrare un dominio e impostare WordPress. Una volta completate queste fasi, sarai pronto per procedere!
Inizia a creare
Crea la pagina principale
Vai su "Pagine" > "Aggiungi nuovo". Assegna un titolo alla pagina (ad esempio, "Home") e clicca su "Edit with Oxygen"
Imposta font, colori e stili che verranno applicati a tutto il sito, andando su Settings > Global Styles.
Sezione Hero
La Sezione Hero è l'elemento visivo dominante all'inizio della pagina, progettato per catturare l'attenzione del visitatore secondo tre caratteristiche fondamentali:
Impatto immediato: creare una forte prima impressione che invogli l'utente a saperne di più.
Comunicazione chiara: presentare il messaggio chiave o la proposta di valore della tua azienda.
Orientamento dell'utente: guidare il visitatore verso le sezioni successive o azioni specifiche.
1. Aggiungi una sezione
Le sezioni sono contenitori strutturali che ti permettono di organizzare il contenuto in modo logico e immediato.
Clicca su Add (+) in alto a sinistra.
Seleziona Basics e clicca su Section.
2. Imposta lo sfondo
Seleziona la sezione appena aggiunta.
Nel pannello di sinistra, vai su Background.
Carica un'immagine o imposta un colore di sfondo.
Per un'immagine, clicca su Image e carica la tua foto.
Imposta Background Size su "cover" per assicurarti che l'immagine ricopra l'intera area della sezione
3. Imposta l'altezza della sezione
Con la sezione selezionata, vai su Layout.
Imposta Min Height a 100vh per coprire l'intera altezza dello schermo.
4. Aggiungi contenuto alla sezione
Heading (Titolo)
Clicca su Add (+) > Basics > Heading.
Digita: "Benvenuti nel mondo di [Nome del tuo sito]".
Personalizza il font, la dimensione e il colore nel pannello Typography.
Text (Sottotitolo)
Aggiungi un Text sotto il titolo.
Inserisci una frase coinvolgente, ad esempio: "Pronto a trasformare le tue idee in realtà?".
Button (Pulsante)
Aggiungi un Button.
Come testo scrivi "Scopri di più".
Nel pannello Primary, imposta il link alla sezione successiva o a una pagina specifica.
5. Allinea il contenuto
Seleziona ogni elemento e, nel pannello Advanced > Layout, imposta l'allineamento centrale.
Sezione servizi
6. Aggiungi una nuova sezione
7. Aggiungi il titolo della sezione
Aggiungi un Heading con il testo "I nostri servizi".
Imposta il livello di intestazione su H2.
8. Creazione delle colonne
Aggiungi un elemento Columns:
Clicca su Add (+) > Basics > Columns.
Seleziona il layout con tre colonne (o quante ne desideri).
9. Popola le colonne
Per ogni colonna:
Icona/Immagine:
Aggiungi un'immagine.
Carica un'immagine rappresentativa del servizio.
Titolo del servizio:
Aggiungi un Heading con il nome del servizio.
Descrizione:
Aggiungi un Text con una breve descrizione.
10. Stile e personalizzazione:
Uniforma lo stile dei testi e delle immagini.
Usa colori e font coerenti con il tuo brand.
Sezione Chi siamo
11. Aggiungi una nuova sezione
12. Aggiungi un Heading con il testo "Chi Siamo".
13. Aggiungi un elemento Columns con due colonne.
Contenuto della colonna sinistra
Aggiungi un Text.
Scrivi una descrizione coinvolgente della tua azienda.
Contenuto della colonna destra
Aggiungi un Image.
Carica una foto del team o un'immagine rappresentativa.
Contatti
14. Aggiungi una nuova sezionedove inserire le informazioni di contatto
15. Aggiungi un Heading con il testo "Contattaci".
Indirizzo:Via dell'Innovazione, 42 – 00100 Città Fantastica
17. Modulo di contatto
Se utilizzi un plugin come Contact Form 7:
Aggiungi uno Shortcode.
Inserisci lo shortcode del modulo.
Call to Action
18. Aggiungi una sezione evidenziata:
Nel pannello Background, imposta un colore di sfondo distintivo.
19. Contenuto della Sezione:
Heading:
Aggiungi un Heading con il testo "Pronto a fare il prossimo passo?".
Button:
Aggiungi un Button con il testo "Inizia l'avventura! 🚀".
Imposta il link alla pagina di contatto.
20. Allineamento:
Centra gli elementi nella sezione utilizzando le impostazioni di Layout.
Responsività
Clicca sulle icone dei dispositivi (Desktop, Tablet, Mobile) per verificare la resa su diversi schermi.
Adatta dimensioni e layout se necessario.
Consigli aggiuntivi
Sperimenta con le animazioni: Oxygen permette di aggiungere effetti di animazione agli elementi per rendere il sito più dinamico.
Utilizza Classi e ID: per una gestione più efficiente degli stili, assegna classi agli elementi che condividono lo stesso stile.
Esplora le funzionalità avanzate: Oxygen offre opzioni avanzate come condizioni di visualizzazione, codice personalizzato e integrazione con ACF (Advanced Custom Fields).
Backup regolari: Effettua backup periodici del tuo sito per prevenire perdite di dati.
Video dimostrativo
Abbiamo realizzato un breve video per mostrarti tutti i passaggi: Guardalo ora!
Vuoi fare pratica?
Se sei interessato a sapere come personalizzare il tuo sito con design ed elementi grafici avanzati,contattaci! Scegliendo il nostro servizio di Affiancamento Sviluppo Web, avrai inclusa la possibilità di utilizzare un'area di test dove provare ad utilizzare Oxygen senza il bisogno di acquistarlo. Questo affiancamento ti permetterà infatti di apprendere velocemente e imparare in poco tempo i trucchi che noi abbiamo acquisito in anni di esperienza! Così quando deciderai di fare questo investimento avrai già le conoscenze necessarie per sfruttarlo al meglio.
Speriamo che questa guida ti sia stata utile. Se hai dei dubbi non esitare a contattarci! Puoi chiedere maggiori informazioni scrivendo alla mail info@markpole.com.
Per fornire le migliori esperienze, utilizziamo tecnologie come i cookie per memorizzare e/o accedere alle informazioni del dispositivo. Il consenso a queste tecnologie ci permetterà di elaborare dati come il comportamento di navigazione o ID unici su questo sito. Non acconsentire o ritirare il consenso può influire negativamente su alcune caratteristiche e funzioni.
Funzionale
Always active
L'archiviazione tecnica o l'accesso sono strettamente necessari al fine legittimo di consentire l'uso di un servizio specifico esplicitamente richiesto dall'abbonato o dall'utente, o al solo scopo di effettuare la trasmissione di una comunicazione su una rete di comunicazione elettronica.
Preferenze
L'archiviazione tecnica o l'accesso sono necessari per lo scopo legittimo di memorizzare le preferenze che non sono richieste dall'abbonato o dall'utente.
Statistiche
L'archiviazione tecnica o l'accesso che viene utilizzato esclusivamente per scopi statistici.L'archiviazione tecnica o l'accesso che viene utilizzato esclusivamente per scopi statistici anonimi. Senza un mandato di comparizione, una conformità volontaria da parte del vostro Fornitore di Servizi Internet, o ulteriori registrazioni da parte di terzi, le informazioni memorizzate o recuperate per questo scopo da sole non possono di solito essere utilizzate per l'identificazione.
Marketing
L'archiviazione tecnica o l'accesso sono necessari per creare profili di utenti per inviare pubblicità, o per tracciare l'utente su un sito web o su diversi siti web per scopi di marketing simili.