Administración de estilos de correo electrónico managing-styles
En el Designer de correo electrónico, al seleccionar un elemento, se muestran varias opciones específicas del tipo de contenido seleccionado en el panel Settings. Puede utilizar estas opciones para cambiar fácilmente el estilo del correo electrónico.
Selección de un elemento selecting-an-element
Para seleccionar un elemento en la interfaz de Designer de correo electrónico, puede:
- haga clic directamente en el correo electrónico,
- o examine el árbol de estructura disponible en las opciones ubicadas en la paleta izquierda.
La exploración del árbol de estructura permite realizar una selección más precisa. Puede seleccionar cualquiera de estas opciones:
- 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:
- Seleccione un componente de estructura (directamente en el correo electrónico o mediante el árbol de estructura disponible en la paleta izquierda).
- En la barra de herramientas contextual, haga clic en Select a column para elegir la columna que desee.
Ver un ejemplo en esta sección.
Ajuste de la configuración de estilo adjusting-style-settings
-
Seleccione un elemento en el correo electrónico. Para obtener más información, consulte Selección de un elemento.
-
Ajuste la configuración según sus necesidades. Cada elemento seleccionado ofrece un conjunto diferente de configuraciones.
Puede insertar fondos, cambiar tamaños, modificar la alineación horizontal o vertical, administrar colores, agregar relleno o margen, etc.
Para ello, utilice las opciones mostradas en el panel Settings o agregue atributos de estilo en línea.
-
Guarde el contenido.
Ajuste del relleno y el margen about-padding-and-margin
La interfaz de Designer de correo electrónico permite ajustar rápidamente el relleno y la configuración de los márgenes.
Padding: esta configuración le permite administrar el espacio ubicado dentro del borde de un elemento.
Por ejemplo:
- Utilice el relleno para establecer los márgenes en los lados izquierdo y derecho de una imagen.
- Utilice el relleno superior e inferior para agregar más espacio a un componente Text o Divider.
- Para definir los bordes entre columnas dentro de un elemento de estructura, defina el relleno para cada columna.
Margin: esta configuración le permite administrar el espacio entre el borde del elemento y el elemento siguiente.
Para Padding y Margin, haga clic en el icono de candado para interrumpir la sincronización entre los parámetros superior e inferior, o derecho e izquierdo. Esto permite ajustar cada parámetro por separado.
Alineación de estilo about-alignment
-
Alineación de texto: coloque el cursor del mouse (ratón) sobre un texto y utilice la barra de herramientas contextual para alinearlo.
-
La alineación horizontal se puede aplicar a texto, imágenes y botones; actualmente no a los componentes Divider y Social.
-
Para establecer 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 about-backgrounds
En cuanto a la configuración de fondos con el Diseñador de correo electrónico, Adobe recomienda lo siguiente:
- Aplique un color de fondo al cuerpo del correo electrónico si lo requiere el diseño.
- En la mayoría de los casos, establezca los colores de fondo en el nivel de columna.
- 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.
-
Establezca un Background color para todo el correo electrónico. Asegúrese de seleccionar la configuración del cuerpo en el árbol de navegación accesible desde la paleta izquierda.
-
Defina el mismo color de fondo para todos los componentes de la estructura seleccionando Viewport background color. Esta opción le permite seleccionar una configuración diferente del color de fondo.
-
Defina un color de fondo diferente para cada componente de estructura. Seleccione una estructura en el árbol de navegación accesible desde la paleta izquierda para aplicar un color de fondo específico únicamente a esa estructura.
Asegúrese de no establecer un color de fondo de ventanilla, ya que podría ocultar los colores de fondo de la estructura.
-
Establezca un Background image para el contenido de un componente de estructura.
note note NOTE Algunos programas de correo electrónico no admiten imágenes de fondo. Si no se admite, se utilizará en su lugar el color de fondo de la fila. Asegúrese de seleccionar un color de fondo alternativo adecuado en caso de que la imagen no se pueda mostrar. -
Establezca un color de fondo en el nivel de columna.
note note NOTE 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 example--adjusting-vertical-alignment-and-padding
Desea ajustar el relleno y la alineación vertical dentro de un componente de estructura compuesto por tres columnas. Para realizar esto, siga los pasos a continuación:
-
Seleccione el componente de estructura directamente en el correo electrónico o mediante el árbol de estructura disponible en la paleta izquierda.
-
En la barra de herramientas contextual, haga clic en Select a column y elija la que desee editar. También puede seleccionarlo en el árbol de estructura.
Los parámetros editables para esa columna se muestran en el panel Settings de la derecha.
-
En Vertical alignment, seleccione Up.
El componente de contenido se muestra sobre la columna.
-
En Padding, defina el relleno superior dentro de la columna. Haga clic en el icono de bloqueo para interrumpir la sincronización con el relleno inferior.
Defina el relleno izquierdo y derecho de esa columna.
-
Proceda de forma similar para ajustar la alineación y el relleno de las demás columnas.
-
Guarde los cambios.
Estilo de vínculos about-styling-links
Puede subrayar un vínculo y seleccionar su color y destino en el Diseñador de correo electrónico.
-
En un componente en el que se inserte un vínculo, seleccione el texto de etiqueta del vínculo.
-
En la configuración del componente, marque Underline link para subrayar el texto de la etiqueta del vínculo.
-
Para seleccionar en qué contexto de exploración se abrirá el vínculo, seleccione un Target.
-
Para cambiar el color del vínculo, haga clic en Link color.
-
Elige el color que necesitas.
-
Guarde los cambios.
Adición de atributos de estilo en línea adding-inline-styling-attributes
En la interfaz de Designer de correo electrónico, 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.
-
Seleccione un elemento en el contenido.
-
En el panel lateral, busque la configuración de Styles Inline.
-
Modifique los valores de los atributos existentes o agregue nuevos atributos usando el botón +. Puede añadir cualquier atributo y valor que sea compatible con CSS.
A continuación, se aplica el estilo al elemento seleccionado. Si los elementos secundarios no tienen atributos de estilo específicos definidos, se hereda el estilo del elemento principal.