Imagen de portada vs. Imagen destacada en el editor de bloques de WordPress (Guía para principiantes)

Cuando empecé a usar WordPress, a menudo confundía las imágenes destacadas con las imágenes de portada. Como resultado, algunas de mis primeras publicaciones de blog no dieron en el clavo. O les faltaban elementos visuales clave, o las imágenes estaban mal colocadas, lo que dejaba el diseño un poco desajustado.

Por suerte, aprendí rápidamente que estos dos tipos de imágenes cumplen funciones únicas e importantes.

Las imágenes de portada se utilizan dentro de tu contenido para establecer el tono y atraer a los lectores. Por el contrario, las imágenes destacadas actúan como un resumen visual, mostrando la esencia de tu publicación antes de que siquiera se abra.

En esta guía, compartiré todo lo que he aprendido sobre las imágenes de portada y las imágenes destacadas en el editor de bloques de WordPress.

Aquí tienes un resumen rápido de lo que cubriré en esta guía:

• ¿Qué es una imagen de portada?
• ¿Qué es una imagen destacada?
• Imagen de portada vs. Imagen destacada en el editor de bloques de WordPress
• Cómo agregar una imagen de portada en WordPress
• How to Add a Featured Image in WordPress
• Preguntas frecuentes sobre imágenes de portada y destacadas
• Guías expertas para usar imágenes en WordPress

¿Qué es una imagen de portada?

Una imagen de portada es una imagen ancha que colocas en cualquier lugar dentro del contenido de una publicación o página.

Es un bloque específico que se utiliza para dividir largos fragmentos de texto y crear un inicio visual para una nueva sección, a menudo con texto escrito encima.

Son especialmente comunes en sitios web que dependen en gran medida de la narración o del contenido visual, como viajes, estilo de vida y portafolios.

Por ejemplo, un blogger podría usar una imagen de portada para introducir un nuevo capítulo en un artículo largo. Los especialistas en marketing a menudo las usan para crear banners de llamada a la acción de ancho completo, y los fotógrafos pueden usarlas para mostrar una impresionante pieza de portafolio dentro de un estudio de caso.

El bloque 'Portada' en WordPress te permite agregar una imagen de portada. También te permite agregar texto y superposiciones de color a tus imágenes.

También puedes personalizar estas superposiciones para que coincidan con los colores de tu sitio o establecer el ambiente para diferentes secciones de contenido. Más adelante en el artículo, te mostraré más sobre esta opción de personalización.

Para obtener el mejor aspecto, recomiendo usar imágenes de portada de 1920 × 1080 píxeles. Este tamaño asegura que las imágenes sean de alta calidad y llenen bien el área superior de tus publicaciones.

¿Qué es una imagen destacada?

Una imagen destacada es como la cara de tu publicación de blog, proporcionando una representación visual que atrae a los lectores.

También conocida como miniatura de publicación, aparece en tu página de inicio y en las páginas de archivo de tu blog. También aparece en las fuentes de redes sociales cuando se comparte un artículo.

Estas imágenes están diseñadas para ser visualmente atractivas, animando a los lectores a hacer clic y explorar tu blog de WordPress o sitio web.

Por ejemplo, en WPBeginner, mi equipo y yo nos aseguramos de que cada imagen destacada sea única, manteniendo al mismo tiempo el estilo coherente de nuestra marca.

Ten en cuenta que las imágenes destacadas dependen del tema de WordPress que uses, ya que el tema decide el mejor tamaño para estas imágenes.

Esto se debe a que los temas tienen diseños predefinidos, como cuadrículas o listas de publicaciones en tu página de inicio y páginas de archivo, y requieren tamaños de imagen consistentes para mantener un diseño limpio y profesional.

Por ejemplo, muchos temas optan por una relación de aspecto estándar de 16:9, utilizando tamaños como 680 × 382 píxeles. Algunos temas incluso pueden usar imágenes destacadas como imágenes de encabezado, con dimensiones como 1200 × 675 píxeles.

Si necesitas información más detallada, consulta esta guía completa sobre los tamaños de imagen en WordPress.

Imagen de portada vs. Imagen destacada en el editor de bloques de WordPress

Para que las diferencias sean aún más claras, aquí tienes una comparación rápida lado a lado de una imagen de portada frente a una imagen destacada:

Característica	Imagen de portada	Imagen destacada
Propósito principal	Crear pausas visuales y resaltar secciones dentro de una publicación.	Representar el artículo completo en páginas de inicio, archivos y redes sociales.
Ubicación	En cualquier lugar dentro del contenido de la publicación o página.	Mostrado por tu tema en páginas fuera de la publicación en sí.
Cómo se agrega	Usando el bloque 'Portada' en el editor de contenido.	Usando la configuración de 'Imagen destacada' en la barra lateral de la publicación.
Características clave	Puede tener superposiciones de texto, efectos de paralaje y filtros.	La apariencia y el tamaño son controlados por tu tema de WordPress.

Cómo agregar una imagen de portada en WordPress

El editor de bloques de WordPress, también conocido como Gutenberg, facilita mucho la adición de imágenes de portada usando el práctico bloque de portada.

Para empezar, necesitas crear una nueva entrada yendo a Entradas » Añadir nueva.

También puedes editar el que ya tienes navegando a Entradas » Todas las entradas, buscando la entrada que deseas editar y haciendo clic en el título de la entrada para abrirla en el editor.

En el editor de publicaciones, haz clic en el botón '+' para agregar un nuevo bloque y selecciona el bloque 'Portada' de la lista.

Encontrarás el bloque ‘Portada’ en la pestaña ‘Medios’. Alternativamente, también puedes escribir ‘/portada’ en el campo de búsqueda de bloques para encontrarlo fácilmente.

Después de seleccionar el bloque ‘Portada’, lo verás aparecer en el editor de contenido. Ahora estás listo para añadir tu imagen de portada.

Simplemente arrastra y suelta tu imagen o video favorito en el área del bloque. Alternativamente, puedes presionar el botón ‘Subir’ para seleccionar un archivo de tu computadora.

Y si ya tienes algo genial en tu biblioteca de medios, haz clic en el botón ‘Biblioteca de medios’ para elegir una imagen de tu galería de medios.

Presiona el botón ‘Seleccionar’ para añadir tu imagen a la entrada.

Ahora, es hora de personalizarla.

Simplemente haz clic en la imagen y se abrirá una barra de herramientas para hacer ajustes. El panel de la derecha ofrece aún más opciones.

Empecemos añadiendo un título. Solo haz clic en el área ‘Escribe un título…’ en medio de tu imagen de portada y escribe tu texto.

Tendrás opciones de formato útiles que aparecerán encima del texto para personalizarlo.

A continuación, revisa el panel del lado derecho para ver configuraciones adicionales.

Aquí verás dos pestañas: ‘Configuración’ y ‘Estilos’.

En la pestaña ‘Configuración’, puedes personalizar las opciones de diseño. Por defecto, el diseño está configurado a ancho completo, así que puedes dejar esta configuración como está.

Luego, elige entre un fondo fijo o repetido para que se ajuste a tu diseño. Un fondo fijo es perfecto para crear un efecto de paralaje, lo que le da a tu imagen una sensación dinámica. Un fondo repetido es útil cuando usas imágenes en mosaico.

Luego, ajusta el punto focal de la imagen para resaltar las partes esenciales. También puedes establecer la resolución para elegir qué tan nítidas y claras quieres que sean tus imágenes.

A continuación, ve a la pestaña 'Estilos' y ajusta la opacidad de la superposición. Esto se refiere a cuán transparente es una capa de color sobre tu imagen.

Por defecto, está configurada al 50% de transparencia, pero puedes ajustarla para que se adapte al ambiente de tu publicación. Esto ayuda a asegurar que el texto siga siendo fácil de leer, al mismo tiempo que te permite controlar cuánta cantidad de color se muestra.

Por último, puedes experimentar con filtros para cambiar el estilo de tu imagen. Prueba diferentes para encontrar el que mejor se adapte a tu publicación.

Para aquellos que les gusta ser creativos, sumérgete en la configuración Avanzada para agregar CSS personalizado y darle a tu imagen de portada una sensación única.

¡Y eso es todo! Siéntete libre de repetir estos pasos para agregar más imágenes de portada si tu publicación las necesita, creando una experiencia de lectura dinámica y atractiva.

Una vez que hayas terminado, siéntete libre de previsualizar y publicar tu publicación para asegurarte de que todo se vea bien en el front-end.

Cómo agregar una imagen destacada en WordPress

Agregar una imagen destacada a tu publicación de WordPress es una forma sencilla de hacer que resalte. El proceso es casi el mismo que agregar una imagen de portada.

Ya seas nuevo en el blogging o necesites un rápido repaso, aquí te explicamos cómo hacerlo.

Para empezar, abre la publicación que deseas editar. El cuadro meta de Imagen Destacada se encuentra en la derecha.

Simplemente haz clic en la opción ‘Establecer imagen destacada’ para empezar.

Ahora, agreguemos tu imagen destacada.

Puedes subir una nueva imagen usando el cargador de arrastrar y soltar o seleccionando una imagen de tu biblioteca de medios.

Después de eso, puedes agregar un título y texto alternativo (importante para SEO y para usuarios con lectores de pantalla) para tu imagen destacada, y luego haz clic en el botón 'Establecer imagen destacada'. ¡Has agregado exitosamente una imagen destacada a tu artículo!

Para obtener instrucciones más detalladas, puedes leer nuestra guía para principiantes sobre cómo agregar imágenes destacadas en WordPress.

Después de agregar tu imagen destacada, puedes personalizarla. Sin embargo, las opciones de personalización dependerán del tipo de tema de WordPress que estés utilizando.

En este paso, exploraré dos métodos para personalizar tus imágenes destacadas: usando un personalizador de temas y el Editor de Sitio Completo (FSE).

Usando el Personalizador de Temas

Este método funciona para temas clásicos en general, pero usaré el tema Sydney para este artículo. Sydney ofrece opciones de diseño fáciles de usar que facilitan la mejora de la apariencia de tu sitio.

Para comenzar, primero necesitas instalar y activar el tema. Si necesitas ayuda, lee la guía de mi equipo sobre cómo instalar un tema de WordPress.

A continuación, comienza navegando a tu panel de WordPress y yendo a Apariencia » Personalizar. Esto abrirá el Personalizador.

Aquí, puedes ajustar muchos aspectos de la presentación visual de tu sitio, incluida tu imagen destacada.

Dentro del Personalizador, también puedes explorar secciones como 'Encabezado' para acceder a la configuración relacionada con tus imágenes destacadas.

También puedes ajustar los ajustes preestablecidos del encabezado y el diseño móvil. Una vez que estés satisfecho con los cambios, haz clic en 'Publicar' en la parte superior izquierda para guardarlos.

Para más detalles, no dudes en consultar esta guía sobre cómo usar el personalizador de temas.

Usando un Editor de Sitio Completo (FSE)

Para aquellos que usan temas basados en bloques, el Editor de Sitio Completo (FSE) te permite personalizar tus imágenes destacadas. Los pasos a continuación muestran cómo cambiar el estilo global y de todo el sitio para todas tus imágenes destacadas.

Ten en cuenta que esta es una configuración global. Para ajustes más específicos, también puedes editar plantillas individuales como la plantilla 'Publicación única'.

Comienza dirigiéndote a Apariencia » Editor desde tu panel de administración de WordPress. Esto abrirá el editor del sitio. Una vez que estés en el editor, ve a Navegación » Estilos.

Luego, desplázate hacia abajo y elige "Bloques" de la lista.

Esto abrirá la lista de bloques que puedes personalizar dentro del editor.

A continuación, busca el bloque de 'Imagen destacada'. Para encontrarlo más rápido, puedes escribir "imagen destacada" en la barra de búsqueda.

Aquí, verás las opciones de personalización para tu imagen destacada, incluyendo el cambio de las dimensiones (relleno y margen).

También puedes agregar el borde, la sombra y el radio de la imagen. Siéntete libre de experimentar con estas configuraciones y ver cómo afectan la apariencia de tu imagen destacada.

Una vez que estés satisfecho con los cambios, tómate un momento para previsualizarlos antes de publicar. Esto asegura que todo se vea perfecto en todos los dispositivos.

Si necesitas más información, consulta nuestra guía completa para principiantes sobre la edición completa del sitio de WordPress.

Preguntas frecuentes sobre imágenes de portada y destacadas

Aquí tienes respuestas a algunas preguntas comunes que nuestro equipo recibe sobre el uso de imágenes de portada y destacadas en WordPress.

¿Puedo usar la misma imagen tanto para la portada como para la imagen destacada?

Sí, absolutamente. Es una práctica común establecer tu imagen destacada y luego usar esa misma imagen en un bloque de Portada en la parte superior de tu publicación. Esto crea una experiencia visual coherente para tus lectores desde el momento en que hacen clic en el enlace hasta que comienzan a leer.

¿Por qué el texto de mi imagen de portada es difícil de leer?

Esto suele suceder porque no hay suficiente contraste entre el color de tu texto y la imagen de fondo. Puedes solucionarlo ajustando la superposición de color en la configuración del bloque de Portada.

Una superposición más oscura con texto claro (o viceversa) hace que sea mucho más legible.

¿Qué sucede si no establezco una imagen destacada para mi publicación?

Si no estableces una imagen destacada, tu publicación puede aparecer como un espacio en blanco en la página de inicio o en las páginas de archivo de tu blog.

Cuando el artículo se comparte en redes sociales, la plataforma podría tomar una imagen aleatoria de la página o no mostrar ninguna imagen, lo que puede afectar la interacción.

¿El texto que agrego en una imagen de portada afecta mi SEO?

El texto que colocas en un bloque de Portada es tratado como un párrafo o encabezado normal por Google, por lo que se indexa y puede contribuir al SEO de tu publicación. Sin embargo, el título principal de tu página y los encabezados dedicados (H2, H3) tienen un impacto mucho mayor.

¿Puede una publicación tener más de una imagen destacada?

Por defecto, WordPress solo permite una imagen destacada por publicación. Sin embargo, puedes usar un plugin como All in One SEO para establecer una imagen diferente específicamente para las plataformas de redes sociales.

Esto te permite tener una imagen destacada estándar para tu sitio y una personalizada optimizada para Facebook o Twitter.

Guías expertas para usar imágenes en WordPress

Echa un vistazo a estas útiles herramientas y consejos para mejorar aún más tus imágenes de WordPress:

• Los Mejores Plugins y Herramientas de Imágenes Destacadas para WordPress (Comparativa)
• Cómo recortar y editar miniaturas de publicaciones de WordPress
• Cómo crear tamaños de imagen adicionales en WordPress
• Cómo agregar una imagen principal en WordPress (funciona para todos los temas)
• Texto alternativo de imagen vs. Título de imagen en WordPress – ¿Cuál es la diferencia?
• Cómo optimizar imágenes para el rendimiento web sin perder calidad
• Formas de prevenir el robo de imágenes en WordPress

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.