Cómo usar el bloque de portada de WordPress

El bloque de portada de WordPress es interesante. Le permite colocar una imagen, un video o un color sólido en el fondo y agregar bloques de contenido al primer plano. Esto significa que puede colocar bloques sobre otros bloques. Tiene más opciones que la mayoría de los bloques. Saber cómo utilizar Cover Block puede mejorar enormemente el diseño de su sitio web.

En este artículo, veremos lo que hace el Bloque de cubierta y veremos su configuración y opciones. También veremos algunas de las mejores prácticas sobre cómo usarlo y veremos las preguntas frecuentes.

Cómo agregar el bloque de portada a su publicación o página

Para agregar el Bloque de portada a sus páginas y publicaciones, seleccione el icono del bloque dentro de su contenido o en la esquina superior izquierda de la página, ingrese el nombre del bloque y selecciónelo.

También puede escribir / cubrir y presionar Enter o seleccionar el bloque.

Luego, tendrá un Bloque de portada en su contenido donde puede agregar medios como imágenes o videos, o usar color para el fondo y colocar texto en primer plano. Una vez que seleccione el contenido de su carpeta de medios o color, la opción de texto aparece en primer plano.

Agregué una imagen de mi biblioteca de medios y agregué un título sobre la imagen. El título es un bloque de párrafo. Puede cambiarlo a otros tipos de bloques, incrustar video y más.

También puede agregar varios bloques presionando la tecla Intro. Seleccione de sus bloques como de costumbre.

También puede elegir uno de los colores preseleccionados para su fondo.

El color se puede utilizar como una superposición sobre sus imágenes.

Configuración y opciones del bloque de cubierta

El bloque de cubierta tiene dos áreas con configuraciones y opciones. La primera es la barra de herramientas de portada. El segundo son las opciones de Cover Block en la barra lateral derecha.

Barra de herramientas del bloque de cubierta

Al hacer clic en cualquier parte del Bloque de portada, se abre su barra de herramientas.

Cambiar el tipo o estilo del bloque de portada

La primera configuración cambia el número de columnas, le permite agrupar, cambia a una imagen y selecciona el estilo predeterminado o los bordes. Al pasar el mouse, se muestra una vista previa. Estoy flotando sobre Imagen. La imagen elimina los bloques de contenido que tiene en la superposición.

Arrastrar o mover

Coge la herramienta de arrastre (6 puntos) para arrastrar el bloque a cualquier lugar que desees. La herramienta Mover permite hacer clic en las flechas para mover el bloque hacia arriba o el texto dentro del contenido.

Alineación

Las opciones de alineación incluyen izquierda, centro, derecha, ancho ancho y ancho completo. Envuelve el bloque a la izquierda y a la derecha con el párrafo debajo.

Aquí está la imagen en ancho completo. Esto se puede utilizar para crear títulos, dividir secciones, etc.

Cambiar la posición del contenido

Esto selecciona la ubicación del contenido. Abre una cuadrícula de 3 × 3 con puntos. Al seleccionar un punto, el contenido se mueve a esa ubicación dentro de la imagen.

Alternar altura completa

Esto establece la imagen a su altura completa en lugar de cambiar su tamaño.

Aplicar filtro de duotono

Elija un duotono de las opciones preseleccionadas. Uno se aplica a las sombras y el otro a los reflejos.

Seleccione un color en el control deslizante para ajustarlo.

Seleccione un color debajo del control deslizante para elegir un color preseleccionado.

Reemplazar

Esto abre las opciones de medios para que pueda cargar o elegir otra imagen de la biblioteca.

Opciones

Las opciones de Cover Block incluyen:

Ocultar más configuraciones: oculta la barra lateral derecha.

Copiar : copia el bloque de portada para que pueda pegarlo en cualquier lugar de su página o publicación.

Duplicar : crea un duplicado del Bloque de portada y lo coloca debajo del original.

Insertar antes : agrega espacio sobre el bloque de cubierta para otro bloque.

Insertar después : agrega espacio debajo del bloque de cubierta para otro bloque.

Mover a : le permite mover el bloque moviendo una línea azul hacia arriba o hacia abajo con las teclas de flecha. Presione enter y su bloque se moverá a la ubicación de la línea azul.

Agregar a bloques reutilizables : agrega el bloque a sus bloques reutilizables para que pueda usarlo en cualquier página o publicación.

Grupo : agregue el bloque a un grupo para que pueda ajustarlos como una sola unidad.

Eliminar bloque : elimina el bloque.

Contenido del bloque de portada

Al seleccionar el contenido, se abre otro conjunto de herramientas solo para el contenido. El valor predeterminado es un bloque de párrafo e incluye todas las opciones estándar para la configuración de la barra de herramientas y la barra lateral. Puedes transformarlo o agregar cualquier bloque. Esto le brinda muchas opciones para el contenido.

Seleccionar portada

Esto cierra la barra de herramientas de contenido y abre la barra de herramientas Cover Block.

Cambiar el tamaño del bloque de cubierta

Cambie el tamaño de la imagen arrastrando el círculo en la parte inferior de la imagen.

Configuración del bloque de cubierta

La configuración de Cover Block se encuentra en la barra lateral derecha. Haga clic en el bloque o en el engranaje para mostrar la barra lateral. Si selecciona el bloque dentro del contenido del bloque, se mostrará la configuración de la barra lateral.

Estilos

Muestre el bloque con o sin borde. También puede establecer el valor predeterminado para mostrar el borde. Incluye una vista previa para que pueda ver cómo se vería antes de seleccionarlo.

Espaciado

Agregue espacio a todos los lados o lados específicos. Seleccione cada lado individualmente o vincúlelos para ajustarlos todos a la vez.

Configuración de medios

Elija la parte de la imagen que se muestra dentro del bloque. Puede seleccionar un fondo fijo (paralaje), para repetir el fondo si es demasiado pequeño para el área, y especificar el punto focal moviendo un círculo o especificando las posiciones izquierda y superior. También puede borrar los medios desde aquí. Solo el Selector de punto focal está disponible para videos.

Este ejemplo muestra un fondo fijo. La imagen permanece en su lugar mientras el texto se desplaza, creando un efecto de paralaje.

Este es el fondo repetido. Es bueno para crear patrones interesantes con imágenes pequeñas.

Dimensiones

Especifique la altura en píxeles ingresándola en el campo. Esto funciona igual que la herramienta de arrastre en la parte inferior de la imagen.

Cubrir

El bloque de cubierta tiene muchas opciones para la superposición. Seleccione un color prefabricado y elija su opacidad. Elija entre un color sólido o un degradado. Verás los cambios en tiempo real. Si ha elegido mostrar un color en lugar de una imagen, puede cambiar el color aquí. Este ejemplo muestra un color sólido.

También puede elegir un color personalizado. Esto abre un selector de color donde puede usar el color dentro de la ventana, seleccionar la escala de color con un control deslizante o ingresar los códigos hexadecimales, RGB o HSL.

La opción de degradado le permite seleccionar los dos colores que se mostrarán. Elija entre lineal o radial. También puede establecer la opacidad de los colores. Seleccioné radial en este ejemplo.

Avanzado

Avanzado incluye dos campos. La primera es una opción para un ancla HTML. Esto proporciona una dirección web especial solo para Cover Block. El segundo es un campo para agregar clases CSS adicionales. Esto le permite crear CSS personalizado para diseñar su bloque. El estilo que ha seleccionado también aparece en este campo.

Consejos y prácticas recomendadas para utilizar el bloque de cubierta de forma eficaz

Para las imágenes, use la configuración de medios en la barra lateral para mostrar la parte de la imagen que desea mostrar.

Utilice imágenes grandes con la opción de ancho completo para crear títulos de sección.

Cambie a varias columnas para el primer plano y agregue imágenes, texto y botones para crear llamadas a la acción.

Utilice superposición y colores de texto que sean fáciles de leer sobre la imagen o el color de fondo.

Transforma el bloque en un grupo si quieres controlar el color del borde.

Utilice las opciones de alineación para colocar el Bloque de portada en su contenido o diferenciarlo.

Establezca la configuración de posicionamiento del contenido para crear algunas imágenes interesantes y atraer la atención del lector.

Utilice Fondo fijo para crear un efecto de paralaje.

Utilice imágenes pequeñas con fondo repetido para crear patrones de fondo interesantes.

Preguntas frecuentes sobre el bloque de cubierta

¿Qué es el Cover Block?

Este es un bloque que le permite agregar medios o color al fondo y otros bloques al primer plano.

¿Qué lo hace diferente de otros bloques?

Puede contener otros bloques. Puede agregar otros bloques al primer plano. Crea paralaje, patrones, etc.

¿Se puede transformar en otros bloques?

Si. Se puede transformar en un bloque de imágenes. Elimina cualquier otro bloque que haya agregado a su área de contenido.

Para qué se puede usar?

Puede usar el Bloque de portada para crear un fondo con una llamada a la acción, usarlo para crear un título sobre una sección, crear carteles, secciones de héroes o cualquier cosa que desee tener una imagen o video de fondo.

Conclusión

Ese es nuestro vistazo al Cover Block. Este bloque tiene algunas de las características más interesantes y es una excelente opción para crear encabezados, títulos, CTA, fondos de paralaje y más. Es fácil de usar y puede hacer que su sitio web se destaque más que la mayoría de los bloques. Su capacidad para crear imágenes interesantes lo convierte en uno de mis bloques favoritos de WordPress.

Queremos escuchar de ti. ¿Usas el Cover Block? Cuéntanos tu experiencia en los comentarios.

Imagen destacada a través de fourSage / shutterstock.com