Puedes añadir una imagen principal a cualquier sitio de WordPress en menos de 15 minutos, y se mostrará correctamente en dispositivos móviles sin necesidad de codificación adicional.
Una imagen principal es el gran banner 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 se hace bien, comunica tu mensaje al instante.
Cuando empecé con los sitios de WordPress, mis imágenes principales se veían perfectas en el escritorio pero se rompían en el móvil. El texto se superponía, las partes importantes se recortaban y el diseño se sentía desordenado.
Después de crear docenas de páginas de destino, he aprendido lo que realmente funciona. En esta guía, te mostraré tres métodos sencillos basados en tu tipo de tema, y cada opción es compatible con dispositivos móviles sin necesidad de conocimientos técnicos.
- Prepara tu imagen principal primero
- Método 1: Usar la configuración de tu tema (lo más fácil para temas clásicos)
- Método 2: Usar el Bloque de Portada de WordPress (Mejor para Temas de Bloques)
- Método 3: Usar un creador de páginas como SeedProd (funciona con cualquier tema)
- Solución de problemas comunes de imágenes principales
- Preguntas frecuentes sobre cómo añadir imágenes principales a WordPress
Prepara tu imagen principal primero
El tamaño y formato de archivo de imagen correctos evitan diseños rotos y cargas lentas.
Aprendí esto por las malas después de subir imágenes principales demasiado grandes que hicieron que mi página se arrastrara. Ahora siempre preparo las imágenes antes de subirlas.
Usa 1920x1080 píxeles para la mayoría de los temas. Si deseas una sección principal más corta, usa 1600x900 píxeles en su lugar. Mantén el tamaño de tu archivo por debajo de 250 KB usando TinyPNG.
| Dimensión | Caso de uso |
|---|---|
| 1920x1080 píxeles | Principal de ancho completo estándar (recomendado) |
| 1600x900 píxeles | Sección principal más corta |
Usa JPG para fotos y PNG para gráficos con texto.
Elige imágenes con espacio negativo donde el texto pueda ubicarse. Las imágenes oscuras funcionan mejor con texto claro. Por lo que he visto, muchos principiantes eligen imágenes hermosas que hacen que los titulares sean imposibles de leer. Ahora busco imágenes con espacio vacío claro donde el texto pueda respirar.
Con los conceptos básicos en su lugar, veamos cómo añadir realmente tu imagen principal.
Método 1: Usar la configuración de tu tema (lo más fácil para temas clásicos)
Muchos temas de WordPress incluyen una opción de sección principal en el Personalizador que no requiere plugins ni constructores de páginas.
Cuando trabajo en un proyecto que ya tiene un tema instalado, siempre busco primero esta opción. Es la forma más rápida de añadir una imagen principal si tu tema lo soporta.
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 designa, que suele ser la página de inicio.
Paso 1: Abrir el Personalizador de WordPress
En tu panel de WordPress, ve a Apariencia → Personalizar.
El Personalizador se abre en una nueva pantalla con una vista previa de tu sitio a la derecha.
Paso 2: Encontrar la Configuración de la Sección Principal
Busca secciones etiquetadas como Principal, Encabezado, Página de Inicio, o similar.
Verás una barra lateral a la izquierda con diferentes opciones de personalización. La configuración de la sección principal podría estar en una sección como "Configuración de la página de inicio" u "Opciones del encabezado".
He notado que los desarrolladores de temas nombran estas secciones de manera diferente, así que a veces tienes que buscar un poco. Si no ves nada obvio, busca primero en las secciones "Página de inicio" o "Inicio".
Paso 3: Subir tu Imagen Principal
Haz clic en la opción de la sección principal y busca un botón para subir imágenes.
Haz clic en Seleccionar imagen o Subir, luego elige tu imagen principal preparada desde tu ordenador.
Paso 4: Añadir tu Titular y el Texto del Botón
Introduce tu titular en el campo de texto proporcionado.
Añade el texto de tu botón y la URL a la que debe enlazar. La mayoría de los temas te dan campos tanto para la etiqueta del botón como para el enlace de destino.
Paso 5: Publicar los Cambios
Haz clic en el botón Publicar en la parte superior de la barra lateral del Personalizador.
Tu imagen principal ya está en vivo en tu página de inicio. Visita tu sitio en una nueva pestaña para verla.
Método 2: Usar el Bloque de Portada de WordPress (Mejor para Temas de Bloques)
El bloque de Portada es una función del editor de bloques de WordPress que te permite añadir una imagen principal a pantalla completa con superposición de texto en cualquier página sin necesidad de plugins.
Uso este método a menudo porque me da flexibilidad para añadir imágenes principales a cualquier página, no solo a la de inicio. He creado páginas de destino con el bloque de Portada donde cada página tiene su propia sección principal única.
El bloque de Portada es adaptable a móviles por defecto, lo que me ahorra tener que probar y corregir diseños para móviles más tarde.
Paso 1: Abrir el Editor de Páginas
Ve a la página donde quieres la imagen principal y haz clic en Editar.
Para la mayoría de la gente, 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 Portada en la Parte Superior
Haz clic en el icono + en la parte superior de la página y busca "Portada".
Selecciona el bloque de Portada de los resultados. Aparece un bloque de Portada de marcador de posición en la parte superior de tu página.
Paso 3: Subir tu Imagen Principal
Haz clic en Subir dentro del bloque de Portada y selecciona tu imagen principal desde tu ordenador.
La imagen llena el bloque Portada como fondo. Verás una indicación de texto predeterminada en el centro del bloque.
Paso 4: Añade tu titular
Haz clic dentro del bloque Portada y empieza a escribir tu titular.
Para cambiar el texto a un encabezado, haz clic en el menú desplegable de párrafo en la barra de herramientas del bloque y selecciona Encabezado. Elige H1 o H2 según la estructura de tu página.
Paso 5: Añade un bloque de botón
Pulsa Intro después de tu titular para crear una nueva línea, luego escribe /button y pulsa Intro de nuevo.
Aparece un bloque de botón debajo de tu titular. Escribe el texto del botón y añade la URL del enlace en la barra de herramientas que aparece cuando el botón está seleccionado.
Paso 6: Ajusta el color del texto y la superposición
Con el bloque Portada seleccionado, mira el panel de ajustes del bloque en el lado derecho de la pantalla.
Desplázate hacia abajo para encontrar el control deslizante de opacidad de la superposición. Arrástralo para oscurecer o aclarar el fondo detrás de tu texto.
Normalmente, establezco la opacidad de la superposición entre el 30 % y el 50 % para un buen contraste. Si estoy trabajando con una imagen principal oscura, puedo usar una superposición más clara. 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 tu titular o botón, luego elige un color de los ajustes de texto en el panel derecho.
Paso 7: Actualiza la página
Haz clic en el botón Guardar o Actualizar en la esquina superior derecha. luego, visita tu página para ver tu imagen principal en directo.
Puedes añadir un efecto de paralaje más tarde si quieres (la imagen permanece fija mientras el contenido se desplaza) activando el interruptor "Fondo fijo" en los ajustes del bloque Portada. Lo uso con moderación porque puede hacer que algunas imágenes principales se vean extrañas en el móvil.
Método 3: Usar un creador de páginas como SeedProd (funciona con cualquier tema)
Los creadores de páginas de WordPress te dan control de arrastrar y soltar sobre las secciones principales y a menudo funcionan independientemente del tema de WordPress que estés utilizando.
Uso este método cuando quiero más control del que ofrece el bloque Portada, o cuando trabajo con un tema que no tiene ajustes de sección principal. La vista previa en directo facilita ver exactamente cómo quedan el espaciado y los colores antes de publicar.
SeedProd es un creador de sitios web de WordPress de arrastrar y soltar en el que confían más de 1 millón de sitios web. Puedes usarlo para crear temas personalizados de WordPress, páginas de destino personalizadas y tiendas WooCommerce personalizadas sin ningún código.
Lo uso regularmente en mis propios sitios, y la vista previa en directo ha detectado problemas de espaciado que no habría notado hasta después de publicar. Esa retroalimentación visual me ahorra mucho tiempo.
Paso 1: Instala SeedProd
Para empezar, instala y activa SeedProd en tu sitio web de WordPress. Hay una versión gratuita que funciona para secciones principales 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: Crea una nueva página de destino
En tu panel de control, ve a SeedProd → Páginas de destino.
Haz clic en el bot ilde{o}n A tilde{a}dir nueva p ilde{a}gina de destino. Ver ilde{a}s una pantalla que te pide introducir el nombre de tu p ilde{a}gina y luego elegir una plantilla.
Paso 3: Elegir una plantilla con una secci ilde{o}n principal
Explora las plantillas y elige una que tenga una disposici ilde{o}n de secci ilde{o}n principal que te guste.
Las plantillas ahorran tiempo de configuraci ilde{o}n porque la secci ilde{o}n principal ya est ilde{a} estructurada. Simplemente reemplazar ilde{a}s la imagen y el texto de marcador de posici ilde{o}n con los tuyos.
Normalmente empiezo con una plantilla en lugar de construir desde cero. Incluso si termino cambiando la disposici ilde{o}n, la plantilla me da un punto de partida s ilde{o}lido con el espaciado adecuado y la jerarqu ilde{i}a de elementos ya resueltos.
Haz clic en el icono de marca de verificaci ilde{o}n en la plantilla que desees, luego haz clic en Usar esta plantilla.
Paso 4: Abrir la secci ilde{o}n principal para editar
El editor visual de SeedProd se abre con tu plantilla elegida cargada.
Haz clic en la secci ilde{o}n principal en la parte superior de la p ilde{a}gina. Aparecen manejadores de colores alrededor de la secci ilde{o}n cuando est ilde{a} seleccionada.
Paso 5: Subir tu imagen principal
En el panel de configuraci ilde{o}n de la izquierda, busca la configuraci ilde{o}n del fondo de la secci ilde{o}n.
Selecciona la imagen existente, luego haz clic en el icono de imagen para elegir una imagen de tu biblioteca de medios.
La imagen aparece inmediatamente como fondo de la secci ilde{o}n principal. Esto es a lo que me refiero con que la vista previa en vivo es ilde{u}til. Puedes ver de inmediato si la imagen funciona con el texto existente o si necesitas ajustar la superposici ilde{o}n.
Paso 6: Editar el titular y el bot ilde{o}n
Haz clic en el texto del titular en la secci ilde{o}n principal y empieza a escribir tu nuevo titular.
En este ejemplo, estoy reemplazando el bloque de formulario de optin con un bloque de bot ilde{o}n. Para hacer esto, simplemente elimina el bloque existente haciendo clic en el icono de la papelera.
Luego, desde la barra lateral de bloques, arrastra y suelta el bloque de bot ilde{o}n en tu p ilde{a}gina.
Paso 7: Ajustar la superposici ilde{o}n y los colores
Con la secci ilde{o}n principal seleccionada, despl ilde{a}zate hacia abajo en el panel izquierdo para encontrar los controles de superposici ilde{o}n.
Puedes elegir un color de superposici ilde{o}n personalizado y luego atenuar el fondo para que tu texto y botones destaquen claramente de tu imagen principal.
Para cambiar el tama ilde{n}o o el color del texto, haz clic en el titular o en el bot ilde{o}n y ajusta la configuraci ilde{o}n en el panel izquierdo.
Paso 8: Vista previa en m ilde{o}vil
Haz clic en los iconos del selector de dispositivos en la parte inferior del editor (escritorio, tableta, m ilde{o}vil).
Cambia a la vista m ilde{o}vil para ver c ilde{o}mo queda tu imagen principal en la pantalla de un tel ilde{e}fono. Puedes ajustar el tama ilde{n}o del texto y el espaciado espec ilde{i}ficamente para m ilde{o}vil si es necesario.
Siempre reviso la vista m ilde{o}vil antes de publicar porque lo que se ve bien en escritorio no siempre se traduce bien. He detectado titulares demasiado grandes que se sal ilde{i}an de la pantalla, o botones que parec ilde{i}an diminutos y dif ilde{i}ciles de tocar en m ilde{o}vil.
Para una gu ilde{i}a completa sobre c ilde{o}mo personalizar el resto de tu p ilde{a}gina, consulta nuestro tutorial sobre c ilde{o}mo crear una p ilde{a}gina de destino en WordPress.
Paso 9: Publicar la p ilde{a}gina
Cuando est ilde{e}s satisfecho con la secci ilde{o}n principal, haz clic en Guardar en la esquina superior derecha. Luego haz clic en la flecha desplegable junto a Guardar y selecciona Publicar.
Si deseas superposiciones de degradado, 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 he usado superposiciones de degradado 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 acción.
Solución de problemas comunes de imágenes principales
La mayoría de los problemas con las imágenes principales se deben a dimensiones incorrectas, poco contraste o conflictos de CSS del tema.
He lidiado con todos estos problemas en algún momento. Aquí te explico cómo solucionarlos.
| Problema | Por qué sucede | Cómo solucionarlo |
|---|---|---|
| La imagen se ve borrosa o pixelada | Dimensiones de la imagen demasiado pequeñas | Vuelve a cargarla con un mínimo de 1920 × 1080 píxeles. Las imágenes pequeñas estiradas a todo el ancho pierden calidad. |
| El texto es difícil de leer | Falta de contraste | Añade una superposición oscura (30-50 % de opacidad) 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 está configurada | Habilita la alineación de ancho completo en la configuración del bloque de portada. Si usas un constructor de páginas, configura la sección como ancho completo. |
| La imagen se recorta de forma extraña en el móvil | El punto focal está descentrado | Usa imágenes con sujetos centrados o ajusta la configuración del punto focal en tu constructor de páginas. |
Preguntas frecuentes sobre cómo añadir imágenes principales a WordPress
¿Qué tamaño debe tener una imagen principal en WordPress?
1920 × 1080 píxeles funciona para la mayoría de los temas y se adapta bien al móvil. Si deseas una sección principal más corta, usa 1600 × 900 píxeles en su lugar. 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 tu página.
¿Puedo usar video como fondo principal en lugar de una imagen?
Sí, el bloque de portada y la mayoría de los constructores de páginas admiten fondos de video. Mantén los archivos de video por debajo de 5 MB y siempre incluye una imagen de respaldo para los usuarios de móviles, ya que los fondos de video a menudo no se reproducen en los teléfonos para ahorrar datos.
¿Las imágenes principales 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. Usa una herramienta como TinyPNG para comprimir sin perder calidad.
¿Cómo cambio una imagen principal existente en mi sitio de WordPress?
Depende del método que hayas utilizado para añadirla. 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 constructores de páginas, abre la página en el constructor y haz clic en la sección principal.
¿Cuál es la diferencia entre una imagen principal y un banner principal?
Los términos significan lo mismo. Ambos se refieren a la imagen grande en la parte superior de una página con texto y superposición de botones. Algunas personas dicen "banner principal" cuando la imagen ocupa todo el ancho, pero no hay diferencia técnica.
Una imagen principal hace que tu página de inicio sea más atractiva cuando comunica un mensaje claro con una imagen potente. Elige el método que se adapte a tu tema, pruébalo en el móvil y no te compliques demasiado con el diseño.
La imagen principal correcta con texto legible y una llamada a la acción clara hace que los visitantes den el siguiente paso. He visto que las secciones principales sencillas superan a las elaboradas porque se centraron en la claridad sobre la complejidad.
Guías relacionadas:
- Mejores prácticas para páginas de destino con tasas de conversión increíbles
- Cómo ocultar imágenes en la vista móvil en WordPress
- Mejores prácticas de llamadas 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 tu WordPress
- Cómo atenuar una imagen de fondo en WordPress sin CSS
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
