Lección 4.3 — Contenido → Fondo → Color sólido
El fondo de una Sección es como pintar las paredes de una habitación. Puedes dejarlas blancas, pintarlas de un color sólido, poner un papel tapiz con imagen, o incluso poner un video proyectado. En esta lección aprendes la opción más básica y más usada de todas: el color sólido. Un solo color plano y limpio detrás de todo el contenido.
Los 6 tipos de fondo — una vista rápida
Antes de entrar al color sólido, mira los seis íconos que aparecen en la fila «Fondo De». Cada ícono es un tipo de fondo diferente. Al hacer clic en uno, el panel de abajo cambia para mostrar las opciones de ese tipo.
Fondo De — los 6 íconos en tu Divi
El ícono azul es el que está activo. Los grises están disponibles pero inactivos.
Cada tipo de fondo tiene su propia lección. Por ahora nos quedamos con el primero — el ícono del diamante ◆ que es el color sólido.
El selector de color — todo lo que ves
Cuando haces clic en «+ Añadir Color De Fondo» se abre una ventana flotante llamada Selector De Color. Tiene varias partes y cada una sirve para algo diferente.
Selector De Color — las partes que lo componen
Cuadro de color — mueve el punto para elegir el tono exacto
Barra de color (arcoíris) y barra de opacidad (cuadros grises)
Campo de código hex y campo de opacidad en número
Colores Globales
Tus colores guardados — los de la paleta de la clínica van aquí
Cada parte explicada
| Parte del selector | Para qué sirve | Cómo usarla |
|---|---|---|
| Cuadro grande de color | Seleccionar el tono exacto dentro del color elegido | Arrastra el punto blanco — arriba es más claro, abajo más oscuro, derecha más saturado |
| Barra arcoíris | Cambiar el color base — rojo, azul, verde, amarillo… | Arrastra el control de izquierda a derecha para recorrer todos los colores |
| Barra de cuadros grises | Controlar la opacidad — qué tan transparente es el color | Arrastrar a la izquierda lo hace más transparente, a la derecha más sólido |
| Campo «Elegir Un Color» | Escribir el código exacto del color | Escribe el código hex — por ejemplo #0f2540 para el azul oscuro de la clínica |
| Campo con % | Opacidad en número — 100% es sólido, 0% es invisible | Escribe un número entre 0 y 100 |
| Filtros De Color | Cambia el formato del código — HEX, RGB, HSL | Haz clic en el texto azul «Filtros De Color» para cambiar el modo |
| Colores Globales | Los colores de tu paleta guardada — los usas en toda la web con un clic | Haz clic en cualquier cuadro de color para aplicarlo al instante |
| Gestionar Colores Globales | Agrega, edita o elimina los colores de tu paleta | Haz clic en el enlace azul para abrir el gestor de colores |
Los tres formatos de color — cuál usar
| Formato | Ejemplo | Cuándo usarlo |
|---|---|---|
| HEX | #0f2540 |
El más común. Lo verás en el manual de marca de cualquier empresa. Úsalo siempre que tengas el código exacto del color. |
| RGB | rgb(15, 37, 64) |
Cuando necesitas ajustar rojo, verde y azul por separado. Poco frecuente para principiantes. |
| HSL | hsl(212, 62%, 15%) |
Para colores relativos — oscurecer o aclarar un color manteniendo el mismo tono. Lo verás en lecciones avanzadas. |
La opacidad — cuándo usarla y cuándo no
La opacidad controla qué tan transparente es el color. Al 100% el color es completamente sólido — no se ve nada detrás. Al 50% el color es semitransparente — se mezcla visualmente con lo que hay debajo.
Ejemplo de opacidad — el mismo azul en tres niveles
Sólido
No se ve nada detrás
Semitransparente
Se mezcla con el fondo
Casi invisible
Solo un tinte sutil
Colores para la clínica CPS — referencia rápida
| Color | Código HEX | Dónde usarlo |
|---|---|---|
| Azul oscuro | #0f2540 |
Sección del encabezado, footer, secciones de impacto |
| Dorado | #c9a84c |
Secciones de llamada a la acción, destacados |
| Gris muy claro | #f8f8f8 |
Secciones alternadas — para que no todo sea blanco puro |
| Blanco | #ffffff |
Secciones de contenido principal, fondo limpio |
Cómo aplicar un color — paso a paso
1 Abre el panel de la Sección → pestaña Contenido → grupo Fondo
El primer ícono ya está activo — el diamante ◆ del color sólido.
2 Haz clic en «+ Añadir Color De Fondo»
Se abre el Selector De Color. Si ya tienes los colores de la clínica guardados en Colores Globales, haz clic directo en el cuadro del color que quieres. Listo — el fondo cambia al instante en el lienzo.
3 Si no tienes el color guardado, escríbelo en el campo hex
Haz clic en el campo que dice «Elegir Un Color», borra lo que hay y escribe el código — por ejemplo #0f2540. Presiona Enter y el color se aplica.
4 Cierra el selector
Haz clic en la X de la ventana del Selector De Color o haz clic en cualquier parte fuera de ella. El color queda guardado en la Sección.
+ que aparece al final de los cuadros de colores globales, escribe el código hex y dale un nombre. Así los tienes a un clic de distancia en cualquier módulo de cualquier página del sitio. Si en el futuro cambias un color global, se actualiza en toda la web automáticamente.
- El grupo Fondo tiene 6 tipos — color, degradado, imagen, video, patrón y máscara
- El color sólido es el primer ícono — el diamante ◆
- El Selector De Color tiene cuadro de tono, barras de color y opacidad, campo hex y colores globales
- El formato HEX es el más común — empieza con # seguido de 6 caracteres
- La opacidad al 100% es sólido, al 0% es completamente transparente
- Guardar los colores de la clínica en Colores Globales ahorra tiempo en toda la web