¿Cómo agregar o eliminar el fondo en WordPress Gutenberg Blocks? – Aprendermarketing.es/

A diferencia del antiguo editor clásico, el editor de bloques de Gutenberg ofrece varias funciones para personalizar su contenido. Una de las mejores cosas es que puedes agregar fácilmente un fondo a cualquier bloque en el editor de Gutenberg. Puede hacer esto sin un complemento adicional y mostrar una parte importante en nuestro desde otra área de la página.

Agregar fondo a los bloques

Hay dos formas de agregar un fondo a un bloque:

  • Agregar un fondo de color sólido
  • Usar colores degradados como fondo
  • Usar una imagen de fondo

Te explicamos ambas opciones en este artículo.

1. Agrega color de fondo a los bloques

Supongamos que desea agregar un color de fondo a un párrafo en Gutenberg.

  • Primero, inserte su texto usando un bloque de párrafo.
  • Haz clic dentro del párrafo y luego haz clic en los tres puntos de «Opciones» en la barra de herramientas del bloque. Selecciona la opción «Mostrar más configuraciones» para ver la configuración del bloque al costado.
Mostrar más configuraciones para bloques en el Editor de Gutenberg
  • Haga clic en la opción «Fondo» que aparece debajo del encabezado «Color».
  • Esto abrirá la paleta de colores que muestra los colores predeterminados que ofrece su tema. Si le gusta el color predeterminado, haga clic en el color para aplicarlo como fondo para un bloque de párrafo seleccionado.
Agregar color de fondo predeterminado a los bloques
Agregar color de fondo predeterminado a los bloques
  • Para aplicar un color personalizado, haga clic en el área transparente del lienzo que aparece justo encima de la paleta de colores predeterminada. Esto abrirá el selector de color para seleccionar su color favorito.
Elija un color de fondo personalizado para un bloque
Elija un color de fondo personalizado para un bloque
  • WordPress usa el código de color predeterminado en formato HEX como #FFFFFF. Haga clic en la flecha pequeña que se muestra junto al código de color para cambiar el formato a HSL o RGB.
Cambiar el formato de color
Cambiar el formato de color

También puede copiar la interfaz de usuario plana u otros códigos de color de otro sitio y simplemente pegar el código en el cuadro de texto para aplicar el fondo.

Aplicar colores degradados como fondo

Si desea aplicar colores degradados, haga clic en la pestaña «Degradado». Puede elegir el tipo lineal o radial y elegir uno de los degradados predeterminados.

Aplicar un fondo degradado a los bloques
Aplicar un fondo degradado a los bloques

Para colores personalizados, arrastre los círculos que aparecen en el cuadro de color para ajustar el enfoque de los degradados. También puede hacer clic en el cuadro y seleccionar un color de la herramienta de selección para agregar degradados adicionales al fondo. Para el tipo lineal, es posible configurar el ángulo directamente ingresando o girando el control deslizante de ángulo.

Agregar un color degradado adicional
Agregar un color degradado adicional

Cambiar el color del texto

Cuando elige un color de fondo, también debe cambiar el color del texto de manera adecuada para una visibilidad clara. Si los colores del fondo y del texto no coinciden, WordPress le mostrará una advertencia en la barra lateral, mencionando que la combinación de colores puede ser difícil para las personas. Leer.

Advertencia de discrepancia de color
Advertencia de discrepancia de color

Para solucionar el problema, haga clic en la opción «Texto» y establezca un color apropiado para su texto. Por ejemplo, puede establecer un color blanco (#FFFFFF) para el texto si establece un fondo negro.

Establezca un color de texto apropiado para que coincida con el color de fondo
Establezca un color de texto apropiado para que coincida con el color de fondo

Agrupación de bloques y adición de fondo a bloques no admitidos

Si se da cuenta, Gutenberg admitirá la adición de fondo a varios bloques como párrafo, lista y columnas. ¿Qué sucede si desea agregar un color de fondo a una imagen? Puede agregar un fondo a cada bloque usando la opción ‘Bloques de grupo’. Puede usar esto para un solo bloque (como una imagen) o combinar varios bloques (como una imagen + párrafo). Combinemos un párrafo y una imagen y agrégueles colores de fondo.

  • Primero coloque los bloques uno debajo del otro.
  • Presione la tecla Shift y seleccione los dos bloques que desea agrupar.
  • Haga clic en la opción «Grupo» en la barra de herramientas de bloques. Si es necesario, también puede seleccionar la opción «Ordenar» o «Establecer» para organizar los bloques de manera diferente dentro de un contenedor.
Bloques de grupo en Gutenberg
Bloques de grupo en Gutenberg
  • Ahora verá que los bloques seleccionados están agrupados y la barra lateral muestra la pestaña «Color». Ahora puede cambiar el texto y los colores de fondo como se explicó anteriormente.
Agregar fondo a bloques agrupados
Agregar fondo a bloques agrupados

Recuerde que simplemente puede desagrupar los bloques para eliminar los colores de texto/fondo y restablecer el bloque a su estado original.

Desagrupar para eliminar el fondo
Desagrupar para eliminar el fondo

Eliminar fondo de bloques

Si no está satisfecho con el fondo, el texto o ambos colores, es fácil eliminarlos y restaurar el bloque a su estado predeterminado. Haga clic en los tres puntos verticales que aparecen como «Opciones de color» al final del encabezado Color en el barra lateral.

  • Seleccione «Texto» para eliminar el color del texto.
  • Haga clic en Fondo para eliminar el color o degradado de fondo.
  • Haga clic en «Restablecer todo» para eliminar el texto y el color de fondo.
Eliminar texto o color de fondo en Gutenberg
Eliminar texto o color de fondo en Gutenberg

Después de eliminar el texto o el color de fondo, la opción aparecerá con una marca de verificación en lugar de un signo menos. Puede utilizar el icono de deshacer que se muestra en la barra de herramientas superior para deshacer los cambios.

Color de fondo y texto eliminado
Color de fondo y texto eliminado

Usar una imagen de fondo para los bloques de Gutenberg

Puede establecer una imagen de fondo para ciertos bloques, como el bloque Portada en Gutenberg. Sin embargo, no hay opciones de configuración de fondo de imagen disponibles para la mayoría de los demás bloques, como el párrafo. Tienes que seguir un largo proceso para esto.

  • Seleccione el bloque y expanda la sección Avanzado en la barra lateral.
  • Agregue una clase CSS personalizada en el cuadro de texto debajo del encabezado «Clase(s) CSS adicional(es)». Agreguemos una clase CSS con un nombre como bgimg.
Agregue una clase CSS personalizada para un bloque
Agregue una clase CSS personalizada para un bloque
  • Haga clic en «Guardar borrador» para guardar su contenido.
  • Vaya a «Medios > Biblioteca» y cargue la imagen de fondo. Pase el cursor sobre la imagen y haga clic en el enlace «Copiar URL al portapapeles». Alternativamente, haga clic en la imagen y copie la URL completa del archivo en la siguiente pantalla.
Copie la URL de la imagen en el portapapeles
Copie la URL de la imagen en el portapapeles
  • Pegue la URL de la imagen en el Bloc de notas o TextEdit.
  • Copie el CSS a continuación y reemplace ‘image_url_ con la URL de su imagen.
.bgimg{
background-image: url("image_url");
padding: 25px;
}
  • Ve a la sección «Apariencia > Personalizar > CSS adicional» y pega el código CSS en el cuadro de texto.
  • Haga clic en el botón «Publicar» para aplicar los cambios.
Establecer una imagen de fondo CSS
Establecer una imagen de fondo CSS
  • Ahora regrese a su publicación, haga clic en «Vista previa> Escritorio» y seleccione «Vista previa» en una nueva opción de pestaña.
  • El bloque de párrafo debe tener una imagen de fondo añadida.
Fondo aplicado al bloque
Fondo aplicado al bloque

Es posible que deba ajustar el color del texto en el editor de Gutenberg o agregar la propiedad «color:color_code» a su código CSS para ajustar la visibilidad del texto en la imagen de fondo. Asimismo, puede ajustar el relleno y el margen para alinear correctamente el párrafo contenido en el fondo de la imagen Puede verificar tutorial de imagen de fondo en W3 Schools para aprender más al respecto.

La adición de CSS en el personalizador se aplicará a todas las páginas de su sitio. La ventaja es que simplemente puede insertar la clase CSS en cualquier bloque de cualquier página para agregarle una imagen de fondo. Si su tema ofrece ganchos como GeneratePress, Astra o Kadence, entonces puede crear un gancho de encabezado para agregar CSS solo a una página específica. Esto será útil para aplicar el código por publicación/página individual en lugar de agregarlo globalmente a través del personalizador.

palabras de cierre

Puede agregar colores de fondo o una imagen a los bloques para crear atractivos llamados a la acción y notificaciones en el contenido sin complementos adicionales. También puede convertir el bloque en un bloque reutilizable e insertarlo en cualquier parte del sitio.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

rtp live