--- url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/css-personalizzato' title: 'Collegare le sezioni e riusare gli stili con le classi | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T13:45:32+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Dai a una sezione un ID HTML così un pulsante può saltare a essa. Aggiungi Classi HTML per nascondere un elemento sui telefoni, per impostare spaziatura per dimensione schermo, o per riusare un aspetto definito dal tuo tema. Trovi entrambi i campi in fondo al pannello Generale di ogni elemento. Una classe mantiene coerente un aspetto: quando la sua regola CSS cambia, ogni elemento con quella classe segue. Il video segue il primo esempio pratico qui sotto: fa saltare un pulsante a una sezione più in basso nella pagina. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Collegare le sezioni e riusare gli stili con le classi' description: |- Dai a una sezione un ID HTML così un pulsante può saltare a essa. Aggiungi Classi HTML per nascondere un elemento sui telefoni, per impostare spaziatura per dimensione schermo, o per riusare un aspetto definito dal tuo tema. Trovi entrambi i campi in fondo al pannello Generale di ogni elemento. Una classe mantiene coerente un aspetto: quando la sua regola CSS cambia, ogni elemento con quella classe segue. Il video segue il primo esempio pratico qui sotto: fa saltare un pulsante a una sezione più in basso nella pagina. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T13:45:32+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/css-personalizzato' articleSection: 'Dai stile agli elementi' - '@type': WebPage '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/css-personalizzato' description: |- Dai a una sezione un ID HTML così un pulsante può saltare a essa. Aggiungi Classi HTML per nascondere un elemento sui telefoni, per impostare spaziatura per dimensione schermo, o per riusare un aspetto definito dal tuo tema. Trovi entrambi i campi in fondo al pannello Generale di ogni elemento. Una classe mantiene coerente un aspetto: quando la sua regola CSS cambia, ogni elemento con quella classe segue. Il video segue il primo esempio pratico qui sotto: fa saltare un pulsante a una sezione più in basso nella pagina. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/it' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: it --- [Centro assistenza](/it/hc)/[Documentazione](/it/hc/documentazione) /[Impara DXPR Builder](/it/hc/documentation/learn-dxpr-builder) /[Crea le pagine](/it/hc/documentation/learn-dxpr-builder/build) /[Dai stile agli elementi](/it/hc/documentation/learn-dxpr-builder/element-settings) # Collegare le sezioni e riusare gli stili con le classi. Impara DXPR BuilderCrea le pagineDai stile agli elementi ## In questa guida Guide correlate - [Rendi il layout funzionale sui telefoni](/it/hc/documentazione/impara-dxpr-builder/design/design-responsive) Dai a una sezione un **ID HTML** così un pulsante può saltare a essa. Aggiungi **Classi HTML** per nascondere un elemento sui telefoni, per impostare spaziatura per dimensione schermo, o per riusare un aspetto definito dal tuo tema. Trovi entrambi i campi in fondo al pannello **Generale** di ogni elemento. Una classe mantiene coerente un aspetto: quando la sua regola CSS cambia, ogni elemento con quella classe segue. Il video segue il primo esempio pratico qui sotto: fa saltare un pulsante a una sezione più in basso nella pagina. ## Prima di iniziare - Apri la pagina in DXPR Builder; puntando a un elemento si mostra la sua barra di controllo con **Altro**. Nuovo del builder? Vedi [La tua prima pagina](/it/hc/documentazione/impara-dxpr-builder/per-iniziare/prima-pagina). - **Salva** nella finestra conserva una modifica nell’editor. **Salva** nella barra del builder sopra il contenuto conserva la pagina e mostra “Campo salvato”. - **Usa un ID HTML** per una destinazione di salto. Un pulsante “Prenota una visita” può scorrere al modulo di prenotazione. Un elenco di link in cima a una pagina lunga può portare a ogni parte. - **Usa una classe per un aspetto che si ripete.** Il tuo webmaster scrive il CSS una volta, e tu aggiungi la classe dove serve. Il pannello **Stile** copia invece i valori in ogni elemento, che col tempo divergono. - **Usa una classe per ciò che il pannello Stile non sa fare**, come nascondere un elemento sui telefoni o cambiare spaziatura per dimensione schermo. ## Esempio pratico: un pulsante che salta a una sezione 1. Passa sopra la **Sezione** di destinazione, fai clic su **Altro**, poi su **Impostazioni**. 2. Nel pannello **Generale**, digita un nome corto, come `programmes`, in **ID HTML**. Fai clic su **Salva**. 3. Apri le impostazioni del **Pulsante**. In **Link**, digita `#` seguito da esattamente lo stesso nome: `#programmes`. Fai clic su **Salva**. 4. Fai clic su **Salva** nella barra del builder. 5. Scegli **Anteprima** nel menu vista (l’icona dell’occhio) e fai clic sul pulsante. Prova con la sezione più in basso nella pagina rispetto al pulsante, così vedi lo scorrimento. Se la destinazione sta dentro un pannello pieghevole, una tab o una diapositiva del carosello, il link prima lo apre. ## Esempio pratico: nascondere un elemento sui telefoni 1. Passa sopra l’elemento, fai clic su **Altro**, poi su **Impostazioni**. 2. Nel pannello **Generale**, fai clic sul riquadro **Classi HTML**. 3. Scegli **Nascosto su dispositivi extra piccoli, telefoni (<576px)**. Sta nel gruppo **Visibilità responsive**. 4. Fai clic su **Salva** nella finestra, poi su **Salva** nella barra. L’elemento ora sparisce sugli schermi più stretti di 576 px, anche nell’editor. Per controllarlo, apri la pagina su un telefono. ## Esempio pratico: digitare le tue classi Il riquadro **Classi HTML** lascia solo scegliere dal suo elenco. Per digitare un nome di classe, prima passalo a testo. 1. Passa sopra l’elemento, fai clic su **Altro**, poi su **Impostazioni**. 2. Sotto **Classi HTML**, fai clic su **Modifica come testo**. Il riquadro diventa un campo di testo semplice che elenca le classi che l’elemento ha già. 3. Aggiungi i tuoi nomi di classe dopo, separati da spazi, per esempio `brand-card py-3 py-lg-5`. Ometti il punto: `.brand-card` nel CSS del tuo team qui è `brand-card`. 4. Fai clic su **Salva** nella finestra, poi su **Salva** nella barra. L’elemento prende l’aspetto definito dal tuo team web. ## Cosa vedi In **Anteprima**, il pulsante scorre la pagina in modo fluido fino alla sezione e lascia spazio per un’intestazione fissa; la barra degli indirizzi finisce in `#programmes`. Sotto i 576 px di larghezza, l’elemento nascosto non c’è. Le classi digitate appaiono come chip la prossima volta che apri la finestra, tra virgolette quando non sono nell’elenco, come “brand-card”. ## Come funzionano i campi ### ID HTML Un ID deve iniziare con una lettera. Dopo può contenere lettere, numeri, trattini e underscore, ma senza spazi. Un ID sbagliato mostra un errore sotto il campo, e **Salva** non fa niente finché non lo sistemi. Se lasci il campo vuoto, l’elemento conserva un ID creato da DXPR Builder. Il campo vuoto lo mostra in grigio. Usa ogni ID una volta per pagina: quando due elementi ne condividono uno, i link saltano al primo. ### Classi HTML L’elenco contiene classi per le ombre e classi Bootstrap 5, raggruppate per lavoro, come **Margini**, **Padding**, **Visibilità responsive** e **Angoli arrotondati**. Il tuo tema può aggiungere un suo gruppo alla fine. Scorri l’elenco aperto, oppure digita parte di un nome come padding, py-5 o circular per restringerlo. Digitare filtra solo l’elenco; per una classe che non c’è, usa **Modifica come testo**. Le classi di Bootstrap funzionano solo quando la pagina carica Bootstrap 5. Viene dal tuo tema, oppure da **Impostazioni generali** > **Bootstrap** (`/admin/dxpr_studio/dxpr_builder/settings`), dove **File Bootstrap esterni** è impostato su **Bootstrap 5**. Le classi di utilità di Bootstrap, come quelle di colore e spaziatura, sono marcate `!important`. Battono il pannello **Stile** sulla stessa proprietà. **Sfondo primario** batte **Sfondo**, e **Margine superiore dimensione 3 (mt-3)** batte il **Margine** superiore. Una classe con una dimensione schermo nel nome vale da quella larghezza in su: | Nel nome della classe | Vale da | |---|---| | `sm` | 576 px | | `md` | 768 px | | `lg` | 992 px | | `xl` | 1200 px | | `xxl` | 1400 px | Così `py-3 py-lg-5` dà 16 px di padding in alto e in basso sugli schermi più piccoli, e 48 px da 992 px di larghezza. ### Per il tuo sviluppatore del tema Una classe ha bisogno di una regola CSS nel tema, per esempio: ```css .brand-card { background: #f4f6fb; border-left: 4px solid #1a4d8f; padding: 2rem; } ``` Per mostrare la classe nell’elenco **Classi HTML** per i redattori, registrala nel `.info.yml` del tema; vedi [Classi di utilità](/it/hc/documentation/learn-dxpr-builder/customization/utility-classes). Per stili su tutto il sito, vedi [CSS personalizzato](/it/hc/documentation/learn-dxpr-builder/customization/custom-css). ## Se non lo vedi - **Salva non fa niente e ID HTML dice “L’ID deve iniziare con una lettera”.** L’ID viola le regole sopra. Inizialo con una lettera, e usa solo lettere, numeri, trattini e underscore. - **Non puoi digitare una nuova classe.** Il riquadro filtra solo il suo elenco. Fai prima clic su **Modifica come testo**. - **Una classe attesa manca nell’elenco.** L’elenco contiene solo le classi definite da DXPR Builder e dal tuo tema. Fai clic su **Modifica come testo** e digitala. - **Il pulsante non scorre per niente.** **Link** deve essere `#` seguito da esattamente l’ID HTML, con le stesse maiuscole. Controlla entrambi i campi, e prova in **Anteprima**. - **Una classe non ha effetto.** Il nome è scritto male, il tema non ha una regola per essa, oppure Bootstrap 5 non è caricato. Controlla l’ortografia, poi chiedi al tuo webmaster della regola o di **File Bootstrap esterni**. - **La classe del tuo team cambia solo alcune cose.** Un valore del pannello **Stile** sulla stessa proprietà batte una classe del tema. Azzera quel valore nel pannello **Stile**. - **Il pulsante salta al posto sbagliato.** Due elementi condividono l’ID, e vince il primo. Dai a ogni elemento il suo ID. - **Il titolo della sezione si nasconde sotto l’intestazione fissa.** DXPR Builder non riconosce il tuo header. Un webmaster imposta **Selettore di offset scorrimento** sotto **Impostazioni generali** > **Impostazioni avanzate** (`/admin/dxpr_studio/dxpr_builder/settings`) sul selettore CSS dell’header. ## Passi successivi - [Design responsive](/it/hc/documentation/learn-dxpr-builder/design/responsive-design): pianifica quali elementi mostrare su ogni dimensione schermo.