¿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
Antes de agregar una imagen principal a tu sitio web de WordPress, necesitas crear una que capte la atención de tus visitantes. Una gran sección principal comienza con una imagen impresionante que muestra de qué trata tu sitio.
Canva es una herramienta popular para diseñar gráficos para sitios web. Es fácil de usar y viene con toneladas de plantillas para crear tu imagen principal. Si no eres fan de Canva, tenemos una lista de alternativas a Canva que puedes consultar para encontrar una que funcione para ti.
Al crear tu imagen principal, querrás tener algunas cosas en mente.
Primero, piensa en el tamaño. Las imágenes principales suelen no ser muy altas y a menudo cubren todo el ancho de tu página principal.
Un tamaño común para las imágenes principales de WordPress es de aproximadamente 1920 píxeles de ancho por 400-600 píxeles de alto (o a veces más). Pero esto puede cambiar dependiendo de tu tema de WordPress.
Luego, piensa en el mensaje que quieres enviar. Tu imagen principal debe mostrar rápidamente de qué trata tu sitio web. Podría ser una imagen principal de producto, una fotografía que represente tu marca, o incluso un impresionante video de fondo de pantalla completa.
Por ejemplo, decidimos presentar a nuestro fundador, Syed Balkhi, en la imagen principal de nuestra página de inicio. Muestra que hay una persona real detrás de nuestra marca que se dedica a ayudar a los usuarios de WordPress a tener éxito, que es de lo que trata WPBeginner.
Además, deja algo de espacio para texto. Muchas secciones principales tienen un titular o un botón. Asegúrate de que haya espacio para estos y que sean fáciles de leer.
Es una buena idea mirar otros sitios web en tu sector para ver ejemplos de secciones principales. Esto puede darte ideas para tu propio diseño. Algunas de las entradas en nuestros ejemplos de sitios web de WordPress pueden servir como gran inspiración.
💡Consejo de experto: Antes de subir tu imagen principal, es muy importante optimizarla para la web. Los archivos de imagen grandes pueden ralentizar tu sitio web, lo cual es malo para la experiencia del usuario y el SEO.
Recomendamos comprimir tu imagen principal para mantener un tamaño de archivo pequeño, idealmente por debajo de 250KB. Puedes usar herramientas gratuitas en línea como TinyPNG o un plugin de WordPress como EWWW Image Optimizer para hacerlo fácilmente.
Con eso fuera de camino, veamos cómo agregar la imagen principal.
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. Mejor aún, podrías usar un constructor de páginas con un tema que tenga una sección principal, lo cual te mostraremos cómo hacer en método 3.
Antes de hacer cambios importantes, siempre sugerimos usar un sitio de staging para probar a fondo los temas nuevos. 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 hacer esto, consulta nuestra guía sobre cómo cambiar correctamente un tema de WordPress.
¿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 impresionante sin tener que 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)
- Method 2: Using Full Site Editor (Block Themes Only)
- Method 3: Using a Page Builder (Custom Landing Pages/Themes)
- Method 4: Using Hero Banner Plugin + Shortcode (All Themes)
- Preguntas frecuentes sobre imágenes destacadas
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 el Personalizador de temas no está disponible en tu panel, probablemente estés usando un tema de bloques y deberías saltar a 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 carrusel de pantalla completa, un video, una imagen o ningún encabezado.
Seleccionaremos un carrusel de pantalla completa para la sección destacada en nuestra página de inicio y en todo nuestro sitio web. La razón es que nos permite crear un carrusel con varias imágenes para el destacado, y agregar texto y un botón sobre las imágenes.
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 imagen nueva 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 quieres agregar la imagen principal a otra página, una plantilla de página personalizada o un patrón de bloques, entonces puedes leer nuestra guía sobre Edición Completa del Sitio en WordPress para 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, necesitarás eliminar los bloques existentes en esa ubicación o agregar un nuevo bloque de Grupo justo encima de esos bloques existentes.
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 la Configuración. Aquí es donde opcionalmente puedes agregar un efecto de paralaje 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. Deberías ver un texto de 'Escribir título' encima de la imagen.
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 del texto, tamaño y dimensiones 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 que generen muchas conversiones, puedes consultar nuestra guía sobre las mejores prácticas para llamadas 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 configurar tu sitio web. O, estás buscando crear una página de aterrizaje personalizada sin estar limitado por las restricciones de tu tema. En ese caso, te recomendamos usar un page builder que venga con plantillas con secciones principales, como SeedProd.
SeedProd es un page builder de arrastrar y soltar que hemos utilizado a menudo para crear páginas personalizadas para WPBeginner y nuestros otros sitios de marca, incluyendo Duplicator y OptinMonster.
Si bien es fácil de usar, también ofrece muchas funciones de edición de WordPress integradas que el Personalizador de Tema, el Editor de Sitio Completo y Gutenberg no tienen por defecto.
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 de Ventas de Menú.
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 quieres 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 animado de partículas 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 personalizada 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 quieres 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, la altura de línea, 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 el diseño de tu 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 para tu botón. También puedes cambiar el color en ‘Button – 1 Class.’
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. Ahora deberías ver 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 front-end. 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.
💡Consejo profesional: Si la herramienta 'Inspeccionar' te resulta complicada, hay una forma más fácil. Simplemente puedes pegar el shortcode del banner principal directamente en el editor de tu página donde quieres que aparezca.
Si bien esto podría no verse tan perfectamente integrado como colocarlo debajo del encabezado, es una opción mucho más simple si te quedas atascado.
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.
Nota: También hay una versión gratuita de WPCode que puedes usar para empezar, pero necesitarás el plugin premium WPCode para insertar fragmentos de código después de elementos HTML en este tutorial.
Primero, instala el plugin de WordPress en tu área de administrador. Una vez que el plugin esté activo, navega a Fragmentos de código » + Agregar fragmento, selecciona ‘Agregar tu código personalizado (Nuevo fragmento)’ y haz clic en el botón ‘+ Agregar fragmento personalizado’.
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 video de fondo 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 de Portada predeterminado de WordPress incluyen opciones sencillas para agregar un video de fondo 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 con conexiones móviles más 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 destacada en WordPress. También te puede interesar 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 obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Jiří Vaněk
Gracias por la guía. Siempre que quise un sitio web con una imagen destacada, usé el tema Sydney, que tiene una imagen destacada por defecto, y fue muy fácil construir un sitio así con él. Con otros temas, era un problema para mí porque siempre tenía que improvisar, y eso no salió bien. Gracias a la guía usando SeedProd, esta será la forma más fácil para mí. Finalmente, podré administrar una imagen destacada fuera del tema Sydney o sin tener que buscar otro tema que tenga una imagen destacada en su configuración.
Zia Khan
¡Estoy totalmente de acuerdo, Jiri! Esta guía es súper útil. He estado usando Elementor y Crocoblock por un tiempo y realmente simplifican las cosas con cualquier tema, especialmente fuera de Sydney. Ya no dependemos de temas específicos, solo pura flexibilidad y creatividad.