Diseñar contenido digital

Dynamics 365 Marketing proporciona un diseñador avanzado de contenido digital para crear, diseñar y obtener una vista previa de los distintos tipos de contenido digital que puede producir y administrar con el sistema, incluidos:

• Mensajes y plantillas de correo electrónico de marketing
  Más información: Información general del marketing por correo electrónico
• Páginas y plantillas de marketing
  Más información: Crear e implementar páginas de marketing
• Formularios y plantillas de marketing
  Más información: Crear, ver y administrar formularios de marketing

El diseñador cuenta con una interfaz de arrastrar y colocar para crear y trabajar con el diseño, además de un editor HTML opcional para trabajar directamente con el código y una herramienta de vista previa que puede mostrar la apariencia de su diseño en varios factores de forma y orientaciones.

El diseñador se adapta a su contexto actual (correo electrónico, página de aterrizaje, etc.) para proporcionar solo aquellos elementos de diseño y configuración que se aplican ahí, pero su funcionalidad básica permanece igual. También proporciona un "modo de contenido no nativo" que se activa si pega el HTML de una aplicación de terceros directamente en el editor de código HTML; en este caso, el diseñador 0 conoce el tipo de contenido que está diseñando y, de esta forma, oculta las características específicas del contexto y proporciona una interfaz de diseño más genérica.

En este tema se describe cómo trabajar con el diseñador en general, en todos los contextos. Para obtener más información acerca de cómo se adapta el diseñador a los distintos contextos específicos, y para obtener información detallada específica de un solo contexto, consulte los temas vinculados a la lista al principio de esta introducción.

Comience eligiendo una plantilla

La mayoría de las entidades sin plantilla que proporcionan contenido al diseñador también admiten plantillas, por lo que cuando cree por primera vez un correo electrónico de marketing, una página o un formulario, se le pedirá que seleccione una plantilla.

El selector de plantillas proporciona muchos controles para buscar, ordenar y filtrar plantillas. Use estos controles para encontrar plantillas que puedan cumplir sus requisitos, luego seleccione una plantilla para obtener una vista previa y más detalles sobre ella en el área Vista previa. Cuando haya encontrado la plantilla correcta, seleccione Seleccionar para aplicarla a su nuevo diseño.

La plantilla que seleccione iniciará su diseño estableciendo lo siguiente:

• Diseño de columna y contenido inicial: Define el diseño básico (como una columna o dos columnas) e incluye contenido inicial (como imágenes, vínculos necesarios, texto de plantilla, etc.).
• Tipo de página o formulario: si va a crear una página o formulario de marketing, esto le indica si la página es un centro de la suscripciones, un formulario de reenvío a un amigo o una página de aterrizaje, y establece las capacidades básicas de la página o formulario.
• Diseño y contenido de muestra: algunas plantillas ya incluyen elementos de diseño básicos, como logotipos, tipografía, paleta de colores, contenido de muestra, etc. Otras plantillas proporcionan una página en blanco que incluye solo el tipo de página y la distribución de columnas. Puede cambiar libremente el diseño y el contenido de muestra a medida que edita y diseña la página.

Una vez que haya elegido una plantilla, el diseñador muestra el contenido de su plantilla seleccionada y puede empezar a editarla. El nuevo correo electrónico, página o formulario se crea como una copia simple de la plantilla, por lo que ningún cambio local que realice afectará a la plantilla y ningún cambio futuro afectará a nada de lo que haya creado en base a ella.

Establecer su diseño básico

Use elementos de sección para establecer el diseño básico de los correos electrónicos, páginas de marketing, y formularios de marketing. Cada elemento de sección crea una fila de columnas a las que puede arrastrar otros elementos de diseño, como los cuadros de texto, imágenes, botones, divisores, etc. Hay cinco elementos distintos de sección, cada uno crea una fila con una de las cinco distintas opciones de diseño (una columna, dos columnas (1: 1), dos columnas (1: 2), dos columnas (2: 1), o tres columnas). Puede apilar varios elementos de sección según sea necesario para crear diseños complejos con distintos diseños de columna en cada fila.

Agregar elementos de sección a la disposición del diseño

Cuando esté diseñando un correo electrónico, página o formulario que empieza con la plantilla en blanco (o una plantilla personalizada basada en la plantilla en blanco), todos los elementos de diseño (excepto los de sección) deben colocarse en un elemento de sección. Los elementos de sección se proporcionan en el panel Cuadro de herramientas bajo el encabezado Diseño.

Las plantillas en blanco proporcionan una sección de una columna de forma predeterminada, pero puede editar este diseño de columna y agregar más elementos de sección según sea necesario.

Para agregar un elemento de sección, abra el panel Cuadro de herramientas, elija el elemento de sección que proporciona el diseño de columna con el que desea empezar y arrástrelo sobre o bajo cualquier elemento de sección existente en su diseño.

Editar y configurar un elemento de sección

Cuando se agrega un nuevo elemento de sección, se elige uno de cinco diseños de columna iniciales. Pero, una vez que se incluye el elemento, puede cambiar las opciones de diseño de columna y/o disposición.

Para editar y configurar un elemento de sección:

1. Seleccione el elemento de sección en el lienzo. Ahora muestra un borde azul y pestañas con el tipo y los botones del elemento para eliminarlo o moverlo.

2. El panel Propiedades se abre para mostrar la configuración de la sección seleccionada.

   

3. Configure las siguientes secciones según sea necesario:

   • Diseño de sección: seleccione un botón aquí para cambiar el diseño de columna al que está indicado por el gráfico de cada botón. Si quita una columna, todo su contenido se moverá a una de las columnas restantes. Si agrega una columna, la nueva columna estará inicialmente vacía.
   • Estilos de borde de la sección: Use estos valores para establecer el estilo (ninguno, sólido, punteado, con guiones o doble), el ancho de línea, el color de línea, y el radio de la esquina del borde que rodea la sección completa (pero no entre las columnas).
   • Relleno de sección: especifique la cantidad de relleno (en píxeles) que desea colocar entre las columnas y el borde coloreado. Puede especificar valores independientes para la parte superior, la parte inferior, la izquierda y la derecha.
   • Margen de sección: especifique la cantidad de margen (en píxeles) que desea colocar entre el borde coloreado y el borde exterior del elemento de sección. Puede especificar valores independientes para la parte superior, la parte inferior, la izquierda y la derecha.

Agregar, configurar y editar elementos de diseño para crear contenido para el diseño

Los elementos de sección crean una estructura a la que puede arrastrar otros tipos de elementos de diseño para crear su contenido. Si usa elementos de sección, todos los elementos de diseño deben estar en una columna de elemento de sección.

• Para agregar un elemento de diseño, arrastre el elemento requerido del Cuadro de herramientas a la columna de elemento de sección correcta. Cuando se quita la mayoría de los tipos de elementos, el panel Propiedades se abre o, para los elementos de texto, la barra de herramientas Formato se abre para poder empezar a escribir texto.
• Para configurar las propiedades de un elemento existente, o empezar a escribir texto en un elemento de texto, primero seleccione el elemento de sección contenedor para activarlo y después seleccione el elemento de destino para empezar a editarlo. Para los elementos que no sean de texto, se abrirá el panel Propiedades del elemento seleccionado. Para los elementos de texto, se abrirá la barra de herramientas flotante de formato de texto.
• Para eliminar un elemento de diseño, selecciónelo y luego seleccione el botón Eliminar disponible en la esquina superior derecha del elemento.
• Para mover un elemento de diseño, selecciónelo, luego haga clic en el botón Mover disponible en la esquina superior derecha del elemento y arrastre el elemento a su nueva ubicación.

Trabajar con el diseñador

La mayor parte del tiempo que dedique a crear un correo electrónico de marketing, página o formulario utilizará el diseñador o el editor HTML para agregar contenido, configurar elementos de diseño, cargar imágenes, aplicar estilos, etc.

El diseñador cuenta con una barra de herramientas y un área de contenido. La barra de herramientas proporciona algunos comandos básicos y tres pestañas de navegación (Diseño, HTML y Vista previa), que controlan lo que puede ver y lo que puede hacer en el área de contenido.

Usar el diseñador gráfico

Seleccione Diseñador en la barra de herramientas del diseñador para abrir el diseñador gráfico. Le permite recopilar y diseñar su contenido sin usar ningún código. En la mayoría de los casos, nunca necesitará ir a la vista HTML salvo que lo desee.

El diseñador gráfico proporciona una vista previa editable (lienzo) en la que puede seleccionar, editar o eliminar contenido; y un conjunto de pestañas para agregar elementos de diseño y trabajar con el diseño:

• Cuadro de herramientas: para agregar un nuevo elemento de diseño a su diseño, arrastre un elemento desde aquí hasta el lugar apropiado del lienzo, o bien, seleccione un elemento aquí (sin arrastrar) para resaltar cada posición del lienzo donde podría colocar el elemento y, a continuación seleccione la posición resaltada donde le gustaría colocarlo. Cada elemento de diseño representa un tipo específico de contenido, como un elemento de texto, una imagen o un formulario de entrada. La configuración y funciones de cada elemento de diseño varía según el tipo.
• Propiedades: la mayoría de los elementos de diseño deben configurarse para trabajar. Por ejemplo, una imagen debe seleccionar un archivo de imagen, un formulario debe seleccionar un registro de formulario de marketing, y un botón necesita algo de texto y un destino. Cuando agrega un nuevo elemento de diseño, ese elemento se selecciona automáticamente y la pestaña Propiedades se abre para que pueda configurarla. Para configurar (o reconfigurar) cualquier elemento de diseño que ya está en el diseño, selecciónelo y abra la pestaña Propiedades.
• Estilos: use esta configuración para aplicar color, espaciado y otras opciones gráficas al diseño general.

Más información: Referencia sobre elementos de diseño

Trabajar directamente en HTML

Si prefiere trabajar directamente con código HTML, abra la pestaña HTML del diseñador. Puede hacer esto retocando algunas propiedades que no pueda obtener mediante el editor gráfico, o puede pegar en el código HTML que ha creado mediante otro programa. También podría agregar scripts y estilos avanzados para introducir nuevas funcionalidades. Por ejemplo, si está diseño una página de marketing, puede escribir scripts para implementar las siguientes funciones:

• Cambie las propiedades de un campo (o formulario) basado en los valores de otro campo, por ejemplo:
  • Cree un campo N.º de cliente que sea visible solo si se aplica Cliente existente.
  • Cree un campo N.º de cliente necesario si se aplica Cliente existente.
  • Borre el campo de dirección Estado si se cambia el campo País.
  • Cambie la lista de valores Estado basados en el país elegido.
  • Cambie los estilos de campos para hacerlos visibles, obligatorios, etc.
• Agregue validaciones personalizadas de valor de campo (cuando se envía el formulario o se cambia el valor de campo), como exigir que N.º de cliente tenga solo seis dígitos.
• Realizar acciones al cargar o enviar el formulario, por ejemplo:
  • Ocultar determinados campos de forma predeterminada
  • Deshabilitar el botón Enviar hasta que se rellenen todos los campos obligatorios
  • Establecer valores basados en valores que se han pasado a la URL que realiza la llamada

No obstante, tenga cuidado cuando trabaje aquí porque el editor gráfico espera tipos específicos de incremento para implementar sus elementos de arrastrar y colocar. Sin este incremento, ya no podrá editar sus elementos de diseño e incluso podría romperlos. Más información: Usar atributos personalizados para habilitar las características de diseñador de correo electrónico, páginas y formularios

El editor HTML proporciona algunas funciones prácticas de edición de código, como colores y números de línea de la sintaxis. También puede aplicar formato para agregar saltos de línea y sangrías a fin de que el código sea más legible; para ello, haga clic con el botón derecho en cualquier parte del editor y seleccione Dar formato a documento en el menú contextual.

Vista previa de su diseño

Aunque el editor de arrastrar y colocar proporciona una vista previa editable, esta vista previa es solo una aproximación e incluye algunos compromisos en su presentación para permitir sus funciones de edición. Para obtener una mejor idea del aspecto que tendrá su diseño, vaya a la pestaña Vista previa del diseñador.

Use los botones de la columna izquierda de la pestaña Vista previa para ver el aspecto que tendrá su diseño en distintos tamaños y orientaciones de la pantalla, como escritorio, horizontal en tableta o vertical en móvil. La vista previa también refleja las funciones de diseño dinámico incorporadas en muchas de las plantillas. Sin embargo, la vista previa no ejecuta cualquier script personalizado que pueda haber agregado (por ejemplo, para validar las entradas del formulario).

Vea también

Accesibilidad y métodos abreviados de teclado
Referencia sobre elementos de diseño
Información general del marketing por correo electrónico
Trabajar con plantillas de correo electrónico, páginas y formularios
Crear e implementar páginas de marketing
Accesibilidad y métodos abreviados de teclado
Poner en marcha con entidades publicables y hacer un seguimiento de su estado