Come aggiungere box di testo colorato in un post

Di Riccardo Esposito | Pubblicato il 5 Ott 2009 - Aggiornato il 31 Ott 2023

Per creare un box colorato con del testo, inserisci un blocco paragrafo facendo click sul pulsante + e selezionando il blocco di testo. Vai alle impostazioni del blocco nella barra laterale. Cerca lo Sfondo e imposta il colore.

---

Per creare un box HTML con colore differente in una pagina web puoi sfruttare WordPress Gutenberg. Ti basta scrivere in un blocco paragrafo e cambiare sfondo.

Nel video in alto ti spiego come fare. Devi solo scegliere il colore che preferisci come sfondo e impostare anche quello del font che deve creare il giusto contrasto. 

Grazie a WordPress Gutenberg puoi inserire box di testo con colore differente in HTML, senza usare plugin. Ma per chi vuole lavorare in modo diverso ci sono alternative. Come creare un box HTML in poco tempo e senza tanti problemi?

Plugin per inserire box di colore

Per aggirare la conoscenza del codice puoi usare un comodo plugin che si chiama Shortcodes Ultimate. Questa soluzione consente di inserire box con testo di colore differente o incorniciato, senza intervenire sull’HTML e neanche nel CSS. Questa è una buona alternativa anche perché il plugin offre diversi strumenti oltre ai box. 

Creare un box con testo in HTML

In realtà puoi creare riquadri di colore differente grazie al codice HTML, soluzione ideale per chi vuole procedere in modo autonomo, senza il contributo del CMS o di eventuali estensioni. Come inserire box con colore diverso dallo sfondo di un post?

<div style="width:700px; border:10px solid #0000; 
background-color:#FFEC8E; margin: auto">Questo è un box 
di testo nel quale inserire le informazioni 
utili da evidenziare</div> 

Ecco il codice da seguire come base di partenza. In questo caso ho definito la larghezza (width) lo spazio tra il font e il bordo (border) e il colore dello sfondo, vale a dire una sorta di giallo. Il margin: auto permette di mantenere il box al centro.

Inserire il box in pagina con CSS

Il codice HTML non è sufficiente? In una gestione avanzata dei riquadri di colore differente puoi ottenere facilmente delle sezioni molto più precise con:

• Backgrounf – Il contenuto del riquadro.
• Padding – Area vuota intorno al contenuto.
• Border – Il bordo del box che hai creato.
• Margin – Si tratta del margine tra box e altro.

Per gestire questo in modo ordinato in ogni sezione del blog puoi usare il CSS. Ad esempio puoi inserire una regola nel tuo file che comprenda alcuni elementi.

boxed {
  background-color: grey;
  width: 700;
  border: 1px black;
  padding: 50px;
  margin: 20px;
}

Ho creato una regola che consente di ottenere un box grigio per i miei testi da evidenziare senza una particolare enfasi. Come richiamo tutto questo in una pagina?

<div class="boxed">
  Qui metti il contenuto.
</div>

Ti spaventa la compilazione di questo lavoro? Non temere, puoi usare enjoycss.com, un tool che ti aiuta a compilare il codice del box con una semplicità disarmante.

Perché devi creare un box HTML?

Questo elemento può essere molto utile per aggiungere del testo in evidenza e consentire a chi crea la pagina web di migliorare la leggibilità del testo online.

Ad esempio puoi creare dei riquadri di contenuto che avvisano il lettore di un possibile pericolo, quindi avrai bisogno di uno sfondo rosso. Se c’è una risorsa positiva puoi usare il verde mentre per un’informazione neutra può essere utile avere il blu. In ogni caso il motivo di tutto questo è chiaro: mettere in evidenza.

Da leggere: come visualizzare articoli in una pagina

Quindi tu come vuoi procedere?

Queste sono le soluzioni per creare un creare un box HTML. C’è altro da aggiungere? Lascia la tua opinione nei commenti e aiutami a migliorare questo tutorial.

Categoria: WordPress | Tag: Codice HTML