template_01.png

  • ✓ Diseño de respuesta

  • ✓ Universal

  • ✓ Variable

  • ✓ Opción de personalización
    (color, tamaño de letra, fuentes, alineación del texto, etc.)

template_02.png

Elija un borrador de nuestro menú de temas en el borrador de la Biblioteca de Plantillas que mejor se adapte a su contenido de correo y a sus requisitos de diseño.

Entonces todo lo que tienes que hacer es cambiar las fotos, añadir textos e hipervínculos, seleccionar los colores que coincidan con tu identidad corporativa, y listo.
Mover, borrar y añadir bloques de diseño son funciones estándar.


Bloques de diseño soportados

Bloques de diseño determinados para el contenido del Mailshot

La plantilla elegida contendrá sólo algunos de los bloques de diseño que se enumeran a continuación. Por supuesto, siempre tienes la opción de añadir cualquiera de los bloques al contenido de tu mailing. Puedes averiguar cómo hacerlo en la sección Comportamiento general de la plantilla.
¿Necesitas personalizar tu diseño? Todo lo que se puede cambiar en la plantilla se puede encontrar aquí. Además, todas las plantillas pueden cambiar diseño de acuerdo con el diseño de su sitio web.

Bloques de diseño determinados para la cabecera/pie del Mailshot

Hemos preparado los bloques de diseño necesarios para el mailing en el encabezado y el pie de página de la plantilla. Puedes parcialmente editar estos bloques.

Breve descripción de los bloques de diseño

Este bloque de diseño combina estos elementos:

  • el logo de la compañía

  • texto (nombre de la empresa)

  • un hipervínculo

En los teléfonos móviles, tanto el logo como el encabezado estarán centrados.

Pegar con

Computadora

Teléfono móvil

1_logo.png

template_logo.png

template_logo_r.png


Imagen

La imagen inserta una imagen clicable en la plantilla.

Este bloque de diseño combina los siguientes elementos:

  • una imagen

  • un hipervínculo

Se pueden insertar una, dos, tres o cuatro imágenes en la plantilla. Su colocación se ajusta automáticamente al ancho del dispositivo.

En los teléfonos móviles, las imágenes se colocan una debajo de la otra.

Una imagen

Pegar con

Computadora

Teléfono móvil

2_banner1.png

template_banner1.png

template_banner1_r.png

Dos imágenes

Pegar con

Computadora

Teléfono móvil

2_banner2_s.png

template_banner2.ng

template_banner2_r.png

Tres imágenes

Pegar con

Computadora

Teléfono móvil

2_banner3_s.png

template_banner3.ng

template_banner3_r.png

Cuatro imágenes

Pegar con

Computadora

Teléfono móvil

2_banner4_s.png

template_banner4.ng

template_banner4_r.png

Se pueden encontrar recomendaciones para el tamaño de las imágenes aquí.


Saludo y contenido

Este bloque de diseño le permite dirigirse al destinatario por su nombre y apellidos. Si el destinatario tiene un valor de saludo, nombre y apellidos almacenados en sus datos, se añadirán automáticamente al enviar el mailshot. En caso contrario, el valor antes de la coma estará vacío. Este bloque de diseño combina los siguientes elementos:

  • el saludo del receptor

  • un párrafo de texto

  • un botón con un hipervínculo

Ejemplo de variantes de elementos:

Saludo

Saludo y texto

Saludo, texto y botón

Pegar con

Computadora

Teléfono móvil

3_text_s.png

template_salutation.png

template_salutation_r.png


Saludo por género y contenido

Este bloque de diseño selecciona automáticamente el saludo definido en el bloque de diseño (por ejemplo, "Estimado señor") en función del sexo del destinatario. No es necesario conocer el sexo del destinatario. Cuando se genera contenido de correo personalizado, los valores del bloque se establecen automáticamente de acuerdo con el valor del saludo almacenado en los detalles del destinatario.
Además del saludo, el nombre y los apellidos del destinatario también deben almacenarse en los datos del destinatario. Si el nombre del destinatario y/o el destinatario no están almacenados en los detalles, el valor que falta antes de la coma estará vacío.
En caso de dirección desconocida, se utilizará esta última.

Un bloque de diseño que combina los siguientes elementos:

  • el saludo del destinatario en función de su sexo

  • un párrafo de texto

  • un botón con un hipervínculo

Ejemplo de variantes de elementos:

Saludo

Saludo y texto

Saludo, texto y botón

Pegar con

Computadora

Teléfono móvil

20_gender_s.png

20_gender.png

20_gender_r.png


Titular y subtitular

Este bloque de diseño combina estos elementos:

  • Título significativo

  • Subtítulo

En los teléfonos móviles, los elementos se colocan uno debajo del otro.

Pegar con

Computadora

Teléfono móvil

14_geadline.png

template-heading.png

template_heading_r.png


Imagen y contenido

Este bloque de diseño se compone de dos columnas que combinan los siguientes elementos:

  • una imagen en una de las columnas

  • en la otra columna:

    • el título

    • un párrafo de texto

    • un botón con hipervínculo

Este bloque tiene dos opciones para la ubicación de la imagen (izquierda o derecha).

En un teléfono móvil, las columnas se colocan debajo de la imagen.

Imagen y contenido

Pegar con

Computadora

Teléfono móvil

4_image_text_s.png

template_itext.png

template_itext_r.png

COntenido e imagen

Pegar con

Computadora

Teléfono móvil

4_text_image_s.png

template_texti.png

template_itext_r.png

Se pueden encontrar recomendaciones para el tamaño de las imágenes aquí.


Texto y botón

Este bloque de diseño combina los siguientes elementos:

  • el título

  • un párrafo de texto

  • un botón con hipervínculo

Pegar con

Computadora

Teléfono móvil

15_texttB.png

template_text.png

template_text_r.png


Texto

Bloque de diseño para introducir un párrafo de texto.

Pegar con

Computadora

Teléfono móvil

19_text.png

template_txt.png

template_txt_r.png


Botón

Este bloque de diseño inserta un botón con el hipervínculo a la plantilla.

Pegar con

Computadora

Teléfono móvil

117_button.png

template_button.png

template_button_r.png


1-4 Iconos y contenido

Este bloque de diseño se crea hasta en cuatro columnas. Cada columna contiene los siguientes elementos:

  • un gran icono

  • el título

  • texto

  • un botón con un hipervínculo

En los teléfonos móviles, las columnas se colocan una debajo de la otra.

Configuración del bloque de diseño:

  • Individual
    Puede elegir el fondo, el color del texto y de los botones, e incluso la alineación del texto para cada columna. Este ajuste está disponible haciendo clic en el icono edit.svg.

  • Común
    Los ajustes, como el número de columnas, el tamaño de los iconos, el tamaño de los encabezados, la forma de los botones, etc., están disponibles haciendo clic en el icono buffer.svg.

Pegar con

Computadora

Teléfono móvil

5_icons_r.png"

template_icons.ng

Las columnas se colocan una debajo de la otra

Se pueden encontrar recomendaciones para el tamaño de las imágenes aquí.


Caja de imágenes

Este bloque de diseño combina los siguientes elementos:

  • una imagen

  • un párrafo de texto

  • un botón con hipervínculo

Este bloque de diseño puede tener hasta cuatro columnas. El ancho de la columna se adapta al dispositivo utilizado. En las variantes de columnas múltiples en un teléfono móvil, las columnas se colocan una debajo de la otra.

Caja de imágenes 1

Pegar con

Computadora

Teléfono móvil

8_col1_s.png

template_col1.ng

template_col1_r.png

Caja de imágenes 2

Pegar con

Computadora

Teléfono móvil

8_col2_s.png

template_col2.ng

Las columnas se colocan una debajo de la otra

Caja de imágenes 3

Pegar con

Computadora

Teléfono móvil

8_col3_s.png

template_col3.ng

Las columnas se colocan una debajo de la otra

Cuadro de imagen 4

Pegar con

Computadora

Teléfono móvil

8_col4_s.png

template_col4.ng

Las columnas se colocan una debajo de la otra

Se pueden encontrar recomendaciones para el tamaño de las imágenes aquí.


Separador

Un bloque de diseño destinado a separar los bloques que se encuentran en la parte de contenido del mailing. Puedes cambiar el color de la línea divisoria y su fondo, los pesos y el estilo de la línea.

El bloque se adapta al ancho del dispositivo.

Pegar con

Computadora

Teléfono móvil

11_divider_s.png

template_divider.png

template_divider_r.png


Logo/Impressum

El bloque combina estos elementos:

  • un logo

  • texto

En los teléfonos móviles, la parte del texto se coloca bajo el logo.

Pegar con

Computadora

Teléfono móvil

13_imp.png

template_impress.ng

template_impress_r.png"


Redes sociales

Los logotipos de las redes sociales se generan automáticamente si se introduce un enlace de red. No se pueden utilizar logotipos personalizados.

Este bloque combina los siguientes elementos:

  • logotipos e hipervínculos a páginas web de redes sociales conocidas

  • una dirección de correo electrónico

  • un número de teléfono

En los teléfonos móviles, los logotipos se colocan uno debajo del otro.

Pegar con

Computadora

Teléfono móvil

9_soc_s.png

template_soc.ng

template_soc_r.png"

Net Promoter Score

¿Quiere dar a sus destinatarios la oportunidad de puntuar su correo? Incluya este bloque de diseño en el contenido del mailshot.

Hemos preparado varios tipos de plantillas de puntuación, que puede encontrar en los detalles del bloque en la sección de tipos de NPS: nps_score.png

También puede definir un titular personalizado para indicar la sección de puntuación del mailshot.

¿Y cómo funciona la puntuación del correo?
Cada correo electrónico enviado contendrá la puntuación seleccionada. Si el destinatario del correo electrónico hace clic en alguna de las opciones, será redirigido a una página de destino predefinida y su respuesta se registrará en las estadísticas del correo.

El bloque de diseño contiene los siguientes elementos:

  • selección de plantillas predefinidas para el Net Promoter Score

  • hedline

La siguiente imagen muestra una de las posibles plantillas para la puntuación del correo.

Pegar con

Computadora

Teléfono móvil

18_nps.png

template_nps.ng

template_nps_r.png"

No se puede añadir ningún otro bloque de diseño al encabezado y al pie de página de la plantilla. Esta parte está reservada sólo para bloques predefinidos para Vista previa del URL,Darse de baja, y Derechos de autor.

  • la posición del bloque es fija

  • no se puede insertar un bloque

  • el texto del enlace para darse de baja debe ser introducido

  • los elementos que dejaste en blanco no serán visibles en la plantilla o en el contenido del mailshot

  • el bloque de diseño no se mostrará si todos sus elementos están vacíos

Vista previa del URL

En el encabezado del correo se inserta un bloque de texto predefinido diseñado para obtener una vista previa de un correo electrónico en un navegador web. Este bloque sólo aparece cuando ves un correo electrónico en tu ordenador.

Puede editar el contenido de un elemento haciendo clic en el icono global settings directamente en el editor de plantillas.

Pegar con

Computadora

Teléfono móvil

No se puede insertar

template_preview2.png

el bloque no se visualiza

Darse de baja

Bloque de diseño diseñado sólo para el pie de página. Este bloque contiene un campo obligatorio para introducir un enlace de desinscripción.

El bloque se adapta al ancho del dispositivo.

Pegar con

Computadora

Teléfono móvil

No se puede insertar

template_uns.png

template_uns_r.png"

Bloque de diseño diseñado sólo para el pie de página. Contiene un texto, el logo de XCAMPAIGN , y un enlace a la página de información del producto.

Sólo el campo de texto puede ser editado, el resto de los campos están ocultos. Si tienes una suscripción de pago, puedes borrar el texto. El bloque no se mostrará en el mailing.

Pegar con

Computadora

Teléfono móvil

No se puede insertar

copyright.png

copyright_r.png

Impresión

Este bloque de diseño se inserta en el pie de página del mailshot y puede utilizarlo para insertar hasta 4 enlaces a información importante de su sitio web (por ejemplo, páginas con las condiciones de uso, protección de datos personales, etc.).

Este bloque combina los siguientes elementos:

  • Hipervínculos (hasta 4)

  • texto

En los teléfonos móviles, la parte de texto se coloca debajo de los hipervínculos.

Pegar con

Computadora

Teléfono móvil

16_imp.png

template_impr.png

template_impr_r.png"

Reglas para la inserción de imágenes

Si observan las siguientes reglas, sus correos electrónicos siempre se comportarán de manera profesional.
La imagen insertada se ajusta automáticamente al tamaño deseado y la relación de aspecto se mantiene al escalar.

Elemento de diseño

Tamaño de la imagen

  • Imágenes cuadradas

  • el tamaño mínimo de la imagen es de 150x150 px

  • Formato de imagen con fondo transparente (png, gif)

  • Imágenes rectangulares con un ancho mínimo de 750 px

  • Imágenes rectangulares con la misma relación de aspecto

  • El ancho mínimo viene dado por el número de imágenes colocadas una al lado de la otra
    (375 px, 249 px y 187 px para 2, 3 y 4 fotos)

  • imágenes con un ancho mínimo de 355 px

Comportamiento general de la plantilla

  • Tras hacer clic en el bloque de diseño seleccionado, aparecerán las herramientas de edición en la parte derecha.

  • La plantilla tiene un contenido de muestra preestablecido.

    • El diálogo del editor se utiliza para introducir su propio contenido, que puede abrirse para cada elemento haciendo clic en el icono edit.svg.
      Además del contenido, también puede definir los ajustes del bloque de diseño que desee (colores, tamaños de fuente, etc.).

    • Si el valor por defecto (es decir, lorem ipsum) permanece en el cuadro de texto, aparecerá un icono warning.svg junto al campo de edición.
      El contenido también se puede comprobar directamente desde el menú contextual 24.
      Todos los bloques donde se encontró el valor por defecto están resaltados.

    • También puede insertar nombres de campos de su estructura de datos en el campo de texto para preparar un contenido más personalizado de sus maishot.
      Sólo hay que utilizar la opción Insertar un campo de datos, si se ofrece:

      insert_data_field.png

    • El botón no aparece en el bloque hasta que se introduce el valor del hipervínculo.

    • Todos los campos de hipervínculos están vacíos por defecto (excepto el enlace para cancelar la suscripción).

    • El bloque de diseño no aparece si todos sus elementos están vacíos.

  • La selección de las fuentes utilizadas para los encabezados y textos es parte de los ajustes del elemento de diseño para el Vista previa del URL.

  • Los bloques de diseño colocados en la parte principal de la plantilla, es decir, fuera de la cabecera y el pie de página de la plantilla, pueden ser:

    • Muévete libremente con los iconos "up.svg down.svg o el ratón

    • copiado (copy.svg) y borrado (delete.svg).

  • Utilice el icono add.svg en la parte superior izquierda para añadir un nuevo bloque de diseño. El bloque se inserta al final del contenido.

  • Puede cambiar los colores (texto, botones, fondo), las fuentes o los logotipos de todo el mailshot muy rápidamente utilizando el icono "brush-solig.svg. Para más información, consulte Modificación del diseño de los Mailshots mediante X-Designer.

Personalizar la apariencia de la plantilla

Si puede editar la apariencia del elemento de diseño, la ficha Diseño se muestra en los detalles.

Allí también se puede editar el aspecto de los elementos individuales utilizados en el bloque de diseño (por ejemplo, el título, el texto, los botones, etc.). Puede reconocer el elemento en el que está trabajando actualmente a partir del nombre del campo; la propiedad editada está determinada por el texto entre paréntesis, como "Botón (color de fondo)".

Una vez que haya modificado uno de los elementos de diseño por defecto, la configuración de su bloque se utilizará cuando inserte el mismo bloque en el mailshot editado. Por lo tanto, no es necesario realizar repetidamente los mismos cambios en la apariencia.

Note

Si sólo necesita cambiar el color de una parte del texto, utilice el editor directamente en el campo de texto. Más información aquí.

Configuración de texto personalizada

Familia de fuentes

Puede especificar qué fuente se utilizará para el título y cuál para el otro texto.
La selección de la familia de fuentes permite hacer clic en el icono global settings directamente en el editor maestro.

Haga clic en el archivo y seleccione la familia de fuentes deseada. Esto siempre consiste en varias fuentes. La primera fuente de la lista seleccionada se utilizará como fuente predeterminada. Se utilizarán fuentes adicionales de forma secuencial si el destinatario del correo electrónico no tiene instalada en su ordenador la fuente de primera elección.

Alineación de texto

Seleccione el método de alineación de texto deseado (izquierda, centro, derecha) de las opciones predefinidas. Si edita la alineación para los elementos de diseño 1-4 Iconos y contenido y Caja de imágenes este ajuste es común a todas las columnas contenidas en el elemento y sólo está disponible en la primera edición de la columna.

Tamaño de la fuente

Dependiendo del tipo de bloque de diseño seleccionado, el tamaño de la fuente se puede ajustar para los encabezados, los botones y el propio texto. El tamaño se puede cambiar con las flechas junto al campo o con la barra lateral.

Texto en negrita (peso de la fuente)

¿Quieres usar una fuente más audaz o una más delgada? Sólo tienes que hacer clic en la casilla para elegir de la selección la que más te convenga.

Cambio en el tamaño del texto

¿Tienes el texto listo y necesitas que esté, por ejemplo, todo en mayúsculas?
Sólo tienes que hacer clic en el cuadro y elegir cómo se debe cambiar el texto:

  • todo en mayúsculas_(mayúsculas_)

  • todo en minúsculas_(_minúsculas)

  • todas las primeras letras en mayúscula_(_mayúsculas)

  • se dejó como estaba escrito_(ninguno_).

Margen interno (Relleno)

Este ajuste especifica la distancia entre el contenido incrustado, (por ejemplo, el texto del botón) desde los bordes superior e inferior del elemento en el que se inserta el contenido (por ejemplo, desde el borde del botón).

Este término se conoce en diseño como "acolchado".

Forma del botón (borde-radio)

Con el radio del borde se puede establecer si el botón será rectangular o tendrá las esquinas redondeadas (y cuánto será redondeado).
Puedes cambiar el tamaño usando las flechas junto al campo o usando la barra lateral.

Color de todo el texto

Puedes cambiar el color del texto, el fondo del texto y los fondos de los botones. El código de color seleccionado y su nombre se muestran en el campo y, a la izquierda, se puede ver una vista previa del color. Puedes ver de un vistazo el color que se ha fijado actualmente.

Selecciona un color de la paleta

Para cambiar el color, haga clic en el campo y seleccione el tono deseado en el cuadro de selección (de la paleta predefinida).

Definición de colores personalizados

Para cambiar el color:

  1. 1. Haz clic en el cuadro de nombre de color.

  2. Seleccione la opción Otro color.

    color.png

  3. En lugar del nombre del color original, el texto "Otro color" está en el campo.
    Si conoces el código de color hexadecimal, escríbelo directamente en el cuadro (por ejemplo, d62828).

    color_other.png

  4. Si necesita seleccionar un tono directamente de la paleta, haga clic en el icono colorpicker.svg situado junto a la vista previa del color.
    Se abre un diálogo para la selección de colores.

    color_other.png

    Utilice una de las siguientes opciones para seleccionar un color:

    • Haga clic con el ratón en la casilla del tono de color deseado.

    • En el panel situado encima del código hexadecimal, seleccione el tipo de color deseado (por ejemplo, tonos de verde) y, a continuación, especifique el tono haciendo clic con el ratón en el cuadro situado encima del panel.

    • Si conoce el código hexadecimal del color, escríbalo directamente en el campo (por ejemplo, 4c6874).

      Confirme su selección con el botón Cerrar. La ventana se cerrará y podrás ver la sombra seleccionada en la vista previa de color.

Cambiar parte del texto

¿Necesitas resaltar una parte del texto o añadir un enlace al texto?

  1. Seleccione el bloque de edición del texto que desea modificar haciendo clic.

  2. Haga clic en el botón de edición (icono edit.svg ).

    change_col_part1.png

  3. Se abre el diálogo de edición de contenidos. Dispone de una serie de iconos familiares de los editores de texto.

    change_col_part2

  4. Seleccione la parte del texto que desea modificar.

  5. Seleccione el botón de edición apropiado, por ejemplo, el botón de color del texto. Puede seleccionar un color de la paleta de colores predefinida.

  6. Para especificar un color fuera de la gama de colores preestablecida, haga clic en Selector de color. Se abre el cuadro de diálogo de selección de color:

    color_change_picker.png

    Utilice una de las siguientes opciones para seleccionar un color:

    • Haga clic con el ratón en la casilla del tono de color deseado.

    • Introduzca el color en el campo HEX utilizando su código hexadecimal.

    • En el panel situado encima del código hexadecimal, seleccione el tipo de color deseado (por ejemplo, tonos de verde) y, a continuación, especifique el tono haciendo clic con el ratón en el cuadro situado encima del panel.

      Confirme su elección de color haciendo clic en el icono button-save.svg. Colores añadidos con la opción Selector de color se añaden automáticamente a los Colores del documento

      color_document.png

Modificación del diseño de los Mailshots mediante X-Designer

¿Tiene su propio sitio web y quiere que sus mailshots utilicen el mismo diseño?
Sólo tiene que elegir el X-Designer al seleccionar el tipo de contenido. X-Designer escanea la página web especificada y crea su nueva plantilla utilizando el logotipo, los colores y las fuentes de su empresa. La plantilla creada en su diseño corporativo contiene los elementos de diseño más utilizados. A continuación, la plantilla puede editarse del mismo modo que las plantillas que ofrece Biblioteca de plantillas.

También puede utilizar la funcionalidad en cualquier mailshot creado a partir de las plantillas ofrecidas en la página Biblioteca de plantillas.
Sólo tienes que abrir X-Designer haciendo clic en el icono brush-solid.svg y seleccione la opción Página web. Introduzca su sitio web en el campo y haga clic en la opción Inicio. X-Designer crea automáticamente una plantilla a partir del sitio web especificado de acuerdo con su identidad corporativa.

Para más información sobre el uso de X-Designer, consulte aquí.

Note

Esta es una traducción automática, generada por una máquina.