Cómo crear un banner para sitio web (3 formas fáciles)

Un banner visualmente impactante es una de las primeras cosas que los visitantes notan cuando llegan a tu sitio. Establece el tono de tu marca, comunica tu mensaje y fomenta las conversiones, lo que lo convierte en una herramienta poderosa para destacar tus productos, servicios o actualizaciones importantes.

A lo largo de los años, hemos utilizado diferentes tipos de banners en WPBeginner para promocionar nuestro boletín informativo, destacar ofertas de Black Friday, compartir cursos gratuitos, mostrar nuestros servicios profesionales y más.

A través de estas campañas, hemos notado que los banners captan consistentemente la atención de las personas, fomentan clics en los botones de llamada a la acción y generan clientes potenciales para nuestro negocio.

En este artículo, te mostraremos cómo crear fácilmente un banner para tu sitio web de WordPress. De esa manera, podrás aprovechar todos estos beneficios para mejorar tu negocio.

¿Qué es un banner de sitio web?

Un banner es una pantalla gráfica que se extiende sobre la parte superior, inferior o lateral de un sitio web de WordPress. A menudo incluye el nombre de la marca y el logotipo, junto con otros elementos de diseño, para promocionar un producto, servicio o evento específico.

Por ejemplo, si una tienda de comercio electrónico acaba de anunciar una oferta, puede mostrar un banner en la parte superior de sus páginas para informar a los nuevos visitantes sobre las ofertas de descuento y animarlos a realizar una compra.

Un banner bien diseñado puede causar una fuerte impresión e invitar a los visitantes a explorar el resto de tu sitio. Además, los banners se pueden usar para promocionar productos de afiliados, establecer la identidad de marca, crear una lista de correo electrónico animando a los visitantes a suscribirse a tu boletín y dirigir tráfico a otras páginas de tu sitio.

También puedes usar banners para promocionar tus cuentas de redes sociales y animar a los visitantes a seguir o dar me gusta a tus páginas.

¿Cuál es el mejor tamaño de banner para un sitio web?

El tamaño ideal del banner para un sitio web depende del diseño y los objetivos de marketing específicos de tu blog de WordPress.

Por ejemplo, si deseas mostrar un banner rectangular y delgado en la parte superior de la pantalla, puedes usar el tamaño Large Leaderboard, que es 970 x 90.

Algunos de los otros tamaños de banner populares y más utilizados incluyen:

• Banner Mediano: 300 x 250
• Leaderboard: 728 x 90
• Rascacielos Ancho: 160 x 600
• Media Página: 300 x 600
• Large Leaderboard: 970 x 90
• Billboard: 970 x 250
• Rectángulo Grande: 326 x 280
• Banner Vertical: 120 x 240
• Banner Completo: 468 x 60
• Medio Banner: 234 x 60

Si deseas mostrar un banner para un evento en la barra lateral, puedes usar los tamaños de banner Rascacielos Ancho o Media Página. De manera similar, también puedes usar el tamaño de banner Mediano para mostrar un banner cuadrado en tu página.

Si buscas mostrar banners publicitarios, es posible que desees consultar nuestra guía para principiantes sobre los tamaños y formatos de banners de Google AdSense de mayor rendimiento para WordPress.

Dicho esto, veamos cómo puedes crear fácilmente un banner en tu sitio web de WordPress. Para este tutorial, cubriremos tres métodos para crear un banner, y puedes usar los enlaces a continuación para saltar al método de tu elección:

• Método 1: Crea un banner para tu sitio web con OptinMonster (Recomendado)
• Método 2: Crea un banner para tu sitio web con Canva (Gratis)
• Método 3: Crea un banner para tu sitio web con Thrive Leads
• Bono: Agrega banners de Smart App en WordPress

Método 1: Crea un banner para tu sitio web con OptinMonster (Recomendado)

OptinMonster es el mejor plugin creador de banners para WordPress del mercado que te permite crear fácilmente banners de barra flotante y pop-up para tu sitio web.

Es la mejor herramienta de optimización de conversiones y generación de leads que te ayuda a convertir visitantes del sitio web en suscriptores y clientes.

Además, muchas de las plantillas de banners de OptinMonster tienen campos de suscripción que te permiten recopilar los nombres, direcciones de correo electrónico y números de teléfono de los visitantes de tu sitio web.

A lo largo de los años, hemos utilizado la herramienta varias veces para agregar banners y crear campañas exitosas de generación de leads en WPBeginner. Para más detalles, consulta nuestra reseña completa de OptinMonster.

Paso 1: Instalar OptinMonster en tu sitio web

Primero, necesitarás registrarte para obtener una cuenta de OptinMonster. Para hacer esto, simplemente visita el sitio web de OptinMonster y haz clic en el botón 'Obtener OptinMonster Ahora'.

Después de eso, tienes que instalar y activar el plugin gratuito de OptinMonster en tu sitio web de WordPress. Para obtener instrucciones detalladas, te recomendamos consultar nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Al activarlo, el asistente de configuración de OptinMonster se abrirá en tu panel de administración de WordPress.

Desde aquí, haz clic en el botón ‘Conectar tu cuenta existente’ para vincular tu sitio de WordPress con tu cuenta de OptinMonster.

Esto abrirá una nueva ventana en la pantalla de tu computadora.

Desde aquí, haz clic en el botón ‘Conectar a WordPress’ para continuar.

Paso 2: Crea y personaliza tu banner

Ahora que has conectado tu cuenta de WordPress con OptinMonster, dirígete a la página OptinMonster » Campañas desde la barra lateral de administración de WordPress.

Desde aquí, haz clic en el botón ‘Crear tu primera campaña’ para empezar a diseñar tu banner para el sitio web.

Esto te dirigirá a la página ‘Plantillas’, donde puedes empezar eligiendo un tipo de campaña.

Por ejemplo, si quieres mostrar tu banner como una barra en la parte superior de la pantalla, puedes elegir la campaña ‘Barra flotante’. De manera similar, puedes seleccionar el tipo de campaña ‘Popup’ para mostrar tu banner como un popup.

Después de eso, también necesitarás seleccionar una plantilla para la campaña que elegiste.

Para este tutorial, elegiremos una plantilla para el tipo de campaña ‘Barra flotante’.

A continuación, se te pedirá que le pongas un nombre a la campaña que estás creando. Simplemente escribe un nombre de tu elección y haz clic en el botón ‘Empezar a construir’ para continuar.

Esto lanzará la interfaz de arrastrar y soltar de OptinMonster en tu pantalla, donde podrás comenzar a personalizar tu banner. Desde aquí, puedes arrastrar y soltar los campos de tu elección desde la barra lateral izquierda sobre el banner.

Por ejemplo, si deseas agregar iconos de redes sociales a tu banner para aumentar tus seguidores, entonces puedes arrastrar y soltar el bloque de Redes Sociales desde la barra lateral izquierda.

Después de eso, simplemente haz clic en el bloque para abrir su configuración en la columna izquierda.

Desde aquí, puedes cambiar el título del botón, agregar tu URL de redes sociales e incluso cambiar tu plataforma de redes sociales desde el menú desplegable.

También puedes agregar otros bloques para mostrar videos, imágenes, texto o CTAs en el diseño de tu banner web.

Una vez que hagas eso, necesitarás seleccionar la posición del banner.

Por defecto, la barra flotante de OptinMonster se muestra en la parte inferior de la pantalla de tu sitio web una vez que comienzas a desplazarte.

Sin embargo, puedes cambiar fácilmente esta configuración haciendo clic en el ícono de 'Configuración' en la parte inferior de la barra lateral izquierda.

Esto abrirá la configuración en la columna izquierda, donde deberás expandir la pestaña ‘Configuración de la barra flotante’. Desde aquí, simplemente activa el interruptor ‘¿Cargar barra flotante en la parte superior de la página?’ para mostrar el banner en la parte superior.

Paso 3: Agrega disparadores para tu banner

Una vez que hayas diseñado tu banner, cambia a la pestaña ‘Reglas de visualización’ en la parte superior. Desde aquí, puedes agregar reglas para la visualización de tu banner.

Recuerda que solo necesitas cambiar a esta pestaña si deseas agregar un disparador de visualización específico para tu banner. De lo contrario, puedes pasar al siguiente paso.

Por ejemplo, si deseas mostrar tu banner cuando el usuario está a punto de abandonar tu sitio, entonces necesitas elegir la opción ‘Intención de salida’.

Una vez que hayas hecho eso, simplemente selecciona la opción ‘En todos los dispositivos’ del menú desplegable en el medio. Si deseas usar esta regla de visualización solo para dispositivos móviles, también puedes elegir esa opción.

Después de eso, elige la Sensibilidad de intención de salida según tu preferencia y haz clic en el botón ‘Siguiente paso’.

Esto te llevará a una nueva pantalla. Aquí, debes asegurarte de que la opción ‘Optin’ esté seleccionada para el menú desplegable ‘Mostrar la vista de la campaña’.

Una vez que hayas hecho eso, simplemente haz clic en el botón ‘Siguiente paso’.

Tu regla de visualización para el banner ahora se mostrará en la pantalla.

Si deseas cambiar algo aquí, puedes hacer clic en el botón ‘Editar’ para corregirlo.

Paso 4: Publica tu banner

Ahora puedes cambiar a la pestaña ‘Publicar’ en la parte superior y hacer clic en el botón ‘Guardar’ en la esquina superior derecha de la pantalla.

Después de eso, simplemente haz clic en el botón ‘Publicar’ para mostrar el banner en tu sitio web.

Ahora, visita tu sitio web para ver el banner en la parte superior de tu pantalla.

Así es como se veía en nuestro sitio de demostración.

Método 2: Crea un banner para tu sitio web con Canva (Gratis)

Si deseas crear un banner para tu sitio web gratis, entonces este método es para ti.

Canva es una popular herramienta basada en web para crear todo tipo de gráficos, incluyendo banners, logos, pósteres, portadas de libros y más. También ofrece una versión gratuita que puedes usar para crear un diseño de banner para tu sitio web.

Paso 1: Crea una cuenta en Canva

Primero, visita el sitio web de Canva y haz clic en el botón ‘Registrarse’ para crear una cuenta.

Si ya tienes una cuenta en Canva, entonces puedes iniciar sesión fácilmente.

Al crear tu cuenta, serás dirigido a la página principal de tu cuenta de Canva.

Desde aquí, debes cambiar a la pestaña ‘Plantillas’ en la columna izquierda y luego buscar plantillas de banner usando el cuadro de búsqueda en la parte superior.

Esto mostrará todas las plantillas de banner disponibles en Canva. Sin embargo, algunas de estas plantillas pueden estar bloqueadas porque son funciones de pago.

Paso 2: Diseña el banner de tu sitio web

Una vez que selecciones una plantilla, la interfaz de diseño de Canva se iniciará en la pantalla.

Desde aquí, puedes personalizar tu banner a tu gusto. Puedes cambiar el contenido existente haciendo clic en los bloques y agregando tu texto.

Incluso puedes agregar diferentes elementos gráficos como stickers, fotos y videos cambiando a la pestaña ‘Elementos’ en la columna izquierda.

Al agregar un elemento, puedes cambiar aún más su animación, posición y transparencia desde el menú en la parte superior.

También puedes subir archivos multimedia desde tu computadora cambiando a la pestaña ‘Subidos’ en la columna izquierda.

Para agregar texto a tu banner, cambia a la pestaña ‘Cuadro de texto’ en la columna de la izquierda.

Una vez allí, puedes usar estilos de texto predeterminados o diferentes combinaciones de fuentes para agregar contenido a tu banner.

Incluso puedes agregar un llamado a la acción con un enlace seleccionando el texto con el ratón. Esto mostrará un ícono de enlace en la parte superior del texto.

Simplemente haz clic en ese ícono y copia y pega el enlace que deseas agregar.

Después de eso, haz clic en el botón 'Listo' para guardarlo.

Paso 3: Obtén un código para incrustar el banner

Una vez que estés satisfecho con la personalización de tu banner, simplemente haz clic en el botón 'Compartir' en la esquina superior derecha de la pantalla.

Esto abrirá un menú emergente donde debes seleccionar la opción 'Más' en la parte inferior.

Ahora serás llevado al menú 'Todas las opciones', donde tienes que seleccionar la opción 'Incrustar'.

Una vez que hagas eso, aparecerá un nuevo aviso en la pantalla. Desde aquí, simplemente haz clic en el botón 'Incrustar'.

Canva ahora creará un código HTML para incrustar para ti.

Una vez que se muestre en la pantalla, haz clic en el botón 'Copiar' debajo de la opción 'Código HTML para incrustar'.

Paso 4: Agrega el código HTML para incrustar en WordPress

Ahora puedes mostrar tu banner en tu página, publicación o barra lateral de WordPress según tu preferencia. Para este tutorial, mostraremos nuestro banner en una página de WordPress.

Primero, necesitas abrir la página o publicación donde deseas agregar el banner.

Una vez allí, haz clic en el botón 'Agregar bloque' (+) en la esquina superior izquierda para encontrar y agregar el bloque HTML personalizado a la página.

Una vez que hayas hecho eso, simplemente pega el código para incrustar que copiaste en el bloque.

Finalmente, haz clic en el botón ‘Actualizar’ o ‘Publicar’ para guardar tus cambios.

Ahora, visita tu sitio web para ver el banner de WordPress en acción.

Método 3: Crea un banner para tu sitio web con Thrive Leads

También puedes crear un banner para tu sitio web usando Thrive Leads. Es un popular plugin de pop-ups para WordPress utilizado por más de 114,000 sitios web.

Con Thrive Leads, puedes diseñar banners de alta calidad que te ayudarán a capturar leads en tu sitio de WordPress y hacer crecer tu lista de correo electrónico.

Hemos probado esta herramienta a fondo en tiempo real y la encontramos súper fácil de usar para principiantes, con una interfaz intuitiva y plantillas atractivas. Para más detalles, consulta nuestra reseña de Thrive Themes Suite.

Paso 1: Instala Thrive Leads en tu sitio web de WordPress

Primero, debes visitar el sitio web de Thrive Themes y registrarte para obtener una cuenta. Una vez que lo hayas hecho, dirígete a tu panel de miembro.

Desde aquí, haz clic en el enlace 'Descargar e instalar el plugin Thrive Product Manager'.

A continuación, visita tu sitio web de WordPress para instalar y activar el plugin Thrive Product Manager. Para instrucciones detalladas, puedes consultar nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, dirígete a la pestaña Product Manager desde el panel de administración de WordPress y haz clic en el botón 'Iniciar sesión en mi cuenta'.

Después de ingresar tus credenciales de inicio de sesión, podrás ver tu panel de Thrive Product Manager.

Desde aquí, puedes seleccionar los productos que deseas instalar y usar en tu sitio. Simplemente elige el plugin ‘Thrive Leads’ y haz clic en el botón ‘Instalar productos seleccionados’.

Paso 2: Crea un banner para el sitio web

Después de la instalación del plugin, necesitas visitar la página Panel de Thrive » Thrive Leads desde la barra lateral de administración de WordPress.

Una vez que estés allí, simplemente haz clic en el botón ‘Agregar nuevo’ junto a la opción ‘Grupos de leads’.

Esto mostrará la ventana emergente ‘Agregar nuevo grupo de prospectos’ en tu pantalla, donde deberás escribir un nombre para el grupo de prospectos que estás creando.

Asegúrate de nombrar el grupo de prospectos de una manera que te ayude a identificarlo.

Por ejemplo, si estás creando un banner para construir tu lista de correo electrónico, entonces puedes nombrar tu grupo de prospectos ‘Campaña de lista de correo electrónico’.

Después de eso, el grupo de prospectos que creaste aparecerá en la pantalla. Para acceder a él, haz clic en el botón ‘Agregar nuevo tipo de formulario de suscripción’.

Esto abrirá un nuevo cuadro de diálogo donde debes elegir el tipo de banner que te gustaría crear.

Puedes crear un banner deslizante, de cinta, widget, en contenido, lightbox o alfombra de desplazamiento según tu preferencia.

Estos banners serán como un formulario, ya que recopilarán datos de tus usuarios, incluyendo direcciones de correo electrónico, números de teléfono y más.

Para este tutorial, crearemos un banner de cinta para nuestro sitio.

Al elegir un tipo de diseño de banner para el sitio web, el cuadro de diálogo desaparecerá automáticamente de la pantalla.

Ahora, para abrir el panel de tu grupo de prospectos, debes hacer clic en el botón ‘Agregar’ en la esquina derecha de tu pestaña de Grupos de Prospectos.

Esto te llevará al panel de tus Grupos de Prospectos, donde todos los formularios e informes de prospectos del grupo se mostrarán una vez que tu campaña esté activa.

Por ejemplo, si deseas crear un banner para capturar direcciones de correo electrónico, aquí se mostrará toda la información del usuario que recopiles a través del banner.

Por ahora, solo tienes que hacer clic en el botón ‘Crear formulario’ para empezar a construir tu banner.

Esto abrirá un nuevo cuadro de diálogo donde debes proporcionar un nombre para el formulario y hacer clic en el botón ‘Crear formulario’.

Una vez que tu formulario haya sido creado, se mostrará en tu panel de Grupos de Prospectos.

Desde aquí, haz clic en el botón ‘Editar diseño’ en la esquina derecha para empezar a construir tu banner.

Paso 3: Personaliza tu banner de sitio web

El editor visual de Thrive ahora se abrirá en una nueva pestaña en tu pantalla.

Desde aquí, puedes comenzar seleccionando una plantilla para tu banner desde el aviso de la 'Biblioteca de Thrive Leads'.

Luego puedes usar una de las plantillas pre-diseñadas tal como está o personalizarla aún más con el editor visual. Al tomar tu decisión, simplemente haz clic en el botón 'Elegir Plantilla' para continuar.

Después de agregar una plantilla para un banner de cinta, puedes personalizar fácilmente los elementos haciendo clic en cada uno. Esto abrirá la configuración del elemento en la barra lateral izquierda.

Por ejemplo, si deseas cambiar el color del botón en tu plantilla, debes hacer clic en él para abrir su configuración en la barra lateral.

Si deseas agregar un elemento completamente nuevo a tu banner, también puedes hacerlo haciendo clic en el ícono '+' en la esquina derecha de la pantalla.

Esto abrirá la barra lateral 'Agregar Elementos' a la derecha, donde puedes arrastrar y soltar los elementos de tu elección en el banner.

Por ejemplo, si deseas agregar botones de cuentas de redes sociales a tu banner, tendrás que arrastrar y soltar el elemento 'Seguir Redes Sociales' desde la barra lateral derecha.

Una vez que estés satisfecho, haz clic en el botón 'Guardar Trabajo' en la esquina inferior izquierda para almacenar tus cambios.

Después de eso, necesitas regresar a tu panel de Grupos de Leads.

Paso 4: Configurar Ajustes del Banner

Una vez que regreses a tu panel, puedes cambiar la posición de tu banner haciendo clic en la opción 'Posición' en la fila del formulario.

Esto abrirá el aviso de 'Configuración de Posición', donde puedes elegir tu posición de banner preferida en el menú desplegable.

Después de eso, haz clic en el botón ‘Guardar’.

A continuación, para configurar la frecuencia de visualización del banner, haz clic en la opción ‘Frecuencia de visualización’ en la fila del formulario.

Esto abrirá el cuadro de diálogo ‘Configuración de visualización’, donde puedes usar el control deslizante para determinar cuántas veces se debe mostrar el banner en la pantalla.

Si mantienes el número 0, el banner se mostrará en todo momento. Una vez que hayas tomado tu decisión, haz clic en el botón ‘Guardar’ para almacenar tu configuración.

Si deseas agregar un desencadenador específico para la visualización de tu banner, haz clic en la opción ‘Desencadenador’ en la fila del formulario.

Esto mostrará el cuadro de diálogo ‘Configuración de desencadenador’. Aquí, puedes elegir un desencadenador para tu banner en el menú desplegable, como después de un cierto período o cuando un usuario llega al final de la página.

Una vez que hayas terminado, haz clic en el botón ‘Guardar’ para guardar tu configuración.

Paso 5: Publica tu banner

Después de haber configurado los ajustes del banner, necesitas salir de tu panel de Thrive Leads y regresar al panel de Thrive Leads haciendo clic en el enlace en la parte superior.

Una vez allí, expande tu pestaña de Grupos de Leads y activa el interruptor ‘Mostrar en escritorio’ a ‘Activado’. Si también deseas mostrar tu banner en dispositivos móviles, puedes activar el interruptor ‘Mostrar en móvil’ a ‘Activado’.

Después de eso, haz clic en el ícono de engranaje en la esquina superior derecha de la pestaña Grupos de Leads para abrir la configuración de visualización.

Aquí, puedes seleccionar las páginas del sitio web en las que deseas que se muestre el banner. Por ejemplo, si deseas que el banner aparezca en la parte superior de todas las páginas y publicaciones, puedes marcar la casilla junto a estas opciones.

Finalmente, haz clic en el botón ‘Guardar y cerrar’ para guardar tus cambios.

Ahora, puedes visitar tu sitio web para ver el banner mostrado en la parte superior de la página.

Así es como se veía en nuestro sitio web de demostración.

Bono: Agrega banners de Smart App en WordPress

Si tienes una aplicación móvil para tu sitio web, entonces es una buena idea mostrar banners inteligentes de aplicaciones. Estos banners promocionarán tus aplicaciones y animarán a los usuarios de iPhone o iPad a descargarlas.

Una vez que los visitantes hagan clic en este banner, serán dirigidos a la tienda de aplicaciones, donde podrán descargar tu aplicación. Si la aplicación ya está instalada en su dispositivo, el banner inteligente de aplicaciones les pedirá que abran la aplicación en su lugar.

Puedes agregar fácilmente un banner inteligente de aplicaciones en WordPress con WPCode. En nuestra opinión, es el mejor plugin de fragmentos de código de WordPress del mercado. Te permite agregar fácilmente el ID de tu aplicación al sitio web.

Para más información, consulta nuestro tutorial sobre cómo agregar fácilmente un banner inteligente de aplicaciones en WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo crear fácilmente un banner de sitio web para WordPress. También te puede interesar nuestra guía para principiantes sobre cómo personalizar colores en tu sitio web de WordPress y nuestras mejores opciones de software de diseño web.

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.