---
title: Modificare l'aspetto del tuo sito web con il CSS personalizzato
description: Regola le icone, il menu, il banner, il logo e il piè di pagina del tuo sito web con frammenti di codice CSS pronti da copiare nel riquadro Personalizzazione.
---

[Passa al contenuto](https://support.yapla.com/it-it/modificare-laspetto-del-tuo-sito-web-con-il-css-personalizzato#main-content)

- [Italiano - Italia](https://support.yapla.com/it-it/modificare-laspetto-del-tuo-sito-web-con-il-css-personalizzato)
- [English - Canada](https://support.yapla.com/en-ca/change-the-look-of-your-website-with-custom-css)
- [Français - Canada](https://support.yapla.com/fr-ca/modifier-lapparence-de-votre-site-web-avec-du-css-personnalisé)
- [Français - France](https://support.yapla.com/fr-fr/modifier-lapparence-de-votre-site-web-avec-du-css-personnalisé)

Italiano - Italia

Mostra sottomenu per le traduzioni

[Ulteriore assistenza](https://support.yapla.com/it-it/kb-tickets/new?hsLang=it-it) [Portale clienti](https://support.yapla.com/tickets-view?hsLang=it-it)

[![logo-centro-di-assistenza-yapla](https://support.yapla.com/hs-fs/hubfs/logo-centro-di-assistenza-yapla.png?width=880&height=119&name=logo-centro-di-assistenza-yapla.png)](https://support.yapla.com/it-it/?hsLang=it-it)

- [Programma un incontro](https://www.yapla.com/it/incontro?utm_term=plateforme)
- [Yapla Academy](https://formazione.yapla.com/)

Apri navigazione principale

Chiudi navigazione principale

- [Programma un incontro](https://www.yapla.com/it/incontro?utm_term=plateforme)
- [Yapla Academy](https://formazione.yapla.com/)
- - [Italiano - Italia](https://support.yapla.com/it-it/modificare-laspetto-del-tuo-sito-web-con-il-css-personalizzato)
    - [English - Canada](https://support.yapla.com/en-ca/change-the-look-of-your-website-with-custom-css)
    - [Français - Canada](https://support.yapla.com/fr-ca/modifier-lapparence-de-votre-site-web-avec-du-css-personnalisé)
    - [Français - France](https://support.yapla.com/fr-fr/modifier-lapparence-de-votre-site-web-avec-du-css-personnalisé)

  Italiano - Italia
  
  Mostra sottomenu per le traduzioni
- [Ulteriore assistenza](https://support.yapla.com/it-it/kb-tickets/new)
- [Portale clienti](https://support.yapla.com/tickets-view)
- [Contattaci](https://support.yapla.com/it-it/kb-tickets/new)

[Contattaci](https://support.yapla.com/it-it/kb-tickets/new?hsLang=it-it)

 In che modo possiamo aiutarti?

- Non sono presenti suggerimenti perché il campo di ricerca è vuoto.

1. [Yapla Centro di assistenza](https://support.yapla.com/it-it?hsLang=it-it)
2. [Creare il tuo sito web](https://support.yapla.com/it-it/creare-il-tuo-sito-web?hsLang=it-it)
3. [Personalizzazione del sito web](https://support.yapla.com/it-it/creare-il-tuo-sito-web?hsLang=it-it#personalizzazione-del-sito-web)

# Modificare l'aspetto del tuo sito web con il CSS personalizzato

## Copia frammenti di codice CSS pronti all'uso per regolare le icone, il menu, il banner, il logo o il piè di pagina del tuo sito web.

**Disponibile a partire dal pacchetto Base.**

Vuoi andare oltre i colori e il font? I frammenti di codice CSS qui sotto modificano alcuni elementi visivi del tuo sito: dimensione delle icone, colori del menu, immagine di sfondo, banner, logo, piè di pagina. Copia quello che ti serve, adatta i valori e incollalo nel tuo sito.

**In questo articolo**

- [Dove aggiungere il codice CSS](https://support.yapla.com/it-it/modificare-laspetto-del-tuo-sito-web-con-il-css-personalizzato#ajouter)
- [Icone e intestazione](https://support.yapla.com/it-it/modificare-laspetto-del-tuo-sito-web-con-il-css-personalizzato#icones)
- [Menu di navigazione](https://support.yapla.com/it-it/modificare-laspetto-del-tuo-sito-web-con-il-css-personalizzato#menu)
- [Sfondo del sito](https://support.yapla.com/it-it/modificare-laspetto-del-tuo-sito-web-con-il-css-personalizzato#fond)
- [Visualizzazione mobile](https://support.yapla.com/it-it/modificare-laspetto-del-tuo-sito-web-con-il-css-personalizzato#mobile)
- [Banner e logo](https://support.yapla.com/it-it/modificare-laspetto-del-tuo-sito-web-con-il-css-personalizzato#banniere)
- [Piè di pagina](https://support.yapla.com/it-it/modificare-laspetto-del-tuo-sito-web-con-il-css-personalizzato#pied)
- [Nascondere elementi](https://support.yapla.com/it-it/modificare-laspetto-del-tuo-sito-web-con-il-css-personalizzato#cacher)

### Dove aggiungere il codice CSS

1. In **Siti web**, apri il tuo sito, poi clicca sul riquadro **Personalizzazione**.
2. Apri il sottomenu **Avanzato**.
3. Incolla il frammento nel campo **CSS personalizzato**, dopo il codice esistente.
4. Clicca su **Salva**, poi ricarica il tuo sito per vedere la modifica.

![](https://support.yapla.com/hs-fs/hubfs/Knowledge%20Base%20Import/43161723456275.png?width=2868&height=1376&name=43161723456275.png)

Per i colori, usa il nome inglese di un colore (`red`, `green`, ecc.) o un codice esadecimale (`#FF0000`, `#00FF00`, ecc.).

### Icone e intestazione

#### Ingrandire le icone dei social network nell'intestazione

```
.mod-social-links .icon-facebook,
.mod-social-links .icon-instagram,
.mod-social-links .icon-x-twitter {
  font-size: 26px; /* Regola la dimensione secondo le tue esigenze */
}
```

### Menu di navigazione

#### Modificare il colore dei link del menu

```
.navbar-nav > li > a,
.navbar-default .navbar-nav > li > a {
  color: black !important; /* Sostituisci "black" con il colore che preferisci */
}

.navbar-nav > li > a:hover,
.navbar-nav > li.active > a {
  color: black !important;
}
```

### Sfondo del sito

#### Aggiungere un'immagine di sfondo al sito web

```
body {
  background-image: url('percorso/della/immagine.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
```

Sostituisci `percorso/della/immagine.jpg` con l'indirizzo completo della tua immagine, ad esempio un'immagine caricata sul server dei file.

#### Modificare il colore di sfondo del sito

```
body {
  background-color: #333333; /* Sostituisci con il colore desiderato */
}
```

### Visualizzazione mobile

#### Modificare il colore delle tre barre del menu (mobile)

```
.navbar-default .navbar-toggle .icon-bar {
  background-color: #FFFFFF; /* Modifica questo codice per cambiare il colore */
}
```

### Banner e logo

#### Modificare l'altezza del banner

```
.mod-banner__img {
  height: 200px; /* Regola l'altezza secondo le tue esigenze */
  background-size: cover;
}
```

#### Modificare la dimensione del logo nell'intestazione

```
.mod-header-logo {
  max-width: 200px; /* Regola in base alla dimensione desiderata */
}
```

### Piè di pagina

#### Modificare la dimensione del numero di telefono

```
.footer-phone h3,
.footer-phone p {
  font-size: 18px; /* Regola la dimensione secondo le tue esigenze */
}
```

#### Modificare la dimensione dell'indirizzo email

```
.footer-email h3,
.footer-email a {
  font-size: 18px;
}
```

#### Modificare la dimensione dell'indirizzo postale

```
.footer-address h3,
.footer-address p {
  font-size: 18px;
}
```

#### Cambiare il colore del testo e dei link nel piè di pagina

```
.line-footer p {
  color: white; /* Modifica in base al colore desiderato */
}

.line-footer a {
  color: white; /* Modifica in base al colore desiderato */
}
```

### Nascondere elementi

#### Nascondere il pulsante di iscrizione ai workshop di un congresso

```
/* Sostituisci l'ID della pagina per colpire solo la pagina interessata */
.pageid-89591 .workshops .registration-action {
  display: none !important;
}
```

Il numero della pagina (`pageid-89591`) compare nell'indirizzo della pagina nel tuo account. Sostituiscilo con quello della tua pagina perché la regola si applichi solo a lei.

Per le altre opzioni di personalizzazione (colori, font, classi CSS), consulta l'articolo [Personalizzare l'aspetto del tuo sito web](https://support.yapla.com/it-it/personalizzare-laspetto-del-tuo-sito-web?hsLang=it-it).

- [Inizia con Yapla](https://support.yapla.com/it-it/inizia-con-yapla?hsLang=it-it#main-content)

    - [Raccolta di risorse utili per scoprire Yapla](https://support.yapla.com/it-it/inizia-con-yapla?hsLang=it-it#raccolta-di-risorse-utili-per-scoprire-yapla)
    - [Per iniziare](https://support.yapla.com/it-it/inizia-con-yapla?hsLang=it-it#per-iniziare)
    - [Ottimizzare l'utilizzo di Yapla](https://support.yapla.com/it-it/inizia-con-yapla?hsLang=it-it#ottimizzare-lutilizzo-di-yapla)
    - [Informazioni su Yapla](https://support.yapla.com/it-it/inizia-con-yapla?hsLang=it-it#informazioni-su-yapla)
- [Configura il tuo account](https://support.yapla.com/it-it/configura-il-tuo-account?hsLang=it-it#main-content)

    - [Primi passi](https://support.yapla.com/it-it/configura-il-tuo-account?hsLang=it-it#primi-passi)
    - [Account](https://support.yapla.com/it-it/configura-il-tuo-account?hsLang=it-it#account)
    - [Fatturazione](https://support.yapla.com/it-it/configura-il-tuo-account?hsLang=it-it#fatturazione)
    - [Licenze e utenti](https://support.yapla.com/it-it/configura-il-tuo-account?hsLang=it-it#licenze-e-utenti)
    - [Domande frequenti](https://support.yapla.com/it-it/configura-il-tuo-account?hsLang=it-it#domande-frequenti)
- [Capire le funzionalità comuni](https://support.yapla.com/it-it/capire-le-funzionalit%C3%A0-comuni?hsLang=it-it#main-content)

    - [Comunicazioni](https://support.yapla.com/it-it/capire-le-funzionalit%C3%A0-comuni?hsLang=it-it#comunicazioni)
    - [Moduli](https://support.yapla.com/it-it/capire-le-funzionalit%C3%A0-comuni?hsLang=it-it#moduli)
    - [Immagini e media](https://support.yapla.com/it-it/capire-le-funzionalit%C3%A0-comuni?hsLang=it-it#immagini-e-media)
    - [Domande frequenti](https://support.yapla.com/it-it/capire-le-funzionalit%C3%A0-comuni?hsLang=it-it#domande-frequenti)
- [Gestire i tuoi pagamenti e la tua autenticazione](https://support.yapla.com/it-it/gestire-i-tuoi-pagamenti-e-la-tua-autenticazione?hsLang=it-it#main-content)

    - [Autenticazione](https://support.yapla.com/it-it/gestire-i-tuoi-pagamenti-e-la-tua-autenticazione?hsLang=it-it#autenticazione)
    - [Pagamento](https://support.yapla.com/it-it/gestire-i-tuoi-pagamenti-e-la-tua-autenticazione?hsLang=it-it#pagamento)
    - [Contributo volontario e commissione](https://support.yapla.com/it-it/gestire-i-tuoi-pagamenti-e-la-tua-autenticazione?hsLang=it-it#contributo-volontario-e-commissione)
    - [Domande frequenti](https://support.yapla.com/it-it/gestire-i-tuoi-pagamenti-e-la-tua-autenticazione?hsLang=it-it#domande-frequenti)
- [Gestire i membri](https://support.yapla.com/it-it/gestire-i-membri?hsLang=it-it#main-content)

    - [Primi passi](https://support.yapla.com/it-it/gestire-i-membri?hsLang=it-it#primi-passi)
    - [Importare i membri](https://support.yapla.com/it-it/gestire-i-membri?hsLang=it-it#importare-i-membri)
    - [Campagne di adesione semplificate](https://support.yapla.com/it-it/gestire-i-membri?hsLang=it-it#campagne-di-adesione-semplificate)
    - [Gestione dei membri](https://support.yapla.com/it-it/gestire-i-membri?hsLang=it-it#gestione-dei-membri)
    - [Scheda del membro](https://support.yapla.com/it-it/gestire-i-membri?hsLang=it-it#scheda-del-membro)
    - [Modulo](https://support.yapla.com/it-it/gestire-i-membri?hsLang=it-it#modulo)
    - [Comunicazioni](https://support.yapla.com/it-it/gestire-i-membri?hsLang=it-it#comunicazioni)
    - [Gestione delle organizzazioni o famiglie](https://support.yapla.com/it-it/gestire-i-membri?hsLang=it-it#gestione-delle-organizzazioni-o-famiglie)
    - [Gestione delle adesioni](https://support.yapla.com/it-it/gestire-i-membri?hsLang=it-it#gestione-delle-adesioni)
    - [Prezzi](https://support.yapla.com/it-it/gestire-i-membri?hsLang=it-it#prezzi)
    - [Organizzazione o famiglia](https://support.yapla.com/it-it/gestire-i-membri?hsLang=it-it#organizzazione-o-famiglia)
    - [Funzioni avanzate](https://support.yapla.com/it-it/gestire-i-membri?hsLang=it-it#funzioni-avanzate)
    - [Formazione continua](https://support.yapla.com/it-it/gestire-i-membri?hsLang=it-it#formazione-continua)
    - [Domande frequenti](https://support.yapla.com/it-it/gestire-i-membri?hsLang=it-it#domande-frequenti)
- [Organizzare i tuoi eventi](https://support.yapla.com/it-it/organizzare-i-tuoi-eventi?hsLang=it-it#main-content)

    - [Primi passi](https://support.yapla.com/it-it/organizzare-i-tuoi-eventi?hsLang=it-it#primi-passi)
    - [Configurazione](https://support.yapla.com/it-it/organizzare-i-tuoi-eventi?hsLang=it-it#configurazione)
    - [Moduli](https://support.yapla.com/it-it/organizzare-i-tuoi-eventi?hsLang=it-it#moduli)
    - [Biglietti elettronici](https://support.yapla.com/it-it/organizzare-i-tuoi-eventi?hsLang=it-it#biglietti-elettronici)
    - [Impostazioni avanzate](https://support.yapla.com/it-it/organizzare-i-tuoi-eventi?hsLang=it-it#impostazioni-avanzate)
    - [Comunicazioni](https://support.yapla.com/it-it/organizzare-i-tuoi-eventi?hsLang=it-it#comunicazioni)
    - [Gestione dei prezzi](https://support.yapla.com/it-it/organizzare-i-tuoi-eventi?hsLang=it-it#gestione-dei-prezzi)
    - [Gestione delle iscrizioni](https://support.yapla.com/it-it/organizzare-i-tuoi-eventi?hsLang=it-it#gestione-delle-iscrizioni)
    - [Gestione delle attività con le sessioni](https://support.yapla.com/it-it/organizzare-i-tuoi-eventi?hsLang=it-it#gestione-delle-attivit%C3%A0-con-le-sessioni)
    - [Congressi](https://support.yapla.com/it-it/organizzare-i-tuoi-eventi?hsLang=it-it#congressi)
    - [Domande frequenti](https://support.yapla.com/it-it/organizzare-i-tuoi-eventi?hsLang=it-it#domande-frequenti)
- [Raccogliere donazioni](https://support.yapla.com/it-it/raccogliere-donazioni?hsLang=it-it#main-content)

    - [Primi passi](https://support.yapla.com/it-it/raccogliere-donazioni?hsLang=it-it#primi-passi)
    - [Gestione delle donazioni](https://support.yapla.com/it-it/raccogliere-donazioni?hsLang=it-it#gestione-delle-donazioni)
    - [Attestazioni di donazione](https://support.yapla.com/it-it/raccogliere-donazioni?hsLang=it-it#attestazioni-di-donazione)
    - [Donazioni ricorrenti](https://support.yapla.com/it-it/raccogliere-donazioni?hsLang=it-it#donazioni-ricorrenti)
    - [Gestione delle campagne](https://support.yapla.com/it-it/raccogliere-donazioni?hsLang=it-it#gestione-delle-campagne)
    - [Gestione delle campagne partecipative](https://support.yapla.com/it-it/raccogliere-donazioni?hsLang=it-it#gestione-delle-campagne-partecipative)
    - [Gestione dei donatori](https://support.yapla.com/it-it/raccogliere-donazioni?hsLang=it-it#gestione-dei-donatori)
    - [Domande frequenti](https://support.yapla.com/it-it/raccogliere-donazioni?hsLang=it-it#domande-frequenti)
- [Creare il tuo sito web](https://support.yapla.com/it-it/creare-il-tuo-sito-web?hsLang=it-it#main-content)

    - [Primi passi](https://support.yapla.com/it-it/creare-il-tuo-sito-web?hsLang=it-it#primi-passi)
    - [Personalizzazione del sito web](https://support.yapla.com/it-it/creare-il-tuo-sito-web?hsLang=it-it#personalizzazione-del-sito-web)
    - [Gestione del contenuto e degli articoli](https://support.yapla.com/it-it/creare-il-tuo-sito-web?hsLang=it-it#gestione-del-contenuto-e-degli-articoli)
    - [Pagine](https://support.yapla.com/it-it/creare-il-tuo-sito-web?hsLang=it-it#pagine)
    - [Moduli](https://support.yapla.com/it-it/creare-il-tuo-sito-web?hsLang=it-it#moduli)
    - [Boutique online](https://support.yapla.com/it-it/creare-il-tuo-sito-web?hsLang=it-it#boutique-online)
    - [SEO e strumenti di performance](https://support.yapla.com/it-it/creare-il-tuo-sito-web?hsLang=it-it#seo-e-strumenti-di-performance)
- [Semplificare la tua contabilità](https://support.yapla.com/it-it/semplificare-la-tua-contabilit%C3%A0?hsLang=it-it#main-content)

    - [Primi passi](https://support.yapla.com/it-it/semplificare-la-tua-contabilit%C3%A0?hsLang=it-it#primi-passi)
    - [Gestione dei ricavi](https://support.yapla.com/it-it/semplificare-la-tua-contabilit%C3%A0?hsLang=it-it#gestione-dei-ricavi)
    - [Gestione dei costi](https://support.yapla.com/it-it/semplificare-la-tua-contabilit%C3%A0?hsLang=it-it#gestione-dei-costi)
    - [Contabilità](https://support.yapla.com/it-it/semplificare-la-tua-contabilit%C3%A0?hsLang=it-it#contabilit%C3%A0)
    - [Registro generale](https://support.yapla.com/it-it/semplificare-la-tua-contabilit%C3%A0?hsLang=it-it#registro-generale)
    - [Consolidamento](https://support.yapla.com/it-it/semplificare-la-tua-contabilit%C3%A0?hsLang=it-it#consolidamento)
    - [Reportistica](https://support.yapla.com/it-it/semplificare-la-tua-contabilit%C3%A0?hsLang=it-it#reportistica)
    - [Impostazioni](https://support.yapla.com/it-it/semplificare-la-tua-contabilit%C3%A0?hsLang=it-it#impostazioni)
    - [Progetti](https://support.yapla.com/it-it/semplificare-la-tua-contabilit%C3%A0?hsLang=it-it#progetti)
    - [IVA e tasse](https://support.yapla.com/it-it/semplificare-la-tua-contabilit%C3%A0?hsLang=it-it#iva-e-tasse)
    - [Domande frequenti](https://support.yapla.com/it-it/semplificare-la-tua-contabilit%C3%A0?hsLang=it-it#domande-frequenti)
- [Gestire i tuoi contatti](https://support.yapla.com/it-it/gestire-i-tuoi-contatti?hsLang=it-it#main-content)

    - [Gestione dei contatti](https://support.yapla.com/it-it/gestire-i-tuoi-contatti?hsLang=it-it#gestione-dei-contatti)
    - [Domande frequenti](https://support.yapla.com/it-it/gestire-i-tuoi-contatti?hsLang=it-it#domande-frequenti)
- [Implementare le tue newsletter](https://support.yapla.com/it-it/implementare-le-tue-newsletter?hsLang=it-it#main-content)

    - [Introduzione a Yapla Newsletter](https://support.yapla.com/it-it/implementare-le-tue-newsletter?hsLang=it-it#introduzione-a-yapla-newsletter)
    - [Scopri Yapla Newsletters](https://support.yapla.com/it-it/implementare-le-tue-newsletter?hsLang=it-it#scopri-yapla-newsletters)
    - [Gestione dei contatti](https://support.yapla.com/it-it/implementare-le-tue-newsletter?hsLang=it-it#gestione-dei-contatti)
    - [Monitoraggio delle prestazioni](https://support.yapla.com/it-it/implementare-le-tue-newsletter?hsLang=it-it#monitoraggio-delle-prestazioni)
    - [Indirizzare i tuoi invii](https://support.yapla.com/it-it/implementare-le-tue-newsletter?hsLang=it-it#indirizzare-i-tuoi-invii)
    - [Acquisire nuovi iscritti](https://support.yapla.com/it-it/implementare-le-tue-newsletter?hsLang=it-it#acquisire-nuovi-iscritti)
- [Gestire i tuoi dati](https://support.yapla.com/it-it/gestire-i-tuoi-dati?hsLang=it-it#main-content)

    - [Primi passi](https://support.yapla.com/it-it/gestire-i-tuoi-dati?hsLang=it-it#primi-passi)
    - [Configurazione](https://support.yapla.com/it-it/gestire-i-tuoi-dati?hsLang=it-it#configurazione)
    - [Gestione degli oggetti](https://support.yapla.com/it-it/gestire-i-tuoi-dati?hsLang=it-it#gestione-degli-oggetti)
    - [Rapporti](https://support.yapla.com/it-it/gestire-i-tuoi-dati?hsLang=it-it#rapporti)
- [Documentazione per gli sviluppatori](https://support.yapla.com/it-it/documentazione-per-gli-sviluppatori?hsLang=it-it#main-content)

    - [Funzioni avanzate](https://support.yapla.com/it-it/documentazione-per-gli-sviluppatori?hsLang=it-it#funzioni-avanzate)
- [Gestire la tua federazione](https://support.yapla.com/it-it/gestire-la-tua-federazione?hsLang=it-it#main-content)

    - [Avvio](https://support.yapla.com/it-it/gestire-la-tua-federazione?hsLang=it-it#avvio)

- Offerte 
    - [Tariffe](https://www.yapla.com/it/tariffe)
    - [Offerta partner](https://www.yapla.com/it/offerta-partner)
    - [Servizi Professionali](https://www.yapla.com/it/servizi-professionali)
    - [Consulenza a ore](https://formations.yapla.fr/it/)
- Risorse 
    - [Centro di assistenza](https://support.yapla.com/it-it/)
    - [Yapla Academy](https://formazione.yapla.com/)
    - [Yapla Newsletter](https://www.yapla.com/it-it/newsletter-yapla)
- Scoprire Yapla 
    - [Demo e webinar](https://www.yapla.com/it/webinar-per-associazioni)
- Azienda 
    - [Chi siamo](https://www.yapla.com/it/chi-siamo)
    - [Contattaci](https://www.yapla.com/it/contatta-yapla)
    - [Diventa partner](https://www.yapla.com/it-it/programma-partner/)

[![Yapla](https://support.yapla.com/hubfs/logo-yapla-fr.svg "Yapla")](https://www.yapla.com/)

<https://www.facebook.com/yapla.com.it> <https://www.instagram.com/yapla_italia/> <https://www.youtube.com/playlist?list=PL3lzEailzcr-armoPae6-9XSy84A16O_f> <https://www.linkedin.com/company/yaplacommunity/>

Copyright © 2013-2026, Yapla

[Condizioni generali di utilizzo](https://www.yapla.com/it/condizioni-generali-utilizzo) | [Dati personali](https://www.yapla.com/it/dati-personali) | [Note legali](https://support.yapla.com/it/note-legali?hsLang=it-it)