Lección 4.7 — Contenido → Fondo → Patrón
Imagina ese papel tapiz clásico de las paredes antiguas — pequeños rombos, rayas, puntos o flores que se repiten infinitamente. Eso es exactamente un patrón de fondo. Divi tiene una biblioteca de formas geométricas que puedes usar como textura detrás de cualquier Sección. El resultado es un fondo con personalidad sin necesidad de ninguna foto.
Cómo activar el patrón de fondo
En el grupo Fondo, haz clic en el quinto ícono de la fila «Fondo De» — el de la cuadrícula con X. El panel muestra la vista previa del patrón activo y todas sus opciones de personalización.
Vista previa — lo que ves en tu panel (Polka Dots activo)
La cuadrícula gris detrás del patrón indica transparencia — el color de fondo de la Sección se ve a través
Todas las opciones del patrón
| Opción | Para qué sirve | Valor por defecto |
|---|---|---|
| Patrón De Fondo | El menú desplegable para elegir el tipo de patrón — puntos, rayas, líneas, formas geométricas | Polka Dots |
| Color Del Patrón | El color de las formas del patrón y su opacidad | Negro (#000000) al 20% de opacidad |
| Transformación Del Patrón | Cuatro íconos para voltear o rotar el patrón | Sin transformación |
| Tamaño Del Patrón | Qué tan grande se ve cada elemento del patrón | Tamaño Real |
| Origen De Repetición Del Patrón | Desde qué esquina empieza a repetirse el patrón | Arriba A La Izquierda |
| Desplazamiento Horizontal Del Patrón | Mueve el patrón hacia la derecha o izquierda en porcentaje | 0% |
| Desplazamiento Vertical Del Patrón | Mueve el patrón hacia arriba o abajo en porcentaje | 0% |
| Repetición Del Patrón | Si el patrón se repite en todas las direcciones o solo en una | Repetir |
| Modo De Fusión Del Patrón | Cómo se mezcla el patrón con el color de fondo de la Sección | Normal |
Los íconos de Transformación del Patrón
Los cuatro íconos pequeños que aparecen debajo de «Transformación Del Patrón» hacen lo siguiente:
Voltear horizontal
Espeja el patrón de izquierda a derecha
Voltear vertical
Espeja el patrón de arriba hacia abajo
Rotar
Gira el patrón 90 grados cada vez que haces clic
Invertir colores
Cambia el patrón por su negativo — lo que era oscuro queda claro
Tamaño del patrón — las opciones disponibles
| Opción | Qué hace | Cuándo usarla |
|---|---|---|
| Tamaño Real | Muestra el patrón a su tamaño original en píxeles | La opción por defecto — puntos pequeños y sutiles |
| Cubrir | Escala el patrón para que cubra toda la Sección | Cuando quieres que el patrón sea grande y visible |
| Contener | Escala el patrón para que quepa completo dentro de la Sección | Para patrones que no deben recortarse |
| Personalizado | Tú defines el ancho y alto en píxeles o porcentaje | Cuando necesitas un tamaño exacto |
La clave — el patrón es transparente por naturaleza
Lo más importante que tienes que entender del patrón es esto: el patrón no tiene fondo propio. Las formas del patrón tienen color, pero los espacios entre ellas son completamente transparentes. Eso significa que lo que se ve detrás depende del color de fondo que tenga la Sección.
El mismo patrón sobre diferentes fondos
Fondo blanco
Puntos oscuros sobre blanco — sutil y elegante
Fondo azul oscuro
Puntos claros sobre azul — profundidad y textura
Fondo gris claro
Puntos dorados — toque de marca
Combinaciones recomendadas para la clínica CPS
| Sección | Color de fondo base | Patrón recomendado | Color del patrón |
|---|---|---|---|
| Sección de testimonios | #f8f8f8 gris claro |
Polka Dots — puntos sutiles | #0f2540 al 8% |
| Sección de estadísticas | #0f2540 azul oscuro |
Líneas diagonales | #ffffff al 5% |
| Sección de servicios | #ffffff blanco |
Cuadrícula fina | #c9a84c al 10% — dorado de la clínica muy sutil |
| Footer | #0f2540 azul oscuro |
Polka Dots | #ffffff al 4% |
- El patrón se activa con el quinto ícono de «Fondo De»
- Divi incluye una biblioteca de patrones geométricos listos para usar
- El patrón es transparente — los espacios entre formas muestran el color de fondo de la Sección
- La opacidad del color del patrón controla qué tan visible es — mantenerla entre 5% y 25%
- Los cuatro íconos de transformación permiten voltear y rotar el patrón
- La combinación fondo sólido + patrón sutil es la más usada en diseño profesional