×

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 abril 21, 2021

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
  2. 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.
  3. 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.
  4. 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


 

Bloque de texto

 

El texto es esencial, y para añadirlo, puedes arrastrar el bloque de texto a tu diseño y soltarlo en el lugar que desees. Una vez colocado el bloque basta con hacer clic en él para eliminar el texto por defecto y añadir el tuyo.

Revisa el glosario para comprender el uso de las pestañas ajustes y contenido del bloque de 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.

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.

 

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:
  3. 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.
  4. Puedes elegir entre enlaces tipo texto o imagen, además puedes remover enlaces y usar solo lo que necesites.
  5. 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.
  3. Utiliza las opciones de alineación vertical y horizontal para ubicar la barra. El tamaño del canal determina el espacio entre cada enlace.
  4. 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


 

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!

¿No encuentras lo que buscas?

Crea un ticket