Show Menu
TEMAS×

Administración de estilos

Edición de un elemento

En el Diseñador de correo electrónico, al seleccionar un elemento, se muestran en el Settings panel varias opciones específicas del tipo de contenido seleccionado. Puede utilizar estas opciones para cambiar fácilmente el estilo del correo electrónico.

Selección de un elemento

Para seleccionar un elemento en la interfaz de Email Designer, puede:
  • haga clic directamente en el correo electrónico,
  • o examine el árbol de estructura disponible desde las opciones situadas en la paleta izquierda.
Al examinar el árbol de estructura, podrá realizar una selección más precisa. Puede seleccionar una de las opciones siguientes:
  • todo el componente de estructura,
  • una de las columnas que componen el componente de estructura,
  • o solo un componente que se encuentra dentro de una columna.
Para seleccionar una columna, también puede hacer lo siguiente:
  1. Seleccione un componente de estructura (directamente en el correo electrónico o mediante el árbol de estructura disponible en la paleta izquierda).
  2. En la barra de herramientas contextual, haga clic enSelect a column para elegir la columna deseada.
Vea un ejemplo en esta sección .

Ajuste de la configuración de estilo

  1. Seleccione un elemento en el correo electrónico. Para obtener más información sobre esto, consulte Selección de un elemento .
  2. Ajuste la configuración según sus necesidades. Cada elemento seleccionado ofrece un conjunto diferente de configuraciones.
    Puede insertar fondos, cambiar el tamaño, modificar la alineación horizontal o vertical, administrar colores, agregar relleno o margen , etc.
    Para ello, utilice las opciones que se muestran en el Settings panel o agregue atributos de estilo en línea.
  3. Guarde el contenido.

Acerca del relleno y el margen

La interfaz de Email Designer permite ajustar rápidamente los ajustes de margen y relleno.
Padding :: esta configuración permite administrar el espacio que se encuentra dentro del borde de un elemento.
Por ejemplo:
  • Utilice el relleno para definir los márgenes en los lados izquierdo y derecho de una imagen.
  • Utilice el relleno superior e inferior para añadir más espacio a un Text componente o a un Divider componente.
  • Para definir bordes entre columnas dentro de un elemento de estructura, defina el relleno para cada columna.
Margin :: esta configuración permite administrar el espacio entre el borde del elemento y el siguiente elemento.
Según la selección (componente de estructura, columna o componente de contenido), el resultado no será el mismo. Adobe recomienda configurar los parámetros Padding y Margin en el nivel de columna.
Para ambos Padding y Margin , haga clic en el icono de bloqueo para romper la sincronización entre los parámetros superior e inferior o derecho e izquierdo. Esto le permite ajustar cada parámetro por separado.

Alineación de estilo

  • Alineación de texto: coloque el cursor del ratón sobre algún texto y utilice la barra de herramientas contextual para alinearlo.
  • La alineación horizontal se puede aplicar al texto, las imágenes y los botones, no a los Divider componentes y Social .
  • Para definir la alineación vertical, seleccione una columna dentro de un componente de estructura y elija una opción en el panel Configuración.

Configuración de fondos

En cuanto a la configuración de fondos con Email Designer, Adobe recomienda lo siguiente:
  1. Aplique un color de fondo al cuerpo del mensaje de correo electrónico si lo requiere el diseño.
  2. En la mayoría de los casos, defina los colores de fondo en el nivel de columna.
  3. Intente no utilizar colores de fondo en componentes de imagen o texto, ya que son difíciles de administrar.
A continuación se muestran los ajustes de fondo disponibles que puede utilizar.
  • Configure un Background color para todo el correo electrónico. Asegúrese de seleccionar la configuración del cuerpo en el árbol de navegación al que se puede acceder desde la paleta izquierda.
  • Para definir el mismo color de fondo para todos los componentes de estructura, seleccione Viewport background color . Esta opción le permite seleccionar un ajuste diferente del color de fondo.
  • Defina un color de fondo diferente para cada componente de estructura. Seleccione una estructura del árbol de navegación a la que se pueda acceder desde la paleta izquierda para aplicar un color de fondo específico solo a esa estructura.
    Asegúrese de que no establece un color de fondo de ventanilla porque puede ocultar los colores de fondo de la estructura.
  • Configure un Background image para el contenido de un componente de estructura.
    Algunos programas de correo electrónico no admiten imágenes de fondo. Asegúrese de seleccionar un color de fondo de reserva adecuado en caso de que no se pueda mostrar la imagen.
  • Configure un color de fondo en el nivel de columna.
    Este es el caso de uso más común. Adobe recomienda configurar los colores de fondo en el nivel de columna, ya que esto permite una mayor flexibilidad al editar todo el contenido del correo electrónico.
    También puede establecer una imagen de fondo en el nivel de columna, pero esto no se suele utilizar.

Ejemplo: ajuste de alineación vertical y relleno

Desea ajustar el margen y la alineación vertical dentro de un componente de estructura compuesto por tres columnas. Para ello, siga los pasos a continuación:
  1. Seleccione el componente de estructura directamente en el correo electrónico o mediante el árbol de estructura disponible en la paleta izquierda.
  2. En la barra de herramientas contextual, haga clic enSelect a column y elija la que desee editar. También puede seleccionarlo en el árbol de estructura.
    Los parámetros editables de esa columna se muestran en el Settings panel de la derecha.
  3. En Vertical alignment , seleccione Up .
    El componente de contenido se muestra en la parte superior de la columna.
  4. En Padding , defina el margen superior dentro de la columna. Haga clic en el icono de candado para romper la sincronización con el relleno inferior.
    Defina el margen izquierdo y derecho de esa columna.
  5. Proceda de forma similar para ajustar la alineación y el relleno de las demás columnas.
  6. Guarde los cambios.

Adición de atributos de estilo en línea

En la interfaz de Email Designer, al seleccionar un elemento y mostrar su configuración en el panel lateral, puede personalizar los atributos en línea y su valor para ese elemento específico.
  1. Seleccione un elemento en el contenido.
  2. En el panel lateral, busque los Styles Inline ajustes.
  3. Modifique los valores de los atributos existentes o agregue otros nuevos con el botón + . Puede agregar cualquier atributo y valor que sea compatible con CSS.
A continuación, el estilo se aplica al elemento seleccionado. Si los elementos secundarios no tienen atributos de estilo específicos definidos, se hereda el estilo del elemento principal.

Cambio a la vista móvil

Puede ajustar el diseño interactivo de un correo electrónico editando por separado todas las opciones de estilo para la visualización móvil. Por ejemplo, puede adaptar los márgenes y el relleno, utilizar tamaños de fuente más pequeños o grandes, cambiar los botones o aplicar diferentes colores de fondo que sean específicos de la versión móvil del correo electrónico.
Todas las opciones de estilo están disponibles en la vista de dispositivos móviles. La configuración de estilo de Email Designer se presenta anteriormente en esta página.
  1. Cree un correo electrónico y comience a editar el contenido. Para obtener más información sobre esto, consulte Diseño de contenido de correo electrónico desde cero .
  2. Para acceder a la vista móvil dedicada, seleccione el Switch to mobile view botón.
    Se muestra la versión móvil del correo electrónico. Contiene todos los componentes y estilos definidos en la vista de escritorio.
  3. Edite de forma independiente todos los ajustes de estilo, como color de fondo, alineación, margen, familia de fuentes, color de texto, etc.
  4. Al editar cualquier configuración de estilo en la vista móvil, las modificaciones solo se aplican a la pantalla móvil.
    Por ejemplo, reduzca el tamaño de una imagen, agregue un fondo verde y cambie el relleno en la vista móvil.
  5. Puede ocultar un componente cuando se muestra en un dispositivo móvil. Para ello, seleccione Show only on desktop devices una de las opciones Display options . También puede ocultar este componente en dispositivos de escritorio, lo que significa que solo se mostrará en dispositivos móviles. Para ello, seleccione Show only on mobile devices . Por ejemplo, esta opción le permite mostrar una imagen específica en dispositivos móviles y otra imagen en dispositivos de escritorio. Puede establecer esta opción desde la vista móvil o de escritorio.
  6. Vuelva a hacer clic en el Switch to mobile view botón para volver a la vista de escritorio estándar. Los cambios de estilo que acaba de realizar no se reflejan.
    La única excepción son los Style inline ajustes. Cualquier cambio de configuración en línea de estilo también se aplica a la vista de escritorio estándar.
  7. Cualquier otro cambio en la estructura o el contenido del correo electrónico, como ediciones de texto, carga de una nueva imagen, adición de un nuevo componente, etc. también se aplica a la vista estándar.
    Por ejemplo, vuelva a la vista móvil, edite texto y sustituya una imagen.
    Vuelva a hacer clic en el Switch to mobile view botón para volver a la vista de escritorio estándar. Los cambios se reflejan.
  8. Al eliminar un estilo en la vista móvil, volverá al estilo aplicado en el modo de escritorio.
    Por ejemplo, en la vista móvil, aplique un color de fondo verde a un botón.
  9. Cambie a la vista de escritorio y aplique un fondo gris al mismo botón.
  10. Cambie de nuevo a la vista móvil y ahora deshabilite la Background color configuración.
    Ahora se aplica el color de fondo definido en la vista de escritorio: se vuelve gris (no en blanco).
    La única excepción es la Border color configuración. Cuando está desactivada en la vista móvil, ya no se aplica ningún borde, incluso si se define un color de borde en la vista de escritorio.
La vista móvil no está disponible en fragmentos .