Cómo hacer un banner para un sitio web (3 maneras fáciles)

¿Está buscando una manera fácil de hacer un banner de sitio web en WordPress?

Un banner puede destacar de forma llamativa los productos, servicios o actualizaciones que ofrece su sitio web. Puede aumentar la participación de los usuarios, aumentar la tasa de clics y animar a los visitantes a actuar.

En este artículo, le mostraremos cómo crear fácilmente un banner para su sitio web en WordPress.

¿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 WordPress. Suele incluir el nombre y el logotipo de una marca, 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 acerca de las ofertas de descuento y animarles a realizar una compra.

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

También puede utilizar banners para promocionar sus cuentas en los medios sociales y animar a los visitantes a que sigan o les gusten sus páginas.

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

El tamaño ideal del banner del sitio web depende de la disposición y los objetivos de marketing específicos de su blog de WordPress.

Por ejemplo, si desea mostrar un banner rectangular y fino en la parte superior de la pantalla, puede utilizar el tamaño Leaderboard grande, que es de 970 x 90.

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

• Banner mediano: 300 x 250
• Clasificación: 728 x 90
• Rascacielos ancho: 160 x 600
• Media página: 300 x 600
• Leaderboard grande: 970 x 90
• Cartelera: 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 desea mostrar un banner de un evento en la barra lateral, puede utilizar los tamaños de banner Rascacielos ancho o Media página. Del mismo modo, también puedes utilizar el tamaño de banner Medio para mostrar un banner de forma cuadrada en tu página.

Si desea mostrar banners publicitarios, puede consultar nuestra guía para principiantes sobre los tamaños y formatos de banner de Google AdSense con mayor rendimiento para WordPress.

Dicho esto, veamos cómo puedes crear fácilmente un banner en tu sitio web WordPress. Para este tutorial, vamos a cubrir tres métodos para hacer un banner, y puede utilizar los siguientes enlaces para saltar al método de su elección:

Método 1: Crear un banner de sitio web con OptinMonster (Recomendado)

OptinMonster es el mejor plugin para crear banners en WordPress del mercado que te permite crear fácilmente barras flotantes y ventanas emergentes para tu sitio web.

Es la mejor herramienta de optimización de conversiones y generación de clientes potenciales que le ayuda a convertir a los visitantes de su sitio web en suscriptores y clientes.

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

Para más detalles, vea nuestra reseña / valoración completa de OptinMonster.

Paso 1: Instale OptinMonster en su sitio web

En primer lugar, tendrá que acceder a una cuenta de OptinMonster. Para ello, simplemente visite el sitio web de OptinMonster y haga clic en el botón ‘Get OptinMonster Now’.

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

Una vez activado, se abrirá el asistente de configuración de OptinMonster en su panel de administrador de WordPress.

Desde aquí, haga clic en el botón “Conectar su cuenta existente” para conectar su sitio de WordPress a su cuenta de OptinMonster.

Se abrirá una nueva ventana en la pantalla del ordenador.

Desde aquí, haz clic en el botón “Conectar con WordPress” para seguir adelante.

Paso 2: Cree y personalice su banner

Ahora que ha conectado su cuenta de WordPress con OptinMonster, diríjase a la página OptinMonster ” Campañas desde la barra lateral del administrador de WordPress.

Desde aquí, haga clic en el botón “Crear su primera campaña” para empezar a crear el diseño del banner de su sitio web.

Esto le dirigirá a la página “Plantillas”, donde puede empezar eligiendo un tipo de campaña.

Por ejemplo, si desea mostrar su banner como una barra en la parte superior de la pantalla, puede seleccionar la campaña “Barra flotante”. Del mismo modo, puede seleccionar el tipo de campaña “Ventana emergente” para mostrar su banner como un mensaje / ventana emergente.

A continuación, también deberá seleccionar una plantilla para la campaña elegida.

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

A continuación, se le pedirá que dé un nombre a la campaña que está creando. Simplemente escriba el nombre que desee y haga clic en el botón “Empezar a crear” para seguir adelante.

Esto iniciará la interfaz de arrastrar y soltar de OptinMonster en su pantalla, donde podrá empezar a personalizar su banner. Desde aquí, puede arrastrar y soltar los campos de su elección de la barra lateral de la izquierda en el banner.

Por ejemplo, si quieres añadir iconos de medios sociales a tu banner para aumentar el número de seguidores, puedes arrastrar y soltar el bloque de medios sociales de la barra lateral izquierda.

Después, basta con hacer clic en el bloque para abrir sus ajustes en la columna de la izquierda.

Desde aquí, puedes cambiar el título del botón, añadir la URL de tus medios sociales e incluso cambiar tu plataforma de medios sociales desde el menú desplegable.

También puede añadir otros bloques para mostrar vídeos, imágenes, texto o CTA en el diseño del banner de su sitio web.

Una vez hecho esto, debe seleccionar la posición del banner.

Por defecto, la barra flotante de OptinMonster se muestra en la parte inferior de la pantalla de su sitio web una vez que comienza el desplazamiento.

Sin embargo, puedes cambiar fácilmente estos ajustes al hacer clic en el icono “Ajustes” situado en la parte inferior de la barra lateral de la izquierda.

Esto abrirá los ajustes en la columna de la izquierda, donde debe desplegar la pestaña ‘Ajustes de la barra flotante’. Desde aquí, basta con conmutar el interruptor “¿Cargar barra flotante en la parte superior de la página?” para mostrar el banner en la parte superior.

Paso 3: Añadir activadores para su banner

Una vez que haya diseñado su banner, cambie a la pestaña “Reglas de visualización” en la parte superior. Desde aquí, puedes añadir reglas para la visualización de tu banner.

Recuerde que solo necesita cambiar a esta pestaña si desea añadir un activador de visualización específico para su banner. De lo contrario, puede omitir el paso siguiente.

Por ejemplo, si desea mostrar el banner cuando el usuario está a punto de abandonar el sitio, debe elegir la opción “Intención de salida”.

Una vez hecho esto, seleccione la opción “En todos los dispositivos” en el menú desplegable del centro. Si desea utilizar esta regla de visualización solo para dispositivos móviles, también puede elegir esa opción.

A continuación, seleccione la sensibilidad de la intención de salida que desee y haga clic en el botón “Paso siguiente”.

Esto le llevará a una nueva pantalla. Aquí, debe asegurarse de que la opción “Optin” está seleccionada en el menú desplegable “Mostrar la vista de campaña”.

Una vez hecho esto, basta con hacer clic en el botón “Paso siguiente”.

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

Si quieres cambiar algo aquí, puedes hacer clic en el botón “Editar” para corregirlo.

Paso 4: Publique su banner

Ahora puede 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, sólo tiene que hacer clic en el botón “Publicar” para mostrar el banner en su sitio web.

Ahora, visite su sitio web para ver el banner en la parte superior de su pantalla.

Este es el aspecto que tenía en nuestro sitio de demostración.

Método 2: Crear un banner de sitio web con Canva (gratis)

Si quieres hacer un banner de sitio web gratis, entonces este método es para ti.

Canva es una popular herramienta web que te permite crear todo tipo de gráficos, como banners, logotipos, carteles, portadas de libros y mucho más. También ofrece una versión gratuita que puedes utilizar para crear un diseño de banner para sitio web.

Paso 1: Crear una cuenta de Canva

En primer lugar, tendrás que visitar el sitio web de Canva y hacer clic en el botón “Registrarse” para crear una cuenta.

Si ya tienes una cuenta de Canva, sólo tienes que acceder.

Al crear una cuenta, accederás a la página de inicio de tu cuenta de Canva.

Desde aquí, debe cambiar a la pestaña “Plantillas” de la columna de la izquierda y, a continuación, buscar plantillas de banners mediante el cuadro de búsqueda de la parte superior.

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

Paso 2: Diseñe el banner de su sitio web

Una vez seleccionada la plantilla, se abrirá en pantalla la interfaz de diseño de Canva.

Desde aquí, puedes personalizar tu banner a tu gusto. Puedes cambiar el contenido existente al hacer clic en los bloques y añadir tu texto.

Incluso puedes añadir distintos elementos gráficos, como pegatinas, fotos y vídeos, cambiando a la pestaña “Elementos” de la columna izquierda.

Al añadir un elemento, puede cambiar su animación, posición y transparencia desde el menú de la parte superior.

También puede subir archivos de medios desde su ordenador pasando a la pestaña “Subidas” de la columna de la izquierda.

Para añadir texto al banner, basta con cambiar a la pestaña “Cuadro de texto” de la columna de la izquierda.

Una vez allí, puede utilizar los estilos de texto por defecto o diferentes combinaciones de fuentes para añadir algo de contenido a su banner.

Incluso puede añadir una llamada a la acción con un enlace seleccionando el texto con el ratón. Aparecerá un icono de enlace en la parte superior del texto.

Simplemente haga clic en ese icono y copie y pegue el enlace que desea añadir.

Después, haz clic en el botón “Hecho” para guardarlo.

Paso 3: Obtener un código de incrustación para el banner

Cuando esté satisfecho con la personalización de su banner, haga clic en el botón “Compartir” situado en la esquina superior derecha de la pantalla.

Se abrirá un menú de indicaciones en el que deberá seleccionar la opción “Más” situada en la parte inferior.

Accederá al menú “Todas las opciones”, donde deberá seleccionar la opción “Incrustar”.

Una vez hecho esto, se abrirá una nueva indicación en la pantalla. Desde aquí, sólo tienes que hacer clic en el botón “Incrustar”.

Canva creará un código HTML para incrustarlo.

Una vez que aparezca en la pantalla, haga clic en el botón “Copiar” situado bajo la opción “Código HTML incrustado”.

Paso 4: Añadir el código HTML para incrustar en WordPress

Ahora puede mostrar su banner en su página de WordPress, entradas, o barra lateral de acuerdo a su gusto. En este tutorial, mostraremos nuestro banner en una página de WordPress.

En primer lugar, debe abrir la página o entrada en la que desea añadir el banner.

Una vez allí, haga clic en el botón “Añadir bloque” (+) situado en la esquina superior izquierda para buscar y añadir el bloque HTML personalizado a la página.

Una vez hecho esto, sólo tienes que pegar en el bloque el código de incrustación que has copiado.

Por último, haga clic en el botón “Actualizar” o “Publicar” para guardar los cambios.

Ahora, visite su sitio web para ver el banner de WordPress en acción.

Método 3: Hacer un banner de sitio web utilizando Thrive Leads

También puedes crear un banner de sitio web utilizando Thrive Leads. Es un popular plugin de ventana emergente de 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 captar clientes potenciales en tu sitio WordPress y hacer crecer tu lista de correo electrónico.

Paso 1: Instalar Thrive Leads en su sitio web WordPress

En primer lugar, debes visitar el sitio web de Thrive Themes y acceder a una cuenta. Una vez hecho esto, dirígete a tu panel de control de miembro.

Desde aquí, sigue adelante y enlaza ‘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 obtener instrucciones detalladas, es posible que desee ver nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, diríjase a la pestaña Gestor de productos desde el escritorio de administrador de WordPress y haga clic en el botón “Acceder a mi cuenta”.

Tras introducir sus credenciales de acceso, podrá ver su panel de Thrive Product Manager.

Desde aquí, puede seleccionar los productos que desea instalar y utilizar en su sitio. Simplemente elige el plugin ‘Thrive Leads’ y haz clic en el botón ‘Instalar productos seleccionados’.

Paso 2: Crear un banner para el sitio web

Después de la instalación del plugin, debe visitar la página Thrive dashboard ” Thrive Leads desde la barra lateral de administrador de WordPress.

Una vez allí, basta con hacer clic en el botón “Añadir nuevo” situado junto a la opción “Grupos de clientes potenciales”.

Esto mostrará el mensaje / ventana emergente “Añadir nuevo grupo de clientes potenciales” en su pantalla, donde tendrá que escribir un nombre para el grupo de clientes potenciales que está creando.

Asegúrese de dar al grupo de clientes potenciales un nombre que le ayude a identificarlo.

Por ejemplo, si está creando un banner para crear su lista de correo electrónico, puede denominar a su grupo de clientes potenciales “Campaña de lista de correo electrónico”.

A continuación, el grupo de clientes potenciales que ha creado se añadirá a la pantalla. Desde aquí, haz clic en el botón “Añadir nuevo tipo de formulario de suscripción”.

Se abrirá una nueva indicación en la que deberá elegir el tipo de banner que desea crear.

Puede crear un banner deslizable, de cinta, widget, en el contenido, de caja de luz o de alfombra de desplazamiento a su gusto.

Estos banners serán como un formulario, ya que recopilarán datos de sus usuarios, como direcciones de correo electrónico, números de teléfono, etc.

En este tutorial, vamos a crear un banner de cinta para nuestro sitio.

Al elegir un tipo de diseño de banner de sitio web, la indicación desaparecerá automáticamente de la pantalla.

Ahora, para abrir su Escritorio de grupos de clientes potenciales, debe hacer clic en el botón “Añadir” situado en la esquina derecha de su pestaña Grupos de clientes potenciales.

Esto le llevará a su Escritorio de Grupos de clientes potenciales, donde se mostrarán todos los formularios e informes de clientes potenciales del grupo una vez que su campaña esté activa.

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

De momento, sólo tienes que hacer clic en el botón “Crear formulario” para empezar a crear tu banner.

Se abrirá una nueva indicación en la que deberá indicar un nombre para el formulario y hacer clic en el botón “Crear formulario”.

Una vez creado el formulario, aparecerá en el Escritorio de Grupos de clientes potenciales.

Desde aquí, haga clic en el botón “Editar diseño” de la esquina derecha para empezar a crear su banner.

Paso 3: Personalice el banner de su sitio web

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

Desde aquí, puedes empezar seleccionando una plantilla para tu banner desde la indicación ‘Biblioteca de Thrive Leads’.

A continuación, puede utilizar una de las plantillas prediseñadas tal cual o personalizarla aún más con el editor visual. Una vez hecha su elección, basta con hacer clic en el botón “Elegir plantilla” para seguir adelante.

Después de añadir una plantilla para un banner de cinta, puede personalizar fácilmente los elementos que contiene al hacer clic en cada uno de ellos. Esto abrirá los ajustes del elemento en la barra lateral de la izquierda.

Por ejemplo, si desea cambiar el color del botón de su plantilla, debe hacer clic en él para abrir sus ajustes en la barra lateral.

Si desea añadir un elemento completamente nuevo a su banner, también puede hacerlo al hacer clic en el icono “+” de la esquina derecha de la pantalla.

Se abrirá la barra lateral “Añadir elementos” a la derecha, donde podrá arrastrar y soltar los elementos que desee en el banner.

Por ejemplo, si quieres añadir botones de cuentas de medios sociales a tu banner, tendrás que arrastrar y soltar el elemento Social Follow de la barra lateral derecha.

Cuando esté satisfecho, haga clic en el botón “Guardar trabajo” de la esquina inferior izquierda para guardar los cambios.

A continuación, deberá volver a su Escritorio de grupos de clientes potenciales.

Paso 4: Configurar los ajustes del banner

Una vez de vuelta en su Escritorio, puede cambiar la posición de su banner al hacer clic en la opción “Posición” en la fila del formulario.

Se abrirá la indicación “Ajustes de posición”, donde podrá elegir la posición del banner que prefiera en el menú desplegable.

A continuación, haz clic en el botón “Guardar”.

A continuación, para configurar la frecuencia de visualización del banner, haga clic en la opción “Frecuencia de visualización” de la fila del formulario.

Se abrirá la indicación “Ajustes de pantalla”, donde puede utilizar el carrusel / control deslizante para determinar el número de veces que debe mostrarse el banner en la pantalla.

Si mantiene el número 0, el banner se mostrará en todo momento. Una vez hecha su elección, haga clic en el botón “Guardar” para establecer los ajustes.

Si desea añadir un activador específico para la visualización de su banner, deberá hacer clic en la opción “Activador” de la fila del formulario.

Aparecerá la indicación “Ajustes de activación”. Aquí puede elegir un desencadenante para su banner en el menú desplegable, como por ejemplo después de un cierto periodo o cuando un usuario llega al final de la página.

Cuando hayas terminado, haz clic en el botón “Guardar” para guardar los ajustes.

Paso 5: Publique su banner

Después de haber establecido los ajustes del banner, tienes que salir de tu Escritorio de Lead Groups y volver al Escritorio de Thrive Leads al hacer clic en el enlace de la parte superior.

Una vez allí, despliegue la pestaña Grupos de clientes potenciales y conmute la opción “Mostrar en escritorio” a “Activado”. Si también desea mostrar su banner en dispositivos móviles, puede conmutar el interruptor “Mostrar en móvil” a “Activado”.

A continuación, haga clic en el icono de engranaje situado en la esquina superior derecha de la pestaña Grupos de clientes potenciales para abrir los ajustes de visualización.

Aquí puede seleccionar las páginas web en las que desea que se muestre el banner. Por ejemplo, si desea que el banner se muestre en la parte superior de todas las páginas y entradas, puede marcar la casilla situada junto a estas opciones.

Por último, haz clic en el botón “Guardar y cerrar” para guardar los cambios.

Ahora, puede visitar su sitio web para comprobar el banner que aparece en la parte superior de la página.

Este es el aspecto de nuestro sitio web de demostración.

Bonificación: Añadir banners de aplicaciones inteligentes en WordPress

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

Al hacer clic en este banner, los visitantes acceden a la tienda de aplicaciones, donde pueden descargar la aplicación. Si la aplicación ya está instalada en su dispositivo, el banner les pedirá que la abran.

Puedes añadir fácilmente un banner de aplicación inteligente en WordPress con WPCode. Es el mejor plugin de fragmentos de código para WordPress del mercado que te permite añadir fácilmente el ID de tu aplicación al sitio web.

Para más información, consulte nuestro tutorial sobre cómo añadir fácilmente un banner de aplicación inteligente en WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo crear fácilmente un banner de sitio web para WordPress. Puede que también quieras ver nuestra guía para principiantes sobre cómo personalizar los colores de tu sitio web en WordPress y nuestra selección del mejor software de diseño web.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.