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.
- 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.
- 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.
- 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.
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.
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.
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.
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.
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.
- 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.
Recuerde que simplemente puede desagrupar los bloques para eliminar los colores de texto/fondo y restablecer el bloque a su estado original.
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.
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.
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.
- 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.
- 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.
- 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.
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