HTML e CSS

Vuoi ricevere le prossime guide? Iscriviti alla newsletter su WhatsApp e ricevi consigli pratici su siti web, SEO e strumenti digitali. Iscriviti su WhatsApp Sviluppo Web Come creare una Home Page professionale in WordPress con HTML e CSS Scopri come realizzare una Home Page moderna e responsive per un sito da parrucchiera usando solo blocchi HTML e CSS in WordPress. Tutorial passo dopo passo con codice, consigli pratici e guida all’implementazione. Leggi la guida completa Vedi esempio della Home Page Molti pensano che per creare una home page moderna su WordPress servano Elementor Pro, temi premium o decine di plugin. In realtà puoi costruire una pagina elegante, veloce e responsive usando semplicemente: Questo metodo ha diversi vantaggi: In questo tutorial creeremo una vera home page professionale per un salone di parrucchiera direttamente dentro WordPress. Home page wordpress html css Cosa realizzeremo La pagina sarà composta da: Tutto usando: Cosa serve Ti basta: Non useremo page builder. STEP 1 — Creare una nuova pagina Vai in: Chiama la pagina: STEP 2 — Impostare la pagina Full Width Molti temi permettono di usare il layout “Full Width”. Di solito lo trovi: Questo è importante perché ci permette di usare tutta la larghezza dello schermo. STEP 3 — Aggiungere un blocco HTML personalizzato Dentro Gutenberg clicca: Cerca: Questo blocco ci permetterà di inserire il nostro layout. STEP 4 — Inserire la struttura HTML Incolla questo codice nel blocco HTML. STEP 5 — Inserire il CSS dentro WordPress Ora dobbiamo dare lo stile alla sezione. Vai in: Incolla questo codice. CSS HERO SECTION Come inserire l’immagine correttamente Non devi scrivere manualmente il link. Fai così: Cosa abbiamo creato? Abbiamo costruito: Tutto senza plugin. STEP 6 — Rendere la sezione Responsive Sempre nel CSS aggiungi: Perché è fondamentale? Senza responsive: Con questa media query: STEP 7 — Creare la sezione Servizi Aggiungi un nuovo blocco HTML sotto il precedente. Incolla: CSS Sezione Servizi Responsive servizi STEP 8 — Aggiungere altre sezioni Puoi replicare lo stesso metodo per: Il procedimento è sempre identico: Consiglio importante Non mettere tutto dentro un unico blocco HTML gigantesco. Meglio: Se vuoi partire dalle basi assolute, ti consiglio di leggere anche la guida completa, “Come creare un sito Web da zero nel 2026: guida pratica reale per chi parte da zero“perfetta per capire tutti i passaggi necessari per costruire un sito professionale. Dove mettere il CSS in modo professionale Hai 3 opzioni. Metodo semplice Perfetto per iniziare. Metodo professionale Usare un tema child. Metodo avanzato Creare un file CSS dedicato. Come migliorare ancora il design Puoi aggiungere: Tutto senza Elementor. Perché questo metodo è molto potente Perché impari davvero: E soprattutto: non dipendi da page builder pesanti. STEP 9— Creare la sezione “Chi siamo” con HTML e CSS inline Dopo aver realizzato la Hero Section, possiamo aggiungere un blocco molto importante per qualsiasi sito professionale: la sezione “Chi siamo”. Questo tipo di layout è perfetto per: L’obiettivo è creare una sezione elegante con: In questo esempio useremo direttamente il CSS inline dentro l’HTML, così potrai copiare tutto dentro un semplice blocco HTML di WordPress senza usare file CSS esterni. Inserire il blocco HTML Dentro WordPress aggiungi un nuovo blocco: e incolla questo codice: Come funziona questo layout? Il blocco utilizza: Grazie a: gli elementi vengono affiancati automaticamente. Perché usare flex-wrap:wrap? Questa proprietà è fondamentale. Infatti: permette agli elementi di andare automaticamente in colonna su schermi piccoli. Senza questa proprietà il layout si romperebbe su smartphone. Come personalizzare il blocco Puoi modificare facilmente: Colore sfondo Colore bottone Dimensione titolo Spaziature Come sostituire l’immagine Ti basta cambiare: con l’URL della tua immagine caricata su WordPress. Esempio: Consiglio importante Usa immagini: Così il sito resterà veloce e professionale. Risultato finale Con questo blocco ottieni una sezione: E soprattutto: senza usare Elementor o page builder pesanti. STEP — Creare una Gallery moderna con HTML e CSS inline Una gallery è fondamentale in qualsiasi sito professionale, soprattutto per attività visive come: In questa sezione creeremo una gallery elegante e responsive direttamente dentro WordPress usando: Senza Elementor e senza plugin. Cosa realizzeremo Questo blocco include: Perfetto per mostrare: STEP 1 — Aggiungere un blocco HTML personalizzato Dentro WordPress clicca: Poi cerca: STEP 2 — Incollare il codice della gallery Inserisci questo codice: STEP 3 — Come inserire correttamente le immagini Ora devi sostituire: con il vero URL dell’immagine caricata su WordPress. Come ottenere il link immagine Vai in: Apri l’immagine Clicca sulla foto caricata. Copia URL file Vedrai qualcosa tipo: Inseriscilo nel codice Esempio: Come funziona questa gallery? La griglia usa: e: Questo crea automaticamente: Perché usare width:100%? Questa proprietà: permette alle immagini di adattarsi automaticamente alla colonna. Quindi: Personalizzazioni utili Cambiare spazio tra immagini Arrotondare di più le immagini Cambiare colore titolo Cambiare sfondo sezione Consiglio importante sulle immagini Per una gallery professionale: Questo migliora: Risultato finale Con questo blocco ottieni una gallery: Perfetta per siti WordPress creati solo con HTML e CSS. STEP — Creare una Call To Action professionale con HTML e CSS inline Una delle sezioni più importanti in una Home Page è la Call To Action finale. Questo blocco serve per: In pratica è il punto in cui inviti il visitatore a fare qualcosa: Nel nostro esempio creeremo una CTA elegante per un sito da parrucchiera usando: Senza Elementor e senza plugin. Cosa realizzeremo Questa sezione include: Perfetta per: STEP 1 — Aggiungere un blocco HTML personalizzato Dentro WordPress clicca: Cerca: STEP 2 — Inserire il codice Incolla questo blocco: Come funziona questo blocco? Il layout utilizza: per allineare: sulla stessa riga. Perché usare flex-wrap:wrap? Questa proprietà: è fondamentale per il responsive design. Su smartphone: Come funziona il gradient dello sfondo? Questo codice: crea un leggero effetto elegante sopra il colore principale. Serve per: Personalizzazioni utili Cambiare colore sfondo Cambiare icona Puoi sostituire: con: oppure usare Font Awesome. Cambiare colore bottone e: Modificare grandezza titolo Dove mettere il link reale del bottone? Dentro: Esempio: oppure: Consiglio importante Le CTA funzionano molto meglio quando: Errori da evitare Troppi bottoni Confondono l’utente. Testi … Leggi tutto