Cómo configurar el fondo de la imagen en WordPress

Hay más formas de agregar imágenes de fondo en WordPress. De básico a más avanzado con cambio de código de tema. Sin embargo, estamos encantados de presentar una herramienta fácil de usar ideal para administradores de sitios web sin conocimientos de codificación y diseño. Complemento Citadela Pro viene con muchas características y configuraciones para la personalización del sitio web.

Prueba los potentes bloques, ajustes y funciones del plugin Citadela Pro. Usted puede explorar la herramienta perfecta que le permite añadir imágenes de fondo a las páginas de WordPress, mensajes y tipos de entradas personalizadas.

El Cluster es un bloque de Gutenberg en WordPress que le permite agregar una imagen de fondo. El elemento multifuncional le permite cambiar el fondo de WordPress de su valor predeterminado. No solo puede agregar una imagen de fondo, sino que también puede combinarla con otros bloques. Ganas muchas variaciones y versatilidad.

Combinado con el Bloque de título de página, obtienes un sitio web fabuloso con facilidad. Puede agregar más bloques de Gutenberg y personalizar la imagen de fondo en WordPress. Además, puede guardar un conjunto de bloques como bloques reutilizables y agregar un tema en cualquier lugar de su sitio web. Entonces puede cambiar el sitio web de WordPress de fondo a la vez.

Cómo agregar una imagen de fondo en WordPress usando el bloque de Gutenberg

Imagen de fondo de WordPress a través del bloque de clúster

Le presentamos un bloque práctico que hicimos para el bloque Gutenberg de WordPress para la imagen de fondo: bloque de clúster. Es parte de nuestro propio grupo de bloques. El complemento Citadela Pro tiene muchas funciones para ayudarlo a crear un sitio web hermoso. Todos los bloques personalizados de AitThemes están disponibles en Complemento Citadela Pro.

Por favor lee Documentación del bloque de clúster para ajustes detallados.

El bloque de clúster le permite agrupar varios bloques en uno. Puede trabajar efectivamente con todo el grupo agrupado como si fuera un bloque. El ancho del grupo se puede establecer en el ancho de página completo, lo que significa que tiene un espacio extra grande para agregar varios bloques.

El clúster no se extenderá al ancho completo si:

• Tienes una barra lateral activa
• Si usa columnas que limitarán el espacio para el clúster

Debido a que algunos de los bloques principales de WordPress se pueden alinear solo con el ancho del contenido, el bloque de clúster ofrece una mayor variabilidad en la construcción de su sitio web. Una gran característica también es que puede configurar una imagen de fondo para WordPress, cambiar su color o configurar la superposición de la imagen de fondo. Por lo tanto, el fondo se puede configurar para el diseño del sitio web.

En este artículo te mostraremos:

• Cómo agregar un bloque de clúster al editor de WordPress
• Agrupación dentro de Cluster
• Configuraciones básicas en la barra de herramientas
• Color de encabezado y separador
• Cómo agregar una imagen de fondo en bloques agrupados
• ¿Qué es la superposición de fondo?
• ¿Cuál es la diferencia entre el bloque de grupo y el bloque de clúster de Ait?

Cómo agregar un bloque de clúster

El bloque de clúster es un bloque premium y solo está disponible si instala y activa Complemento de bloques de Citadela. Después de instalar el complemento, el bloque de clúster se agregará automáticamente al editor de bloques de WordPress y podrá comenzar a trabajar con él de inmediato.

El bloque de clúster se puede agregar tanto en publicaciones como en páginas. Simplemente haga clic en el signo "+" en la barra superior o en cualquier lugar del escritorio del editor. Luego, simplemente busque el bloque de clúster.

La segunda opción para agregar un bloque de clúster es escribir "/" y luego el nombre del bloque. El bloque de clúster está listo para usar.

Agrupación de bloques usando Cluster

La característica principal del bloque Cluster es agrupar múltiples bloques en uno. Echemos un vistazo a cómo funciona. Si inserta un bloque de clúster en su página, verá inmediatamente un marcador de posición “Inserte más bloques aquí”. Si hace clic en él, obtendrá una lista de todos los bloques disponibles. También puede buscar el bloque solicitado usando la barra de búsqueda en la parte superior de la lista.

Todos los bloques anidados tendrán todas las opciones y configuraciones predeterminadas disponibles. Por ejemplo, si inserta un bloque de imagen, tendrá la opción de cargar una imagen o seleccionarla de la biblioteca multimedia.

Con el bloque Cluster puede, por ejemplo, crear una sección llamativa en su sitio web para presentar su trabajo reciente. Agregue imágenes de su cartera y luego establezca una imagen de fondo debajo. Acabas de crear un bonito enlace a tu cartera.

El bloque de racimo también se puede utilizar para crear una presentación atractiva del producto. Puede configurar la imagen del producto como fondo de la sección y elegir su color. bloque de servicio también se puede anidar dentro del bloque Cluster.

Múltiples bloques en uno solo

Si desea agregar varios bloques anidados en Cluster, puede usar el bloque Columnas. Usando el bloque Columna, puede agregar varios bloques uno al lado del otro. Cada columna puede tener un tipo de contenido diferente, como imagen, párrafo, listas o botón.

Un ejemplo típico de varias columnas en combinación con el bloque de clúster es un sitio web de una página.

Configuración básica en la barra de herramientas: opciones de alineación de contenido

De forma predeterminada, el ancho del bloque de clúster se establece en el tamaño del contenido. Puede cambiar este comportamiento en la barra de herramientas. Hay las siguientes opciones disponibles:

• Tamaño del contenido: opción predeterminada, el bloque de clúster tiene el mismo ancho que el contenido.
• Tamaño ancho: el contenido dentro del clúster es más ancho que el ancho del contenido.
• Tamaño de ancho completo: en este caso, el ancho del clúster es de lado a lado de la ventana del navegador.

Es importante tener en cuenta que esta configuración solo afectará el contenido del clúster si su tema actualmente activo lo admite. Todos los bloques anidados se pueden configurar según la disponibilidad de sus opciones.

Configuración de color de encabezado y separador

Cambio de color de encabezado

Desde WP 5.3, puede cambiar el color de su encabezado a través del bloque Encabezado. Esta es una característica muy útil, especialmente si tiene un diseño y una combinación de colores oscuros, es mejor cambiar el color del texto predeterminado (que es negro) a un color más claro.

No fue posible cambiar el color del encabezado hasta la nueva versión, lo que causó problemas con su visibilidad en una base oscura. Por lo tanto, a menudo sucedía que el encabezado se mezclaba con la imagen de fondo de WordPress o la foto que agregabas. Ahora puede elegir el color de encabezado correcto para que su sitio brille.

Nuevo color para Separator utilizado en su sitio web

Cuando agrega a su WP una imagen de fondo o cualquier otro tipo de contenido, es posible que a veces necesite separarlo del resto del sitio web. Para este propósito, puede usar un bloque especial llamado Separador. Al insertar Separator puede:

• Bloques específicos separados
• Divida todo el texto en secciones más pequeñas
• Destacar partes importantes
• Garantizar una mejor legibilidad del contenido.
• Simplifica la navegación en tu sitio web

Además, ahora puede cambiar el color de la línea Separator con el WordPress actualizado. Coloured Separator es perfecto para completar el esquema de color de su sitio web.

Cómo agregar una imagen de fondo en bloques agrupados

El verdadero poder del bloque Cluster es que puede agregar una imagen de fondo y establecer el color de fondo debajo de los bloques agrupados. Todo se puede configurar fácilmente dentro del inspector de WordPress. Echemos un vistazo a cómo hacerlo.

1. Haga clic en Imagen de fondo y active la función "Mostrar imagen de fondo".
2. Haga clic en "Seleccionar imagen". Se abrirá la biblioteca multimedia. Puede seleccionar una imagen existente o cargar una nueva imagen a su biblioteca.
3. La imagen de fondo también se puede configurar como fija. Significa que si se desplaza por la página, el fondo no se moverá con el contenido y su posición será fija.
4. También puede elegir qué parte de la imagen de fondo se debe mostrar utilizando el "Selector de punto focal". También es posible elegir parte de la imagen usando porcentaje.

superposición de fondo

Una de las opciones avanzadas en Cluster es la superposición de imágenes de fondo. Puede elegir uno de los colores predeterminados o seleccionar un color personalizado usando el selector de color. También es posible establecer la opacidad del color. Estas configuraciones de bloque de clúster lo ayudan a crear una presentación de sitio web realmente atractiva.

Nuevo bloque de grupo disponible en el núcleo

¿Cuál es la diferencia entre el bloque de grupo y el bloque de clúster de AitThemes?

Nuestro bloque de clúster personalizado se lanzó antes que el bloque de grupo y proporciona una solución más compleja. Puede usar Bloque de grupo para agrupar varios bloques, pero aún tiene funciones limitadas. Por ejemplo, no puede configurar la superposición de colores en el bloque; solo puede elegir el color de fondo básico que estará alrededor de la imagen, no sobre ella.

La edición de imágenes de fondo es pan comido en nuestro bloque Cluster.

Puede cargar su imagen de fondo de WordPress, establecer el color de fondo y también la superposición de color de fondo (¡y personalizar la opacidad de la superposición también!). Esto toma sólo unos minutos.