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 puedes colocar bloques sobre otros bloques. Tiene más opciones que la mayoría de los bloques. Saber cómo usar el Bloque de portada puede mejorar mucho el diseño de su sitio web.
En este artículo, veremos qué hace Cover Block y veremos sus configuraciones y opciones. También veremos algunas mejores prácticas de cómo usarlo y veremos las preguntas frecuentes.
Suscríbete a nuestro canal de Youtube
Para agregar el Bloque de portada a sus páginas y publicaciones, seleccione el ícono de 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 /cover 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 selecciona 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 cobertura
El Bloque de portada tiene dos áreas con configuraciones y opciones. La primera es la barra de herramientas de portada. La segunda son las opciones de Cover Block en la barra lateral derecha.
Barra de herramientas de bloque de portada
Al hacer clic en cualquier parte del bloque de portada, se abre su barra de herramientas.
Cambiar tipo o estilo de 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 cursor, se muestra una vista previa. Estoy flotando sobre la imagen. La imagen elimina los bloques de contenido que tiene en la superposición.
Arrastra o mueve
Tome la herramienta de arrastre (6 puntos) para arrastrar el bloque a cualquier lugar que desee. 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. Izquierda y derecha envuelven el bloque 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 en su altura completa en lugar de cambiar su tamaño.
Aplicar filtro de duotono
Elija un duotono de sus opciones preseleccionadas. Uno se aplica a las sombras y el otro se aplica 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 Bloque de portada incluyen:
Ocultar más configuraciones: oculta la barra lateral derecha.
Copiar : copia el Bloque de portada para que pueda pegarlo en cualquier lugar dentro 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 portada para otro bloque.
Insertar después : agrega espacio debajo del bloque de portada para otro bloque.
Mover a : te permite mover el bloque moviendo una línea azul hacia arriba o hacia abajo con las teclas de flecha. Presiona enter y tu 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 barra de herramientas y la configuración de la barra lateral. Puedes transformarlo o añadir cualquier bloque. Esto le da muchas opciones para el contenido.
Seleccionar portada
Esto cierra la barra de herramientas de contenido y abre la barra de herramientas de Cover Block.
Cambiar el tamaño del bloque de portada
Cambie el tamaño de la imagen arrastrando el círculo en la parte inferior de la imagen.
Configuración del bloque de portada
Los ajustes de Cover Block se colocan 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 su barra lateral.
Estilos
Muestre el bloque con o sin borde. También puede configurar el valor predeterminado para mostrar el borde. Incluye una vista previa para que puedas ver cómo quedaría antes de seleccionarlo.
Espaciado
Agregue espacio a todos los lados o a lados específicos. Seleccione cada lado individualmente o conéctelos 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 puntos focales 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 un fondo repetido. Es bueno para crear patrones interesantes con imágenes pequeñas.
Dimensiones
Especifique la altura en píxeles introduciéndola en el campo. Esto funciona igual que la herramienta de arrastre en la parte inferior de la imagen.
Cubrir
El Bloque de portada 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 elegir el color dentro de la ventana, seleccionar la escala de color con un control deslizante o ingresar los códigos hexadecimal, 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. He seleccionado 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 el Bloque de portada. 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.
Sugerencias y mejores prácticas para usar el bloque de portada de manera efectiva
Para las imágenes, use la configuración de medios en la barra lateral para mostrar la parte de la imagen que desea mostrar.
Use 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 colores de superposición y de texto que sean fáciles de leer sobre la imagen o el color de fondo.
Transforme el bloque en un grupo si desea controlar el color del borde.
Utilice las opciones de alineación para establecer el Bloque de portada en su contenido o diferenciarlo.
Establezca la configuración de posicionamiento del contenido para crear algunas imágenes interesantes y llamar la atención del lector.
Utilice Fondo fijo para crear un efecto de paralaje.
Use imágenes pequeñas con Fondo repetido para crear patrones de fondo interesantes.
Preguntas frecuentes sobre el bloque de portada
¿Qué es el bloque de cobertura?
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 parallax, patrones, etc.
¿Se puede transformar en otros bloques?
Sí. Se puede transformar en un bloque de imagen . 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 en el fondo.
Conclusión
Esa es nuestra mirada al Bloque de Cubierta. 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 Bloque de Cubierta? Cuéntanos tu experiencia en los comentarios.
Imagen destacada a través de fourSage / shutterstock.com