Base de conocimientos 
Editor arrastrar y soltar Secciones y bloques de la campaña
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:
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:
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.
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.
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.
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:
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.
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:
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.
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.
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:
Tenemos tres tipo de bloques de texto e imagen:
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.
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.
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.
La funcionalidad Revisión Ortográfica de Benchmark comprueba tu contenido para garantizar que la ortografía de tu email es correcta. El idioma de la Revisión Ortográfica será, por defecto, el idioma seleccionado de tu cuenta. Puedes cambiar el idioma o desactivar la funcionalidad de Revisión Ortográfica en la barra de menú superior del email.
Para ver el corrector ortográfico en acción, abre cualquier bloque de texto y empieza a escribir. Las palabras mal escritas aparecen subrayadas en rojo. Puedes hacer clic con el botón derecho en la palabra para seleccionar la ortografía correcta o ignorar el aviso. La opción Más abrirá otra lista de palabras disponibles.
IMPORTANTE
El clic derecho no funciona: Algunos sistemas operativos tienen una configuración por defecto para los gestos de clic con el botón derecho del ratón. Comprueba la configuración de tu ratón o trackpad si al hacer clic con el botón derecho no aparecen las sugerencias ortográficas.
NOTA
Al seleccionar la opción Ignorar, se guardará la palabra que has corregido en ese momento. Si cierras el bloque y vuelves a él más tarde, la palabra mal escrita aparecerá como mal escrita.
La funcionalidad Revisión Ortográfica está disponible actualmente en los siguientes idiomas.
Copia y pega tu contenido desde otras fuentes utilizando la funcionalidad Pegado Fácil. La funcionalidad Pegado Fácil hace que copiar y pegar contenido de otras fuentes, como tu página web, Google y documentos de Microsoft, sea rápido y sencillo. Puedes eliminar el formato original o mantenerlo para que coincida con tus otras páginas.
Para utilizar la funcionalidad Pegado Fácil, sigue los pasos que se indican a continuación.
IMPORTANTE
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.
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í.
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í.
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.
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.
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:
Si deseas mover o eliminar el icono, ubica el puntero de ratón en él y elige la opción deseada.
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:
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.
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:
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:
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.
A continuación te mostramos algunas ideas para utilizar el bloque de ecommerce.
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í.
Una vez que Shopify haya sido integrado exitosamente con Benchmark, verás la lista de tus productos disponibles en tu tienda de Shopify.
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:
Importante:
Estos son algunos ejemplos de lo que es posible hacer con el bloque de Shopify.
Ahorra horas de diseño, guardando tus bloques personalizados para usarlos en otros diseños. Añade un bloque guardado y modificalo en tu nuevo diseño, no le pasará nada al bloque guardado orginalmente.
Para guardar un bloque, pasa el puntero sobre el bloque y haz clic en la opción guardar bloque. Dale un nombre y haz clic guardar y cerrar.
Para usar un bloque guardado
Eliminar bloques guardados
Los bloques eliminados de la sección Mis bloques, no se eliminarán automáticamente de tus diseños.
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.
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.
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.
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.
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.
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.
