管理電子郵件樣式 managing-styles

在電子郵件Designer中,選取元素時,Settings​窗格中會顯示數個選定內容型別的特定選項。 您可以使用這些選項輕鬆變更電子郵件的樣式。

選取元素 selecting-an-element

若要在電子郵件Designer介面中選取元素,您可以:

  • 直接在電子郵件中按一下
  • 或瀏覽位於左側​ 浮動視窗 ​中選項可用的結構樹狀結構。

瀏覽結構樹可讓您進行更精確的選取。 您可以選取:

  • 整個結構元件,
  • 構成結構元件的其中一個欄
  • 或只有位於欄內的元件。

若要選取欄,您也可以執行下列動作:

  1. 選取結構元件(直接在電子郵件中,或使用左側​ 浮動視窗 ​提供的結構樹狀結構)。
  2. 從​內容工具列,按一下​ Select a column ​以選擇所要的欄。

檢視此區段中的範例。

調整樣式設定 adjusting-style-settings

  1. 選取電子郵件中的元素。 如需詳細資訊,請參閱選取專案

  2. 根據您的需求調整設定。 每個選取的元素提供一組不同的設定。

    您可以插入背景、變更大小、修改水平或垂直對齊、管理顏色、新增邊框間距或邊界等等。

    若要這麼做,請使用​ Settings ​窗格中顯示的選項或新增內嵌樣式屬性

  3. 儲存您的內容。

調整邊框間距和邊界 about-padding-and-margin

電子郵件Designer介面可讓您快速調整邊框間距和邊界設定。

Padding:此設定可讓您管理專案框線內的空間。

例如:

  • 使用內距來設定影像左右兩側的邊界。
  • 使用頂端和底端填補為​ Text ​或​ Divider ​元件新增更多間距。
  • 若要設定結構元素內各欄之間的邊界,請定義各欄的邊距。

Margin:此設定可讓您管理專案框線與下一個專案之間的空間。

NOTE
根據您的選取(結構元件、欄或內容元件),結果將不同。 Adobe建議在欄層級設定​ Padding ​和​ Margin ​引數。

針對​ Padding ​和​Margin,按一下鎖定圖示以中斷上下或左右引數之間的同步化。 這可讓您分別調整每個引數。

樣式對齊方式 about-alignment

  • 文字對齊方式:將滑鼠游標置於某些文字上,並使用內容工具列對齊該文字。

  • 水準對齊方式​可套用至文字、影像和按鈕 — 目前無法套用至​ Divider ​和​ Social ​元件。

  • 若要設定​垂直對齊,請選取結構元件內的欄,然後從[設定]窗格中選擇選項。

設定背景 about-backgrounds

在使用電子郵件設計工具設定背景時,Adobe 建議以下做法:

  1. 為您的電子郵件內文套用背景顏色 (如果您的設計需要)。
  2. 在大多數情況下,請在欄層級設定背景顏色。
  3. 盡量不要在影像或文字元件上使用背景顏色,因為難以管理。

以下是您可以使用的可用背景設定。

  • 設定整個電子郵件的​Background color。 請務必在可從左側浮動視窗存取的導覽樹狀結構中選取內文設定。

  • 選取​Viewport background color,為所有結構元件設定相同的背景顏色。 此選項可讓您從背景顏色中選取不同的設定。

  • 為每個結構元件設定不同的背景顏色。 在導覽樹狀結構中選取可從左側浮動視窗存取的結構,以僅將特定背景顏色套用至該結構。

    確保您沒有設定檢視區的背景顏色,因為它可能會隱藏結構背景顏色。

  • 設定結構元件內容的​Background image

    note
    NOTE
    某些電子郵件程式不支援背景影像。 當不支援時,將改用列背景顏色。 確保選取合適的後備背景顏色,以防影像無法顯示。
  • 在欄層級設定背景顏色。

    note
    NOTE
    這是最常見的使用案例。 Adobe 建議在欄層級設定背景顏色,因為這樣可以在編輯整個電子郵件內容時具有更大的彈性。

    您也可以在欄層級設定背景影像,但這很少使用。

範例:調整垂直對齊與邊框間距 example--adjusting-vertical-alignment-and-padding

您想要調整由三欄組成的結構元件內的邊框間距和垂直對齊方式。 要執行此操作,請遵循下列步驟:

  1. 直接在電子郵件中選取結構元件,或使用左側​ 浮動視窗 ​提供的結構樹狀結構。

  2. 從​內容工具列,按一下​ Select a column ​並選擇您要編輯的內容。 You can also select it from the structure tree.

    The editable parameters for that column are displayed in the Settings pane on the right.

  3. 在​ Vertical alignment ​下,選取​Up

    The content component displays on top of the column.

  4. Under Padding, define the top padding inside the column. Click the lock icon to break synchronization with the bottom padding.

    Define the left and right padding for that column.

  5. 以類似的方式調整其他欄的對齊方式和邊框間距。

  6. 儲存您的變更。

您可以為連結加底線,然後在電子郵件設計工具中選取其顏色和目標。

  1. In a component where a link is inserted, select the label text of your link.

  2. In the component settings, check Underline link to underline the label text of your link.

  3. To select in which browsing context your link will be opened select a Target.

  4. To change the color of your link, click on Link color.

  5. Pick the color you need.

  6. 儲存您的變更。

Adding inline styling attributes adding-inline-styling-attributes

In the Email Designer interface, when you select an element and display its settings on the side panel, you can customize the inline attributes and their value for that specific element.

  1. Select an element in your content.

  2. On the side panel, look for the Styles Inline settings.

  3. Modify the values of the existing attributes, or add new ones using the + button. 您可以新增任何符合 CSS 的屬性和值。

The styling is then applied to the selected element. 如果子元素沒有定義特定的樣式屬性,則繼承父元素的樣式。

recommendation-more-help
campaign-standard-help