La diferencia entre imágenes cubiertas e imágenes destacadas en WordPress

Cuando WordPress 5.0 incorporó el editor de Gutenberg, también trajo algunas características nuevas a WordPress. Varias de esas características se ven en forma de bloques. Uno de esos bloques se llama Portada, que coloca una imagen cubierta con varias características personalizables dentro del contenido de su publicación o página.

Por supuesto, WordPress todavía incluye la opción de especificar una imagen destacada para páginas y publicaciones. Esto plantea varias preguntas. ¿Son iguales las imágenes cubiertas y las destacadas? Si no es así, ¿qué son y cómo se utilizan? ¿Cual es la diferencia? En este artículo, analizaremos la imagen cubierta frente a la imagen destacada en WordPress y responderemos cada una de estas preguntas.

Imágenes cubiertas

Una imagen de portada es una foto grande que generalmente se coloca en la parte superior de una página o publicación. También se les ha llamado imágenes de encabezado. Representan el contenido. Es lo primero que ve el lector al ver el contenido. Ayuda a establecer el estado de ánimo o describir el artículo visualmente para que el lector tenga una idea de qué esperar. También se pueden utilizar en toda la página o publicación para ayudar a presentar la siguiente sección.

Las imágenes de portada son fáciles de agregar a su contenido en Gutenberg e incluyen algunas características de estilo que no están disponibles de forma nativa para la imagen destacada.

Gutenberg incluye un nuevo bloque llamado Portada que le permite crear una imagen de portada para sus publicaciones o páginas. Encontrará el bloque dentro de la pestaña Bloques comunes en la lista de bloques.

El bloque Portada le permite agregar una imagen con una superposición y texto. Sube tu imagen o selecciona tu imagen de la biblioteca de medios. También puede usar un video si lo desea, que se reproducirá detrás del texto y la superposición. Esto es ideal para crear encabezados llamativos. Esto es algo que no se puede hacer con una imagen destacada sin utilizar un complemento de terceros.

Una vez que haya agregado la imagen o el video, verá características para el texto, configuraciones de fondo fijas y superposición. Tiene algunos ajustes de alineación sobre la imagen.

Para agregar el título, simplemente coloque el cursor donde dice "Escribir título ..." y comience a escribir. También tiene opciones para usar negrita, cursiva, agregar un enlace o tachar el texto. En la configuración sobre la imagen, puede alinear el texto.

Fondo fijo agrega una función de paralaje para las imágenes. La imagen permanece en su lugar mientras el texto se desplaza. Esta función no está disponible para videos, pero todas las demás configuraciones sí lo están.

Agregue un color de superposición seleccionando el color que desee de las opciones, o seleccione el círculo multicolor para seleccionar un color personalizado.

El color personalizado incluye un selector de color con un control deslizante y muestra el valor del color en hexadecimal o en RGB.

La opacidad de fondo cambia la cantidad de opacidad de la superposición, lo que le permite elegir mostrar más de la imagen y menos del color de la superposición, o más de la superposición y menos de la imagen. En este ejemplo, puse la opacidad en 80. Puedes ver que hay una imagen allí, pero no puedes ver muchos detalles.

En este ejemplo, puse la opacidad en 20. Se puede ver mucho más de la imagen, pero todavía tiene un toque del color de la superposición.

La imagen también tiene una opción de ancho completo en la configuración en la parte superior de la imagen. Esto es ideal para crear encabezados de imágenes o videos o crear hermosas introducciones de secciones.

Los bloques de cubierta abren muchas posibilidades de diseño al brindarle la posibilidad de agregar imágenes con texto, superposiciones y paralaje. La imagen / video, el texto, los colores y el paralaje ayudan a crear el ambiente del artículo y atraer al público objetivo. Puede utilizar varios bloques de portada en todo el contenido para introducir nuevas secciones (que normalmente se identifican con el texto del encabezado) o simplemente agregar algo de atractivo visual a los enlaces o productos de la página.

Imágenes destacadas

La imagen destacada proporciona la miniatura de la publicación. Estas miniaturas se muestran en cualquier lugar que muestre una imagen destacada, como páginas de inicio que muestran publicaciones de blog, páginas de archivo de blog y publicaciones individuales. La imagen presentada representa el artículo en sí. Se utilizan para ayudar a despertar el interés e informar al lector sobre el tipo o propósito del artículo.

También se usaron como la imagen predeterminada que se muestra cuando el contenido se comparte en las redes sociales, a menos que esa imagen se sobrescriba manualmente con un complemento como Yoast, como se ve en el ejemplo anterior.

La imagen destacada se agrega en la configuración de la publicación o la página. Haga clic en Establecer imagen destacada y elija o cargue su imagen en la biblioteca de medios.

Temas como Twenty Nineteen incluyen una superposición para la imagen destacada. Puede elegir los colores en el personalizador de temas en Colores. El azul es el color predeterminado, pero puede usar el control deslizante para seleccionar casi cualquier color.

También puede ajustar las superposiciones de imágenes destacadas cuando utilice creadores de páginas como Divi y Extra. En este ejemplo, estoy ajustando el icono de superposición de imagen destacada y el color de superposición de desplazamiento para el módulo de blog.

Uso conjunto de imágenes de portada e imágenes destacadas

Puede usar la imagen de portada y la imagen destacada juntas en la misma página o publicación. En este ejemplo, tengo ambos en el artículo. Idealmente, no se sentarían uno al lado del otro de esta manera, pero esto es solo para mostrar que pueden aparecer dentro de la publicación. Sin embargo, hay ocasiones en las que querrás usar la imagen de portada como imagen destacada.

Si usa la misma imagen destacada que la imagen de portada, las imágenes aparecerán dos veces dentro de su contenido. En realidad, muestra dos cosas diferentes: una imagen destacada y una imagen de portada, pero ha seleccionado la misma imagen para ambas.

Afortunadamente, hay varias cosas que puede hacer para usar la misma imagen para ambos sin que la imagen aparezca dos veces. Algunos temas, como Divi y muchos otros, le permiten excluir la imagen destacada del contenido.

Si está utilizando Divi o Extra, en el menú del panel vaya a Divi (o Extra )> Opciones de tema > Diseño y desactive Colocar pulgares en la publicación en la pestaña Diseño de publicación única . Esta opción también está disponible en la pestaña Diseño de página única , por lo que puede personalizar la configuración de acuerdo con sus necesidades.

En este ejemplo, la imagen destacada es la misma que la imagen de portada. Agregué una superposición de desplazamiento, que estoy demostrando colocando el cursor sobre la publicación de la derecha.

La publicación en sí solo muestra la imagen de portada. La imagen destacada no se muestra dentro del contenido de la publicación.

Extra incluye una opción para ocultar la imagen destacada en la publicación individualmente. Esto le da más control sobre cómo WordPress maneja las imágenes destacadas en publicaciones y páginas. En la configuración de la publicación, haga clic en Ocultar imagen destacada en la publicación .

También puede ocultar la imagen destacada en la publicación con un complemento como Ocultar imagen destacada, un complemento gratuito en el repositorio de WordPress. Elija ocultar todas las imágenes destacadas en publicaciones o páginas, u ocultarlas individualmente en las páginas y publicaciones en sí. En el momento en que probé el complemento, no era compatible con Twenty Nineteen, pero funcionó muy bien con Twenty Seventeen y otros.

Agrega una opción a las páginas y publicaciones para ocultar la imagen destacada. Esto es genial si desea mostrar la imagen destacada de forma predeterminada, pero luego ocultarla en páginas o publicaciones que usan una imagen de portada. Esto le brinda más control de diseño para mostrar imágenes destacadas.

Pensamientos finales

Ese es nuestro vistazo a la imagen cubierta frente a la imagen destacada en WordPress. Al principio, parecen ser iguales o similares, pero en la práctica son muy diferentes.

Las imágenes destacadas atraen al lector al artículo. Un artículo solo tendrá una imagen destacada en el sitio, que se mostrará en cualquier lugar que muestre miniaturas de publicaciones, pero se puede reemplazar por otra imagen para mostrar en las redes sociales usando complementos como Yoast. Algunos temas, como Twenty Nineteen, y constructores como Divi, incluyen personalizaciones para imágenes destacadas.

Las imágenes de portada son en realidad parte del artículo y pueden ayudar a mejorar el compromiso con las publicaciones. El artículo puede tener múltiples imágenes de portada o videos en todo su contenido. Son excelentes para proporcionar un diseño visual y para separar secciones del artículo si desea usar imágenes en lugar de solo texto de encabezado. Las imágenes de portada son especialmente interesantes debido a las opciones de ancho completo, texto, paralaje y superposición que están integradas en WordPress. Me encanta que pueda mostrar videos. Hasta Gutenberg, tener estas características requería un complemento o un creador de páginas.

Las imágenes cubiertas y las imágenes destacadas son excelentes para agregar diseño visual a su contenido. Tienen diferentes opciones y propósitos, y puede usarlos por separado o juntos.

Queremos escuchar de ti. ¿Cómo se utilizan las imágenes cubiertas y las imágenes destacadas en WordPress? Háznoslo saber en los comentarios.

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