--- url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/tipografia' title: 'Cambiare dimensione e colore del testo | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T13:45:28+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Ingrandisci una frase di apertura, imposta una citazione nel colore del tuo brand, o rendi bianco un titolo su una foto scura. Con Dimensione del carattere e Colore del carattere nel pannello Stile, cambi tutto il testo di un elemento. Per parte di un testo, usa invece la barra dell’editor di testo. Per dimensioni e colori condivisi da tutte le pagine, usa il tuo tema. Il video segue l’esempio pratico qui sotto: trasforma una frase in apertura con dimensione maggiore e colore brand. 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: 'Cambiare dimensione e colore del testo' description: |- Ingrandisci una frase di apertura, imposta una citazione nel colore del tuo brand, o rendi bianco un titolo su una foto scura. Con Dimensione del carattere e Colore del carattere nel pannello Stile, cambi tutto il testo di un elemento. Per parte di un testo, usa invece la barra dell’editor di testo. Per dimensioni e colori condivisi da tutte le pagine, usa il tuo tema. Il video segue l’esempio pratico qui sotto: trasforma una frase in apertura con dimensione maggiore e colore brand. 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:28+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/tipografia' articleSection: 'Dai stile agli elementi' - '@type': WebPage '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/tipografia' description: |- Ingrandisci una frase di apertura, imposta una citazione nel colore del tuo brand, o rendi bianco un titolo su una foto scura. Con Dimensione del carattere e Colore del carattere nel pannello Stile, cambi tutto il testo di un elemento. Per parte di un testo, usa invece la barra dell’editor di testo. Per dimensioni e colori condivisi da tutte le pagine, usa il tuo tema. Il video segue l’esempio pratico qui sotto: trasforma una frase in apertura con dimensione maggiore e colore brand. 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) # Cambiare dimensione e colore del testo. Impara DXPR BuilderCrea le pagineDai stile agli elementi ## In questa guida Guide correlate - [Collegare le sezioni e riusare gli stili con le classi](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/css-personalizzato) Ingrandisci una frase di apertura, imposta una citazione nel colore del tuo brand, o rendi bianco un titolo su una foto scura. Con **Dimensione del carattere** e **Colore del carattere** nel pannello **Stile**, cambi tutto il testo di un elemento. Per parte di un testo, usa invece la barra dell’editor di testo. Per dimensioni e colori condivisi da tutte le pagine, usa il tuo tema. Il video segue l’esempio pratico qui sotto: trasforma una frase in apertura con dimensione maggiore e colore brand. ## 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 il pannello Stile** per un elemento: un paragrafo di apertura, una citazione, un titolo su una foto. - **Usa l’editor di testo** per parte di un testo e per la struttura. Rendi un titolo un vero titolo con **Intestazione 2** o **Intestazione 3**, non una riga **Normale** più grande. Screen reader e motori di ricerca leggono il livello, non la dimensione. - **Usa l’elenco Stili dell’editor** per gli stili di testo brand. Il tuo webmaster li imposta sotto **Impostazioni generali** > **Editor di testo** > **Stili personalizzati** (`/admin/dxpr_studio/dxpr_builder/settings`). - **Usa il tuo tema** per il font del corpo, le dimensioni dei titoli e i colori dei link. ## Esempio pratico: una frase di apertura nel colore del tuo brand 1. Aggiungi un elemento **Testo** e digita una o due frasi come testo **Normale**. 2. Passaci sopra, fai clic su **Altro**, poi su **Impostazioni**. 3. Apri il pannello **Stile** e trascina **Dimensione del carattere** a 20. Il testo cresce mentre trascini. 4. Apri **Colore del carattere** e scegli il colore del tuo brand dai campioni, oppure digita il suo codice, come #1a4d8f, nel campo colore. 5. Fai clic su **Salva** nella finestra. A 20 px la frase conta come testo normale, quindi serve un contrasto di 4,5 a 1. Inserisci il tuo codice colore e il colore di sfondo in un verificatore di contrasto; una pagina bianca è #ffffff. 6. Fai clic su **Salva** nella barra. ## Cosa vedi La frase cresce a 20 px e diventa del colore del tuo brand. Titoli e link dentro lo stesso elemento Testo prendono anch’essi quel colore, ma i titoli conservano la loro dimensione. ## Come funzionano le impostazioni ### Dimensione del carattere **Dimensione del carattere** va da 0 a 100 px, e 0 conserva la dimensione del tuo tema. Il valore è uguale su ogni dimensione schermo: una riga da 48 px su un desktop è 48 px anche su un telefono. La dimensione va sull’elemento, e il testo che ha una sua dimensione la conserva. I titoli di solito sì, perché Bootstrap li dimensiona dalla dimensione base della pagina. Anche il testo dimensionato con lo strumento dimensione carattere dell’editor conserva la sua. ### Colore del carattere Il selettore mostra la tavolozza del tuo tema come campioni, quando il tuo sito ne ha una. Ha anche un cursore di opacità e un campo dove digiti un codice colore, come #1a4d8f. **Azzera** nel selettore riporta il testo al colore del tema. Su un elemento di contenuto come Testo, Scheda o Avviso, il colore raggiunge tutto ciò che sta dentro, titoli e link inclusi. Su una **Sezione** raggiunge solo il testo senza un suo colore. Titoli e link colorati dal tuo tema conservano lì il loro colore. Le classi di colore Bootstrap sono marcate `!important`, quindi battono **Colore del carattere**. Un esempio è il chip **Colore testo primario** sotto **Classi HTML**. Un altro è uno stile dell’editor come **Testo brand primario** su parte del testo. Su un **Pulsante**, il colore va sul pulsante stesso e sostituisce il colore hover del tema. Imposta **Colore del carattere** anche in **Stile hover**. ### Hover Il pannello **Stile hover** ha un suo **Colore del carattere** e una sua **Dimensione del carattere**. Una dimensione maggiore all’hover sposta il contenuto intorno, quindi un cambio di colore è di solito la scelta più calma. ## Contrasto Per un testo leggibile dalla maggior parte delle persone, le regole WCAG 2 al livello AA chiedono questo contrasto: | Testo | Contrasto con il suo sfondo | |---|---| | Testo normale | almeno 4,5 a 1 | | Testo grande: 24 px (18 pt) o più, o 19 px (14 pt) o più in grassetto | almeno 3 a 1 | Su una foto, misura sulla parte più chiara dietro il testo. Prova la tua coppia di colori con un verificatore di contrasto, come il [verificatore di contrasto WebAIM](https://webaim.org/resources/contrastchecker/). ## Se non lo vedi - **Il titolo dentro il testo non è cresciuto.** Il titolo ha una sua dimensione dal tuo tema. Scegli un altro livello di titolo nell’editor di testo, oppure usa il suo strumento dimensione carattere. - **Link e titoli conservano il loro colore.** Su una Sezione, il testo con un suo colore del tema lo conserva. Imposta invece **Colore del carattere** sull’elemento Testo. - **Colore del carattere non fa proprio niente.** Vince una classe di colore come **Colore testo primario** o **Testo bianco** sotto **Classi HTML**. Rimuovi il suo chip. - **Parte del testo conserva un altro colore.** Vince uno stile dell’editor su quella parte, come **Testo brand primario**. Rimuovi lo stile nell’editor di testo. - **Dimensione del carattere non fa niente su un contatore.** Contatore circolare e Contatore numerico hanno una loro **Dimensione del carattere**. Usa quella. - **Un colore campione non corrisponde più al brand.** Un campione copia il colore quando lo scegli. Dopo un cambio di tavolozza, scegli di nuovo il campione. - **Il colore brand non supera il controllo di contrasto.** Scegli una sua tonalità più scura. Oppure porta il testo ad almeno 24 px, così vale l’obiettivo 3 a 1. - **Il testo si legge male su una foto.** Il contrasto è troppo basso. Scurisci la foto con una sfumatura, come mostrato nella pagina [Sfondi](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/sfondo). - **Il pulsante ha perso il colore di testo hover.** Il tuo **Colore del carattere** sostituisce il colore hover del tema. Imposta **Colore del carattere** anche in **Stile hover**. ## Passi successivi - [ID e classi HTML](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/css-personalizzato): riusa uno stile di testo tramite una classe invece di impostarlo su ogni elemento.