En el mundo digital, nunca se tienen suficientes herramientas. O eso pensaba yo.
Mi búsqueda de una herramienta para crear anuncios en HTML5 de forma sencilla se convirtió en un proceso largo y tedioso. Así que, para ahorrarte todo el sufrimiento que pasé, te guiaré por el camino que elegí y te mostraré cómo Webflow me ayuda a crear banners publicitarios en HTML5 atractivos, de manera fácil y eficaz.
En mis más de 6 años de carrera, he desempeñado muchos roles, desde diseñador gráfico hasta desarrollador/diseñador web front-end y gestor de proyectos. Por eso, me manejo bien con el código CSS y HTML.
En un trabajo reciente en Cincinnati, Ohio, fui diseñador digital sénior. Mis tareas diarias principales incluían editar el sitio web, diseñar gráficos para la web, gestionar nuestro contenido y SEO, y diseñar toda la creatividad publicitaria digital de la empresa.
El reto: mejorar nuestros anuncios digitales
Tras terminar la creatividad publicitaria digital del mes a principios de este año, la dirección me encargó pensar en formas de mejorar nuestra presencia en el espacio publicitario digital.
En aquel entonces, nuestros anuncios eran mayoritariamente GIFs animados, pero los anuncios en HTML5 ya empezaban a ser la gran novedad. Sabía que ese era el camino a seguir para estar a la vanguardia de esta tecnología. Así que ahora tenía un objetivo y una gran oportunidad para crear algo que la empresa nunca había hecho en sus más de 60 años de historia. Los anuncios en HTML5 se convirtieron en mi meta.
La búsqueda de un mejor creador de anuncios HTML5
Eché un vistazo a varias aplicaciones de Adobe, siempre con el icono de Dreamweaver mirándome fijamente. Revisé todos los programas actualizados recientemente de Adobe, pero ninguno me entusiasmó lo suficiente como para profundizar en la creación de anuncios HTML5.
los anuncios que creé con Webflow superaban a los anteriores en un 35%
¿Por qué no me entusiasmaban? Porque a cada programa le faltaba algo que necesitaba desesperadamente. Ya fuera poner texto en negrita en una animación, hacer que el texto brillara cuando lo necesitaba o incluso un simple fundido de texto. Todos tenían algo bueno, pero ningún programa de Adobe ofrecía todo lo que necesitaba.
La solución: Webflow para el desarrollo de anuncios HTML5
Después de darle vueltas al asunto durante varios días, se me encendió la bombilla: ¡debería probar Webflow! Lo he usado varias veces para sitios web y prototipos, así que, ¿por qué no para esta nueva y emocionante creatividad publicitaria en HTML5?
Me puse en contacto inmediatamente con nuestro servidor de anuncios y empecé a enviarles archivos exportados de Webflow en formato zip. Tras envolver los elementos div y los botones con una llamada API especial, los anuncios funcionaron a la perfección. La dirección no podía creer lo rápido que pude entregar estos anuncios. En las semanas siguientes, los anuncios que creé con Webflow superaban a los anteriores en un 35%. ¡Y nuestro equipo de marketing empezaba a parecer un grupo de estrellas del rock digital!
Resulta que, al final, ¡realmente puedes hacerlo todo con Webflow!
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Cómo crear tus propios anuncios HTML5 en Webflow
Primero, crea un Div con el ancho y alto exactos que necesites en píxeles, normalmente uno de los siguientes:
- 728 x 90
- 160 x 600
- 320 x 50 (móvil)
- 300 x 200
Después, solo tienes que colocar las imágenes, el texto y los demás elementos que necesite tu diseño dentro del div del anuncio.
Para este anuncio de ejemplo, he creado un anuncio expansible de 728 x 90 con un segundo div justo debajo. Cuando el usuario hace clic, el segundo div se despliega para mostrar su contenido.
Echa un vistazo al anuncio en Webflow para ver cómo lo he construido.
Este tutorial te guía paso a paso sobre cómo mostrar y ocultar contenido al hacer clic:
Es fundamental posicionar los elementos correctamente al usar animaciones. Una vez que tengas el anuncio y las animaciones a tu gusto, consulta con el servidor de anuncios de tu empresa: algunos requieren que envuelvas ciertos elementos con sus etiquetas especiales. Esto es importante para que la API de su sistema ejecute correctamente tu nuevo anuncio e incluya todos tus botones, enlaces e imágenes.
No hay mucho que no puedas hacer con Webflow al crear anuncios dinámicos en HTML5 o anuncios en canvas HTML5, así que diviértete creando, amigos, y echa un vistazo a todos los tutoriales de Webflow.
Nota: Para crear tus propios anuncios HTML5 con Webflow, necesitarás un Plan Personal o superior para poder exportar el código impecable de Webflow.
¿Creas anuncios HTML5 con Webflow?
Si tienes preguntas o quieres empezar a crear anuncios HTML5 de gran impacto con Webflow, deja un comentario abajo o envíame un mensaje en el foro de Webflow. ¡Estaré encantado de ayudarte!
