管理電子郵件樣式

在「電子郵件設計工具」中,選取元素時,Settings​窗格中會顯示與所選內容類型相關的數個選項。 您可以使用這些選項輕鬆變更電子郵件的樣式。

選取元素

若要在「電子郵件設計工具」介面中選取元素,您可以:

  • 直接在電子郵件中按一下,
  • 或瀏覽位於左​調色板​中的選項中可用的結構樹。

瀏覽結構樹可讓您進行更精確的選取。 您可以選取下列任一項:

  • 整個結構,
  • 組成結構元件的列之一,
  • 或僅包含位於欄內的元件。

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

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

請參閱此區段中的範例。

調整樣式設定

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

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

    您可以插入背景、更改大小、修改水準或垂直對齊、管理顏色、添加邊框間距或邊距等。

    要執行此操作,請使用​Settings​窗格或添加內嵌樣式屬性中顯示的選項。

  3. 儲存您的內容。

調整邊框間距和邊距

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

Padding:此設定可讓您管理元素邊框內的空間。

例如:

  • 使用邊框間距設定影像的左側和右側邊距。
  • 使用上下邊框間距為​Text​或​Divider​元件添加更多間距。
  • 若要設定結構元素內各欄之間的邊框,請定義每欄的邊框間距。

Margin:此設定可讓您管理元素邊框與下一個元素之間的空間。

注意

根據您的選取項目(結構元件、欄或內容元件),結果將不相同。 Adobe建議在列級別設定​Padding​和​Margin​參數。

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

樣式對齊

  • 文字對齊方式:將滑鼠游標放在某些文字上,然後使用內容工具列來對齊。

  • 水準 對齊功能可套用至文字、影像和按鈕,目前不適用於 DividerSocial 元件。

  • 要設定​垂直對齊,請在結構元件內選擇一個列,然後從「設定」窗格中選擇一個選項。

設定背景

若是使用電子郵件設計工具來設定背景,Adobe建議使用下列項目:

  1. 如果設計需要,請將背景顏色套用至電子郵件的正文。
  2. 在大多數情況下,在列級別設定背景顏色。
  3. 請盡量不要在影像或文字元件上使用背景顏色,因為這些顏色難以管理。

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

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

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

  • 為每個結構元件設定不同的背景顏色。 在導航樹中選擇一個結構,可從左側調色板訪問,以僅將特定背景顏色應用於該結構。

    請確定您未設定檢視區背景顏色,因為它可能會隱藏結構背景顏色。

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

    注意

    有些電子郵件程式不支援背景影像。 若不支援,則會改用列背景顏色。 請務必選取適當的後援背景顏色,以備影像無法顯示時使用。

  • 在列級別設定背景顏色。

    注意

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

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

範例:調整垂直對齊和填充

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

  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. 儲存您的變更。

新增內嵌樣式屬性

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

  1. 在內容中選取元素。

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

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

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

本頁內容