Componentes de estructura structure-components

Use los componentes de estructura en el espacio de diseño visual para definir la estructura del contenido. Al agregar y mover elementos estructurales con sencillas acciones de arrastrar y soltar, puede definir rápidamente la forma del diseño de contenido. Cada componente de estructura ocupa el espacio horizontal y puede apilarlos para crear el diseño verticalmente.

Biblioteca de estructura structure-library

En la parte superior de la biblioteca Components, la sección Structures muestra los componentes de estructura disponibles:

Ícono

Componente

Descripción

Columna 1:1

Un contenedor de columna único que rellena el ancho del espacio.

Columna 1:2 izquierda

Contenedor de dos columnas que utiliza una relación 1:2 para rellenar el ancho del espacio. La primera columna (izquierda) ocupa un tercio de la anchura y la segunda (derecha) ocupa los dos tercios restantes.

Columna 1:3 izquierda

Contenedor de dos columnas que utiliza una relación 1:3 para rellenar el ancho del espacio. La primera columna (izquierda) ocupa una cuarta parte de la anchura y la segunda (derecha) ocupa las tres cuartas partes restantes.

Columna 2:1 derecha

Contenedor de dos columnas que utiliza una relación 2:1 para rellenar el ancho del espacio. La primera columna (izquierda) ocupa dos tercios de la anchura y la segunda (derecha) ocupa el tercio restante.

Columna 2:2

Contenedor de dos columnas que utiliza una relación 2:2 para rellenar el ancho del espacio. Las columnas izquierda y derecha tienen el mismo ancho.

Columna 3:1 derecha

Contenedor de dos columnas que utiliza una relación 3:1 para rellenar el ancho del espacio. La primera columna (izquierda) ocupa las tres cuartas partes (75 %) de la anchura y la segunda (derecha) ocupa la cuarta parte restante (25 %).

Columna 3:3

Contenedor de tres columnas que utiliza una relación 3:3 para rellenar el ancho del espacio. Las tres columnas tienen el mismo ancho.

Columna 4:4

Contenedor de cuatro columnas que utiliza una relación 4:4 para rellenar el ancho del espacio. Las cuatro columnas tienen el mismo ancho.

n:n columna

Estructura de columnas personalizable que rellena el espacio según las columnas definidas. El número de columnas (entre dos y diez) se establece y el ancho de cada columna se establece de forma individual. Más información

Añadir componentes de estructura add-structure-components

Al diseñar el contenido del correo electrónico, la página de aterrizaje o el fragmento, agregue cada componente de estructura para construir el diseño. Arrastre un elemento de la sección Structures a la izquierda y suéltelo en el lienzo. Puede usar la barra de herramientas para seleccionar una columna y usar las fichas Configuración y Estilos del panel derecho para definir los parámetros del componente o la columna seleccionados.

{width="800" modal="regular"}

Barra de herramientas de componentes component-toolbar

La barra de herramientas se muestra en el lienzo cuando se selecciona en el lienzo. Las herramientas disponibles proporcionan una forma sencilla de seleccionar una columna y aplicar las funciones de los componentes.

{width="150"}

Herramienta

Nombre

Uso

{width="40"}

Habilitar contenido condicional

(Correos electrónicos y fragmentos) Habilite variantes condicionales para el componente.

{width="100"}

Seleccionar una columna

Seleccione una columna por número. Cuando se selecciona la columna, puede aplicar la configuración de columna y los estilos.

{width="40"}

Duplicado

Cree una copia del componente y agréguelo directamente debajo.

{width="40"}

Eliminar

Desmonte el componente.

Configuración de componentes component-settings

Después de agregar un componente, se selecciona en el espacio de diseño visual y sus propiedades se muestran en el panel derecho. La ficha Configuración se muestra de manera predeterminada. También puede seleccionar un componente de estructura en cualquier momento para cambiar la configuración.

Opciones de visualización

Si desea excluir el componente de la pantalla del escritorio o del dispositivo móvil, cambie la configuración de Opciones de visualización. De forma predeterminada, Mostrar en todos los dispositivos, habilita la visualización en todos los dispositivos.

{width="400" modal="regular"}

Elija otra configuración para que el componente sea exclusivo por tipo de dispositivo:

Encabezado y pie de página

Puede designar un componente de estructura como encabezado o pie de página de HTML en el mensaje de correo electrónico o la página de aterrizaje. Con el componente de estructura seleccionado en el lienzo, haga clic en la opción Encabezado o Pie de página. Solo puede haber un encabezado o pie de página, y la opción no está disponible si se asigna otro componente.

{width="600" modal="regular"}

Para quitar la designación del encabezado o pie de página, seleccione el componente y haga clic en la opción para quitarlo.

Columnas apiladas stacked-columns

En el caso de pantallas o ventanas de visualización más pequeñas, las columnas del componente de estructura se muestran como apiladas a menos que cambie la configuración predeterminada. Con el componente de estructura de varias columnas seleccionado, cambie la configuración No apilar columnas en dispositivos móviles moviendo el control deslizante de alternancia a la derecha.

{width="250"}

Estilos de componente component-styles

Después de agregar un componente, se selecciona en el espacio de diseño visual y sus propiedades se muestran en el panel derecho. También puede seleccionar un componente en cualquier momento para cambiar la configuración y los estilos.

Contexto background

Con la ficha Estilos seleccionada en el panel derecho, utilice la sección Fondo para definir el color y la imagen opcional que se utilizará como fondo para el componente de estructura.

Color de fondo

Seleccione la casilla de verificación y haga clic en el cuadrado de color para elegir un color del selector. Puede elegir un color introduciendo un valor RGB, HSL, HSB o hexadecimal conocido. O bien, utilice el regulador de color y el campo de color para seleccionar el color.

{width="300"}

Imagen de fondo background-image

Mueva el selector de alternancia para habilitar la configuración de imagen de fondo.

{width="250"}

Haga clic en Seleccionar recurso para abrir el selector de recursos, donde podrá elegir una imagen de la biblioteca de Assets.

Utilice la opción Colocación de la imagen para elegir cómo la imagen rellena el componente de estructura. La configuración de ubicación sigue los atributos de alineación y relleno de imagen de fondo estándar de HTML.

{width="250"}

Otros estilos other-styles

Puede aplicar otros estilos de componente de estructura para ajustar su visualización en el mensaje de correo electrónico o en la página de aterrizaje. Para aplicar estilo más allá de estas opciones integradas, consulte Agregar CSS personalizado para el contenido.

Columnas columns

Utilice la herramienta Seleccionar una columna de la barra de herramientas de componentes para seleccionar una columna. A continuación, puede utilizar la barra de herramientas de columnas para cambiar la selección de columnas, quitar la columna o aplicar variaciones de contenido condicionales para la columna. Los parámetros de la columna se muestran en las fichas Configuración y Estilos de la derecha.

{width="500"}

Herramienta

Nombre

Uso

—

Borrar columna

Borre el contenido de la columna. Consulte la primera herramienta en la figura de la barra de herramientas de la columna.

{width="40"}

Habilitar contenido condicional

(Correos electrónicos y fragmentos) Habilite variantes condicionales para la columna.

{width="100"}

Seleccionar una columna

Seleccione una columna por número. Cuando se selecciona la columna, puede aplicar ajustes y estilos.

Cambiar n:n columnas change-nn-columns

Los anchos de columna son estáticos para la mayoría de los componentes de estructura. Al agregar el componente n:n column, puede cambiar el número de columnas y el tamaño de las columnas. El componente de columna n:n comienza con cinco columnas de igual ancho (20 %).

Con el componente seleccionado en el lienzo, utilice la opción Número de columnas del panel derecho para cambiar el número de columnas. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de columnas o introduzca el número en el campo.

{width="650" modal="regular"}

En el lienzo, mueva el icono de tamaño de columna para ajustar el ancho de la columna seleccionada. A medida que aumenta o disminuye el ancho, la columna adyacente también se ajusta para que todas las columnas ocupen el 100 % del ancho del componente.

{width="500" modal="regular"}

Estilos de columna column-styles

Con la columna seleccionada en el lienzo, puede definir estilos para aplicarlos a esa columna.

Árbol de navegación navigation-tree

En el espacio de diseño visual, puede acceder a los componentes estructurales, incluidas las columnas y el contenido, mediante el árbol de navegación. Haga clic en el icono Árbol de navegación ( ) en la parte izquierda para mostrar el árbol.

{width="800" modal="regular"}

El elemento Body es la raíz de la estructura de árbol. Haga clic en cualquiera de los componentes o elementos secundarios de columna del árbol para seleccionarlos en el lienzo. Las fichas Configuración y Estilos de la derecha muestran los parámetros de ese componente o columna.

{width="800" modal="regular"}