Cómo crear un correo electrónico con Stripo. Manual de la A a la Z

Cuando abre Stripo por primera vez, puede que se sienta un poco abrumado y no sabe por dónde comenzar. Y ese correo electrónico importante debe estar listo y enviado pronto, con la fecha límite a la vuelta de la esquina. Es hora de repasar con nosotros las funciones más importantes de Stripo, donde le explicaremos cómo crear su propio correo electrónico de la A a la Z.

Formas de comenzar a crear un correo electrónico

Hay tres formas de comenzar a crear su propia plantilla de correo electrónico con Stripo:

1. Elija una plantilla vacía para tener total libertad a la hora de crear su propia estructura de correo electrónico con bloques y módulos básicos (más adelante hablaré de bloques y módulos).
2. Elija plantillas básicas para tener una base sólida y una idea general de cómo puede verse su futura plantilla de correo electrónico
3. Eche un vistazo a nuestras 1650 plantillas de correo electrónico preparadas, elija la que le guste y edítela.

Para elegir una de estas opciones, solo tiene que hacer clic en la opción necesaria una vez que esté en la pantalla de Mensaje de Correo Electrónico.

Eligiendo una opción de correo electrónico vacío

Una vez que elija esta opción, será transferido a nuestro editor con una estructura básica de correo electrónico lista para ser editado.

Esta estructura básica consta de tres partes principales del correo electrónico, como el encabezado, la franja de contenido y el pie de página.

Con esta estructura, tiene total libertad creativa, así que puede crear la plantilla que necesita usando nuestras herramientas de edición, que le mostraremos un poco más adelante. Le permite rellenar cada estructura con los bloques necesarios para que su correo sea diseñado como quiera (hablaremos más adelante de los distintos bloques).

Elegir una opción de plantilla básica

Al hacer clic en esta opción, pasará a esta pantalla, donde puede elegir entre opciones básicas de plantilla como Plantilla vacía, Plantilla Maestra y diferentes diseños de plantillas de categorías comunes en el marketing por correo electrónico (Promo, Trigger, Info, etc.). Al hacer clic en cualquier plantilla, lo transferirá al editor, donde podrá comenzar a trabajar en la plantilla que elija.

Opción de plantilla HTML

Hemos destacado esta opción por separado porque está pensada para quienes son expertos en tecnología y saben programar correos electrónicos. La clave de esta opción es que, al hacer clic, se abre automáticamente el editor de código.

Básicamente, le presentan un lienzo en blanco donde puede crear manualmente un correo desde cero usando código.

Elegir una de las más de 1650 plantillas preconstruidas

Si necesita que le hagan el correo electrónico ayer y no hay tiempo para el proceso de ideación, siempre puede navegar por nuestra extensa biblioteca de plantillas predefinidas, creadas por nuestro equipo de diseño. Puede encontrar una plantilla para cualquier ocasión, sector o con una función que necesite para su objetivo de marketing por correo electrónico. Tiene a su disposición tanto plantillas gratuitas como premium, y al hacer clic en una de ellas lo transferirá al editor, donde puede hacer las modificaciones necesarias.

1. Estilos generales

Al crear un correo electrónico en Stripo, Estilos Generales y Diseños es su primer destino para hacer los ajustes necesarios que definirán las reglas básicas de diseño para su futura plantilla de correo electrónico. El objetivo principal de estas reglas es hacer que cada elemento sea consistente y heredar estas reglas de diseño.

La franja está encima de la jerarquía de elementos del correo electrónico; esto significa que debe contener elementos de niños. Una estructura es una de ellas, y siempre está presente en todas las franjas por defecto.

En la pantalla principal del editor, haga clic en el botón de Estilos Generales para ver el menú completo. Está dividido en cuatro secciones con opciones generales para cada parte del correo electrónico:

• Estilos Globales y Diseños es su principal centro de ajustes que influye en los aspectos de diseño como fondos, alineación, opción de contenido de derecha a izquierda, etc.;
• Los estilos de rayas le permiten configurar las configuraciones generales que se aplicarán a cada franja (encabezados, franjas de contenido, pies de página y más) que cree para su plantilla, como la familia de fuentes, el espaciado, los tamaños de fuente y mucho más;
• Estilos de Encabezado tiene las mismas opciones que en Estilos de Rayas; la única diferencia es que solo se aplican a sus encabezados, permitiéndote diversificar su aspecto para el diseño general de su correo electrónico (si lo necesitas);
• Estilos de Botones tiene opciones generales que se aplican a todos los botones de plantilla, como colores de botones, espaciado, tamaños de botones, fuentes y más.

• Estilos Globales y Diseños

Esta sección le permite establecer las reglas principales de estilo que se aplicarán a todo el correo electrónico y lo primero que debe ajustar al crear su correo electrónico. En primer lugar, puede configurar el color de fondo (o la imagen de fondo) para todo su correo electrónico.

Además, debe establecer el ancho del contenido de su correo electrónico y la alineación general, lo que creará una forma básica de su correo electrónico futuro.

También puede configurar cosas opcionales como subrayar enlaces, hacer que su diseño sea adaptativo (su correo electrónico se ajustará automáticamente para aparecer como una sola columna en pantallas pequeñas), ajustar todo su contenido con reglas RTL y ajustar sus listas con la opción Estilos de Listas Personalizadas.

Y no olvides los rellenos generales y los márgenes que también necesita ajustar. Por último, pero no menos importante, están los Estilos Predeterminados, que determinan si necesita nuestros estilos CSS predeterminados o si quiere tener total libertad de diseño usando sus propios estilos CSS.

El fondo del contenido del correo electrónico representa el fondo aplicado a toda el área de correo. Cuando se abre en dispositivos de mesa, cubre todas las áreas de mensajes de correo, mientras que en dispositivos móviles queda oculta (el fondo rojo en el ejemplo de abajo). Además, puede poner una imagen como fondo si los colores no apoyan su visión de diseño.

El ancho del correo electrónico es de 600px, por defecto. Actualmente, este es el tamaño más común.

Al hacer estos ajustes, reduce significativamente el tiempo que dedicaría a pulir el diseño del correo electrónico. Al establecer estos parámetros, se aplican a todos los elementos de contenido en los correos electrónicos.

Si algún estilo que aplique a una fila/contenedor/bloque separado difiere de los estilos establecidos en las secciones de ajustes generales, prevalecerá sobre el estilo general.

• Configurando estilos de rayas

Haga clic en Estilos de Rayas para abrir un submenú dedicado a editar sus estilos generales de rayas.

Tenga en cuenta que al hacer clic en cada botón se abre una sección dedicada donde puede ajustar estilos generales para cada tipo de franja que cree en su plantilla. Experimente con ellos y ponga los ajustes necesarios para que su diseño sea consistente, sin importar qué franja quiera añadir.

• Configuración de encabezados

Haga clic en los Estilos de Encabezado para abrir este pequeño menú, donde puede configurar todas las opciones generales necesarias para sus encabezados. Este menú es un poco más sencillo que el anterior, y todos los ajustes se aplican a todos los encabezados que crea.

• Configurar botones

Por último, pero no menos importante, están los estilos de botones. Haga clic en esta sección para abrirla y configurar los estilos necesarios para todos los botones que añada y cree para su plantilla de correo electrónico.

2. Construyendo el encabezado

El encabezado del correo electrónico es el primer elemento que ven los destinatarios. Normalmente contiene el logotipo y el menú de la marca.

Así que, en primer lugar, tiene que decidir cómo será su encabezado. Existen muchos tipos de diseño de encabezado.
Sin embargo, el más popular en el comercio electrónico es cuando el logo está arriba y el menú justo al lado.

Para recrearlo, el encabezado de este tipo solo requiere una fila con dos contenedores para el contenido.

• Cómo añadir un logotipo a sus correos electrónicos con Stripo

En primer lugar, debe tener preparada una estructura de 2 columnas en su plantilla vacía. Cuando esté listo, pase el cursor sobre el primer contenedor y haga clic en el botón Imagen o arrastre y suelte el bloque Imagen en la primera columna.

Una vez que haga clic, verá este menú de Galería de Imágenes, donde debe añadir su imagen o elegir entre imágenes de stock/prediseño de nuestros diseñadores en diferentes categorías (Estaciones, Decoraciones, Photostock y más).

Una vez añadido, puede insertar un hipervínculo que llevará a sus destinatarios a su sitio web, configurar el texto alternativo, el tamaño exacto del logo y otras opciones para crear el logo que necesita.

Si quiere configurar un fondo para la franja donde está ubicado su logo y menú, asegúrese de usar una URL para la imagen del logo en formato PNG con un fondo transparente.

¿Por qué aplicar enlaces al logo? Muy a menudo, los destinatarios hacen clic para acceder a su sitio web más rápido.

¿Por qué añadir texto alternativo al logo? En primer lugar, para superar los filtros antispam; en segundo lugar, para proporcionar a los destinatarios información sobre de qué trata la imagen, en caso de que no vean imágenes en los correos electrónicos; tercero, cumplir con las mejores prácticas de accesibilidad del correo electrónico.

• Cómo añadir un menú a sus correos electrónicos con Stripo

Para añadir un menú a su encabezado, solo tiene que arrastrar y soltar un bloque de menú en el contenedor justo al lado de su logo.

Al hacer clic en el bloque añadido, abrirá las opciones de Bloque del Menú con una amplia variedad de ajustes que puede aplicar para editar el contenido y el diseño del menú.

En primer lugar, elija un tipo de menú, ya sea que consista solo en enlaces de texto, solo en iconos (con enlaces detrás de estos iconos) o ambos. Además, configura el número deseado de elementos del menú añadiéndolos o reduciéndolos en el contador de Número de Elementos del Menú.

Ahora es el momento de especificar cada elemento del menú. Déles nombres, adjunte los enlaces necesarios y especifique si ocultarlos o no en diferentes dispositivos. Si quiere eliminar un elemento del menú, solo tiene que hacer clic en el icono de la papelera. Tenga en cuenta que tiene que rellenar todos los campos para todos los elementos del menú.

Ahora, solo tiene que ajustar la configuración general del bloque de menú, como si lo ajusta al contenedor o no, configurar rellenos, márgenes, y listo.

3. Trabajando con texto

Lo siguiente en nuestra lista es la copia de texto. Añadir mensajes de texto a sus correos electrónicos es fácil con Stripo.

• Cómo añadir texto a sus correos electrónicos con Stripo

Si tiene alguna estructura con contenedores, puede añadir texto fácilmente simplemente pasando el cursor sobre ellos y pulsando un botón de Texto o añadiendo un bloque de texto dentro.

Una vez añadido, verá un marcador de texto que puede borrar y escribir su propio texto. Además, nuestro bloque de texto tiene un menú de opciones dedicado donde puede ajustar su texto.

Ya ha establecido estilos en Estilos Generales, tanto para rayas como para encabezados, así que estos estilos se heredarán automáticamente. Sin embargo, si necesita crear un estilo separado para su texto, puede configurar estilos de párrafo, estilos generales de texto (negrita, cursiva, subrayado y más) y configurar las alineaciones y sangrías de cualquier texto que cree aquí.

Además, si hace clic en la pestaña Estilos, puede cambiar la fuente, su tamaño, color, altura de línea y fondos para este bloque de texto específico.

• Cómo añadir enlaces al texto con Stripo

Si necesita añadir enlaces al texto, resalte las palabras necesarias (o puede poner el enlace en todo el texto), haga clic en el botón de enlace y pegue su enlace en el campo dedicado.

Es importante señalar:

Recomendamos que active el salto de palabras en sus correos electrónicos si no envuelve los enlaces en botones o si algunas palabras son demasiado largas. Por ejemplo, cuando su correo está escrito en alemán, es mejor activar la opción de salto de palabras. Esto le ayudará a evitar el desplazamiento horizontal en dispositivos móviles. Solo tiene que activar este botón para activarlo. Tenga en cuenta que esta opción no funciona para textos en chino, coreano y japonés.

• Añadir otro contenido a su bloque de texto

También puede añadir contenido diferente a su bloque de texto si lo necesita, como imágenes, emojis, símbolos especiales, tablas y listas marcadas y enumeradas.

Cada bloque de texto tiene botones dedicados en la sección Insertar, cada uno abre un pequeño submenú donde puede insertar el contenido que prefiera.

• Texto de derecha a izquierda

Si crea correos electrónicos para su audiencia extranjera con lenguas nativas basándose en textos RTL, es vital adaptar su texto en consecuencia. Tenemos una función dedicada a RLT que mencionamos antes. Haga clic en Estilos Generales y active la opción de dirección de texto de derecha a izquierda.

Después de eso, todo su texto se adaptará a las reglas de RTL.

Descubra más sobre esta sección en nuestro artículo dedicado.

• Traducciones

Crear campañas de correo electrónico para audiencias extranjeras se convierte en un verdadero quebradero de cabeza, y cuantos más idiomas necesita cubrir, más fuerte es este dolor de cabeza. Traducir sus correos electrónicos es una tarea difícil que puede consumir mucho de su valioso tiempo. Tenemos una función de traducción integrada para facilitarle la vida.

Haga clic en este botón para abrir nuestro menú de traducción.

Cambie el idioma al que quiere traducir su correo electrónico.

Una vez que elija sus idiomas, pulse el botón de Traducir.

Tras unos segundos, tendrá guardada una versión de correo electrónico completamente traducida, para que pueda ajustarla y usarla en sus campañas.

4. Personalización del contenido del correo electrónico

Los correos electrónicos con textos personalizados son una buena forma de destacar entre la competencia y acercar su marca a su audiencia

Añada etiquetas de fusión a los saludos, como en el ejemplo siguiente, al pie de página del correo electrónico para especificar la dirección del destinatario, y siempre dirigirse por nombre en los correos activados.

El generador de plantillas de correo electrónico de Stripo permite añadir las etiquetas de fusión a cualquier copia de la plantilla de correo electrónico.

• Cómo añadir etiquetas de fusión en correos electrónicos con Stripo

Para añadir una etiqueta de fusión, haga clic en su bloque de texto y, en la sección Insertar, habrá una lista desplegable para añadir etiquetas de fusión.

Una vez que hace clic en él, se despliega todo el menú donde puede elegir la etiqueta de fusión necesaria según sus necesidades de personalización, los ESP que use y la configuración del proyecto.

Una vez que elija su etiqueta de fusión (en nuestro ejemplo, es una etiqueta de nombre), aparecerá en el bloque de Texto, donde puede añadir más texto para apoyar su etiqueta con un mensaje personalizado adecuado.

Su ESP reemplazará este parámetro por el nombre de pila de cada destinatario. Si no se especifica el nombre (o cualquier otro parámetro), su ESP dejará este campo vacío.

Descubra más sobre las etiquetas de fusión en nuestro artículo del Centro de Ayuda.

5. Añadiendo imágenes

La imagen es la base de todos los correos electrónicos. Por muy atractivo que sea su texto, definitivamente debe haber imágenes, ya que apelan a las emociones mostrando nuestros productos bajo su mejor luz.

• Cómo añadir una imagen en los correos electrónicos con Stripo

En primer lugar, prepare una nueva estructura con el número necesario de columnas en su plantilla de correo electrónico HTML. Después de eso, arrastre y suelte el bloque de Imagen al contenedor deseado o haga clic en la opción de Imagen al pasar el cursor sobre el contenedor.

Una vez eliminado, tiene varias formas de añadir imágenes a su plantilla.

1. Colocar o subir una imagen

Aquí, realmente puede arrastrar y soltar la imagen que va a usar para su campaña o subirla desde su ordenador haciendo clic en el área de arrastrar y soltar.

2. Pegar una URL externa

Si no tiene la imagen guardada en su ordenador, puede insertar enlaces a esta imagen en la web.

Haga clic en la opción de pegar URL dentro del campo de arrastrar y soltar para abrir este menú. Después de eso, pegue el enlace en su correo electrónico y elija si guardarlo en su Galería de Imágenes o dejarlo como imagen externa (tenga en cuenta que las imágenes externas pueden desaparecer de su plantilla una vez que se mueven o eliminan dentro de la fuente original).

3. Utilice imágenes de su Galería de Imágenes

Cuando sube imágenes o las descarga en la galería, como se muestra en el ejemplo anterior, sus imágenes se almacenan en su galería personal. Verá a continuación, y al hacer clic en una de ellas, se adjunta automáticamente la imagen al bloque.

Las imágenes aquí están ordenadas por fecha, desde las más recientes hasta las más antiguas. Si la lista de imágenes es demasiado larga, la puede buscar por su nombre.

Para usar una en su plantilla HTML actual, tiene que hacer clic en la imagen seleccionada y aparecerá automáticamente en su correo electrónico.

4. Uso de photostock y nuestro banco de imágenes

Todas las imágenes disponibles con Stripo son totalmente gratuitas, así que puede elegir las que le gusten y usarlas para sus propios diseños. Además, tiene una gran variedad de imágenes de photostock para elegir. Haga clic en el menú que le guste para navegar por nuestra biblioteca y ver las imágenes por sí mismo.

5. Generación de imágenes con GenAI

También puede generar una imagen única para su banner haciendo clic en la opción de Imagen de IA. Verá un menú dedicado donde puede añadir su prompt para canalizar la creatividad de GenAI, configurar diferentes opciones como modelo de IA, estilo, dimensiones y generar la imagen que necesita.

6. Edición de imágenes

En la sección anterior, mostramos cómo subir y almacenar imágenes.

¿Pero cómo puede editarlos con Stripo?

En esta sección, mostramos cómo editar las imágenes que usa para tarjetas de producto, firmas, logotipos, ponentes de presentación y próximos eventos, etc.

• Cómo editar imágenes con Stripo

Una vez que haya subido la imagen, haga clic en ella y, en la configuración del bloque de imagen, haga clic en el botón Editar imagen.

Verá aparecer un nuevo mini-editor, donde puede modificar su imagen de muchas maneras, como:

• añadir filtros y ajustar colores;
• recortar, redimensionar y remodelar;
• dibujar en imágenes, añadir formas, textos, pegatinas y marcos;
• crear esquinas redondeadas, añadir fondos y fusionar imágenes.

7. Construcción de banners

Se dice que el banner es la cara de sus boletines. Por eso, tiene que trabajar a fondo en ello.

Normalmente, como banner, entendemos una imagen que despierta emociones en su público objetivo, junto con textos complementarios sobre esta imagen en particular.

• Cómo crear un banner de correo electrónico con Stripo

En primer lugar, prepare una estructura de una columna para su futuro banner de correo electrónico. Después de eso, arrastre y suelte nuestro bloque de Banner en esta estructura.

Al hacer clic en este bloque se abrirá un menú para añadir una imagen a su banner. Funciona igual que mencionamos antes en la sección Añadir imágenes.

Una vez añadida su imagen, tendrá a su disposición una sección de configuración de bloques de banners, donde podrá cambiar el tamaño de su banner, recortarlo, añadir un enlace necesario para que sea clicable, ocultar todo el bloque de banner en varios dispositivos, añadir texto alternativo, así como establecer márgenes e incluir el bloque en diferentes versiones de correo.

Y no se olvide de la opción Estilos, donde puede configurar la rotación para su imagen del banner, el color de fondo o un filtro.

Además, este bloque tiene un conjunto separado de opciones para añadir textos e imágenes encima de su banner. Otras opciones están deshabilitadas, ya que están en camino a salir y aún no están disponibles.

Al hacer clic en el botón Texto, se añadirá un texto editable, en el que podrá escribir la copia que necesite, y tendrá un menú de opciones dedicado para este texto donde elegir fuentes, su estilo, opacidad, rotación y más. También puede cambiar la posición de su texto o girarlo haciendo clic y arrastrando puntos blancos en las esquinas y en la parte superior del marco cuadrado.

Al hacer clic en el botón de imagen, se abrirá el mismo menú para añadir imágenes.

Una vez añadida, esta imagen también tendrá un menú de opciones dedicado, que es igual que para todo el banner, permitiéndole editar su imagen adicional para adaptarse a su estilo y necesidades.

8. Efecto de desplazamiento de imagen

El efecto de desplazamiento de imagen le ayuda a entretener y captar la atención de los clientes. Además, le ahorra un espacio valioso en los correos electrónicos, ya que puede ocultar detalles del producto tras su foto. También puede jugar con los destinatarios haciendo que "busquen" el cupón, etc. Hay muchas razones por las que necesita añadir un efecto de desplazamiento de imagen a sus correos electrónicos.

Pero, ¿cómo se puede construir uno realmente? Esta técnica fue desarrollada por nuestros programadores y se ha adaptado a nuestro sistema y, lo que es más importante, a los principales clientes de correo electrónico.

• Cómo crear un efecto de desplazamiento de imagen con Stripo

Crear imágenes de desplazamiento es fácil. Primero, añada su imagen a la parte deseada del correo electrónico y haga clic en ella para abrir sus ajustes. Habrá una opción de Efecto de desplazamiento.

Al hacer clic en esta opción, se abrirá otro menú para añadir una imagen, donde puede añadir la que aparecerá en la acción de pasar el cursor.

Una vez añadida, puede reemplazar o editar esta imagen igual que cualquier otra imagen en Stripo.

Nota importante: Esta función solo es compatible con Yahoo! Mail, Ukr.net, AOL, Gmail, iCloud Mail, Outlook 2003, Outlook para Mac y macOS Apple Mail (solo para escritorio). Además, sus imágenes deben tener el mismo tamaño, hasta el píxel.

9. Añadiendo vídeo en los correos electrónicos

Stripo tiene dos formas de añadir vídeos a sus plantillas de correo electrónico:

1. Añadiendo vídeo usando nuestro bloque dedicado a vídeos.
2. Incrustando vídeo mediante código.

(Fuente: Correo electrónico de la organización benéfica: Water)

Cubriremos ambas formas para que pueda entender mejor cuál es la más adecuada para usted.

• Forma 1. Añadiendo vídeo usando el bloque Video

Esta es una forma totalmente segura de enviar vídeos porque funciona perfectamente en todos los clientes de correo electrónico y en todos los dispositivos.

En primer lugar, arrastre y suelte nuestro bloque de vídeo en cualquier estructura y haga clic en este bloque.

Una vez que haya hecho clic, verá un menú de opciones dedicado para este bloque, donde puede hacer todos los ajustes que necesite.

Lo más importante es añadir un enlace al vídeo que quiere añadir a los campos correspondientes. Una vez añadido, nuestro editor mostrará automáticamente el vídeo, su miniatura y creará un texto alternativo basado en el título del vídeo (aún puede cambiar el texto alternativo si lo necesita).

Siempre puede cambiar la miniatura usando nuestro control de Miniatura Personalizada, que abre la interfaz familiar para añadir imágenes. Además, puede ajustar estilos de botón de reproducción o no mostrarlos en absoluto usando un control de Estilos de Botones de Reproducción. Y no olvide ajustar el tamaño del bloque y si quiere que la imagen en miniatura sea responsiva o no (una imagen responsiva ajustará su tamaño automáticamente según el tamaño de pantalla en el que se muestre).

• Forma 2. Incrustando un vídeo

El vídeo incrustado es el tipo de vídeo que se reproduce directamente en los correos electrónicos. No es necesario que los destinatarios accedan a otra página web para ver el vídeo.

Stripo proporciona a sus usuarios un código universal, con el cual puede proporcionar a todos sus suscriptores el vídeo que quiere compartir.

Recomendamos seguir el siguiente orden:

1. Insertar este código en una plantilla de correo electrónico.
2. Personalizar el código asignado insertando sus enlaces de URL.

Cómo incrustar un vídeo en Stripo

Aquí usaremos nuestro bloque HTML creado para trabajar cómodamente con código de correo electrónico. Arrastre y suelte este bloque en cualquier lugar de su plantilla.

Haga clic en él y abrirá nuestro editor de código integrado que muestra lo que hay bajo el capó de su plantilla de correo electrónico.

Ahora, copie este código para incrustar un vídeo:

<video class="adapt-img" controls="controls" poster="https://jenbfo.stripocdn.email/content/guids/videoImgGuid/images/image16586923322854343.png" width="100%" height="313">

<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="http://www.w3schools.com/html/mov_bbb.webm" type="video/webm">



<!-- fallback -->



<a href="https://www.youtube.com/watch?v=ryqOEPk51Lg/" class="esd-frame-element esd-hover-element esdev-disable-select">

<img class="adapt-img" src="https://jenbfo.stripocdn.email/content/guids/videoImgGuid/images/image16586923322854343.png" alt="" width="100%" height="313"></a>

</video>

Y péguelo aquí (básicamente, reemplace este texto provisional) y haga clic en Aplicar código:

Una vez aplicado, verá un diseño básico de un reproductor de vídeo embebido con nuestro vídeo de ejemplo adjunto.

Lo único que queda es cambiar los enlaces a los suyos, para que reproduzca su vídeo. Todos los enlaces que necesita cambiar están aquí:

1. El primer enlace es una imagen en miniatura. Ciertamente, algunos dispositivos pueden generar una imagen miniatura usando un vídeo MP4, pero esta imagen no se renderizará en iPhone X ni en dispositivos con pantallas Retina. Pegue este enlace después del atributo "Poster".
2. Los dos siguientes enlaces son enlaces a nuestros archivos de vídeo en los formatos .MP4 y . WebM. Los enlaces a YouTube o Vimeo no funcionan aquí. Sustituya los enlaces que van después del atributo "source src" por sus propios enlaces.
3. Los otros dos enlaces que van después de la palabra fallback son enlaces a un vídeo de YouTube y a su imagen de vista previa. Este es nuestro recurso para esos clientes de correo electrónico que no soportan vídeos incrustados. Suba su vídeo a YouTube o Vimeo, y suba la segunda imagen usada como miniatura. Sustituya los enlaces que van después de los atributos "href" y "src" por los suyos.

10. Añadiendo botones CTA

Button, de hecho, es un enlace de URL bellamente diseñado. Debe ser visible y su texto debe ser claro y conciso

Antes, establecía los estilos de todos sus botones en la sección de Estilos Generales, pero si quiere hacer único un botón nuevo, esto es lo que tiene que hacer.

• Cómo construir un botón de CTA con Stripo

El proceso de crear un botón de CTA es bastante sencillo. Arrastre y suelte un bloque de botón a cualquier lugar de su plantilla.

Después de eso, haga clic en este botón para abrir sus ajustes, donde puede hacer todos los ajustes que necesite.

Lo más importante para cualquier CTA es un enlace adjunto y un mensaje convincente que llame la atención y dé una razón para hacer clic en el botón. Pegue el texto de un enlace y un botón necesarios dentro de estos campos correspondientes.

Lo siguiente que quiere ajustar es la alineación de su botón CTA, su altura (puede poner la altura exacta de cada uno de sus botones en el correo electrónico), añadir un icono y decidir si ocultar este botón en diferentes dispositivos o no.

Los ajustes básicos también permiten establecer rellenos y márgenes, así como incluir su CTA en diferentes versiones del correo electrónico y adjuntar un enlace de ancla.

Para cambiar el diseño de su botón CTA, haga clic en la sección de Estilos para abrir un nuevo menú de configuración donde se puede crear todo el estilo. Puede cambiar los colores de los botones, las fuentes (tamaño, color, estilos de texto dentro del botón), configurarlo para que encaje en todo el contenedor, añadir color de fondo o imagen, diferentes bordes y mucho más.

• Opción de botón de flotación

Si quiere aplicar un efecto de flotación a sus botones, tiene que ir a la configuración general y activar los estilos de botón de pasar el cursor. Esto hace que todos los botones cambien de estilo una vez que pasas el ratón sobre ellos. Esta sección le permite afinar los estilos del efecto de flotación, como los colores de botones, fuentes y bordes.

Así pueden ser los botones flotantes.

11. Construcción de módulos de contenido de producto

Bueno, esta sección es compleja, ya que contiene varios bloques y elementos.

(Fuente: Correo electrónico de M&M's)

Normalmente, estas tarjetas de producto consisten en el fragmento del producto, una breve descripción, el precio y el botón CTA.

Algunas marcas, como M&M's, añaden alguna introducción antes de mostrar productos, mientras que otras añaden la promoción de los productos justo debajo del banner o del vídeo; depende totalmente de usted.

Para construir una tarjeta de producto similar, empiece con una estructura de 2 columnas y añada un bloque Imagen a cualquier columna, y haga los cambios necesarios.

Después de eso, añada un bloque de texto en la estructura justo al lado de su imagen. Añada su texto, trabaja en el formato, las tipografías y otros detalles.

Tenga en cuenta que puede añadir más bloques uno al lado del otro para introducir más información y diseñar sus tarjetas de producto como quiera.

Cuando termine los textos, añada un bloque de botones justo debajo de los textos. Añada los enlaces necesarios y edítelo para que encaje con su estilo usando opciones integradas.

Tiene control creativo total, y las tarjetas de producto son fáciles de hacer porque consisten en bloques básicos y editables.

Si quiere construir uno o dos módulos más similares a este, tiene que pasar el cursor sobre su tarjeta de producto creada y hacer clic en el botón Duplicar.

Después de eso, recibirá una copia de esta tarjeta de producto justo debajo de la original. Ahora también puede editarlo para crear aún más tarjetas de producto.

12. Construcción de temporizadores de cuenta atrás para correos electrónicos

Los temporizadores de cuenta atrás en los correos electrónicos generan un sentido de urgencia, notifican a los destinatarios sobre la duración de la venta o les informan de cuándo comenzará un determinado evento.

Puede construir, diseñar y añadir un temporizador a su plantilla de correo HTML directamente en el editor.

• Cómo construir y añadir un temporizador de cuenta atrás en los correos electrónicos con Stripo

Para crear su propio temporizador, arrastre y suelte nuestro bloque dedicado de temporizador en cualquier contenedor y haga clic en él.

Después de eso, verá un menú de configuración con un calendario que se despliega automáticamente, para que pueda elegir la fecha y hora correctas para su cuenta atrás.

Una vez que establezca fecha y hora, todo el temporizador iniciará automáticamente su cuenta atrás. Ahora es momento de hacer algunos ajustes.

Puede configurar la zona horaria exacta de su temporizador para que sea más cómodo para su audiencia que vive en diferentes países y zonas horarias. Además, puede añadir varios enlaces a su temporizador para compartir, personalizar o hacer clic en general, para enviar a su audiencia a las páginas que necesita.

Los días de visualización y las etiquetas digitales controlan si quiere mostrar los días en su temporizador y las etiquetas generales como horas, minutos y segundos (una vez desactivados, su tiempo solo mostrará los dígitos).

También puede cambiar el caso de las letras de sus etiquetas, así como poner el lenguaje adecuado para ellas y crear un separador adecuado para su estilo introduciendo el suyo propio. Y no se olvide de la opción de Imagen de Caducidad, que le permite añadir cualquier imagen que necesite y que se mostrará a los destinatarios cuando la cuenta atrás llegue a cero.

Las opciones de Estilos son bastante extensas, permitiéndole ajustar cómo se verán sus dígitos, etiquetas y separadores, para que el temporizador coincida con su diseño general.

13. Añadiendo un separador

El separador, también conocido como divisor, no impulsa conversiones ni nada más. Esto es solo un elemento decorativo, que hace que los correos electrónicos parezcan estructurados y conduce a una mejor y más fácil percepción del contenido del correo.

• Cómo configurar un separador en los correos electrónicos con Stripo

Añadir un separador a su correo electrónico es fácil. Solo arrastre la estructura de una columna a su plantilla de correo HTML y luego suelte el bloque Separador dentro de esta estructura.

Haga clic en este bloque para abrir su configuración. Aquí puede elegir entre dos opciones de cómo quiere que quede su separador: como una línea normal o un espacio invisible. Además de eso, puede ajustar su ancho, estilo, color, borde y alineación. 

Tenga en cuenta que todos los separadores que añada heredan los colores de fondo de las opciones de Estilos Generales, así que si quiere cambiarlos, debe hacerlo manualmente para cada separador que añada usando el Color de Fondo de Bloque.

Establezca los rellenos exactos, añada un enlace de ancla (si es necesario) y elija si incluir o ocultar su separador de diferentes versiones del correo electrónico aquí.

14. Insertando iconos de redes sociales

Los iconos de medios sociales, también conocidos como iconos de redes sociales, pueden encontrarse en cualquier lugar: en el menú, en el pie de página o en medio de un correo electrónico, donde lo considere adecuado.

• Cómo añadir iconos de redes sociales con Stripo

Añadir iconos de redes sociales es fácil, ya que tenemos un bloque dedicado para ellos que puede usar. Arrastre y suelte el bloque de Redes Sociales en su plantilla y haga clic en él para abrir su configuración.

Tendrá un icono de red social activado por defecto. Para añadir más iconos de redes sociales, haga clic en el botón Plus y elija uno de la lista desplegable (va añadiendo iconos de redes sociales uno a uno, así que tendrá que hacerlo varias veces para añadir todo lo que necesite).

Una vez añadidos, aparecerán en el diseño, y solo tiene que pegar los enlaces a sus redes sociales dentro de los campos de entrada correspondientes. Si quiere eliminar uno de los iconos de redes sociales, solo tiene que hacer clic en el icono de la papelera cerca de la que quiere eliminar.

También puede cambiar el aspecto de todos sus iconos usando este menú desplegable y eligiendo una de las muchas opciones de diseño.

Y no olvide los ajustes adicionales que aplican a todo el bloque de Redes Sociales, como el tamaño de los iconos, los espacios entre ellos, los títulos, el color de fondo y más. Estas opciones le permiten afinar los detalles de sus bloques sociales para ajustarlos al diseño general y al tamaño de los elementos.

También puede predefinir qué iconos de redes sociales aparecerán en su bloque Social una vez que lo añada, ajustando la configuración de su proyecto. En su cuenta, vaya a Configuración, luego a Espacio de trabajo, después a Proyectos y Grupos, y elija el proyecto que necesita.

Después de eso, haga clic en la pestaña de Redes Sociales, y aquí puede configurar las plataformas de redes sociales necesarias, añadiéndolas y adjuntando enlaces a cada una.

Elija entre una amplia variedad de iconos de redes sociales y configure su bloque social como necesite.

15. Construyendo el pie de página del correo electrónico

El pie de página del correo normalmente contiene información de contacto, como la dirección de su sitio web, el motivo por el que ha contactado con los destinatarios, enlaces a sus cuentas de redes sociales ocultos tras los iconos de las redes sociales, el enlace de baja y el nombre de la persona responsable del correo electrónico del boletín. Esto último es opcional, pero todos los elementos que lo preceden son obligatorios.

• Cómo crear un pie de página de correo electrónico con Stripo

Esto es un elemento compuesto de los correos electrónicos. Para construir uno, tiene que arrastrar una estructura con la cantidad necesaria de columnas, añadir el número necesario de bloques de texto, pegar todos sus textos y editarlos. Después de eso, añada un bloque de redes sociales y edítelo para que se ajuste a todas sus necesidades en cuanto a redes sociales que quiere promocionar.  

16. Color de fondo e imagen

Los fondos aplicados a contenedores/rayas individuales (también conocidas como filas) ayudan a atraer la atención de los destinatarios hacia ciertos elementos. Los fondos aplicados a correos completos hacen que su diseño parezca completo y unificado. Ya ha puesto el color principal para el fondo antes, pero aquí tiene una breve guía sobre cómo configurarlo para una pieza de diseño de correo aparte para el correo.

En este ejemplo, vamos a aplicar un color de fondo a una estructura.

• Cómo establecer un color de fondo para una estructura

Primero, haga clic en cualquier elemento de la estructura y vaya a las opciones de Estilos (es importante que haga clic exactamente en la estructura, ya que al hacer clic en el contenedor se abrirán la configuración del contenedor, y por ahora no es nuestro caso).

Haga clic en la opción Color de fondo para abrir una paleta y elegir el color exacto que quiere que tenga la estructura de su fondo.

Si tiene el número exacto de color, puede pegarlo en este campo de entrada.

Para configurar el color de todo el fondo del correo, vaya a Estilos Generales y Configuración de Diseño y ajusta la opción de Color General de Fondo.

• Cómo configurar una imagen de fondo para todo el correo

La imagen de fondo se mostrará solo en dispositivos de sobremesa. No se mostrará en móviles. En la sección General de Estilos y Diseño, haga clic en la opción Imagen de fondo. Se abrirá un menú familiar para añadir imágenes. Elija el de Photostock o súbalo desde su dispositivo para adjuntar esta imagen al fondo de su correo.

Su imagen de fondo está adjunta, pero tendrá una posición predeterminada, así que tendrá que hacer algunos ajustes para que encaje con su visión de diseño.

Puede hacer que su imagen de fondo se repita durante todo el correo, cambiar su posición horizontal y vertical, así como establecer el ancho y la altura exactos.

17. Escribiendo los temas y los encabezados

Para añadir un asunto y un preencabezado, vaya a Configuración de mensajes y rellene estos dos campos correspondientes.

Puede añadir cualquier texto que necesite, así como reforzar su mensaje con emojis.

Lo mismo ocurre con los preencabezados, salvo por la opción adicional de rellenarlos con espacios en blanco.

Si no tiene tiempo para crear los asuntos usted mismo, siempre puede recurrir a las capacidades de GenAI y hacer clic en el botón Mejorar con IA. Le permite escribir un prompt explicativo, canalizar la creatividad de la IA y generar una línea de asunto o un encabezado perfectos en cuestión de segundos.

18. Adaptando su correo electrónico para dispositivos móviles

Todos los cambios de diseño, incluidas las dimensiones y el relleno, se aplican por defecto a la versión de escritorio del correo. Sin embargo, también puede ajustar cada configuración para la versión móvil del correo.

Para cambiar a este modo y diseñar la versión móvil del correo, haga clic en este botón.

Una vez haga clic, estos ajustes de estilo (y mucho más para cada uno de los elementos del correo)

Se convertirá en esto:

Además, su versión móvil del correo se mostrará en el editor, tal y como se verá en estos dispositivos.

Adicionalmente, puede ocultar varios elementos en móvil si interfieren con su visión de diseño móvil, mientras siga viéndose bien en móvil. Como resultado, puede recibir dos versiones diferentes de correo electrónico: para escritorio con todos los elementos de diseño y móvil con algunos elementos ocultos (o viceversa).

Y no olvide la opción de inversión de contenedores, que cambia la posición de los contenedores en dispositivos móviles (primero hay que aplicar la estructura responsiva a esta estructura; luego puede usar inversión de contenedores).

Así es como se ve.

19. Vista previa y prueba de sus correos electrónicos

Revise y pruebe siempre sus correos antes de enviarlos a los destinatarios. En Stripo, tiene una forma sencilla de previsualizar y probar sus plantillas antes de lanzar sus creaciones por correo electrónico. 

• Cómo previsualizar su correo electrónico con Stripo

Una vez que haya terminado de diseñar su plantilla, haga clic en el botón Vista previa encima de la plantilla.

Verá nuestro modo de vista previa, donde podrá ver cómo se verá su plantilla en pantallas de escritorio y móvil.

También puede ver su correo electrónico tanto en temas claros como en oscuros haciendo clic en estos botones.

• Cómo enviar un correo de prueba con Stripo

La siguiente forma de probar su correo electrónico es simplemente enviarlo a su bandeja de entrada para ver cómo se ve en condiciones reales de los clientes de correo. Haga clic en el botón Probar para abrir esta pequeña ventana.

Pegue las direcciones de correo necesarias para la prueba en el campo correspondiente y pulse el botón Enviar Prueba. Cuando esté hecho, recibirá un correo de prueba que podrá consultar.

• Cómo probar el correo electrónico en todos los entornos populares

Ahora que ha visto las versiones móviles y de escritorio de sus correos y ha enviado un correo de prueba para detectar y solucionar cualquier pequeño problema que pueda surgir, también debería ver este correo exactamente como lo verán sus suscriptores para asegurarse de que entrega un correo con un diseño adecuado. 

Gracias a nuestra integración con Email on Acid, ahora puede previsualizar sus correos en combinaciones populares de clientes y dispositivos directamente en Stripo.

En el mismo menú de pruebas, haga clic en la sección Clientes de Correo Electrónico y luego en el botón Ejecutar una prueba.

Lanzará la prueba de su plantilla en dispositivos y plataformas, y una vez terminada, podrá hacer clic en cada uno de los resultados para echar un vistazo más de cerca.

Elija las plataformas exactas en las que quiere probar su correo electrónico y observe cómo quedará su plantilla tanto en temas claros como oscuros. Asegúrese de que su correo electrónico sea perfecto, sin importar en qué dispositivo o cliente de correo esté abierto.

20. Pruebas de accesibilidad del correo electrónico

No olvide las pruebas de accesibilidad, ya que hay una alta probabilidad de que haya personas con discapacidad visual en su audiencia, por lo que su diseño debe estar preparado. En el menú de Plantilla de Pruebas, haga clic en la sección de Accesibilidad y luego en Ejecutar una prueba.

Su plantilla pasará por una prueba rápida, que mostrará lo que ha anclado en cuanto a accesibilidad y algunas imperfecciones que corregir.

Elija una discapacidad visual específica según la que quiera analizar en su correo, revise los resultados y ajuste su diseño en consecuencia.

• Cómo comprobar el cumplimiento de antispam del correo electrónico 

Sería una pena pasar por todo el proceso de diseño y acabar en la carpeta de spam una vez que envíe el correo. Para evitar este escenario, puede comprobar si su correo electrónico cumple con la normativa antispam. 

Haga clic en la sección de Spam y luego pulse el botón de Ejecutar comprobación.

Su plantilla será rápidamente probada en filtros de spam populares, y verá algunos otros pequeños resultados que también influyen en si su correo será marcado como spam o no.

Tenga en cuenta que cada correo creado con Stripo contiene el código completamente adaptado para lectores de pantalla, así que no tiene que preocuparse por ello.

21. Optimizando su correo para temas oscuros

Los temas oscuros están por todas partes hoy en día, y simplemente no se pueden ignorar. Por ello, es fundamental que adapte el diseño de su correo electrónico a temas oscuros. Las imágenes, tipografías, elementos de diseño, iconos y otros elementos pueden verse muy diferentes al usar el tema oscuro, así que debería estar preparado.

En Stripo, puede emular temas tanto claros como oscuros usando nuestra opción de Condiciones de Visualización. Haga clic aquí para ver nuestra opción de Emulación de Tema. Por defecto, todos los correos electrónicos se crean con el tema Claro.

Una vez que lo cambie, puede ver claramente cómo será su correo en el tema oscuro, así que puede ajustar su diseño en consecuencia.

22. Aplicando condiciones de visualización

Las condiciones de visualización le permiten crear correos personalizados mostrando diversos contenidos según ciertas condiciones. Por ejemplo, tiene un correo electrónico con una oferta especial de zapatillas de hombre y mujer. Puede configurar estos dos bloques en el mismo correo, pero crear condiciones de visualización diferentes para ellos, de modo que los hombres solo vean ofertas para ellos y las mujeres solo las suyas.

Descubra más sobre las condiciones de visualización en nuestro artículo del Centro de Ayuda.

23. Trabajar en equipo con herramientas de colaboración

No tiene que crear sus correos solo todo el tiempo. Colabore con sus compañeros y cree correos electrónicos en tiempo real. Sus compañeros pueden ayudarle con la edición, añadiendo sus propios ajustes al diseño junto a usted. Además, pueden dejar comentarios valiosos con sugerencias que permitan resolver el problema.

Consulte cómo funciona en detalle en nuestra guía especial de artículos.

24. Implementando contenido interactivo 

Para hacer su correo aún más único, puede añadir contenido interactivo usando nuestros bloques especiales. Por ejemplo, puede añadir el bloque Carousel si necesita crear un carrusel de varias imágenes.

¿Quiere ahorrar algo de espacio dentro de su correo electrónico? Utilice nuestro bloque de Acordeón que pliega y despliega la información que introduzca dentro.

¿Quiere conocer la opinión de su audiencia? Añada nuestro bloque de Formulario que permite a los destinatarios escribir sus respuestas, para que pueda ver qué respuesta recibió de qué correo.

La idea principal del contenido interactivo es que esté completamente operativo dentro del correo electrónico. No es necesario transferir al destinatario a una página web de terceros. Hace que sus correos sean mucho más atractivos e interactivos. 

Nota importante: Tenga en cuenta que no todos los clientes de correo admiten contenido interactivo. Por ejemplo, si envía correos a Outlook, aún no tiene soporte para ningún tipo de contenido interactivo.

Si quiere aumentar su nivel de interacción con el correo, puede añadir aún más interactividad usando nuestro generador de módulos interactivos. Tiene un paquete de mecánicas interactivas como las ruedas de la fortuna, cuestionarios, cuestionarios NPS y otras para que elija. Y lo más importante es que no necesita ser un especialista en marketing tecnológico para crear estos módulos interactivos. Todo se crea usando una interfaz intuitiva, y puede guardar y descargar fácilmente el módulo interactivo creado para usarlo en sus correos electrónicos.

25. Guardando elementos de correo electrónico como módulos

Puede guardar en su biblioteca personal todo tipo de contenido para su uso posterior: elementos, bloques, contenedores, módulos y franjas.

Para guardar uno, solo tiene que pasar el cursor sobre este elemento y luego pulsar el botón Guardar como módulo aquí.

El sistema le pedirá que ponga nombre a este elemento en el panel de ajustes para facilitar la búsqueda.

Guardando módulos de esta manera, puede crear correos enteros simplemente arrastrando módulos a su plantilla.

Recomendamos almacenar y reutilizar los siguientes elementos: encabezados, pies de página, información de contacto y contenedores con elementos inteligentes. La primera permanecerá sin cambios; esto último requerirá que inserte un nuevo enlace.

Los módulos de Stripo tienen mucho más preparado para facilitarle la vida. Lea más sobre ellos en nuestro artículo, donde explicamos en detalle cada característica del módulo.

26. Exportando el correo electrónico a su ESP

Una vez que su correo esté completamente terminado (es decir, probado y perfeccionado), puede enviarlo fácilmente a su ESP. Stripo está integrado con más de 90 ESPs, y con clientes de correo como Gmail y Outlook, aplicaciones y más.

Esto significa que puede transferir sus correos a cualquiera de ellos con solo un clic. Si estas opciones no son suficientes, descargue su correo electrónico en formato HTML/AMPHTML, un archivo PDF o una imagen.

• Cómo exportar su correo desde Stripo

Haga clic en el botón Exportar encima de la plantilla.

Después, en el menú abierto, haga clic en las secciones de Proveedor de Correo para ver toda la variedad de ESP integrados.

Haga clic en cualquier opción ESP para abrir ajustes preexportación, introduzca la información necesaria y listo.

El mismo proceso ocurre para exportar a Aplicaciones y como Archivos (solo hay que hacer clic en las secciones del menú correspondientes).

Consejos y características para reducir significativamente la producción de correos electrónicos con Stripo

Tantos correos electrónicos, tan poco tiempo, y eso significa que tiene que recortar gastos o crear un proceso eficiente de diseño de correo. Disponemos de varias funciones para ayudarle con esta tarea. 

• Botones de deshacer y volver a hacer

Estos simples botones le ayudan a cancelar una acción anterior o a volver al estado actual de diseño de su correo desde esos que ya había cancelado.

Le impide volver a crear un elemento de correo electrónico desde cero y le da margen para experimentar con el diseño.

• Historial de versiones

Nos permite ver quién y cuándo han hecho cambios en nuestros correos electrónicos. Y lo que es más importante, permite restaurar cualquier versión de su correo electrónico.

Nos impide crear un correo desde cero (por si no le gustan los últimos cambios realizados en el correo).

Una vez que hace clic en este botón "mágico", verá todas las versiones del correo, todas las fechas y los nombres de quienes hicieron los cambios.

• Acciones de Duplicar y Mover 

Esta es una forma muy cómoda y rápida de usar elementos similares en los correos electrónicos.

Por ejemplo, diseñó una estructura de contenido que se adapte perfectamente a su correo y quiere usarla en todo este correo. No hace falta que lo construya una y otra vez. Solo tiene que hacer clic en el botón Duplicar para crear una copia de esta estructura.

Luego hace clic en el botón Mover y arrastra el elemento copiado al lugar necesario de su plantilla. Esto es todo.

• Almacenar y reutilizar plantillas existentes

Probablemente esta sea mi parte favorita. Si necesita enviar correos similares a diario y solo actualiza alguna información en ellos, como copia o banner, simplemente copie su correo anterior. Y edite elementos que necesitan ser editados. ¡Listo!

• Crear un correo electrónico básico con el Asistente de IA

Si necesita un diseño básico de su correo rápido, siempre puede usar nuestro Asistente de IA. Le permite escribir una consigna explicativa, describiendo de qué trata su correo y qué elementos deben incluirse, y pulsar el botón Generar.

Cuando esté hecho, puede afinar el diseño básico y guardar esta plantilla para trabajar en ella y diseñar un correo completo basado en OT.

Resumen

Como puede ver, tiene todas las herramientas necesarias para crear un correo desde cero y mucho más. Esperamos que este artículo le ayude en su proceso de incorporación y sienta la base perfecta para futuros procesos fluidos de diseño de correos electrónicos con Stripo.