Cómo añadir una imagen destacada en WordPress (3 métodos sencillos) 

Puedes añadir una imagen destacada a cualquier sitio de WordPress en menos de 15 minutos, y se mostrará correctamente en dispositivos móviles sin necesidad de código adicional.

Una imagen heroica es el banner grande que aparece en la parte superior de tu página de inicio o página de destino con texto y un botón superpuesto. Es lo primero que ven los visitantes, por lo que, cuando está bien hecho, comunica tu mensaje al instante.

Cuando empecé con los sitios de WordPress, mis imágenes principales se veían perfectas en el ordenador, pero se veían mal en el móvil. El texto se superponía, se recortaban partes importantes y el diseño se veía desordenado.

Después de crear docenas de páginas de aterrizaje, he aprendido lo que realmente funciona. En esta guía, te mostraré tres métodos sencillos basados en tu tipo de tema, y todas las opciones son compatibles con dispositivos móviles y no requieren conocimientos técnicos.

Prepara primero tu imagen principal

El tamaño y el formato de archivo adecuados evitan que se rompan los diseños y se ralentice la carga.

Aprendí esto por las malas después de subir imágenes de héroe que eran demasiado grandes y ralentizaban mi página. Ahora siempre preparo las imágenes antes de subirlas.

Utiliza 1920 × 1080 píxeles para la mayoría de los temas. Si deseas una sección principal más corta, utiliza 1600 × 900 píxeles. Mantén el tamaño del archivo por debajo de 250 KB utilizando TinyPNG.

Dimensión	Caso práctico
1920 × 1080 píxeles	Héroe estándar de ancho completo (recomendado)
1600 × 900 píxeles	Sección de héroe más corta

Utiliza JPG para fotos y PNG para gráficos con texto.

Elige imágenes con espacios negativos donde pueda colocarse el texto. Las imágenes oscuras funcionan mejor con texto claro. Por lo que he visto, muchos principiantes eligen imágenes bonitas que hacen que los titulares sean imposibles de leer. Ahora busco imágenes con espacios vacíos claros donde el texto pueda respirar.

Una vez establecidos los conceptos básicos, veamos cómo añadir realmente tu imagen principal.

Método 1: Usando la configuración de tu tema (más fácil para los temas clásicos)

Muchos temas de WordPress incluyen una opción de sección destacada en el Personalizador que no requiere plugins ni creadores de páginas.

Cuando trabajo en un proyecto que ya tiene un tema instalado, siempre compruebo primero esta opción. Es la forma más rápida de añadir una imagen destacada si tu tema lo admite.

No todos los temas tienen esta función, así que si no la ves, pasa al método 2 o 3. Este método solo funciona en la página que tu tema designe, que suele ser la página de inicio.

Paso 1: Abre el personalizador de WordPress.

En tu panel de control de WordPress, ve aApariencia → Personalizar.

El Personalizador se abre en una nueva pantalla con la vista previa de tu sitio a la derecha.

Paso 2: Busca la configuración de la sección Hero.

Busca secciones etiquetadas como«Héroe»,«Cabecera»,«Página principal» o similares.

Verás una barra lateral a la izquierda con diferentes opciones de personalización. La configuración del héroe puede estar en una sección como «Configuración de la página de inicio» u «Opciones de encabezado».

He observado que los desarrolladores de temas nombran estas secciones de forma diferente, por lo que a veces hay que buscar un poco. Si no ves nada obvio, comprueba primero las secciones «Página principal» o «Página de inicio».

Paso 3: Sube tu imagen principal

Haz clic en la opción de la sección de héroes y busca el botón para subir imágenes.

Haga clic enSeleccionar imagenoCargar y, a continuación, elija la imagen principal que haya preparado en su ordenador.

Paso 4: Añade el título y el texto del botón.

Introduzca su titular en el campo de texto proporcionado.

Añade el texto del botón y la URL a la que debe enlazar. La mayoría de los temas te ofrecen campos tanto para la etiqueta del botón como para el enlace de destino.

Paso 5: Publicar los cambios

Haga clic en el botónPublicarsituado en la parte superior de la barra lateral del Personalizador.

Tu imagen destacada ya está disponible en tu página de inicio. Visita tu sitio web en una nueva pestaña para verla.

Método 2: Usando el bloque de portada de WordPress (ideal para temas de bloques)

El bloque Portada es una función del editor de bloques de WordPress que te permite añadir una imagen destacada a todo lo ancho con texto superpuesto en cualquier página sin necesidad de plugins.

Utilizo este método a menudo porque me da flexibilidad para añadir imágenes destacadas a cualquier página, no solo a la página de inicio. He creado páginas de destino con el bloque Portada, en las que cada página tiene su propia sección destacada única.

El bloque Cover es compatible con dispositivos móviles de forma predeterminada, lo que me ahorra tener que probar y corregir los diseños móviles más adelante.

Paso 1: Abra el Editor de páginas.

Ve a la página donde quieres la imagen principal y haz clic enEditar.

Para la mayoría de las personas, esta es la página de inicio. Verás el editor de bloques de WordPress con el contenido de tu página.

Paso 2: Añadir un bloque de cubierta en la parte superior

Haz clic en el icono+en la parte superior de la página y busca «Portada».

Selecciona el bloque Portada de los resultados. Aparecerá un bloque Portada de marcador de posición en la parte superior de la página.

Paso 3: Sube tu imagen principal

Haz clic en«Subir»dentro del bloque «Portada» y selecciona la imagen principal desde tu ordenador.

La imagen llena el bloque Portada como fondo. Verás un texto predeterminado en el centro del bloque.

Paso 4: Añade tu titular

Haga clic dentro del bloque Portada y comience a escribir su titular.

Para cambiar el texto a un encabezado, haz clic en el menú desplegable del párrafo en la barra de herramientas del bloque y seleccionaEncabezado. Elige H1 o H2 según la estructura de tu página.

Paso 5: Añadir un bloque de botones

Pulsa Intro después del titular para crear una nueva línea, escribe/botóny vuelve a pulsar Intro.

Aparecerá un bloque de botón debajo del título. Escriba el texto del botón y añada la URL del enlace en la barra de herramientas que aparece al seleccionar el botón.

Paso 6: Ajustar el color del texto y la superposición

Con el bloque Cubierta seleccionado, mira el panel de configuración de bloques en la parte derecha de la pantalla.

Desplácese hacia abajo hasta encontrar el control deslizante de opacidad de la superposición. Arrástrelo para oscurecer o aclarar el fondo detrás del texto.

Normalmente establezco la opacidad de la superposición entre el 30 % y el 50 % para obtener un buen contraste. Si trabajo con una imagen principal oscura, puedo aclarar la superposición. Si la imagen es brillante y recargada, añado una superposición más oscura para que el texto destaque.

Para cambiar el color del texto, selecciona el título o el botón y, a continuación, elige un color en la configuración del texto del panel derecho.

Paso 7: Actualizar la página

Haz clic en el botónGuardar o Actualizaren la esquina superior derecha. A continuación, visita tu página para ver tu imagen destacada en directo.

Si lo deseas, puedes añadir un efecto de paralaje más adelante (la imagen permanece fija mientras se desplaza el contenido) activando la opción «Fondo fijo» en la configuración del bloque Portada. Yo lo utilizo con moderación, ya que puede hacer que algunas imágenes destacadas se vean raras en dispositivos móviles.

Método 3: Usar un creador de páginas como SeedProd (funciona con cualquier tema)

Los creadores de páginas de WordPress te permiten controlar las secciones principales mediante la función de arrastrar y soltar, y suelen funcionar independientemente del tema de WordPress que utilices.

Utilizo este método cuando quiero tener más control del que ofrece el bloque Cover, o cuando trabajo con un tema que no tiene ajustes hero. La vista previa en vivo facilita ver exactamente cómo quedan los espacios y los colores antes de publicar.

SeedProdes un creador de sitios web de WordPress de arrastrar y soltar en el que confían más de un millón de sitios web. Puede utilizarlo para crear temas personalizados de WordPress, páginas de destino personalizadas y tiendas WooCommerce personalizadas sin necesidad de código.

Lo utilizo habitualmente en mis propios sitios web, y la vista previa en vivo me ha permitido detectar problemas de espaciado que no habría notado hasta después de la publicación. Esa retroalimentación visual me ahorra mucho tiempo.

Paso 1: Instalar SeedProd

Para empezar, instala y activa SeedProd en tu sitio web de WordPress. Hay una versión gratuita que funciona para secciones hero básicas, pero para esta guía usaré SeedProd Pro porque ofrece más opciones de personalización.

Puedes seguir estas instrucciones para obtener ayuda sobre cómo instalar SeedProd.

Paso 2: Crear una nueva página de destino

En tu panel de control, ve aSeedProd → Páginas de aterrizaje.

Haga clic en el botónAñadir nueva página de destino. Aparecerá una pantalla en la que se le pedirá que introduzca el nombre de la página y, a continuación, que elija una plantilla.

Paso 3: Elige una plantilla con una sección destacada.

Explora las plantillas y elige una que tenga un diseño de sección principal que te guste.

Las plantillas ahorran tiempo de configuración porque la sección principal ya está estructurada. Solo tendrás que sustituir la imagen y el texto provisionales por los tuyos propios.

Normalmente empiezo con una plantilla en lugar de crear desde cero. Aunque al final cambie el diseño, la plantilla me proporciona un punto de partida sólido con el espaciado adecuado y la jerarquía de elementos ya definida.

Haga clic en el icono de marca de verificación de la plantilla que desee y, a continuación, haga clic enUsar esta plantilla.

Paso 4: Abre la sección Hero para editarla.

El editor visual SeedProd se abre con la plantilla que hayas elegido cargada.

Haga clic en la sección principal en la parte superior de la página. Cuando se selecciona, aparecen unos marcadores de color alrededor de la sección.

Paso 5: Sube tu imagen principal

En el panel de configuración de la izquierda, busca la sección «Configuración del fondo».

Seleccione la imagen existente y, a continuación, haga clic en el icono de imagen para elegir una imagen de su biblioteca multimedia.

La imagen aparece inmediatamente como fondo de la sección principal. A esto me refiero cuando digo que la vista previa en vivo es útil. Puedes ver de inmediato si la imagen funciona con el texto existente o si necesitas ajustar la superposición.

Paso 6: Edita el título y el botón.

Haga clic en el texto del titular en la sección principal y comience a escribir su nuevo titular.

En este ejemplo, voy a sustituir el bloque del formulario de suscripción por un bloque de botón. Para ello, basta con eliminar el bloque existente haciendo clic en el icono de la papelera.

A continuación, desde la barra lateral de bloques, arrastra y suelta el bloque de botón en tu página.

Paso 7: Ajustar la superposición y los colores

Con la sección del héroe seleccionada, desplázate hacia abajo en el panel izquierdo para encontrar los controles de superposición.

Puedes elegir un color de superposición personalizado y, a continuación, atenuar el fondo para que el texto y los botones destaquen claramente sobre la imagen principal.

Para cambiar el tamaño o el color del texto, haz clic en el título o en el botón y ajusta la configuración en el panel izquierdo.

Paso 8: Vista previa en el móvil

Haga clic en los iconos del selector de dispositivos en la parte inferior del editor (escritorio, tableta, móvil).

Cambia a la vista móvil para ver cómo se ve tu imagen principal en la pantalla de un teléfono. Si es necesario, puedes ajustar el tamaño y el espaciado del texto específicamente para dispositivos móviles.

Siempre compruebo la vista móvil antes de publicar, porque lo que se ve bien en el ordenador no siempre se ve igual en el móvil. He visto titulares que eran demasiado grandes y se salían de la pantalla, o botones que parecían diminutos y difíciles de pulsar en el móvil.

Para obtener una guía completa sobre cómo personalizar el resto de tu página, consulta nuestro tutorial sobre cómo crear una página de destino en WordPress.

Paso 9: Publicar la página

Cuando estés satisfecho con la sección principal, haz clic enGuardaren la esquina superior derecha. A continuación, haz clic en la flecha desplegable situada junto a Guardar y seleccionaPublicar.

Si quieres superposiciones degradadas, efectos de partículas o divisores de formas, esas opciones están disponibles en la configuración de la sección principal. No son necesarias, pero yo he utilizado superposiciones degradadas cuando necesitaba un contraste adicional para texto claro sobre una imagen brillante.

Cuando hayas publicado tu página, visualízala en tu navegador para ver tu nueva sección principal en vivo.

Solución de problemas comunes relacionados con las imágenes destacadas

La mayoría de los problemas con las imágenes heroicas se deben a dimensiones incorrectas, contraste deficiente o conflictos con el CSS del tema.

He tenido que lidiar con todos estos problemas en algún momento. A continuación explico cómo solucionarlos.

Problema	Por qué ocurre	Cómo solucionarlo
La imagen se ve borrosa o pixelada.	Las dimensiones de la imagen son demasiado pequeñas.	Vuelve a subirla con un tamaño mínimo de 1920 × 1080 píxeles. Las imágenes pequeñas que se estiran a todo el ancho pierden calidad.
El texto es difícil de leer.	Contraste insuficiente	Añade una capa oscura (con una opacidad del 30-50 %) en la configuración de tu bloque o constructor, o cambia el texto a blanco.
La imagen principal no ocupa todo el ancho.	El tema restringe el ancho o la alineación no establecida.	Habilita la alineación a ancho completo en la configuración del bloque Portada. Si utilizas un constructor de páginas, configura la sección a ancho completo.
La imagen se recorta de forma extraña en el móvil.	El punto focal está descentrado.	Utiliza imágenes con sujetos centrados o ajusta la configuración del punto focal en tu creador de páginas.

Preguntas frecuentes sobre cómo añadir imágenes destacadas en WordPress

¿Qué tamaño debe tener una imagen destacada en WordPress?

1920 × 1080 píxeles funciona para la mayoría de los temas y se adapta bien a los dispositivos móviles. Si quieres una sección principal más corta, utiliza 1600 × 900 píxeles. Mantén el tamaño del archivo por debajo de 250 KB después de la compresión para que no ralentice la carga de la página.

¿Puedo utilizar un vídeo como fondo principal en lugar de una imagen?

Sí, el bloque Portada y la mayoría de los creadores de páginas admiten fondos de vídeo. Mantén los archivos de vídeo por debajo de los 5 MB e incluye siempre una imagen alternativa para los usuarios de dispositivos móviles, ya que los fondos de vídeo a menudo no se reproducen en los teléfonos para ahorrar datos.

¿Las imágenes heroicas ralentizan mi sitio web?

Solo si el tamaño del archivo es demasiado grande. Comprime tu imagen principal a menos de 250 KB antes de subirla. Las imágenes principales grandes de más de 1 MB retrasarán la carga de la página y perjudicarán el SEO. Utiliza una herramienta como TinyPNG para comprimir sin perder calidad.

¿Cómo puedo cambiar una imagen de héroe existente en mi sitio de WordPress?

Depende del método que hayas utilizado para añadirlo. Para la configuración del tema, ve a Apariencia → Personalizar. Para el bloque de portada, edita la página y selecciona el bloque. Para los creadores de páginas, abre la página en el creador y haz clic en la sección hero.

¿Cuál es la diferencia entre una imagen destacada y un banner destacado?

Los términos significan lo mismo. Ambos se refieren a la imagen grande situada en la parte superior de una página con texto y botones superpuestos. Algunas personas dicen «banner hero» cuando la imagen ocupa todo el ancho, pero no hay ninguna diferencia técnica.

Una imagen destacada hace que tu página de inicio resulte más atractiva cuando transmite un mensaje claro con un impacto visual fuerte. Elige el método que mejor se adapte a tu tema, pruébalo en el móvil y no le des demasiadas vueltas al diseño.

La imagen principal adecuada, con texto legible y una llamada a la acción clara, anima a los visitantes a dar el siguiente paso. He visto cómo secciones principales sencillas superaban a otras más elaboradas porque se centraban en la claridad en lugar de en la complejidad.

Guías relacionadas:

• Mejores prácticas de página de aterrizaje para lograr tasas de conversión increíbles
• Cómo ocultar imágenes en la vista móvil en WordPress
• Mejores prácticas de llamada a la acción para páginas de destino de alta conversión
• Cómo añadir fácilmente un botón a la cabecera de WordPress
• Cómo atenuar una imagen de fondo en WordPress sin CSS

Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en unirte a la conversación en YouTube, X y Facebook para obtener más consejos y contenidos útiles para hacer crecer tu negocio.