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

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

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

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

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

  2. 從​ 內容工具列,按一下​ Select a column ​並選擇您要編輯的內容。 您也可以從結構樹中選取它。

    該欄的可編輯引數會顯示在右側的​ Settings ​窗格中。

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

    內容元件會顯示在欄頂端。

  4. 在​ Padding ​底下,定義欄內的頂端內距。 按一下鎖定圖示以中斷與底部邊框間距的同步。

    定義該欄的左右內距。

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

  6. 儲存您的變更。

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

  1. 在插入連結的元件中,選取連結的標籤文字。

  2. 在元件設定中,核取​ Underline link ​以加底線標示連結的標籤文字。

  3. 若要選取將在哪個瀏覽內容中開啟您的連結,請選取​ Target

  4. 若要變更連結的顏色,請按一下​ Link color

  5. 挑選您需要的色彩。

  6. 儲存您的變更。

新增內嵌樣式屬性 adding-inline-styling-attributes

在電子郵件Designer介面中,當您選取元素並在側面板上顯示其設定時,可以自訂該特定元素的內嵌屬性及其值。

  1. 選取內容中的元素。

  2. 在側面板上尋找​ Styles Inline ​設定。

  3. 修改現有屬性的值,或使用​ + ​按鈕新增屬性。 您可以新增任何符合 CSS 的屬性和值。

然後,樣式會套用至選取的元素。 如果子元素沒有定義特定的樣式屬性,則繼承父元素的樣式。

recommendation-more-help
3ef63344-7f3d-48f9-85ed-02bf569c4fff