Cómo crear y añadir banners en un sitio web WordPress

Captar la atención de un usuario es difícil. Incluso si los ha atraído a su sitio web o tienda en línea, el reto no termina ahí. Aún le queda trabajo por hacer.

¿Cómo guiarles hacia la acción deseada?

Una solución de la vieja escuela, pero muy eficaz, es utilizar banners en la página de inicio. Pueden ser increíblemente eficaces para atraer la atención y dirigir a los usuarios hacia donde usted quiere que vayan.

Todo ello sin afectar a su diseño general.

En esta guía le mostraremos cómo crear y añadir un banner en un sitio web WordPress. Una vez completado, ¡podrás utilizarlos en cualquier campaña de marketing que tengas en mente!

¿Qué son los banners de página de inicio?

Cuando hablamos de banners de página de inicio nos referimos a los que suelen imágenes coloridas y llamativas que ve por encima del pliegue de una página o tienda que está visitando.

No es necesario desplazarse para verlas y suelen contener un botón o enlace para que pueda incitar a la acción con el menor esfuerzo posible.

A menudo se colocan en posiciones privilegiadas como en este ejemplo de eBuyer.

Otras tiendas de comercio electrónico como Amazon o Aliexpress utilizan banners de promoción todo el tiempo.

También pueden aparecer pancartas en barra lateral de su sitio en formato cuadrado o vertical.

Si visita sitios web que utilizan redes publicitarias como El Moneytizer o Adsense verás muchos ejemplos de diseño de banners promocionales.

He aquí un ejemplo de cómo Amazon utiliza los banners para promocionar sus propios productos.

Pueden denominarse banners de página de inicio, pero puede colocarlos donde quiera.

Casos prácticos de banners promocionales

Si ha observado detenidamente los ejemplos anteriores, se habrá dado cuenta de que los banners promocionales se utilizan principalmente para promociones temporales como el Black Friday, las rebajas de Navidad o las ofertas especiales.

Suelen estar orientados a las ventas, aunque también puede crear banners para promocionar un sorteo, mostrar un nuevo producto, anunciar un evento o invitar al visitante a realizar una acción.

Son una forma estupenda de dar un aspecto diferente a su sitio web sin tener que cambiar todo el diseño.

Ver un cartel de Navidad en una tienda online en diciembre es como ver adornos navideños en una tienda física.

Te pone en situación, demuestra que la tienda está al día y que hay alguien detrás que se preocupa de que tengas una mejor experiencia de compra.

La única razón por la que encontrará banners por todas partes es porque funcionan.

Ya sea para promocionar una venta de temporada o destacar un nuevo producto, los banners ofrecen una forma sencilla pero eficaz de llamar la atención y canalizar al visitante.

Cómo crear y añadir un banner en WordPress (con herramientas gratuitas)

Hay dos pasos principales para añadir un banner promocional a su sitio web.

1. Crear el diseño del banner promocional
2. Incrústelo en su sitio web

Paso 1: Crear el diseño del banner promocional

Si promocionas productos de otras empresas como afiliado, normalmente te proporcionarán creatividades listas para usar.

Al menos eso es lo que hacemos en nuestro Programa de afiliación de Astra. Puede descargar imágenes de banner o incrustarlas en su sitio utilizando el código HTML.

Si promociona sus propios productos, tendrá que crear los banners usted mismo.

Si tienes conocimientos de diseño, probablemente ya dispongas de una herramienta. Si no, te recomendamos que utilices programas orientados a principiantes como Adobe Express o Canva.

Son muy fáciles de usar y le ofrecerán plantillas para ayudarle a empezar a diseñar más rápidamente.

En este ejemplo utilizaremos Canva.

Regístrate y utiliza el cuadro de búsqueda para encontrar el tipo de diseño que deseas crear.

O puedes empezar desde cero si tienes la suficiente confianza.

Canva tiene un montón de herramientas de diseño para modificar intuitivamente el banner y adaptarlo a tus necesidades.

Cuando esté satisfecho con el resultado, haga clic en el botón Compartir para descargar la imagen.

Puedes usar la imagen tal cual o utilizar un código de inserción.

Canva ofrece la opción de incrustar la imagen, similar a algunos programas de afiliación.

Pero incrusta un marco con algunas opciones extra que pueden ralentizar un poco tu sitio. También está limitado el número de enlaces.

Le recomendamos que utilice la imagen estándar en lugar del código para mantener el rendimiento del sitio web y enlazarlo donde desee.

Paso 2: Muestre el banner en su sitio web

Ahora es el momento de mostrar el banner promocional que acabas de crear.

En primer lugar, suba la imagen del banner a la biblioteca multimedia de WordPress y copie la URL del archivo.

Cópialo porque lo necesitarás muy pronto.

Ahora, desde su panel de administración de WordPress, instale y active Ganchos Astra.

Este es un plugin gratuito y útil que le permitirá añadir código a cualquier parte de su sitio.

Para ayudarte a descubrir todas las plazas disponibles, hemos creado un guía visual del gancho.

Escriba el nombre del lugar en el que desea incrustar su banner promocional.

astra_primary_content_top podría ser un buen lugar.

Se mostrará encima de todos los artículos de tu blog por lo que estarás aprovechando tu tráfico orgánico para llevar lectores a tu promoción.

Ahora ve al Panel de administración de WordPress > Personalizar > Hooks y busca tu gancho.

Hemos elegido Ganchos > Contenido > Antes del contenido principal.

Sólo tienes que pegar el siguiente código:

<a href="https://example.com" target="_blank" rel="noopener">
<img src="https://example.com/your-image.jpg" alt="Description of the image">
</a>

Tendrás que hacer un par de ajustes:

• href="" - Cambiar https://example.com a la URL donde el usuario aterrizará después de hacer clic en la imagen. Suele ser la página con la oferta.
• src="" - Cambia https://example.com/your-image.jpg a la URL de su imagen. Por eso sugerimos copiar la URL antes.

No olvides pulsar Publique para guardar los cambios.

Su banner promocional ya está listo para la conversión.

Todos los lectores sabrán ahora que tiene una oferta y podrán obtener más información con un solo clic.

Cómo añadir un banner en WordPress (sin código)

Existe otro método para crear y añadir un banner promocional a su sitio web.

Si utiliza Astra Proel antiguo módulo de diseños personalizados, ahora rebautizado como Constructor del sitiole permitirá crear diferentes partes de su sitio web desde WordPress.

Entre estas piezas se encuentran Ganchos.

Puede crear tantas secciones de Gancho como desee haciendo clic en el botón + Crear nuevo en la parte superior derecha.

Esto te llevará al editor de WordPress, donde puedes empezar a construir tu banner promocional.

Si quieres crear un gran diseño de banner promocional sin esfuerzo, te recomendamos que pruebes Spectranuestro constructor de páginas gratuito.

Te permite diseñar banners sin tener que salir del editor de WordPress.

Incluye docenas de bloques, así que todo lo que tienes que hacer es utilizarlos para construir tu banner promocional personalizado.

Esto es una gran ventaja porque será muy fácil hacer cambios en el futuro.

Además, al no utilizar imágenes estáticas, tendrás más elementos con los que jugar:

• Si utiliza un código de cupón, éste podrá seleccionarse para que los usuarios puedan copiarlo.
• Puede añadir efectos como el cambio de colores al pasar el ratón por encima de los botones.
• El contenido se adaptará al móvil.
• Y así sucesivamente.

¿No sabe diseñar? No hay problema.

Sólo tienes que pulsar el botón Botón Kits de plantillas en la parte superior del editor. Desde ahí puedes acceder a cientos de wireframes, patrones e incluso diseños de páginas completas.

Elija una buena llamada a la acción y ya está casi listo.

Sólo queda modificar la copia y los colores.

Puede seleccionar fácilmente el colocación donde quieres que aparezca el gancho y habilitar diferentes condiciones de visualización.

Por ejemplo, puedes:

• Añadir horas de inicio y fin para mostrar los banners para que puedas dejar todas tus promociones programadas. No necesitas trabajar el domingo por la noche para habilitar tus banners de Cyber Monday.
• Mostrar diferentes banners a los usuarios registrados para que pueda promocionar diferentes ofertas a clientes nuevos y recurrentes.
• Mostrar diferentes banners en cada dispositivo tener banners más sencillos en el móvil.

Como puede ver, este método le da mucha más libertad que la simple incrustación de imágenes.

Conclusión

Utilizar el método profesional para crear banners en su sitio web no es necesariamente más difícil, y aporta muchas ventajas.

Incluida la posibilidad de crear mejores banners para la página de inicio, un lugar en el que definitivamente no se debería utilizar una imagen estática.

Así que es el método que recomendamos utilizar.

Astra Pro incluye un módulo para WooCommerce que le ayudará a mejorar su eCommerce en muchos aspectos, por lo que esta actualización aportará numerosos beneficios a su sitio web.

¿Qué método utilizarías para crear y añadir banners? ¿Conoces algún método más sencillo? Si es así, ¡cuéntanoslo a continuación!