Perché scegliere Oxygen Builder?

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.

Preparazione dell'ambiente

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 sezione dove inserire le informazioni di contatto

15. Aggiungi un Heading con il testo "Contattaci".

16. Informazioni di Contatto:

• Aggiungi un Text con:
  • Email: contatto@tuosito.com
  • Telefono: +39 123 456 7890
  • 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.

Grazie per la tua attenzione, buona giornata!