Si quieres crear un sitio web WordPress visualmente agradable, cambiar los colores de fondo puede ayudarte a resaltar el contenido importante, crear una jerarquía visual clara y hacer que tu sitio sea más atractivo. Sin embargo, con tantos bloques disponibles en el Editor de Bloques de WordPress, puede resultar confuso averiguar cómo cambiar el color de fondo de cada uno.
Mientras que algunos bloques vienen con ajustes de color de fondo incorporados, otros requieren un enfoque ligeramente diferente. La buena noticia es que la mayoría de los bloques del núcleo de WordPress admiten la personalización nativa del color de fondo y, para los que no, existen soluciones sencillas como el bloque Grupo y el bloque Portada.
En esta guía, te guiaremos a través de tres métodos sencillos para que puedas diseñar con confianza cualquier bloque de tu sitio. Cubriremos los bloques que admiten cambios directos de color, mostraremos cómo utilizar el bloque Grupo y exploraremos el bloque Portada para diseños avanzados como secciones principales y banners. Vamos a empezar.
Método 1: Color de fondo directo (soporte nativo)
Muchos bloques del núcleo de WordPress vienen con soporte nativo para cambios de color de fondo. Esto significa que puedes aplicar colores directamente sin añadir bloques adicionales o código personalizado.
Paso 1: Seleccionar el bloque
Para empezar, haga clic en el bloque que desee personalizar dentro del editor. Se activará el bloque y su configuración aparecerá en la ventana Ajustes de bloque panel de la derecha.
Paso 2: Abra la barra lateral de configuración de bloques
Si el panel de configuración aún no está visible, haga clic en el botón Ajustes situado en la esquina superior derecha del editor. Debajo del botón Ajustes de bloque localice el Estilos sección.
Paso 3: Ajustar el color de fondo
En el panel de configuración de Estilos, encontrará la opción Color sección. En Ajustes de colorencuentra Fondo. Ahora, sólo tienes que elegir un color de la paleta, trabajar con el selector de color o introducir un código HEX/RGB/HSL personalizado.
Se aplica a
-
Bloques de texto y contenido: Párrafo, Título, Lista, Cita, Pullquote, Código, Preformateado, Verso
-
Bloques de diseño: Grupo, Columnas, Portada, Medios y Texto
-
Bloques interactivos/Widget: Botones, Calendario, Últimas Entradas, Categorías, Nube de Etiquetas, Iconos Sociales, Navegación, Archivo, Audio, Vídeo, RSS, Búsqueda, Login/Out, Lista de Páginas
-
Sitio/Puesto Bloques: Título del sitio, lema del sitio, título de la entrada, contenido de la entrada, extracto de la entrada, fecha de la entrada, autor de la entrada, categorías de la entrada, etiquetas de la entrada, comentarios, entrada siguiente/anterior, Leer más
-
Bloques Utilitarios: Espaciador (limitado), Separador (limitado), Mesa (sólo mesa entera).
Notas
-
Bloque de cubierta: En lugar de un fondo, encontrará la opción Superposición. Puedes ajustar el color de la superposición junto con los ajustes de opacidad para obtener efectos de capas.
-
Bloque de botones: El color de fondo se aplica al propio botón, mientras que la opción de color de texto cambia el texto del botón.
-
Iconos sociales: El color de fondo sólo afecta al icono contenedor.
-
Bloque de mesa:
-
Para cambiar el color de fondo de toda la tablaseleccione el bloque Tabla y aplique el color en el panel de configuración.
-
Puede tener diferentes colores para las filas, pero está limitado a la opción por defecto. Vaya a la opción Estilos y seleccione la opción Rayas pero el color de la franja está predefinido y no puede personalizarse de forma nativa.
-
Método 2: Envolver en un bloque de grupo
Para los bloques que no tienen opciones nativas de color de fondo, como los bloques multimedia, heredados o de utilidades, puede utilizar un botón Bloque de grupo como contenedor flexible. Al envolver el contenido dentro del bloque Grupo, puede aplicar colores de fondo a toda la sección.
Primer paso: Identificar y centrarse en el bloque específico
Hag