Temi e personalizzazione

Il tuo brand, la tua identità

Un sito web efficace non si limita a mostrare informazioni: comunica l'identità della tua struttura. Il sistema di temi del Website Builder di Hotely ti permette di personalizzare ogni elemento visivo per creare un'esperienza coerente con il tuo brand — dai colori alla tipografia, dall'header al footer, fino ai dettagli più sottili come le ombre e gli angoli arrotondati.

A differenza dei page builder generici, dove la personalizzazione spesso significa lottare con opzioni sparse in decine di menu, Hotely centralizza tutto in un pannello tema intuitivo. Ogni modifica si propaga automaticamente a tutte le pagine del sito, garantendo coerenza visiva senza sforzo.

Il pannello Tema

Per accedere alle opzioni di personalizzazione:

1. Apri l'editor del Website Builder
2. Clicca su Tema nella barra laterale sinistra
3. Il pannello si apre mostrando le categorie di personalizzazione

Il pannello è organizzato in sezioni logiche:

• Colori: palette principale e colori di accento
• Tipografia: font per titoli, corpo del testo e elementi speciali
• Layout: spaziature, larghezze e struttura delle pagine
• Header: navigazione, logo e barra superiore
• Footer: contenuti, link e layout del piè di pagina
• Componenti: stile dei pulsanti, card, form e altri elementi
• CSS personalizzato: per utenti avanzati che desiderano controllo totale

Colori

Palette principale

La palette principale definisce i colori fondamentali del tuo sito. Ogni colore ha un ruolo specifico:

Palette predefinite

Hotely include 8 temi completi studiati specificamente per il settore hospitality. Ogni tema non definisce solo i colori, ma anche tipografia, spaziature e atmosfera complessiva — un preset coerente che trasforma l'intero sito con un click.

Temi classici

• Eleganza Classica: toni dorati e blu navy — ideale per hotel di lusso
• Natura e Relax: verdi salvia e beige caldi — perfetta per agriturismi e spa
• Mediterraneo: azzurro e bianco — evoca le coste italiane
• Urbano Contemporaneo: grigi e accenti vivaci — per city hotel moderni
• Rustico Toscano: terracotta e oliva — per casali e dimore storiche

Nuovi temi

• Aurora: lusso minimale con accenti dorati su base chiara, titoli in Playfair Display e testo in Cormorant Garamond con spaziature rilassate che lasciano respirare i contenuti. Pensato per boutique hotel, dimore di charme e strutture che vogliono comunicare esclusività senza eccessi decorativi
• Terra: palette calda con toni terracotta, sabbia e oliva, titoli in Lora e testo in Noto Sans con spaziature bilanciate. Evoca la solidità della terra e delle tradizioni — ideale per agriturismi, casali ristrutturati e strutture immerse nella natura
• Neon: audace e vibrante con viola elettrico, titoli in Sora e layout compatto ad alta densità. Per city hotel, ostelli di design e strutture che parlano a un pubblico giovane e digitale
• Nova: toni grafite professionali con accento teal, titoli in Plus Jakarta Sans e layout compatto e denso. Ideale per siti informativi di hotel business e strutture con molti contenuti
• Mira: blu vivace orientato alla conversione, titoli in Outfit e layout compatto. Perfetto per property pages e landing dove ogni elemento guida verso la prenotazione

Ogni tema e completamente personalizzabile: puoi partire dal preset e modificare singoli colori, font o spaziature senza perdere la coerenza complessiva.

Personalizzazione avanzata dei colori

Per ogni colore della palette puoi:

1. Selezionare da un color picker con anteprima in tempo reale
2. Inserire un codice esadecimale (es. #2C5F7C) per precisione assoluta
3. Regolare opacità per effetti di trasparenza su sfondi e overlay

Contrasto e accessibilità

L'editor verifica automaticamente il contrasto tra testo e sfondo secondo le linee guida WCAG 2.1. Se una combinazione di colori non garantisce leggibilità sufficiente, vedrai un avviso con suggerimenti per correggere il problema.

Questo non è solo un requisito legale in molti paesi — è una questione di buon senso. Un sito leggibile converte di più, perché nessun visitatore prenota se non riesce a leggere le informazioni.

Tipografia

Scelta dei font

Il Website Builder offre accesso a oltre 1.000 font dalla libreria Google Fonts, caricati in modo ottimizzato per non penalizzare la velocità del sito.

Per ogni font puoi configurare:

• Peso (grassetto): dal light (300) all'extra bold (900)
• Dimensione base: la dimensione di riferimento per il corpo del testo
• Altezza di riga: lo spazio tra le righe di testo
• Spaziatura lettere: lo spazio tra i caratteri

Font per titoli e corpo del testo

Il sistema distingue tra due famiglie di font:

Font titoli: usato per H1, H2, H3 e tutti gli elementi di titolazione. Solitamente un font con più personalità, che cattura l'attenzione.

Font corpo: usato per paragrafi, elenchi, didascalie e testo generale. Deve essere altamente leggibile anche a dimensioni ridotte.

Combinazioni consigliate per tipologia di struttura

Scala tipografica

La scala tipografica definisce le dimensioni relative dei vari livelli di titolo. Hotely usa un sistema armonico basato su rapporti proporzionali:

• H1: titolo principale della pagina
• H2: titoli delle sezioni
• H3: sottosezioni
• H4: titoli minori
• Corpo: testo principale
• Piccolo: note, didascalie, copyright

Puoi scegliere tra scale predefinite (compatta, standard, ariosa) o personalizzare ogni livello individualmente.

Layout

Larghezza del contenuto

Definisci la larghezza massima del contenuto nelle pagine:

• Stretto (960px): ideale per siti con molto testo, massimizza la leggibilità
• Standard (1200px): il bilanciamento più comune tra contenuto e spazio
• Largo (1400px): per siti con molte immagini e layout a griglia
• Piena larghezza: il contenuto occupa tutta la larghezza dello schermo

Spaziature

Le spaziature definiscono il "respiro" tra gli elementi del sito:

• Spaziatura tra sezioni: lo spazio verticale tra i blocchi della pagina
• Padding interno: lo spazio tra il bordo di un contenitore e il suo contenuto
• Gap griglia: lo spazio tra gli elementi nelle griglie (es. galleria camere)

Puoi scegliere tra preset (compatto, standard, arioso) o definire valori personalizzati.

Angoli arrotondati

Definisci il raggio degli angoli per card, pulsanti, immagini e form:

• Nessuno (0px): aspetto netto e geometrico
• Leggero (4px): appena percettibile, moderno
• Medio (8px): morbido e amichevole
• Arrotondato (16px): giocoso e informale
• Pillola: angoli completamente arrotondati (per pulsanti)

Header

L'header è il primo elemento che i visitatori vedono. La sua configurazione influisce direttamente sulla navigazione e sull'esperienza utente.

Layout dell'header

Scegli tra diversi layout:

• Logo a sinistra, menu a destra: il layout più classico e universalmente riconoscibile
• Logo centrato, menu sotto: elegante, dà grande visibilità al logo
• Logo centrato, menu ai lati: simmetrico, ideale per pochi elementi di menu
• Hamburger menu: il menu è nascosto dietro un'icona — consigliato solo per siti minimal

Configurazione del logo

• Dimensione: regola la dimensione del logo nell'header
• Versione chiara: carica una versione chiara del logo per header con sfondo scuro
• Solo testo: se non hai un logo grafico, usa il nome della struttura con il font scelto

Comportamento allo scroll

• Fisso: l'header resta sempre visibile durante lo scroll
• Nascosto: l'header scompare durante lo scroll verso il basso e riappare durante lo scroll verso l'alto
• Statico: l'header resta in cima e scompare durante lo scroll
• Trasparente su hero: l'header è trasparente sopra l'immagine hero e diventa solido durante lo scroll

Pulsante CTA nell'header

Aggiungi un pulsante di azione direttamente nell'header per massimizzare le conversioni:

• Testo: es. "Prenota ora", "Verifica disponibilità", "Richiedi preventivo"
• Link: collega al Booking Engine o a un form di contatto
• Stile: evidenziato con il colore primario per massima visibilità

Footer

Il footer è spesso sottovalutato, ma è una sezione cruciale per SEO, fiducia e conversioni.

Contenuti del footer

Configura fino a quattro colonne con contenuti diversi:

• Colonna informazioni: nome struttura, indirizzo, contatti
• Colonna link: link rapidi alle pagine principali
• Colonna servizi: elenco dei servizi offerti
• Colonna social: icone dei profili social con link

Elementi aggiuntivi del footer

• Logo nel footer: versione ridotta del logo
• Copyright: testo del copyright con anno aggiornato automaticamente
• Link legali: Privacy Policy, Cookie Policy, Termini e Condizioni
• Badge di fiducia: certificazioni, premi, rating da portali di recensioni
• Newsletter: campo per l'iscrizione alla newsletter (se attivata)

Barra pre-footer

Una barra colorata sopra il footer con un messaggio di call-to-action:

• Testo personalizzabile (es. "Prenota il tuo soggiorno con le migliori tariffe garantite")
• Pulsante di azione collegato al Booking Engine
• Sfondo con il colore primario per contrasto visivo

Componenti globali

Stile dei pulsanti

Definisci l'aspetto di tutti i pulsanti del sito:

• Pulsante primario: pieno, con colore primario — per azioni principali
• Pulsante secondario: bordo, senza riempimento — per azioni secondarie
• Pulsante ghost: trasparente, solo testo — per azioni terziarie
• Dimensioni: piccolo, medio, grande
• Forma: rettangolare, arrotondato, pillola
• Effetto hover: cambio colore, ombra, scala

Stile delle card

Le card sono usate per presentare camere, servizi ed esperienze:

• Ombra: nessuna, leggera, media, pronunciata
• Bordo: nessuno, sottile, colorato
• Angoli: segue l'impostazione globale degli angoli arrotondati
• Effetto hover: sollevamento, zoom immagine, ombra

Stile dei form

I form di contatto e prenotazione seguono lo stile globale:

• Campi input: bordo sotto, bordo completo, riempito
• Etichette: sopra il campo, placeholder, flottante
• Pulsante invio: segue lo stile del pulsante primario

Animazioni di ingresso

Le animazioni trasformano una pagina statica in un'esperienza di navigazione fluida e coinvolgente. Il Website Builder include 12 animazioni di ingresso applicabili a qualsiasi blocco — senza scrivere codice e senza impatto sulle prestazioni del sito.

Animazioni disponibili

L'animazione Figli in sequenza (stagger children) e particolarmente efficace per blocchi come Servizi, Offerte speciali, Loghi e partner e Confronto tariffe: ogni elemento della griglia appare con un leggero ritardo rispetto al precedente, creando un effetto cascata che guida lo sguardo del visitatore.

Configurare le animazioni

Per ogni blocco puoi impostare:

• Tipo di animazione: scegli tra le 12 animazioni disponibili
• Durata: la velocita dell'effetto (da rapida a lenta)
• Ritardo: il tempo di attesa prima che l'animazione inizi
• Trigger: l'animazione si attiva quando il blocco entra nel viewport del visitatore

CSS personalizzato

Il Website Builder offre la possibilita di aggiungere CSS personalizzato a livello di sito che sovrascrive gli stili del tema. Questo significa pieno controllo su ogni dettaglio visivo, senza rinunciare alla comodita dell'editor visuale per il resto del lavoro.

Come aggiungere CSS personalizzato

1. Vai su Tema → CSS personalizzato
2. Inserisci le tue regole CSS nell'editor
3. Clicca su Anteprima per verificare l'effetto
4. Salva le modifiche

Variabili CSS disponibili

Il tema espone variabili CSS che puoi riutilizzare nel tuo codice personalizzato:

--color-primary
--color-secondary
--color-background
--color-text
--font-heading
--font-body
--radius-default
--spacing-section

Anteprima responsive

Ogni modifica al tema è visibile in tempo reale nell'anteprima. Usa i pulsanti nella barra superiore per passare tra le viste:

• Desktop: larghezza piena, layout completo
• Tablet: 768px, layout adattato
• Smartphone: 375px, layout mobile

L'anteprima responsive non è un lusso — è una necessità. Con oltre il 60% del traffico proveniente da dispositivi mobili, il tuo sito deve essere impeccabile su ogni schermo. Il sistema di temi di Hotely garantisce che ogni personalizzazione si adatti automaticamente a tutte le dimensioni, senza che tu debba gestire layout separati.

Salvare e applicare le modifiche

Le modifiche al tema vengono salvate automaticamente come bozza. Per renderle visibili ai visitatori:

1. Verifica le modifiche nell'anteprima
2. Clicca su Pubblica per applicare le modifiche al sito live

Puoi anche:

• Ripristinare il tema predefinito: torna alle impostazioni originali del template
• Duplicare il tema: crea una copia del tema attuale per sperimentare senza rischi
• Esportare il tema: salva le impostazioni del tema per riutilizzarle su un altro sito Hotely