Cómo agregar una imagen principal en WordPress (funciona para todos los temas)

¿Quieres que tu sitio de WordPress se vea más profesional? Una imagen principal es tu mejor opción.

Una imagen principal es lo primero que la gente ve cuando llega a tu sitio. Y solo tienes unos 3 segundos para captar su atención, por lo que es importante hacerlo bien.

Hemos estado creando sitios web de WordPress durante más de una década, y recordamos cuando las imágenes principales se volvieron importantes por primera vez.

En ese entonces, luchamos como todos los demás. Las imágenes se veían raras: demasiado grandes en escritorio, aplastadas en móvil o simplemente rotas. Pero ahora lo hemos convertido en una ciencia.

Te mostraremos las formas más fáciles de agregar una imagen principal a tu sitio de WordPress. Ya sea que te guste usar constructores de páginas o prefieras el editor de bloques, te tenemos cubierto.

Primero lo primero: Prepara tu imagen principal de WordPress

Necesitas una imagen impactante y que llame la atención antes de agregar una sección principal a tu sitio de WordPress. La imagen principal correcta muestra instantáneamente a los visitantes de qué trata tu sitio web.

• Elige una herramienta de diseño: Canva es fácil de usar y viene con muchas plantillas. Si lo prefieres, prueba otras alternativas a Canva para encontrar la herramienta que te guste.
• Establece el tamaño correcto: Las imágenes principales deben ser anchas y no muy altas. Un tamaño común es de 1920x400 a 600 píxeles, pero consulta tu tema para conocer los requisitos exactos.
• Muestra tu mensaje: Elige una imagen que represente tu sitio web o marca. Podría ser un producto, una fotografía o incluso un video a pantalla completa.
• Deja espacio para texto: Asegúrate de que haya espacio para un titular, subtítulo o botón para que tu mensaje sea fácil de leer.
• Inspírate: Mira otros sitios web de tu sector para ver diseños de secciones principales y obtener ideas para la tuya.
• Optimiza para la web: Las imágenes grandes ralentizan tu sitio. Comprime tu imagen principal a menos de 250 KB usando herramientas como TinyPNG o un plugin como EWWW Image Optimizer.

Una vez que tu imagen principal esté lista y optimizada, puedes pasar a agregarla a tu sitio web de WordPress.

Cómo agregar una imagen principal en WordPress

Al investigar para este tutorial, nos dimos cuenta rápidamente de que agregar una imagen principal a los temas clásicos de WordPress no siempre es sencillo. El proceso puede variar mucho dependiendo de tu tema, ya que algunos tienen secciones principales integradas mientras que otros no.

Toma el tema Sydney, por ejemplo. Viene con una sección principal lista para usar, lo que facilita las cosas.

Si estás intentando agregar una imagen principal a tu sitio existente, pero tu tema no tiene una función integrada para ello, esto puede ser frustrante.

Para aquellos que recién están comenzando y no les importa elegir un tema nuevo, les recomendamos cambiar a uno con una sección principal integrada, ya que podría ahorrarles tiempo a largo plazo.

Si buscas recomendaciones de temas, puedes consultar nuestras selecciones expertas de los mejores y más populares temas de WordPress del mercado.

Alternativamente, podrías usar un creador de páginas para crear una sección principal personalizada, incluso si tu tema no tiene una integrada, o para reemplazar una existente. Te mostraremos cómo en el método 3.

Antes de hacer cambios importantes, siempre sugerimos usar un sitio de staging para probar a fondo los nuevos temas. De esta manera, puedes estar seguro de que estás tomando la decisión correcta para tu sitio.

Si no estás seguro de cómo hacerlo, consulta nuestra guía sobre cómo cambiar un tema de WordPress correctamente.

¿Contento con tu tema clásico actual? No hay problema. Salta al método 4, donde te mostraremos cómo agregar una sección principal usando un plugin. Este enfoque funciona con cualquier tema, por lo que puedes crear una imagen principal impactante sin rediseñar todo tu sitio.

Puedes usar los enlaces rápidos a continuación para saltar a tu método preferido:

Método 1: Usando el Personalizador de Temas (Solo Temas Clásicos)

Si estás utilizando un tema clásico que tiene una sección destacada como Sydney, puedes personalizar tu imagen destacada a través del Personalizador de temas. Simplemente ve a Apariencia » Personalizar en tu panel de WordPress para comenzar.

💡 Nota rápida: Si falta el Personalizador de temas en tu panel, probablemente estés usando un tema de bloques y deberías saltar al método 2.

La barra lateral debería tener varias opciones para personalizar tu tema clásico.

En Sydney, la configuración para personalizar tu sección destacada se llama 'Área destacada', pero este menú específico variará según el tema. Continúa y haz clic en él.

El tema Sydney tiene 3 menús para crear tu sección destacada: Tipo de destacado, Carrusel de destacado y Medios destacados.

Solo usaremos los dos primeros porque son suficientes para agregar una sección destacada para nuestro propósito.

Primero, selecciona 'Tipo de destacado'.

En Tipo de destacado, se te pedirá que elijas qué tipo de medio vas a agregar a tu sección destacada.

Puedes elegir entre un slider a pantalla completa, un video, una imagen o ningún encabezado.

Para este tutorial, seleccionaremos un control deslizante de pantalla completa para la sección principal de nuestra página de inicio y de todo nuestro sitio web. Esta opción es excelente si deseas mostrar varias imágenes, texto y botones en tu sección principal. Si prefieres usar una sola imagen, elegirías la opción 'Imagen' en su lugar.

Ahora, regresa al menú Área destacada y selecciona 'Carrusel de destacado'.

Aquí, abre la pestaña 'Primer carrusel' y haz clic en el botón 'Seleccionar imagen'.

Esto abrirá tu biblioteca de medios de WordPress, donde puedes subir una nueva imagen o seleccionar una existente para tu sección principal.

Una vez que hayas subido una imagen, puedes desplazarte hacia abajo y reemplazar el texto en los campos de título y subtítulo.

Deberías ver los cambios que realices reflejados automáticamente en la vista previa de la página.

Si deseas agregar más de una imagen a la sección principal, puedes repetir los mismos pasos con el resto de las diapositivas.

De lo contrario, puedes desplazarte hacia abajo hasta el menú 'Botón del slider'.

Aquí, puedes cambiar la URL y el texto del botón de llamada a la acción.

Después de eso, desplázate hacia abajo nuevamente hasta la pestaña 'Configuración del slider'.

Aquí es donde puedes ajustar la velocidad del slider, elegir mostrar el mismo texto en todas las diapositivas y hacer que el comportamiento del slider sea adaptable.

Si deseas cambiar el color del botón, regresa al menú principal del Personalizador de temas.

A continuación, haz clic en 'General'.

Ahora deberías ver varios menús para personalizar la configuración general de tu tema.

Aquí, simplemente haz clic en 'Botones'.

Ahora, puedes desplazarte hacia abajo hasta las secciones 'Estado predeterminado' y 'Estado al pasar el cursor', donde puedes cambiar el color del botón según su estado.

Para modificar el color, simplemente haz clic en la herramienta de selección de color y elige un nuevo color.

La mayoría de los temas de WordPress también te permiten personalizar los colores y la tipografía de tu diseño. Sin embargo, los cambios que realices generalmente se aplicarán a todo tu sitio web, no solo a tu sección principal, así que tenlo en cuenta.

En cualquier caso, así es como se ve nuestra imagen principal, hecha con el tema Sydney:

Método 2: Usando el Editor de Sitio Completo (Solo Temas de Bloques)

Si usas un tema de bloques, entonces podrías usar el bloque de Portada del Editor de Sitio Completo para crear fácilmente una imagen principal en WordPress. No se necesita ningún plugin.

Paso 1: Abre el Editor de Sitio Completo

Primero, ve a Apariencia » Editor en tu administrador de WordPress.

Ahora, verás los menús principales del editor.

Digamos que quieres agregar tu imagen principal solo a tu página de inicio.

En ese caso, simplemente haz clic en la vista previa del tema en el lado derecho de la página.

Si deseas agregar la imagen principal a otra página, una plantilla de página personalizada o un patrón de bloques, puedes consultar nuestra guía sobre Edición de Sitio Completo en WordPress para obtener más información.

Paso 2: Agrega el Bloque de Portada a tu Página/Plantilla

Dado que la sección principal generalmente se coloca encima del pliegue (la parte superior de tu página que aparece cuando los visitantes llegan al sitio), entonces debes asegurarte de estar en la ubicación correcta. La sección principal suele estar justo debajo del encabezado.

Una vez que hagas eso, es posible que necesites ajustar los bloques existentes en esa ubicación. A menudo, querrás agregar un nuevo bloque de Grupo justo encima de esos bloques existentes para dejar espacio para tu sección principal.

En nuestro caso, simplemente eliminaremos los bloques que ya estaban en nuestra página de inicio. Si quieres hacer lo mismo, puedes hacer clic en el botón 'Vista de lista' en el lado izquierdo de la página.

Luego, busca el(los) bloque(s) que necesitas eliminar para hacer espacio para tu sección principal. Después de localizarlo, simplemente haz clic en el botón de tres puntos y selecciona 'Eliminar'.

Ahora, selecciona el bloque que estaba justo debajo del(los) bloque(s) que acabas de eliminar.

Luego, haz clic en el botón de tres puntos y elige 'Agregar antes'. Esto agregará un bloque justo encima de ese bloque y debajo de la sección del encabezado.

En esta etapa, puedes hacer clic en el botón '+' que aparece en la supuesta sección principal.

Necesitas agregar un bloque de Grupo aquí, ya que esto te permitirá administrar la imagen principal, el texto, el botón y otros elementos como un solo bloque cuando sea necesario.

Ahora puedes seleccionar un contenedor para agregar tus bloques.

Como demostración, hemos elegido el contenedor básico de Grupo.

A continuación, simplemente haz clic en el botón '+' dentro del bloque Grupo.

Aquí, procede a seleccionar el bloque 'Portada'.

Después de eso, verás 3 opciones para agregar la imagen de fondo principal: subirla desde tu computadora, agregarla desde tu biblioteca de medios o usar tu imagen destacada.

En nuestro ejemplo, haremos clic en 'Biblioteca de medios' y seleccionaremos una imagen existente.

Si la carga de la imagen es exitosa, verás tu imagen principal de inmediato. Sin embargo, hay algunos ajustes que debes hacer.

Paso 3: Configura la Imagen en tu Bloque de Portada

Primero, selecciona el bloque 'Portada' en sí para que aparezca su barra de herramientas encima.

Luego, haz clic en el botón 'Alinear' y elige 'Ancho completo'.

A continuación, puedes hacer clic en el icono de duotono para cambiar el filtro de duotono que se aplica a tu imagen.

Si no te gusta, puedes deshabilitarlo más tarde, lo cual te mostraremos cómo hacer.

Después de eso, puedes hacer clic en el icono de posición del contenido para cambiar dónde aparecerán tu texto y botón en la imagen.

Hemos decidido ir con el lado izquierdo-central, ya que el punto focal de la imagen está a la derecha.

Ahora, haz clic en el icono 'Configuración' y cambia a la pestaña 'Bloque'.

Aquí, desplázate hacia abajo hasta Configuración. Aquí es donde opcionalmente puedes agregar un efecto parallax a tu imagen ('Fondo fijo') o usar un fondo repetido.

También puedes desplazarte hacia arriba y cambiar al icono de estilos.

Aquí es donde puedes establecer la opacidad de la superposición en 0 para que tu imagen no use ningún filtro.

Si deseas cambiar la altura de la imagen, puedes insertar un número en píxeles en el campo 'Altura mínima de la portada'.

Hemos decidido establecer nuestra imagen en 400 píxeles.

Siéntete libre de personalizar otras configuraciones como borde y sombra, espaciado de bloques, relleno y margen, tipografía, etc.

Paso 4: Agrega Bloques a tu Bloque de Portada

Ahora estamos listos para agregar más elementos a tu imagen principal. Es posible que veas un texto de marcador de posición como 'Escribe título' ya dentro del bloque de Portada.

Aquí tienes un consejo profesional: En lugar de agregar un encabezado directamente, haz clic en el botón '+' y agrega primero otro bloque de Grupo. Piensa en este bloque de Grupo como un contenedor para tu texto y botón.

Ponerlos dentro de un contenedor hace que sea mucho más fácil controlar su alineación y estilo juntos como una sola unidad.

Luego, elige el contenedor deseado como en el paso anterior.

Una vez que hagas eso, puedes hacer clic en el botón '+' nuevamente para agregar un bloque de Encabezado.

Ahora, puedes insertar el titular de tu página.

Siéntete libre de cambiar el color, tamaño y dimensiones del texto en la barra lateral de configuración del bloque si lo prefieres.

Después de haber hecho eso, puedes presionar la tecla 'Enter'.

En esta etapa, siéntete libre de agregar un subtítulo justo debajo del encabezado.

Finalmente, puedes agregar un botón de llamada a la acción a tu imagen principal.

Para hacer esto, simplemente presiona la tecla ‘Enter’ de nuevo, haz clic en el botón ‘+’ y selecciona el bloque ‘Botones’.

A continuación, simplemente inserta el texto del botón.

Y para agregar un enlace al botón, simplemente haz clic en el ícono de enlace en la barra de herramientas e inserta tu URL en el campo correspondiente.

Luego, haz clic en el botón de flecha.

Si necesitas consejos y trucos para crear botones de alta conversión, puedes consultar nuestra guía sobre las mejores prácticas de llamado a la acción.

Y eso es prácticamente todo. Puedes agregar más elementos a tu imagen principal o personalizarla según tus preferencias.

Una vez que estés satisfecho con el aspecto de la sección principal, simplemente haz clic en ‘Guardar’.

Así es como se ve nuestro bloque de Portada:

Método 3: Usar un Page Builder (Páginas de Aterrizaje/Temas Personalizados)

Digamos que estás en las etapas iniciales de configuración de tu sitio web. O, estás buscando crear una página de destino personalizada sin estar limitado por las limitaciones de tu tema. En ese caso, te recomendamos usar un constructor de páginas que venga con plantillas con secciones principales, como SeedProd.

SeedProd es un constructor de páginas de arrastrar y soltar que hemos utilizado a menudo para crear páginas personalizadas para WPBeginner y nuestros otros sitios de marca, incluidos Duplicator y OptinMonster.

Si bien es fácil de usar, también ofrece muchas funciones de edición de WordPress integradas que van más allá de las capacidades predeterminadas del Personalizador de temas o del editor de bloques estándar (Gutenberg/Editor de sitio completo).

Debido a eso, hemos podido ahorrar tiempo y dinero en la instalación de plugins de terceros solo para agregar funciones especiales a nuestros temas o páginas de destino.

SeedProd viene en una versión gratuita y de pago. Definitivamente puedes usar la versión gratuita para crear una página de destino personalizada, pero las opciones de plantillas y bloques son bastante limitadas. Por esa razón, recomendamos actualizar a un plan de pago para obtener más funciones, incluido el generador de contenido con IA.

Para obtener más información, consulta nuestra reseña de SeedProd y nuestra comparación entre Elementor vs. Divi vs. SeedProd, que son constructores de páginas populares.

Paso 1: Configura SeedProd

Para usar SeedProd, necesitas instalar el plugin de WordPress proporcionado en tu cuenta de SeedProd en tu área de administración. Una vez que el plugin esté activo, se te pedirá que ingreses tu clave de licencia, la cual puedes obtener de la página de tu cuenta de SeedProd.

Después de ingresarla, simplemente haz clic en el botón 'Verificar clave'.

Con SeedProd, tienes 2 opciones: puedes agregar una sección principal a una página de destino o a ciertas páginas dentro de un tema personalizado.

Para configurar tu página de destino o tema, puedes leer estas guías:

• Cómo crear un tema personalizado de WordPress sin código
• Cómo crear una página de destino en WordPress
• Cómo crear una página de captura en WordPress que convierta
• Cómo crear hermosas páginas de próxima aparición en WordPress

Para el resto del tutorial, usaremos la plantilla Menu Sales.

Paso 2: Personaliza tu Sección Principal

Una vez que hayas elegido una plantilla para tu tema o página de destino, accederás al editor de SeedProd.

La interfaz de edición de SeedProd consta de una vista previa de la página en el lado derecho y una barra lateral izquierda donde puedes agregar más bloques, personalizar un bloque/sección, deshacer/rehacer cambios, ver las capas de tu página y previsualizar tu sitio en dispositivos móviles o tabletas.

Dado que el tema de SeedProd ya incluye una sección principal (hero section), nuestro trabajo ya está a medio camino. Lo que necesitamos hacer es simplemente reemplazar la imagen, personalizarla y agregar más bloques a la sección principal si es necesario.

Alternativamente, podrías encontrar más diseños de secciones principales (hero sections) cambiando de la barra lateral de Bloques a la barra lateral de Secciones en el lado izquierdo. Luego, navega a 'Hero' y haz clic en el botón '+' en la plantilla de sección principal que deseas agregar a tu página.

SeedProd la insertará entonces en tu página.

Cambiemos primero la imagen principal (hero image).

Para hacer esto, haz clic en la sección superior que incluye la imagen principal. Sabrás que has seleccionado lo correcto cuando aparezca un cuadro morado de ‘Edición: Sección’ en la barra lateral izquierda.

Ahora, coloca el cursor sobre la imagen de fondo en la barra lateral.

Luego, haz clic en el ‘Icono de Medios’. Después de eso, puedes subir tu imagen principal desde tu computadora o la biblioteca de medios.

A continuación, necesitas elegir la posición de fondo que funcione mejor para tu imagen.

Encontramos que la opción ‘Posición Personalizada’ nos da el mejor control sobre la colocación de los puntos focales, así que elegiremos esa opción.

La opción de Posición Personalizada te da varias formas de configurar el fondo.

Para las posiciones X e Y, puedes cambiar cómo se posiciona la imagen vertical y horizontalmente.

La configuración de Adjunto tiene 2 opciones: Desplazar (sin paralaje) y Fijo (paralaje).

Si tu imagen es más pequeña que la sección principal pero quieres que toda la sección se llene con la imagen, entonces puedes repetir la imagen en toda esa sección. De lo contrario, simplemente elige ‘Sin repetición’.

En cuanto al tamaño de la imagen principal de WordPress, puedes elegir la opción ‘Automático’ si quieres que la imagen se ajuste automáticamente a la sección principal.

Siéntete libre de jugar con estas configuraciones para ver qué funciona mejor para tu imagen.

Otra cosa que puedes hacer es atenuar la imagen de fondo para que tu texto resalte mejor.

Para hacer esto, puedes arrastrar el control deslizante ‘Atenuar Fondo’ a tu nivel de opacidad deseado.

Si deseas cambiar el color de fondo superpuesto, simplemente haz clic en el botón selector de color 'Color de superposición'.

Luego, simplemente selecciona tu color preferido.

Ahora, desplacémonos hacia arriba y cambiemos a la configuración ‘Avanzada’. Aquí es donde puedes agregar todo tipo de efectos geniales a tu sección principal.

Por ejemplo, puedes abrir la pestaña ‘Fondo de Partículas’ y agregar un fondo de partículas animadas a tu imagen. Esto puede hacer que tu sección principal sea mucho más impresionante y única.

A continuación, puedes agregar un divisor de forma personalizado en la parte superior y/o inferior de tu sección principal yendo al menú ‘Divisor de Forma’.

Hacer esto puede agregar más interés visual a tu sección principal. Además, si agregas un divisor de forma divertida en la parte inferior, puedes animar a los usuarios a desplazarse por tu página de destino y aprender más sobre tu oferta.

Paso 3: Agrega y Personaliza Más Bloques a tu Sección Principal

Con tu imagen principal lista, agreguemos más bloques a la sección principal.

Como la nuestra ya tiene un bloque de encabezado, haremos clic en él y lo personalizaremos. Cuando esté seleccionado, deberías ver que la barra lateral izquierda ahora tiene un banner naranja que dice ‘Editando: Encabezado’.

Lo genial de SeedProd es que tiene un generador de contenido de IA incorporado.

Por lo tanto, si no estás seguro de qué encabezado usar, podrías hacer clic en el botón ‘Editar con IA’ para obtener algunas ideas.

Ahora deberías ver una ventana emergente donde puedes escribir tu contenido con IA.

Queremos generar un encabezado completamente nuevo, así que haremos clic en el botón ‘Nuevo Prompt’ para hacerlo.

A continuación, simplemente dile a la IA qué tipo de contenido deseas que genere.

Luego, haz clic en el botón ‘Generar Texto’.

La IA generará el contenido por ti.

Pero aún puedes cambiarlo modificando el tono, simplificando el lenguaje, haciendo el texto más largo o más corto, e incluso traduciéndolo a más de 50 idiomas.

Una vez que estés satisfecho con cómo se ve el encabezado, simplemente haz clic en ‘Insertar’.

Ahora, puedes desplazarte por la barra lateral izquierda.

Aquí es donde puedes cambiar la alineación del texto, el tamaño de fuente y la etiqueta del encabezado para que se ajusten a tus preferencias.

Si quieres que el texto destaque aún más, desplázate hacia arriba y cambia a la pestaña 'Avanzado'.

En el menú Estilos, haz clic en ‘Editar’ en la configuración de Tipografía. Aquí, puedes cambiar libremente la familia de fuentes, el interlineado, el espaciado entre letras y la capitalización del texto.

También puedes moverte un poco más abajo y agregar una sombra de texto al titular.

Aquí, hemos decidido crear una sombra de color personalizado para que el texto destaque aún más.

Para agregar un subtítulo debajo del titular, simplemente haz clic en el botón 'Bloques' en la barra lateral izquierda.

Esto te llevará a la biblioteca de bloques.

Ahora, simplemente arrastra y suelta el bloque 'Texto' justo debajo del titular.

La configuración del bloque de Texto es muy similar a la del bloque de Titular, por lo que puedes repetir los mismos pasos que antes para crear el subtítulo.

Para agregar un botón de llamada a la acción, necesitas arrastrar y soltar el bloque 'Botón' en la página.

Por lo general, se coloca justo debajo del subtítulo.

Una vez hecho esto, ingresa el texto de tu botón en el campo correspondiente.

También puedes agregar un subtexto justo debajo del texto principal del botón para dar más contexto.

Luego, desplázate hacia abajo y agrega un enlace a tu botón.

Siéntete libre de cambiar también la alineación y el tamaño del botón.

Ahora, regresa a la barra lateral y cambia a la pestaña 'Plantillas'.

Aquí es donde puedes cambiar el estilo de tu botón para que coincida mejor con tu diseño de WordPress.

Si no te gustan los diseños de plantilla predeterminados, cambia a la pestaña 'Avanzado'.

Aquí, puedes cambiar la tipografía, estilo, color, relleno, efecto de sombra, etc., del botón.

Siéntete libre de seguir personalizando tu plantilla hasta que se vea bien.

Cuando estés satisfecho, simplemente haz clic en el botón ‘Guardar’ en la parte superior y selecciona ‘Publicar’ para que la página esté activa.

Y eso es todo para agregar una imagen principal con un constructor de páginas.

Así se ve la sección principal en nuestro sitio de demostración:

Método 4: Usar el Plugin Hero Banner + Shortcode (Todos los Temas)

Este método final técnicamente funciona con todos los temas, pero lo recomendamos más a personas que usan un tema clásico sin una sección principal incorporada.

Para seguir este método, necesitarás instalar el plugin Hero Banner Ultimate. Para obtener instrucciones paso a paso, puedes consultar nuestra guía sobre cómo instalar un plugin de WordPress para principiantes.

Paso 1: Configura el Plugin Hero Banner

Una vez que el plugin esté activo, ve a Hero Banner » Add Hero Banner.

Después de eso, dale un título a tu banner principal. Este actuará como tu titular.

Una vez hecho, inserta algo de texto en el editor clásico visual que funcionará como tu subtítulo. Siéntete libre de cambiar el formato y el color aquí.

Ahora, desplázate hacia abajo hasta la sección ‘Hero Banner – Settings’.

Aquí, puedes elegir un diseño de banner. Si bien no puedes previsualizar el diseño en tiempo real dentro de la configuración del plugin, es fácil cambiar entre ellos más tarde en tu página real para encontrar el que más te guste.

Elegiremos el Diseño 1 para nuestro tutorial.

En cuanto al Tipo de Banner, puedes seleccionar ‘Background Image’ para una imagen principal, pero también puedes elegir ‘Background Video’ si tienes un video de pantalla completa para usar como principal.

A continuación, no olvides hacer clic en ‘Upload Image’ para agregar tu imagen desde la computadora o la biblioteca de medios.

En esta etapa, puedes configurar el tamaño de la imagen de fondo en ‘Cover’ para que la imagen sea de pantalla completa.

También querrás elegir ‘Scroll’ para el adjunto de la imagen de fondo para deshabilitar cualquier efecto de paralaje.

Desplázate hacia abajo hasta llegar a la Configuración del Color del Banner.

Aquí es donde puedes cambiar el color del titular (Color del Título) y del subtítulo (Color del Contenido). Simplemente haz clic en la herramienta de selección de color para hacerlo.

Además, es posible que desees agregar un color de superposición sobre la imagen, lo que puede ser útil para ajustar la legibilidad del texto contra la imagen.

Hemos decidido usar el color negro, con una opacidad de 0.5.

Vamos a configurar los ajustes de llamada a la acción.

Aquí, puedes insertar el texto y el enlace de tu botón. También puedes personalizar aún más la apariencia del botón usando el campo 'Botón – Clase 1', donde puedes agregar una clase CSS para un estilo personalizado.

Todo lo que necesitas hacer a continuación es desplazarte hacia arriba.

Después de eso, haz clic en ‘Publish.’

Vayamos ahora a Hero Banner » Hero Banner. Deberías ver ahora que tu imagen principal ha sido creada y el plugin ha generado un shortcode para que lo muestres.

Toma nota de este shortcode, ya que lo necesitaremos más tarde.

Paso 2: Encuentra el Selector CSS de la Sección de Encabezado de Tu Tema

Para mostrar la imagen principal, necesitamos encontrar una ‘dirección’ específica para la sección de encabezado de tu tema.

Esto se llama un selector CSS y le dice a nuestro plugin exactamente dónde colocar la imagen principal. No te preocupes, no necesitarás escribir ningún código tú mismo.

Para hacer esto, visita tu sitio web en el frontend. Luego, haz clic derecho en tu sección de encabezado y selecciona ‘Inspeccionar’.

En el lado derecho, necesitas encontrar qué selector CSS está utilizando la sección del encabezado. Puedes pasar el cursor sobre todos esos fragmentos de código hasta que veas que la sección del encabezado está resaltada en el front-end.

Aquí tienes un ejemplo:

Si toda la sección del encabezado se resalta al pasar el cursor sobre el código, vas por buen camino.

Ahora, haz clic derecho en ese fragmento de código y selecciona Copiar » Copiar selector.

Después de hacer eso, puedes pegar el selector en un lugar seguro, como un editor de texto, o simplemente mantener esta pestaña abierta.

Paso 3: Agrega tu shortcode a WPCode

El siguiente paso es instalar WPCode, que es un plugin de fragmentos de código.

Técnicamente, no necesitas usar un plugin para insertar fragmentos de código personalizados en los archivos de tu tema. Pero quisimos hacer esto para mantener las cosas seguras, ya que pegar código en un archivo de tema puede presentar algunos errores inesperados.

Hemos encontrado que WPCode es muy útil para administrar fragmentos de código personalizados sin romper tu sitio.

Primero, instala el plugin de WordPress en tu área de administración. Una vez que el plugin esté activo, navega a Code Snippets » + Add Snippet, selecciona ‘Add Your Custom Code (New Snippet)’ y haz clic en el botón ‘+ Add Custom Snippet’.

Ahora, demos un nombre a tu nuevo fragmento de código. Puede ser algo simple, como ‘Shortcode del banner principal’.

Después de eso, cambia el Tipo de código a ‘Fragmento de PHP.’

En el cuadro de vista previa del código, pega el siguiente fragmento:

echo do_shortcode('[hbupro_banner id="XXX"]'); // Replace with your own shortcode

Asegúrate de cambiar [hbupro_banner id="XXX"] por tu propio shortcode del banner principal que viste anteriormente.

A continuación, desplázate hacia abajo hasta la sección ‘Inserción’.

Aquí, el Método de inserción debe ser ‘Insertar automáticamente’ y la Ubicación debe ser ‘Después del elemento HTML’.

Luego, pega el selector que copiaste anteriormente en el campo ‘Selector CSS’. En nuestro caso, fue #masthead, pero esto variará según el tema.

Con eso hecho, puedes activar el botón ‘Inactivo’ para que se ponga ‘Activo’ y hacer clic en el botón ‘Guardar fragmento’.

¡Y eso es todo!

Si ves tu sitio web, ahora deberías ver la imagen del banner principal justo debajo de tu encabezado:

Preguntas frecuentes sobre imágenes destacadas

Aquí tienes una lista de algunas preguntas comunes que nuestros lectores hacen frecuentemente sobre las imágenes principales:

¿Cuál es el mejor tamaño para una imagen principal de WordPress?

Un buen punto de partida para el tamaño de una imagen principal es 1920 píxeles de ancho por 400 a 600 píxeles de alto. Esto asegura que se vea nítida en la mayoría de las pantallas de escritorio sin ocupar demasiado espacio vertical.

Sin embargo, el tamaño perfecto a menudo depende de tu tema de WordPress específico. Siempre recomendamos probar cómo se ve tu imagen tanto en computadoras de escritorio como en dispositivos móviles.

¿Puedo usar un video en mi sección principal?

Absolutamente. Usar un fondo de video puede hacer que tu sitio web se sienta más dinámico y captar la atención de los visitantes de inmediato. La mayoría de los constructores de páginas como SeedProd y el bloque Cover predeterminado de WordPress incluyen opciones sencillas para agregar un fondo de video en lugar de una imagen estática.

¿Cómo hago que mi imagen principal sea compatible con dispositivos móviles?

Los temas modernos y los constructores de páginas están diseñados para ser responsivos, por lo que escalarán automáticamente tu imagen principal para pantallas más pequeñas. La clave es elegir una imagen que aún se vea bien cuando se recorta.

También es muy importante comprimir tu imagen antes de subirla. Esto asegura que se cargue rápidamente para los visitantes en conexiones móviles lentas.

¿Es una imagen principal lo mismo que un carrusel?

Son similares pero no exactamente lo mismo. Una imagen principal suele ser una sola imagen grande tipo banner en la parte superior de una página web. Por otro lado, un carrusel rota a través de múltiples imágenes o videos. Puedes usar un carrusel dentro de tu sección principal, como mostramos en el método para temas clásicos.

Esperamos que este artículo te haya ayudado a aprender cómo agregar una imagen principal en WordPress. También puedes consultar nuestra guía sobre cómo agregar una animación de precarga a WordPress y nuestras selecciones expertas de las mejores herramientas para crear y vender productos digitales.

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