×

CONTÁCTANOS

¿Necesitas ayuda? Disponemos de la información que necesitas.

Base de conocimientos aero-right Plantillas & Editor aero-right Secciones y bloques de la campaña

Secciones y bloques de la campaña

Plantillas & Editor Actualizado en enero 26, 2022

Añade diferentes secciones y bloques a tus campañas y realiza diseños como todo un profesional. Agrega todo lo que te imagines, tan solo arrastrando y soltando bloques de texto, botones, imágenes y más.

Temas cubiertos en este artículo:

 

 


 

Secciones flexibles

 

Las secciones flexibles permiten el diseño de la estructura de la campaña. Las secciones dividirán en columnas el contenido de la campaña y funcionarán como contenedores para los bloques. Elige un diseño en blanco, después añade nuevas secciones y elimina las que no vayan con tu diseño, añade bloques a tus secciones y personaliza el contenido de tu campaña.

 

Las secciones funcionan de la forma siguiente:

  1. Desliza el puntero sobre cualquier parte del diseño de tu campaña, notarás unas líneas grises y un icono de más. Al hacer clic en el icono aparecerán las secciones disponibles, elige una y automáticamente se insertará en tu campaña. Estas son las secciones disponibles

    • Una columna
    • Dos columnas
    • Tres columnas
    • Barra lateral izquierda
    • Barra lateral derecha
  1. Después de haber agregado una secciona a tu diseño verás otros iconos disponibles, como el icono de lápiz. Al hacer clic en este icono, observaras las opciones de configuración de la sección en el panel izquierdo. Aquí podrás establecer colores de fondo por sección, columna así como tipo y color de borde.
    • Las opciones de configuración de la sección pueden abrirse haciendo clic en cualquier parte del área de la sección.
    • Los bloques se pueden personalizar haciendo clic en ellos mismos.
  1. Observaras dentro de los iconos de la sección, dos flechas, estas te permitirán mover la sección completa.
    • Todas las secciones tienen la posibilidad de moverse, excepto el sub encabezado y el pie de página.
    • El bloque de pie de página contiene los enlaces de suscripción y el permiso recordatorio. Te recomendamos mantener este bloque en el pie de tu campaña, de esta forma, le das la oportunidad al lector de revisar tu contenido antes de dirigirse a estos enlaces y tomar una decisión.
  1. Como siempre, el icono de papelera te permite eliminar una sección. Al eliminar una sección eliminas también su contenido, incluyendo, bloques, configuración, texto, imágenes, etc. Con el objetivo de asegurarnos de que tu decisión de eliminar la sección sea la correcta, deberás confirmar que deseas eliminar la sección.

 

Regresar al inicio


 

Estilos Globales

 

En la pestaña de estilos globales puedes configurar el tema de colores, fondos, bordes y radio del diseño de tu campaña en general.

Tema de color

Hay 27 temas de color disponibles, puedes elegir entre ellos o bien personalizar tu campaña con tu propio tema. Además, puedes personalizar el color de cada bloque y sección.

Color de fondo

Esta opción aplicará el color seleccionado a todo el fondo del diseño de tu campaña, puedes elegir el color desde la barra de colores o bien si tienes el código hex, escribirlo en el casillero. Además, puedes personalizar el color de cada bloque, sección o columna sección el cual, predominará sobre el color de fondo.

Borde del email

Puedes elegir entre dos opciones de borde de email, fondo cuadrado y fondo ancho total. Para la opción de colocar el diseño de tu campaña usando todo el ancho del email, no hay opciones de personalización.

Si eliges la opción para colocar el diseño de tu campaña dentro de un borde de fondo cuadrado, podrás personalizar:

  • Tipo de borde
  • Color de borde
  • Ancho de borde
  • Radio de borde
    • Y aplicar el radio del borde con o sin sub encabezado y pie de página.
Mostrar secciones

El botón mostrar secciones te permitirá ver tu campaña dividida en secciones. Para no ver esta división puedes hacer clic en el botón ocultar secciones.

 

Regresar al inicio


 

Bloques

 

Los bloques son los elementos de diseño que pueden insertarse en tu campaña. Para hacer uso de ellos haz clic en la pestaña bloques, allí encontrarás todos los bloques disponibles y listos para insertar a tus campañas.

Para añadir un bloque a tu diseño haz clic en él y arrástralo hacia el lugar deseado.

Estos son los bloques disponibles:

 

Regresar al inicio


 

 

Bloque de imagen e imagen de tarjeta

 

Utiliza este bloque para añadir imágenes que puedes subir en el momento o tomar desde tu galería de imágenes. Para utilizar cualquiera de estos bloques haz clic en él y arrástralo hacia tu diseño, una vez allí, suelta el bloque en el lugar deseado.

  1. Arrastra y suelta el bloque de imagen hacia tu campaña.
  2. Ahora puedes arrastrar y soltar el archivo de tu imagen directamente o bien hacer clic en buscar un archivo y seleccionar la imagen desde tu ordenador o desde la galería de imágenes, si la imagen ya se encuentra allí.
  3. Haz clic en Guardar y cerrar. Para editar la imagen haz clic en la misma y utiliza las opciones del panel de la izquierda.

Un bloque de imagen añadirá una imagen a tu diseño, mientras que un bloque de imagen de tarjeta, añadirá una imagen más texto dentro de un borde.

En el siguiente ejemplo puedes ver a tu izquierda un bloque de imagen y a la derecha un bloque de imagen de tarjeta.

¿Qué bloque debo usar en mi diseño?

Utiliza el bloque de imagen cuando desees añadir una imagen.

Cuando necesites añadir texto o una descripción a tu imagen, entonces utiliza el bloque de imagen de tarjeta, de esta forma al mover el bloque se moverá la imagen junto a su descripción.

Para aprender cómo añadir imágenes a tus campañas haz clic aquí.

También podrían interesarte los siguientes contenidos:

 

Regresar al menú bloques


 

 

Bloques de texto e imagen

 

Tenemos tres tipo de bloques de texto e imagen:

  • Texto izquierdo
  • Texto derecho
  • Captura inferior

Aprende en este artículo cómo usar este bloque.

Un bloque de texto e imagen te permite añadir una imagen con texto. La diferencia entre estos bloques y el bloque imagen de tarjeta es que el bloque de imagen con texto no se encuentra sujeto a un contenedor o marco, mientras que el bloque de imagen de tarjeta sí. Esto le permite a los bloques de texto ajustar los márgenes hasta el final del espacio en el bloque. A continuación te mostramos un ejemplo de un bloque de texto a la izquierda y un bloque de imagen de tarjeta a la derecha.

 

Regresar al menú bloques


 

 

Bloques de texto

 

Para añadir texto arrastra uno de los bloques de texto a tu diseño y suéltalo en el lugar que desees. Una vez ahí, haz clic en él para eliminar el texto por defecto y añade el nuevo.

Bloques de texto disponibles

Bloque de texto. Este bloque te permite añadir texto dentro de tu campaña.

Recuadro de texto. Este bloque te permitirá añadir texto dentro de un contenedor o marco dentro de tu campaña.

Texto con imágenes. Para añadir imágenes alineadas a un texto utiliza el bloque de imagen de tarjeta o de imagen con texto.

Para editar el texto usa la barra de herramientas localizada en la parte superior del editor, allí encontrarás las opciones comunes de edición de texto, además de opciones para convertir el texto en un enlace.

Copiar y Pegar

Si ya tienes un texto listo, puedes usar la opción Pegar. Esta opción removerá cualquier código o formato escondido en el texto, y permitirá que obtengas un diseño nítido.

Para pegar como texto sin formato:
  1. Haz clic en el bloque de texto
  2. En la barra superior, haz clic en el icono de pegar (Dependiendo del tamaño de tu pantalla, es posible que este icono se encuentre debajo de más opciones.).

  1. Pega el texto en la ventana emergente y haz clic en insertar.
  2. En el panel de la izquierda haz clic en guardar y cerrar.

 

Código de fuente

Para añadir código HTML deberás usar el bloque texto, una vez allí, haz clic en el icono código de fuente y pega el código.

Si estas opciones no están a simple vista, haz clic en la opción Más en tu barra de herramientas.

Formato de bloques de texto

Al hacer clic en cualquier bloque de texto, las opciones de configuración y formato aparecerán a la izquierda.

En la pestaña ajustes, podrás configurar el color de fondo del bloque, el margen de relleno horizontal y vertical y en el caso del bloque con recuadro el color y tipo de borde.

Utiliza la pestaña contenido para ajustar la altura del párrafo y si lo requieres dividir el texto en columnas.

Como cualquier otro editor de texto, cuentas con las herramientas básicas de formato en la barra superior, tales como, negritas, itálica, interlineado, tachado, color de texto, tipo y tamaño de fuente.

Además de poder alinear o centrar el texto y agregar viñetas o numeración.

También puedes añadir anclas, enlaces a documentos, imágenes o videos y utilizar las herramientas de fusión.

 

Puedes añadir DATOS PERSONALIZADOS a tus campañas dentro de tus bloques de texto. Aprende cómo aquí.

Haz clic aquí para conocer cuales son las FUENTES DISPONIBLES para usar en tus campañas. Para páginas de destino puedes usar las fuentes de Google, haz clic aquí para saber más.

Además, puedes AÑADIR ENLACES dentro del texto. Descubre cómo aquí.

Si necesitas más información sobre textos pero en páginas de destino, haz clic aquí.

 

Nota: En algunos bloques de texto verás el logo de TinyMCE al editar el texto. TinyMCE es una aplicación que hace a nuestro Editor de arrastrar y soltar más rápido. Este logo solo es visible en el proceso de edición y de ninguna manera aparecerá en tus campañas al enviarlas.

 

 

 

Regresar al menú bloques


 

 

Bloque de video

 

Los videos son herramientas visuales muy efectivas, ya que le permiten al usuario ver el producto y sus características y esto se traduce en compras exitosas. No dejes de utilizar esta increíble herramienta en tus campañas.

Si deseas aprender cómo subir más sobre videos, haz clic aquí.

 

Regresar al menú bloques


 

 

Bloque divisor

 

Utiliza este bloque para crear espacios entre los elementos de diseño, esto hará que tu página de destino luzca profesional y que cada elemento sea visto con claridad. Para añadir este bloque solo tienes que arrastrar y soltar en el lugar deseado. Si deseas saber más sobre este bloque haz clic aquí.

 

Regresar al menú bloques


 

 

Bloque de botón

 

El CTA (Call to action por sus siglas en inglés) o llamada a la acción, es la parte crucial de tu diseño, ya que es allí dónde podrás medir la interacción de los usuarios. Para añadir este botón haz clic en el bloque y arrástralo hacia la posición deseada. En el panel de la izquierda verás las opciones para personalizar el botón. Sigue leyendo para conocer las opciones de la pestaña Contenido del botón.

  1. En esta casilla deberás escribir el texto que se mostrará en el botón. Procura que sea algo que capte la atención del lector y que logre el objetivo: hacer clic.
  2. Antes de comenzar, selecciona el tipo de URL y después añade la URL a la cual se dirigirá el usuario al hacer clic. Esta URL puede ser externa o bien puede dirigirse a una parte de la campaña. Puedes añadir opciones alternativas, por ejemplo anclas, números de teléfono y correos. Para añadir estas opciones:
    1. Puedes añadir una opción alterna haciendo clic en la opción enlace en la barra de herramientas. Después en el recuadro emergente, selecciona una opción del menú desplegable.
    2. O, directamente seleccionando el tipo de enlace en las opciones de configuración del botón. Nota: Si eliges usar un ancla deberás añadirla antes.
  3. Barra de herramientas del botón: Esta barra se encuentra en la parte superior del editor y allí podrás personalizar el texto y añadir enlaces alternativos.
  4. La opción Aplicar estilo a todos los botones, te puede ser útil si añadirás a tu campaña varios botones y deseas que todos tengan las mismas características.

 

 

Regresar al menú bloques


 

 

Bloques de seguir en redes sociales y compartir en redes sociales

 

Añadir bloques de redes sociales a tu campaña es esencial. Nuestro editor tiene bloques de redes sociales con propósitos diferentes. Para usar cualquier de ellos, solo tienes que arrastrar y soltar el bloque en tu diseño.

El bloque de seguir en redes sociales te permite añadir los iconos de tus redes sociales, este bloque contiene los iconos de más de 20 diferentes redes, incluyendo, Facebook, Twitter, Whatsapp, Linkedin, YouTube, Pinterest, RSS, Vimeo, TripAdvisor, entre otros.

El bloque de compartir en redes sociales te permite añadir: Facebook, Twitter, Linkedin, Myspace, e instapaper. Este bloque le permite a los lectores compartir la campaña en cualquiera de las redes mencionadas.

¿Cuál debo usar?

Según tu estrategia, si lo que quieres es enviar a tus lectores a tus redes sociales, utiliza el botón de redes sociales, de esta forma los usuarios harán clic en la red social de su preferencia donde podrán compartir tu contenido o dar una reacción.

Ahora, si lo que deseas es que tus usuarios compartan tu campaña, entonces, añade el botón de Compartir en redes sociales.

Sigue estas instrucciones para añadir cualquiera de los dos bloques:

  1. Arrastra a tu diseño el bloque deseado o haz clic en él si ya existe en tu diseño.
  2. En el panel de la izquierda haz clic en la pestaña Contenido.
  3. Selecciona un servicio del menú desplegable y haz clic en el icono de más a un costado de este menú.
  4. Ve a tu diseño y haz clic en el icono agregado recientemente, verás que aparecerán nuevas opciones de configuración.
  5. Añade el texto del botón, puedes también cambiar el color y el radio del borde. Y si así lo deseas, aplicar el mismo radio a los otros botones del bloque.

Si deseas mover o eliminar el icono, ubica el puntero de ratón en él y elige la opción deseada.

 

Regresar al menú bloques


 

 

Barra de navegación

 

La barra de navegación es una barra con múltiples enlaces que le permitirá a tus usuarios ir directamente a un enlace.

Cómo añadir una barra de navegación:

  1. Localiza el bloque de barra de navegación en el menú bloques, haz clic en él y arrástralo a tu campaña. Puedes ubicar este bloque en cualquier parte de tu diseño, sin embargo, usualmente es usado en el encabezado.
  2. La barra de navegación tendrá una apariencia semejante a este ejemplo:

  1. Haz clic en Agregar enlace para agregar opciones a tu barra. Puedes añadir hasta 6 enlaces por barra, estos enlaces pueden ser imágenes como logotipos y texto.
  2. Puedes elegir entre enlaces tipo texto o imagen, además puedes remover enlaces y usar solo lo que necesites.
  3. Al hacer clic en uno de los enlaces, podrás personalizar el color, apariencia y borde. Este borde es opcional, si no lo necesitas puedes quitar el color o poner el borde en 0.

How to customize a navigation bar

 

Cómo personalizar mi barra de navegación

Aprende más sobre las opciones en la pestaña contenido en el glosario.

  1. Haz clic en Agregar enlace para agregar opciones a tu barra. Puedes añadir hasta 6 enlaces por barra, estos enlaces pueden ser imágenes como logotipos y texto. Aprende cómo agregar diferentes enlaces aquí.
  2. Existen tres disposiciones de los enlaces, explora cada una de ellas para revisar cual le conviene a tu diseño.

  1. Utiliza las opciones de alineación vertical y horizontal para ubicar la barra. El tamaño del canal determina el espacio entre cada enlace.
  2. El estilo para móvil te permite manipular la forma en la cual los usuarios de dispositivos móviles verán la disposición de los elementos de la barra.

 

 

Regresar al menú bloques


 

 

Bloque de Ecommerce

 

El bloque de ecommerce puede usarse para promover y vender productos en tus campañas.

El bloque de ecommerce incluye espacios para incluir lo siguiente:

  1. Imagen del producto
  2. Descripción del producto
  3. Precio del producto
  4. Botón de acción

Para usar este bloque simplemente arrástralo y suéltalo en el lugar de tu preferencia dentro del layout de tu campaña.

Personaliza el bloque de ecommerce con los pasos a continuación:

  1. Comienza añadiendo la imagen del producto.
  2. Escribe una descripción breve y al punto.
  3. Añade el precio del producto.
  4. Después, personaliza el botón de acción de esta forma: 
    • Agrega el texto del botón
    • Añade la URL a donde será redirigido el usuario al hacer clic en el botón para completar la compra.

Para finalizar, cambia el color y forma del botón de acuerdo a los elementos de diseño de tus boletines. Para evitar el trabajo repetitivo, puedes aplicar el mismo diseño a todos los botones. Para aprender más sobre la personalización de éste bloque haz clic aquí.

Puedes omitir cualquiera de los elementos del bloque de ecommerce inhabilitando desde la pestaña contenido.

  1. Al terminar, haz clic en guardar y luego en guardar y siguiente o bien, haz clic en alguna parte fuera del bloque.

A continuación te mostramos algunas ideas para utilizar el bloque de ecommerce.

Ejemplo 1

Ejemplo 2

Ejemplo 3

Regresar al menú bloques


 

 

Bloque de productos de Shopify

 

Para comenzar, arrastra y suelta el bloque de Shopify en la sección deseada.

Considera que necesitarás una cuenta de pago de Shopify para poder usar este bloque. Al utilizar este bloque por primera vez deberás integrar tu cuenta de Shopify con Benchmark. Para realizar esta integración haz clic aquí.

product api key

Una vez que Shopify haya sido integrado exitosamente con Benchmark, verás la lista de tus productos disponibles en tu tienda de Shopify.

drag shopify block

Selecciona uno de los productos disponibles. Notarás que el bloque se completa con la información de tu producto, esta información se extrae de tu cuenta de Shopify.

El bloque de productos de Shopify tiene las siguientes opciones:

 

  1. Imagen del producto
    • La imagen del producto es la misma imagen contenida en el producto de tu tienda de Shopify. Esta imagen no se aloja en tu galería de imágenes de Benchmark, a menos que realices modificaciones a la imagen en nuestro editor, entonces, se guardará la imagen editada como una nueva imagen. Estos cambios no afectarán a la imagen del producto en tu cuenta de Shopify.
  2. Descripción del producto
    • La descripción del producto será la misma que ya tiene tu producto en tu cuenta de Shopify. Puedes modificar esta descripción en el bloque, esto no afectará la descripción del producto en Shopify.
  3. Precio del producto
    • El precio del producto es el asignado desde tu tienda en Shopify. Aunque podrías cambiar el monto en el bloque de Benchmark, este cambio no se reflejará en el producto de Shopify.
  4. Botón de acción
    • En el botón de acción automáticamente se colocará la URL que llevará al producto en la tienda de Shopify. Este botón es totalmente personalizable.

 

Importante:

  • Si la cuenta de Shopify que estás usando no es la cuenta administradora, deberás contar con los permisos sobre los productos. Haz clic aquí para conocer más sobre usuarios y permisos de Shopify.
  • Puedes conectar a la vez una sola tienda de Shopify. Utiliza la opción cambiar tienda para cambiar la lista de productos. Esta acción removerá los productos anteriores.

  • Los detalles de los productos en el bloque son obtenidos de Shopify. Sin embargo, los cambios realizados en el bloque de Benchmark no afectarán a los detalles del producto en Shopify.
  • Si los detalles de un producto ya colocado en Benchmark se modifican en Shopify, los cambios no se reflejarán automáticamente, deberá insertarse de nuevo el bloque para ver los cambios.
  • Los productos archivados en la tienda de Shopify no estarán disponibles en la lista de productos de Benchmark.
  • Rastrea los clics en tus productos a través de las URLs usando los informes de Benchmark.
  • Duplicar un bloque te permitirá mantener las ediciones del bloque duplicado, ahora bien, si cambias el producto, el formato duplicado será removido, dejando el bloque en su formato original.

Estos son algunos ejemplos de lo que es posible hacer con el bloque de Shopify.

Ejemplo 1

Ejemplo 2

Ejemplo 3

 

 

Regresar al menú bloques


 

Email Examples

 

Revisa los ejemplos de campañas elaboradas con secciones flexibles de Benchmark.

Para tu comodidad hemos colocado un ejemplo a la izquierda con iconos que representan qué opciones de bloques, secciones y borde usamos para dicho ejemplo.

Ejemplo 1

En este ejemplo añadimos una barra de navegación en el encabezado después una sección con barra lateral izquierda, donde colocamos una imagen y a la derecha el título de la campaña, después continuamos con texto y las imágenes fueron colocados en una sección de dos columnas usando el bloque de imagen de tarjeta.

 

 

Ejemplo 2

Esta campaña con un diseño sencillo, puedes usar algo similar si tienes la necesidad de usar tablas. Utilizamos secciones de una y dos columnas. Para este email usamos radio de borde en el cuerpo del diseño.

 

 

Ejemplo 3

En esta campaña hemos usado diferentes secciones de una, dos y tres columnas, incluso añadimos el enlace a un video, y una barra de navegación donde colocamos logotipo y un enlace.

 

 

Regresar al inicio


 

Glosario

 

Las opciones en la pestaña contenido pueden variar dependiendo del bloque que desees personalizar.

Color de fondo

Esta opción te permitirá cambiar, añadir o remover el color de fondo de un elemento. Para usar esta opción, haz clic en el círculo y elige un color de la paleta, o si conoces el código HEX añadelo directamente en el recuadro. Haz clic en guardar para salvar los cambios. La opción reiniciar, devolverá al elemento su color por defecto.

 

Borde y estilo de línea

Algunos elementos tendrán la opción borde disponible. Para añadir un borde a estos elementos haz clic en el círculo debajo de la opción borde y selecciona un color de la paleta o si conoces el código HEX añadelo en el recuadro. Puedes elegir el grosor de la línea entre 0 a 99 px. Si no deseas borde para tu elemento, coloca el color del borde como transparente o ninguno o añade 0 al grosor del borde. La opción reiniciar, devolverá al elemento su apariencia por defecto.

 

Radio del borde

Algunos elementos tienen la opción radio del borde. Esta opción redondeará los vértices o esquinas del elemento. El radio puede variar entre 0 a 20 px. Si deseas aplicar el mismo radio a todos los elementos selecciona la opción aplicar estilo a todos los elementos.

 

Margen de canal

Esta opción está disponible en bloques en los que hay más de un elemento por ejemplo iconos de redes sociales. Esta opción no es más que la separación entre elementos. El margen de separación entre elementos puede variar entre 0 a 20 px.

 

Rellenos

Para ajustar los rellenos de un bloque es decir las áreas alrededor del elemento, dirígete a la pestaña ajustes, también puedes encontrar esta opción en la pestaña contenido. Configura el relleno de un elemento moviendo la barra de relleno horizontal o vertical.

 

Alineación

La opción alineación es relativa a la posición del elemento. Algunos elementos permitirán alineación centrada, izquierda o derecha, otros permitirán alinear el elemento a los bordes del bloque.

 

Altura de la línea

Esta opción está disponible para bloques que contienen texto y se refiere a el interlineado del texto. Las opciones disponibles son simple, 1.25, 1.50 y doble.

 

Código HEX

Puede que no encuentres como tal el nombre de Código HEX, pero si cuentas con el, puedes agregarlo directamente en el recuadro a un lado del círculo que abre la paleta de color. Usualmente este código es una combinación de 6 números y letras y al inicio lleva el símbolo #. Las primeras dos letras representan el color RR rojo, las siguientes GG el color verde y las últimas dos el color azul BB, por ejemplo #CFCFDA. Los códigos de color hex son usados usualmente para mantener el branding o el tema de colores de tu marca unificados. Si no cuentas con el siempre podrás elegir colores desde nuestra paleta de color.

 

Regresar al inicio

 


 

No pierdas la oportunidad de crear campañas increíbles con Benchmark, si tienes más dudas sobre tu cuenta o sobre cómo usar nuestra herramienta, comunícate con nuestro equipo de soporte vía email, chat o teléfono.

 


¿Te ha resultado útil esta información?
¡Ya has votado!