Tutorial WordPress per creare una Home Page professionale con HTML e CSS senza Elementor
di

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
strumenti marketing online per creare siti email e automazioni

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:

  • WordPress
  • Blocco HTML Personalizzato
  • CSS personalizzato

Questo metodo ha diversi vantaggi:

  • sito più veloce
  • meno plugin
  • maggiore controllo grafico
  • codice pulito
  • migliore ottimizzazione SEO

In questo tutorial creeremo una vera home page professionale per un salone di parrucchiera direttamente dentro WordPress.

Home page moderna per sito parrucchiera realizzata in WordPress con HTML e CSS responsive

Home page wordpress html css

Cosa realizzeremo

Elenco dei Contenuti

La pagina sarà composta da:

  • Top Bar
  • Header
  • Hero Section
  • Servizi
  • Chi siamo
  • Gallery
  • Footer

Tutto usando:

  • HTML
  • CSS
  • Gutenberg

Cosa serve

Ti basta:

  • WordPress installato
  • Editor Gutenberg
  • Un tema leggero come GeneratePress oppure Astra

Non useremo page builder.

STEP 1 — Creare una nuova pagina

Vai in:

Pagine → Aggiungi nuova

Chiama la pagina:

Home

STEP 2 — Impostare la pagina Full Width

Molti temi permettono di usare il layout “Full Width”.

Di solito lo trovi:

Impostazioni pagina → Layout → Full Width

Questo è importante perché ci permette di usare tutta la larghezza dello schermo.

STEP 3 — Aggiungere un blocco HTML personalizzato

Dentro Gutenberg clicca:

+

Cerca:

HTML Personalizzato

Questo blocco ci permetterà di inserire il nostro layout.

STEP 4 — Inserire la struttura HTML

Incolla questo codice nel blocco HTML.

<section class="hero">

    <div class="hero-content">

        <div class="hero-text">

            <span>LA TUA BELLEZZA, IL NOSTRO STILE</span>

            <h1>
                Esalta la tua unicità
            </h1>

            <p>
                Tagli, colori e trattamenti personalizzati
                per valorizzare il tuo stile.
            </p>

            <a href="#" class="btn-main">
                Scopri di più
            </a>

        </div>

    </div>

</section>

STEP 5 — Inserire il CSS dentro WordPress

Ora dobbiamo dare lo stile alla sezione.

Vai in:

Aspetto → Personalizza → CSS Aggiuntivo

Incolla questo codice.

CSS HERO SECTION

.hero{
    background:#faf7f6;
    padding:80px 40px;
}

.hero-content{
    max-width:1200px;
    margin:auto;

    display:flex;
    align-items:center;
    gap:50px;
}

.hero-text{
    flex:1;
}

.hero-text span{
    letter-spacing:2px;
    font-size:14px;
    color:#b67c7c;
}

.hero-text h1{
    font-size:72px;
    line-height:1;
    margin:20px 0;
    color:#222;
}

.hero-text p{
    font-size:18px;
    line-height:1.8;
    margin-bottom:30px;
    color:#555;
}

.btn-main{
    display:inline-block;
    padding:15px 30px;
    background:#d79c9c;
    color:#fff;
    text-decoration:none;
    border-radius:5px;
    transition:0.3s;
}

.btn-main:hover{
    background:#c78686;
}

.hero-image{
    flex:1;
}

.hero-image img{
    width:100%;
    border-radius:10px;
    display:block;
}
.hero{
    position:relative;
    min-height:700px;

    display:flex;
    align-items:center;

    padding:80px;

    background-image:url('URL-IMMAGINE');
    background-size:cover;
    background-position:center right;
    background-repeat:no-repeat;
}

Come inserire l’immagine correttamente

Non devi scrivere manualmente il link.

Fai così:

  1. Carica l’immagine nella libreria media
  2. Apri l’immagine
  3. Copia URL file
  4. Incollalo dentro:
url('URL-IMMAGINE');

Cosa abbiamo creato?

Abbiamo costruito:

  • layout completo
  • testo in sovrapposizione
  • immagine sotto
  • bottone CTA
  • design responsive moderno

Tutto senza plugin.

STEP 6 — Rendere la sezione Responsive

Sempre nel CSS aggiungi:

@media(max-width:768px){

    .hero-content{
        flex-direction:column;
    }

    .hero-text h1{
        font-size:48px;
    }

}

Perché è fondamentale?

Senza responsive:

  • il layout si rompe su smartphone
  • Google penalizza il sito
  • esperienza utente pessima

Con questa media query:

  • gli elementi vanno in colonna
  • il testo si ridimensiona
  • tutto resta leggibile

STEP 7 — Creare la sezione Servizi

Aggiungi un nuovo blocco HTML sotto il precedente.

Incolla:

<section class="services">

    <div class="services-title">
        <span>I NOSTRI SERVIZI</span>
        <h2>Curiamo la tua bellezza</h2>
    </div>

    <div class="services-grid">

        <div class="service-box">
            <h3>Taglio</h3>
            <p>Tagli moderni e personalizzati.</p>
        </div>

        <div class="service-box">
            <h3>Colore</h3>
            <p>Colorazioni professionali.</p>
        </div>

        <div class="service-box">
            <h3>Piega</h3>
            <p>Styling elegante e moderno.</p>
        </div>

        <div class="service-box">
            <h3>Trattamenti</h3>
            <p>Cura professionale dei capelli.</p>
        </div>

    </div>

</section>

CSS Sezione Servizi

.services{
    padding:100px 40px;
}

.services-title{
    text-align:center;
    margin-bottom:60px;
}

.services-title span{
    color:#d79c9c;
    letter-spacing:2px;
    font-size:14px;
}

.services-title h2{
    font-size:48px;
    margin-top:15px;
}

.services-grid{
    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.service-box{
    border:1px solid #eee;
    padding:40px;
    text-align:center;
    transition:0.3s;
}

.service-box:hover{
    transform:translateY(-5px);
}

Responsive servizi

@media(max-width:768px){

    .services-grid{
        grid-template-columns:1fr;
    }

}

STEP 8 — Aggiungere altre sezioni

Puoi replicare lo stesso metodo per:

  • Chi siamo
  • Gallery
  • CTA finale
  • Footer personalizzato

Il procedimento è sempre identico:

  1. Blocco HTML
  2. Struttura HTML
  3. CSS personalizzato

Consiglio importante

Non mettere tutto dentro un unico blocco HTML gigantesco.

Meglio:

  • un blocco HTML per ogni sezione
  • CSS organizzato
  • codice più leggibile

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

Aspetto → Personalizza → CSS aggiuntivo

Perfetto per iniziare.

Metodo professionale

Usare un tema child.

Metodo avanzato

Creare un file CSS dedicato.

Come migliorare ancora il design

Puoi aggiungere:

  • effetti hover
  • animazioni CSS
  • gradienti
  • SVG decorativi
  • menu sticky
  • scroll animation

Tutto senza Elementor.

Perché questo metodo è molto potente

Perché impari davvero:

  • HTML
  • CSS
  • layout responsive
  • struttura delle pagine
  • ottimizzazione WordPress

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:

  • parrucchieri
  • barber shop
  • centri estetici
  • fotografi
  • studi professionali
  • ristoranti

L’obiettivo è creare una sezione elegante con:

  • testo descrittivo a sinistra
  • immagine a destra
  • bottone Call To Action
  • layout responsive moderno

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:

HTML Personalizzato

e incolla questo codice:

<section style="
background:#f7f2f1;
padding:80px 40px;
">

    <div style="
    max-width:1400px;
    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:80px;
    flex-wrap:wrap;
    ">

        <!-- TESTO -->
        <div style="
        flex:1;
        min-width:320px;
        ">

            <span style="
            color:#c78686;
            font-size:14px;
            font-weight:600;
            letter-spacing:3px;
            display:block;
            margin-bottom:25px;
            ">
                CHI SIAMO
            </span>

            <h2 style="
            font-size:68px;
            line-height:1.1;
            color:#111;
            margin-bottom:35px;
            font-weight:500;
            ">
                Passione, esperienza
                e attenzione per te
            </h2>

            <p style="
            font-size:24px;
            line-height:1.8;
            color:#444;
            margin-bottom:40px;
            max-width:650px;
            ">
                Il nostro salone è il luogo dove la bellezza
                incontra il benessere.
                Ti accompagniamo in un percorso
                di stile personalizzato, ascoltando
                le tue esigenze.
            </p>

            <a href="#" style="
            display:inline-block;
            padding:20px 38px;
            background:#c78686;
            color:#fff;
            text-decoration:none;
            border-radius:6px;
            font-size:18px;
            font-weight:600;
            ">
                SCOPRI DI PIÙ
            </a>

        </div>

        <!-- IMMAGINE -->
        <div style="
        flex:1;
        min-width:320px;
        ">

            <img 
            src="https://www.oltreilcaso.it/wp-content/uploads/2026/05/ChatGPT-Image-16-mag-2026-15_58_49.png"
            alt="Salone parrucchiera"
            style="
            width:100%;
            border-radius:6px;
            display:block;
            "
            >

        </div>

    </div>

</section>

Come funziona questo layout?

Il blocco utilizza:

  • Flexbox
  • CSS inline
  • design responsive
  • immagine adattiva
  • tipografia moderna

Grazie a:

display:flex;

gli elementi vengono affiancati automaticamente.

Perché usare flex-wrap:wrap?

Questa proprietà è fondamentale.

Infatti:

flex-wrap:wrap;

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

background:#f7f2f1;

Colore bottone

background:#c78686;

Dimensione titolo

font-size:68px;

Spaziature

padding:80px 40px;

Come sostituire l’immagine

Ti basta cambiare:

src=""

con l’URL della tua immagine caricata su WordPress.

Esempio:

src="https://tuosito.it/uploads/salone.jpg"

Consiglio importante

Usa immagini:

  • leggere
  • ottimizzate
  • almeno 1600px larghezza
  • formato WebP

Così il sito resterà veloce e professionale.

Risultato finale

Con questo blocco ottieni una sezione:

  • moderna
  • responsive
  • elegante
  • professionale
  • perfetta per WordPress

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:

  • parrucchieri
  • barber shop
  • estetiste
  • fotografi
  • tattoo studio
  • ristoranti
  • portfolio creativi

In questa sezione creeremo una gallery elegante e responsive direttamente dentro WordPress usando:

  • HTML
  • CSS inline
  • blocco HTML personalizzato

Senza Elementor e senza plugin.

Cosa realizzeremo

Questo blocco include:

  • titolo sezione
  • griglia a 4 colonne
  • immagini responsive
  • bordi arrotondati
  • layout moderno

Perfetto per mostrare:

  • lavori reali
  • portfolio
  • esempi clienti
  • trasformazioni

STEP 1 — Aggiungere un blocco HTML personalizzato

Dentro WordPress clicca:

+

Poi cerca:

HTML Personalizzato

STEP 2 — Incollare il codice della gallery

Inserisci questo codice:

<section style="
background:#ffffff;
padding:80px 40px;
">

    <div style="
    max-width:1400px;
    margin:auto;
    ">

        <!-- TITOLO -->
        <div style="
        margin-bottom:40px;
        ">

            <span style="
            color:#c78686;
            font-size:14px;
            font-weight:600;
            letter-spacing:3px;
            display:block;
            margin-bottom:20px;
            ">
                GALLERY
            </span>

            <h2 style="
            font-size:68px;
            line-height:1.1;
            color:#111;
            font-weight:500;
            ">
                Lasciati ispirare
            </h2>

        </div>

        <!-- GRID IMMAGINI -->
        <div style="
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:25px;
        ">

            <!-- IMMAGINE 1 -->
            <div>

                <img 
                src="URL-IMMAGINE-1"
                alt="Acconciatura donna"
                style="
                width:100%;
                display:block;
                border-radius:6px;
                "
                >

            </div>

            <!-- IMMAGINE 2 -->
            <div>

                <img 
                src="URL-IMMAGINE-2"
                alt="Taglio capelli donna"
                style="
                width:100%;
                display:block;
                border-radius:6px;
                "
                >

            </div>

            <!-- IMMAGINE 3 -->
            <div>

                <img 
                src="URL-IMMAGINE-3"
                alt="Colore capelli"
                style="
                width:100%;
                display:block;
                border-radius:6px;
                "
                >

            </div>

            <!-- IMMAGINE 4 -->
            <div>

                <img 
                src="URL-IMMAGINE-4"
                alt="Balayage capelli"
                style="
                width:100%;
                display:block;
                border-radius:6px;
                "
                >

            </div>

        </div>

    </div>

</section>

STEP 3 — Come inserire correttamente le immagini

Ora devi sostituire:

URL-IMMAGINE-1

con il vero URL dell’immagine caricata su WordPress.

Come ottenere il link immagine

Vai in:

Media → Libreria

Apri l’immagine

Clicca sulla foto caricata.

Copia URL file

Vedrai qualcosa tipo:

https://tuosito.it/wp-content/uploads/2026/05/capelli-balayage.webp

Inseriscilo nel codice

Esempio:

<img 
src="https://tuosito.it/wp-content/uploads/2026/05/capelli-balayage.webp"
>

Come funziona questa gallery?

La griglia usa:

display:grid;

e:

grid-template-columns:repeat(4,1fr);

Questo crea automaticamente:

  • 4 colonne uguali
  • layout ordinato
  • spaziature uniformi

Perché usare width:100%?

Questa proprietà:

width:100%;

permette alle immagini di adattarsi automaticamente alla colonna.

Quindi:

  • niente immagini deformate
  • layout responsive
  • dimensioni coerenti

Personalizzazioni utili

Cambiare spazio tra immagini

gap:25px;

Arrotondare di più le immagini

border-radius:20px;

Cambiare colore titolo

color:#111;

Cambiare sfondo sezione

background:#ffffff;

Consiglio importante sulle immagini

Per una gallery professionale:

  • usa immagini verticali uguali
  • stessa illuminazione
  • stesso stile
  • formato WebP
  • immagini leggere

Questo migliora:

  • velocità sito
  • estetica
  • SEO
  • esperienza utente

Risultato finale

Con questo blocco ottieni una gallery:

  • moderna
  • responsive
  • elegante
  • veloce
  • professionale

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:

  • aumentare prenotazioni
  • generare contatti
  • spingere l’utente all’azione
  • migliorare le conversioni

In pratica è il punto in cui inviti il visitatore a fare qualcosa:

  • prenotare
  • contattarti
  • acquistare
  • richiedere informazioni

Nel nostro esempio creeremo una CTA elegante per un sito da parrucchiera usando:

  • HTML
  • CSS inline
  • WordPress
  • blocco HTML personalizzato

Senza Elementor e senza plugin.

Cosa realizzeremo

Questa sezione include:

  • sfondo colorato elegante
  • icona
  • titolo grande
  • testo descrittivo
  • bottone CTA
  • layout responsive moderno

Perfetta per:

  • saloni
  • centri estetici
  • studi professionali
  • landing page
  • portfolio

STEP 1 — Aggiungere un blocco HTML personalizzato

Dentro WordPress clicca:

+

Cerca:

HTML Personalizzato

STEP 2 — Inserire il codice

Incolla questo blocco:

<section style="
background:#d9a8a4;
background-image:linear-gradient(
135deg,
rgba(255,255,255,0.08),
rgba(255,255,255,0.02)
);

padding:35px 50px;
border-radius:6px;
">

    <div style="
    max-width:1400px;
    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:30px;
    flex-wrap:wrap;
    ">

        <!-- PARTE SINISTRA -->
        <div style="
        display:flex;
        align-items:center;
        gap:25px;

        flex-wrap:wrap;
        ">

            <!-- ICONA -->
            <div style="
            font-size:55px;
            color:#fff;
            line-height:1;
            ">
                📅
            </div>

            <!-- TESTO -->
            <div>

                <h3 style="
                color:#fff;
                font-size:42px;
                line-height:1.2;
                margin-bottom:10px;
                font-weight:500;
                ">
                    Pronta a valorizzare la tua bellezza?
                </h3>

                <p style="
                color:rgba(255,255,255,0.9);
                font-size:18px;
                line-height:1.6;
                ">
                    Prenota ora il tuo appuntamento e lasciati coccolare dal nostro team.
                </p>

            </div>

        </div>

        <!-- BOTTONE -->
        <div>

            <a href="#" style="
            display:inline-block;

            background:#fff;
            color:#c78686;

            text-decoration:none;

            padding:18px 40px;

            border-radius:4px;

            font-size:16px;
            font-weight:700;

            letter-spacing:1px;

            transition:0.3s;
            ">
                PRENOTA ORA
            </a>

        </div>

    </div>

</section>

Come funziona questo blocco?

Il layout utilizza:

display:flex;

per allineare:

  • testo
  • icona
  • bottone

sulla stessa riga.

Perché usare flex-wrap:wrap?

Questa proprietà:

flex-wrap:wrap;

è fondamentale per il responsive design.

Su smartphone:

  • gli elementi andranno automaticamente in colonna
  • il layout resterà pulito
  • il testo non uscirà fuori schermo

Come funziona il gradient dello sfondo?

Questo codice:

background-image:linear-gradient(...)

crea un leggero effetto elegante sopra il colore principale.

Serve per:

  • dare profondità
  • evitare sfondi piatti
  • rendere il design più moderno

Personalizzazioni utili

Cambiare colore sfondo

background:#d9a8a4;

Cambiare icona

Puoi sostituire:

📅

con:

  • ✂️
  • 💇‍♀️
  • 💄
  • 📞
  • ⭐

oppure usare Font Awesome.

Cambiare colore bottone

background:#fff;

e:

color:#c78686;

Modificare grandezza titolo

font-size:42px;

Dove mettere il link reale del bottone?

Dentro:

href="#"

Esempio:

href="/contatti"

oppure:

href="https://tuosito.it/prenotazioni"

Consiglio importante

Le CTA funzionano molto meglio quando:

  • hanno colori in contrasto
  • sono semplici
  • hanno un solo bottone
  • usano testo diretto
  • creano urgenza o invito chiaro

Errori da evitare

Troppi bottoni

Confondono l’utente.

Testi troppo lunghi

Le CTA devono essere immediate.

Colori poco visibili

Il bottone deve attirare subito l’attenzione.

Risultato finale

Con questo blocco ottieni una Call To Action:

  • moderna
  • responsive
  • elegante
  • professionale
  • perfetta per WordPress

E soprattutto:

senza page builder e senza plugin pesanti.

STEP — Creare il Footer finale con HTML e CSS inline

Il footer è una delle sezioni più importanti di qualsiasi sito web professionale.

Molti lo sottovalutano, ma in realtà serve per:

  • migliorare la navigazione
  • mostrare contatti
  • aumentare la fiducia
  • aiutare la SEO
  • rendere il sito più professionale

In questo tutorial creeremo un footer moderno direttamente dentro WordPress usando:

  • HTML
  • CSS inline
  • blocco HTML personalizzato

Senza Elementor e senza plugin.

Cosa realizzeremo

Questo footer includerà:

  • logo
  • descrizione attività
  • social
  • link rapidi
  • servizi
  • contatti
  • copyright finale

Con un layout:

  • elegante
  • responsive
  • leggero
  • professionale

STEP 1 — Aggiungere un blocco HTML personalizzato

Dentro WordPress clicca:

+

Cerca:

HTML Personalizzato

STEP 2 — Inserire il codice del Footer

Incolla questo codice:

<footer style="
background:#f7f4f3;
padding:70px 40px 20px;
border-top:1px solid #eee;
">

    <div style="
    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:60px;
    ">

        <!-- COLONNA 1 -->
        <div>

            <h3 style="
            font-size:38px;
            color:#111;
            margin-bottom:20px;
            font-weight:500;
            ">
                Bellezza & Stile
            </h3>

            <p style="
            color:#555;
            font-size:17px;
            line-height:1.8;
            margin-bottom:25px;
            ">
                La tua bellezza,
                il nostro impegno quotidiano.
            </p>

            <div style="
            display:flex;
            gap:18px;
            font-size:24px;
            ">

                <a href="#" style="
                text-decoration:none;
                color:#111;
                ">
                    📘
                </a>

                <a href="#" style="
                text-decoration:none;
                color:#111;
                ">
                    📸
                </a>

            </div>

        </div>

        <!-- COLONNA 2 -->
        <div>

            <h4 style="
            font-size:20px;
            color:#111;
            margin-bottom:25px;
            ">
                LINK RAPIDI
            </h4>

            <div style="
            display:flex;
            flex-direction:column;
            gap:15px;
            ">

                <a href="#" style="
                text-decoration:none;
                color:#555;
                ">
                    Home
                </a>

                <a href="#" style="
                text-decoration:none;
                color:#555;
                ">
                    Chi siamo
                </a>

                <a href="#" style="
                text-decoration:none;
                color:#555;
                ">
                    Servizi
                </a>

                <a href="#" style="
                text-decoration:none;
                color:#555;
                ">
                    Gallery
                </a>

                <a href="#" style="
                text-decoration:none;
                color:#555;
                ">
                    Contatti
                </a>

            </div>

        </div>

        <!-- COLONNA 3 -->
        <div>

            <h4 style="
            font-size:20px;
            color:#111;
            margin-bottom:25px;
            ">
                SERVIZI
            </h4>

            <div style="
            display:flex;
            flex-direction:column;
            gap:15px;
            ">

                <a href="#" style="
                text-decoration:none;
                color:#555;
                ">
                    Taglio
                </a>

                <a href="#" style="
                text-decoration:none;
                color:#555;
                ">
                    Colore
                </a>

                <a href="#" style="
                text-decoration:none;
                color:#555;
                ">
                    Trattamenti
                </a>

                <a href="#" style="
                text-decoration:none;
                color:#555;
                ">
                    Piega
                </a>

                <a href="#" style="
                text-decoration:none;
                color:#555;
                ">
                    Acconciature
                </a>

            </div>

        </div>

        <!-- COLONNA 4 -->
        <div>

            <h4 style="
            font-size:20px;
            color:#111;
            margin-bottom:25px;
            ">
                CONTATTI
            </h4>

            <div style="
            display:flex;
            flex-direction:column;
            gap:18px;
            color:#555;
            line-height:1.7;
            ">

                <div>
                    📍 Via Roma, 45 - 00100 Roma
                </div>

                <div>
                    ☎️ 06 1234567
                </div>

                <div>
                    ✉️ info@bellezzaestile.it
                </div>

                <div>
                    🕒 Orari: Lun-Sab 9:00 - 19:00
                </div>

            </div>

        </div>

    </div>

    <!-- COPYRIGHT -->
    <div style="
    margin-top:60px;
    padding-top:25px;

    border-top:1px solid #e5d8d5;

    text-align:center;

    color:#777;

    font-size:15px;
    ">

        © 2026 Bellezza & Stile Parrucchiera —
        Privacy Policy — Cookie Policy

    </div>

</footer>

Come funziona questo footer?

Il layout usa:

display:grid;

e:

grid-template-columns:repeat(4,1fr);

Questo crea automaticamente:

  • 4 colonne uguali
  • layout ordinato
  • struttura moderna

Perché usare il Grid Layout?

CSS Grid è perfetto per i footer perché:

  • mantiene tutto allineato
  • è più pulito del vecchio float
  • è responsive
  • gestisce bene le colonne

Come modificare il footer

Cambiare sfondo

background:#f7f4f3;

Cambiare colore testo

color:#555;

Modificare spaziature

padding:70px 40px 20px;

Cambiare i link

Basta sostituire:

href="#"

con i veri link delle pagine.

Come aggiungere social reali

Puoi sostituire le emoji con:

  • icone Font Awesome
  • SVG
  • immagini social

Esempio:

📘

oppure:

📸

Consiglio importante

Nel footer inserisci sempre:

  • contatti reali
  • email
  • orari
  • link privacy
  • link cookie policy

Perché:

  • aumenta fiducia
  • migliora SEO locale
  • rende il sito più professionale

Risultato finale

Con questo blocco ottieni un footer:

  • moderno
  • elegante
  • responsive
  • professionale
  • perfetto per WordPress

E soprattutto:

senza Elementor e senza page builder pesanti.

Conclusione

Usando i blocchi HTML personalizzati di WordPress puoi creare home page moderne, veloci e completamente personalizzate usando soltanto HTML e CSS.

È uno dei modi migliori per:

  • imparare sviluppo web
  • migliorare le performance
  • creare siti professionali
  • avere pieno controllo grafico

E una volta capito il sistema, puoi creare qualsiasi layout tu voglia.

Per approfondire la documentazione ufficiale sui CSS moderni e responsive design,
puoi consultare la guida completa di MDN Web Docs.

VUOI ANDARE PIÙ VELOCE?
Ricevi guide e strategie direttamente nella tua email
Il metodo che uso per trasformare dati di Search Console in visite reali.
📩

FAQ

Serve Elementor per creare questa home page?

No. In questo tutorial la home page viene creata usando soltanto WordPress, blocchi HTML personalizzati e CSS. Non servono page builder.

Posso usare questo metodo con qualsiasi tema WordPress?

Sì, ma è consigliabile usare temi leggeri come GeneratePress o Astra per avere meno conflitti e migliori prestazioni.

Dove va inserito il codice CSS?

Il CSS può essere inserito in:

Aspetto → Personalizza → CSS Aggiuntivo

Oppure dentro un tema child per una gestione più professionale.

Come inserisco il codice HTML dentro WordPress?

Devi usare il blocco:

HTML Personalizzato

presente nell’editor Gutenberg.

Questa home page è responsive?

Sì. Grazie alle media query CSS il layout si adatta automaticamente a smartphone e tablet.

Posso creare altre sezioni con questo metodo?

Sì. Puoi creare:

  • gallery
  • footer
  • call to action
  • testimonianze
  • sezioni servizi
  • pagine complete

usando sempre HTML e CSS.

Questo metodo rallenta WordPress?

No, anzi. Utilizzare HTML e CSS personalizzato spesso rende il sito più leggero rispetto ai page builder.

È necessario conoscere programmazione avanzata?

No. Basta conoscere le basi di HTML e CSS per iniziare a creare layout professionali.