04 agosto 2019

Tipos de Banners: Cómo Crear un Banner con el Creador de Email Stripo en Minutos

Crear banner para correos electrónicos
Tabla de contenido
  1. Cómo crear un banner con Stripo
  2. Tipos comunes de banners:
  3. Prueba tu email
  4. Palabras finales
1.
Cómo crear un banner con Stripo

Es difícil imaginar un email de boletín promocional moderno sin un banner. Has visto miles de emails con banners buenos y malos.

Todos sabemos que el banner es el primer elemento que tu lector mira. Por lo tanto, debe ser llamativo, encantador y emocional.

Quizás ya sabes qué banner necesitas para tus próximas campañas.

Pero ¿es tan fácil crear uno que en verdad cumpla con tus requerimientos?

Usualmente, necesitas encontrar una imagen apropiada o tomar una foto, editarla con Photoshop, colocar el texto sobre el banner, exportarlo al Creador de Plantillas de Email que utilices, y verificar si se adecúa a tu diseño de email. En caso de que no sea así, deberás hacer algunos cambios, incluso cambios pequeños como añadir una coma de más, o disminuir el tamaño de fuente, tendrás que volver a Photoshop y editar nuevamente el banner, luego importarlo a tu plantilla de email, etc. Por supuesto, tener acceso inmediato a Photoshop es bastante útil, pero sigue siendo un proceso complicado que lleva mucho tiempo y provoca muchos inconvenientes.

Stripo permite crear sofisticados banners multicapa desde cero directo en el editor y en menos de 10 minutos.

Cómo hacer un banner atractivo en cuestión de minutos con Stripo

Si eliges cualquiera de nuestras plantillas de email listas para usar para tus próximas campañas, Stripo separa los banners en capas. Puedes editar y optimizar cada capa por separado sin salir del editor. Te ahorra un montón de tiempo. Editor de fotos incluido, poder colocar texto sobre imagen, cantidad de fuentes decorativas, rica paleta de colores, y banco con miles de imágenes disponibles, todas estas opciones están pensadas para facilitarte el trabajo.

Cuando crees un banner, deberías tener una idea de cómo debe lucir y qué necesitas exactamente.

Vamos a analizar algunos de los más populares tipos de banners y te mostraremos cómo implementar fácilmente tus ideas con Stripo.

Cómo crear un banner con Stripo

Antes de proceder con los tipos de banners, tenemos que mostrarte cómo subir imágenes para tus emails y cómo agregar el texto sobre ellas en las plantillas de email, ya que las necesitarás para cada banner.

Arrastrar bloques de banner en emails

El primer paso es arrastrar el bloque de banner a tu email. 

Puedes soltarlo en la parte que desees de tu plantilla. Pero comúnmente los banners van justo después del encabezado (logo) de tu email.Bloques-Cartel es

Subir imágenes

Hay 4 formas de agregar imágenes a tus emails con Stripo:

  • Soltar imágenes en el área con ese nombre, para hacerlo, tan solo arrastra y suelta tu imagen en el área o haz clic para cargar imágenes desde tu ordenador.
  • Insertar enlaces externos, pega el enlace externo a una imagen que termine en .jpg o .png.
  • Usar una de nuestro banco, haz clic en el ícono “banco” y elige una imagen que te guste de los miles de imágenes disponibles de forma gratuita.
  • Usar una de campañas anteriores, haz clic en el ícono “email” y elige cualquier imagen que hayas utilizado previamente.

Plantilla steps

Agregar texto sobre las imágenes

Justo sobre la plantilla de email HTML con la que trabajas, en el panel de ajustes, verás el ícono “texto”.

  • haz clic en él para activar. Coloca el área de texto donde quieras sobre la imagen del banner;

Leyenda es

  • diseña tu texto, resalta una parte del texto, elige el tipo de fuente, tamaño, y su color, etc.

Fuente-text

Nota importante:

No dudes en usar fuentes decorativas para los banners. ¡No te preocupes! Todas serán consideradas como elemento de imagen por los clientes de email de tus lectores y se mostrarán como lo planeabas.

Subir imágenes adicionales

Una vez que hayas subido tu imagen básica, en el panel de ajustes, deberás activar el botón Imagen Adicional. Y sube esta imagen como se describe anteriormente en el párrafo “Subir imágenes”.

Imagen adicional

Nota importante: 

Para colocar una imagen adicional sobre tu banner con márgenes iguales desde al menos tres lados, deberás usar la opción “pegar sobre la zona estática”.

Sticky-Zones-Stripo-Editor.

Nota: Solo insertas la imagen adicional, y el sistema recomienda dónde colocar el logo. Mantén presionado el botón “shift” mientras arrastras la imagen sobre el banner. Una vez que eliges el lugar donde quieres la imagen, será resaltada con una línea sólida, déjala ahí mientras mantienes el botón “Shift”. La opción “Zona Estática” la alineará a los 3 lados. De esta manera tu email lucirá mejor.

Tipos comunes de banners:

  1. Banners con una sola imagen y tu valiosa proposición.
  2. Banners con dos imágenes.
  3. Banners con marco.
  4. Banners con botón CTA.
  5. Banners con collage de fotos.
  6. Banners con imágenes adicionales transparentes.
  7. Banners con GIF animados.
  8. Banners con videos.
  9. Banners con carrusel AMP.

1. Banners con una sola imagen y tu valiosa proposición

Este es el tipo de banner más utilizado en los emails promocionales.

El tipo de banner más utilizado

Los utilizas para anunciar una venta en el sitio web, o para promocionar un producto. Depende de ti.

Muy a menudo, los banners agregan debajo cuentas regresivas. 

2. Banners con dos imágenes

Banner-con-dos-imágenes

Una imagen colorida hace que sea difícil elegir un color de fuente apropiado para el texto sobre el banner. Usar una imagen vacía adicional hará que sea apropiado en esta situación. En el siguiente ejemplo, cubrimos la mitad del banner con una imagen adicional y escribimos el texto promocional sobre ella.

3. Banners con marco

Los marcos son utilizados para separar dos imágenes en un banner o para enfatizar el llamado a la acción del banner.

Puedes usar nuestro marco o cargar uno tuyo. Cualquier editor de fotos ofrece muchos.

Subiendo marcos, puedes crear boletines más únicos. 

Por favor ten en cuenta: cuando subes una imagen que ya ha sido enmarcada con una herramienta de terceros que no sea Stripo, no podrás hacer cambios con nuestro creador de plantillas o con cualquier otro.

Los marcos también son subidos como imágenes adicionales.

Por favor, echa un vistazo a estos dos banners: el primero sin marco, el segundo con un marco negro.
Stripo-Banner-sin-Marco

(banner sin marco)

Stripo-Banner-con-marco

(banner con marco)

El primer banner se ve bien, pero es difícil prestar atención a la propuesta que ofrecen, mientras que el segundo se ve con más clase, con acento en el texto. Las probabilidades de que no notes la oferta son muy bajas.

4. Banners con botón CTA;


Es difícil encontrar un email de Forbes que no tenga un botón CTA cobre un banner. Banner-con-imagen-sobre-él

Pero ¿Forbes en verdad agrega un botón? No. Ellos agregan una imagen del botón que se sube como la imagen adicional y añaden un enlace a todo el banner.

¡No hay magia! Todo es tan sencillo. Aun así, todos los emails de Forbes tienen estilo. 

5. Banners con collage de fotos

Collage-Banner_Brighton

Aquí tendrás que trabajar un poco más.

Este banner consiste de tres estructuras/filas de 3 columnas.

Solo las agregas en tu email, arrastras el bloque “Imagen” en cada contenedor, cargas una imagen a cada columna/contenedor por separado. Editas estas imágenes (para rotarlas) con nuestro editor de fotos incluido.Agregar estructuras en correos electrónicos

Editar imagen es

En lugar de una imagen en la segunda fila, solo agregas el texto. Eso es :)

6. Banners con imágenes adicionales transparentes

Todo diseño de boletín es un viaje de imaginación. Puedes agregar lo que te guste. También recomendamos agregar imágenes de temporada. Eso haría que tu email tenga el espíritu festivo.

En esta plantilla de Navidad, decidimos usar un copo de nieve transparente.

Las imágenes transparentes te ayudan a hacer pequeños cambios a tu boletín sin tener que cambiar el diseño entero.Copo de nieve

Por favor, mira los dos ejemplos de abajo y compáralos:

Eso-sin-una-imagen

(uno sin imágenes adicionales pero con la oferta de valor sobre el banner)

It-Transparent-Circle

(uno con imágenes adicionales pero con la oferta de valor sobre el banner)

Es casi imposible leer la oferta en el ejemplo 1, ya que el texto está justo sobre los productos que la compañía promociona.

Solo un pequeño detalle en el ejemplo 2, la capa transparente, hace que sea más fácil leer la oferta. Y como bonus: puedes ver los productos que la compañía está promocionando.

7. Banners con GIF animados

Los banners con GIF animados son un tema complejo, y ya hemos discutido por qué deberíamos usarlos en las plantillas de email. 

Los GIF ayudan a llamar la atención a tu oferta de valor, demostrar un mayor número de productos en una pantalla.

Nota importante:

Pero para crear un banner animado, deberás arrastrar el bloque básico “imagen” a tu plantilla. Luego subir un GIF al igual que subes las imágenes. Pero no puedes agregar texto sobre ellos.

8. Banners con videos

Los videos, cuando se usan bien, crean una fuerte conexión emocional con los lectores. Los videos también son útiles cuando tu oferta es muy grande para expresarla en palabras en un email, cuando necesitas mostrar exactamente cómo usar tu herramienta.Video-Banners.

Los videos colocados en la primera pantalla funcionan como banners.

Utilízalos para tus campañas de email cuando sea necesario. En nuestro “Cómo agregar videos en los emails” mostramos cómo insertar videos en los emails con Stripo rápidamente.

9. Banners con carrusel AMP

Prueba Stripo

Este tipo de banners es, en realidad, una compilación de 3 a 16 banners colocados en una pantalla. Y la necesidad de los usuarios de hacer clic en el botón “Pasar” ayuda a que la audiencia participe e interactúe.

La tecnología AMP es lo último en email marketing. Las marcas ahora solo están comenzando a familiarizarse con esto. Pero en todas las conferencias de digital e email marketing de este año se habla sobre el AMP en los emails. Esto quiere decir que AMP estará en más lugares y será algo común muy pronto.

Sé uno de los primeros en implementarlo en tus emails para sorprender a tus clientes. Ellos te recordarán, ya que los emails AMP te ayudan a sobresalir entre los demás.

¡No te preocupes! Puedes crearlos con Stripo rápidamente y sin tener que saber código.

Pero todos tus usuarios de Gmail (y pronto Outlook y Yahoo) podrán ver estos banners.

Prueba tu email

No importa qué tipo de banners estés usando para tus campañas de email, te recomendamos previsualizar y probar tu email con nuestra herramienta de pruebas antes de enviarlos.

Palabras finales

El banner en el email es lo primero que el cliente ve. Presta atención cuando lo crees para que tus campañas sean más poderosas y efectivas.

Prueba Stripo

¿Le resultó útil este artículo?
Tell us your thoughts
¡Gracias por sus comentarios!
2 comentarios
Vishnu Goyal hace 3 años
Thanks Rolenko for these great ideas on image-based banners. I'd love to know your thoughts on simple text-based banners and experiment with the same in my own emails. I know banner with images is a norm but I am looking forward to create just text-based emailers [writing-focused] and I think text-only banners will help.
Hanna Kuznietsova hace 3 años
Hello, Vishnu Goyal. Thank you for your question. Could you clarify what exactly you mean? Conversion, or ways to build those banners? Or are they easy/appropriate to use? Thank you... As for the way to build those banners, there are lots of tools on the web. As for their efficiency and conversion, we can't really say anything. Because, in order to provide you with accurate data on this subject, we'd need to run an A/B test a few times. But we prefer HTML and AMP HTML emails for our campaigns. So, we did not run those tests. Also, we did not find much info on this subject. But we wish you the best of luck and hope you'll find an answer to your question.
Escribe a
Industria
Temporadas
Integración
Editor Stripo
Simplifique el proceso de producción de correos electrónicos.
Plugin de Stripo
Integre el editor Stripo drag-n-drop a su aplicación web.
Pide una plantilla personalizada
Nuestro equipo puede diseñarlo y programarlo para usted. Simplemente rellene el formulario y nos pondremos en contacto con usted en breve.