需要協助嗎?讓我們幫你一把。

知識庫首頁 aero-right 範本與編輯器 aero-right 郵件區段和區塊

郵件區段和區塊

範本與編輯器 更新日期 21 四月, 2021

編輯郵件時可以加入新的區段,並重新排列區塊位置。區段用來新增郵件內的欄位,區塊則是新增內容,像是圖片、文字,或按鈕。我們的客戶非常喜歡拖曳式編輯器,因為它能輕鬆又快速設計郵件。

本篇討論的主題:

 

 


 

區段

 

區段是編輯器內用來設置郵件版型的功能。區段可以分隔郵件內容,作為區塊內容的一個容器。您可以新增或刪除區段,設置郵件版型,並且針對每封郵件設定不同的區段。

 

區段的設定如下:

  1. 加號選項提供五種不同的欄位種類可以新增到郵件版型。郵件可以新增的區段數量沒有限制。 區段類型有:
    • 一欄
    • 兩欄
    • 三欄
    • 兩欄,左側邊欄
    • 兩蘭,右側邊欄
  2. 鉛筆可以開啟特定區塊的樣式設定。您可以指定背景顏色以及整個區段的邊界。如果使用多個欄位的區段,您也可以針對每一個欄位設定。
    • 點擊區段內任何地方也可以開啟區段樣式設定。
    • 注意,內容可以在區塊設定內單獨設定。
  3. 上下箭頭可以設定整封郵件內的區段順序。
    • 頁首區段跟頁尾區段無法往上或往下移動。其他區段不能放在頁首區段上方,也不能放在頁尾區段的下方。
    • 包含訂閱連結的頁尾區塊可以調整位置到郵件的任何一個地方;但是,我們建議您將這個區塊放在郵件的頁尾。把頁尾區塊放在郵件的頁尾,訂閱用戶可以輕鬆取消訂閱或管理他們的郵件偏好。
  4. 垃圾桶用途是刪除區段。只要刪除區段會連同先前新增的內容(像是區塊或樣式)一起刪除。刪除選項無法復原。為了避免遺失先前的內容,系統會要求您確認刪除區段。

 

返回頁首

 


 

全局設定

 

在全局設定裡,您可以管理郵件的佈景顏色;您也可以新增背景顏色,新增邊界到您的郵件。

佈景顏色

總共有 27 種佈景顏色可以選擇,選擇一款符合您需求的顏色。選定佈景顏色後仍然可以自訂區段及區塊的顏色。

背景顏色

此選項可以選擇您的郵件背景顏色,選擇可用的顏色或新增您的色碼。此外,區段及區塊也可以指定自己的背景顏色。

郵件邊界

您可以在「郵件邊界」選項選擇全螢幕背景邊界背景。全螢幕背景沒有額外的樣式選項。

在邊界背景選項,您可以新增或更改下列選項: 

  • 框線
  • 框線顏色 
  • 框線尺寸
  • 圓角半徑
    • 套用圓角半徑到郵件的頁首及頁尾。
顯示區段

「顯示區段」選項可以瀏覽郵件內所有區段,選擇「隱藏區段」則會移除區段名稱。顯示區段畫面時,您也可以點擊任何區塊進行編輯

 

返回頁首


 

區塊

 

和區段不同的是,區塊是用來保留和顯示郵件內容。 區塊是設計元素,具有功能性。使用區塊新增圖片、文字或按鈕。每一個內容區塊都有自己的樣式選項。

要新增區塊到您的郵件,點擊您要的區塊,拖曳到郵件的區段。

下列是郵件編輯器內可用的區塊:

 


 

單圖區塊和圖卡區塊

 

您可以透過這些區塊上傳圖片,或從您的圖庫選擇圖片。要使用這些區塊,將他們拖曳到您的郵件,您有兩種新增圖片的選項:

  1. 拖曳圖片。從您的電腦拖曳圖片前,確認您已點擊並開啟此區塊。
  2. 匯入檔案。從圖庫選擇現有的圖片。您也可以上傳新的圖片,或是使用存在其他網站的圖片。如果您有圖片 URL,點擊「插入圖片連結」並貼上。
  3. 新增圖片到您的郵件版型後,左側會出現自訂圖片的選項。

單圖區塊可以新增圖片到您的版型,而圖卡區塊可以同時新增圖片和文字,放到您的版型。

下面左邊是單圖區塊,右邊是圖卡區塊。

應該使用哪一個?
應該使用哪一個?

使用單圖區塊可以新增一張簡單的圖片。

使用圖卡區塊可以新增圖片的文字敘述。移除這個區塊,文字敘述也會跟著移除。

想了解更多關於如何使用單一圖片區塊以及新增圖片,點擊此處

您可能感興趣的主題:

 

返回區塊選單


 

圖文區塊

 

編輯器提供三種圖文區塊

  • 右欄文字
  • 左欄文字
  • 底端文字

想了解如何新增圖文區塊點擊此處

圖文區塊可以在區塊內同時新增圖片以及文字。圖文區塊和圖卡區塊最主要的差別在於圖文區塊沒有框架,所以您可以調整區塊內的間距,如下圖所示(左圖為圖文區塊,右圖為圖卡區塊)。

 

返回區塊選單


 

文字區塊

 

您可以使用文字區塊新增文字到您的郵件。要使用此區塊,將區塊拖曳到您想要放置的位置。接著,點擊區塊,將預設文字改成您的內容。

瀏覽詞彙表,了解左側導覽列裡面文字區塊設定底下的「設置」「內容」選項。

要編輯文字,使用郵件上方的工具列。您會看到常見的文字編輯選項,也有其他選項,像是建立錨點、新增連結、圖片,甚至連結文件。

複製貼上

如果您要複製文字並貼到您的郵件,我們建議您使用貼上功能,移除文字內任何隱藏字元,因為他們可能會影響您的文字設計。

原始碼

要新增原始碼,點擊原始碼 圖示,貼上您的代碼。

如果您沒有看到上述的符號,點擊工具列右邊的「更多」圖示。

 

返回區塊選單


 

影片區塊

 

影片是非常有效的視覺工具。透過影片,您可以呈現產品的品質,或是為什麼顧客應該跳過您的競爭對手,選擇您的產品。千萬別錯失在您的郵件使用影片的機會。

想了解如何新增影片到您的郵件,點擊此處

 

返回區塊選單


 

分段區塊

 

使用分段區塊將郵件內的區塊或區段建立間隔。間隔不一定要設定為空白。要新增分段區塊,將區塊拖曳到您想要的位置。

了解所有分段區塊的資訊

 

返回區塊選單

 


 

按鍵區塊

 

行為召喚 (CTA) 按鈕是郵件最有趣的一部份。它可以用來吸引訂閱用戶瀏覽著陸頁。

要新增按鍵,將區塊拖曳到您想要的位置。在左側面板,您會看到自訂按鍵的選項。要了解更多關於按鍵編輯選項,請瀏覽詞彙表繼續閱讀,了解如何設定按鍵內容

  1. 在按鈕新增按鈕文字,撰寫吸睛文字吸引訂閱用戶的目光。
  2. 首先,選擇「連結類型」,然後在「網站 URL」輸入網址。注意,這個頁面可能是外部 URL,或是您同一個郵件的某個地方。 有兩種方式新增連結:
    1. 您可以點擊位於上方文字編輯工具列的「插入連結」,然後新增網址。
    2. 或是直接在按鍵區塊內容選擇「連結類型」。注意:要新增錨點,您需要先建立錨點
  3. 在畫面上方的文字編輯工具列自訂文字或新增連結。
  4. 如果郵件有多個按鍵,您不需要逐一設定。設定其中一個按鍵,然後勾選左側面板「內容」標籤底下的「套用所有按鍵區塊」。郵件上的所有按鍵就會套用相同的內容設定。

 

 

返回區塊選單


 

社群追蹤媒體 & 社群分享區塊

 

社群媒體區塊很重要。我們的編輯器提供兩種區塊,增加您的社群曝光管道。要使用任何一個區塊,拖曳到您選擇的位置即可。

社群追蹤區塊可以讓您新增社群媒體圖示,或是圖示加上文字。區塊可以新增多達 20 種不同的服務,包括 Facebook、Twitter、Whatsapp、Linkedin、YouTube、Pinterest、RSS、Vimeo、TripAdvisor 等。

社群分享區塊可以新增:Facebook、Twitter、Linkedin、Myspace 以及 instapaper。此區塊可以讓您直接分享郵件到社群媒體。

使用哪一種區塊?

果您要引導收件人到您的社群媒體,使用社群追蹤媒體按鈕。他們可以點擊想要瀏覽的社群媒體,按讚或新增到他們的偏好。

如果您想要用戶分享您的內容,使用社群分享區塊。

想了解如何使用「設置」,瀏覽詞彙表。

依照下列指示在兩個區塊內新增社群媒體:

  1. 拖曳想要使用的區塊或點擊版型現有的社群媒體區塊。
  2. 進入左側導覽列的「內容」標籤。
  3. 點擊「增加」的下拉式選單並選擇社群媒體,然後點擊旁邊的加號圖示。
  4. 在編輯畫面,點擊剛才新增的社群媒體圖示。自訂圖示的選項會出現在左側導覽列。
  5. 新增 URL 連結並自訂您的圖示。完成後,您可以使用「套用圓角至所有區塊的按鍵」選項,套用同樣的圓角設定到所有區塊的按鍵。

 

 

此外,移動滑鼠到社群媒體圖示會看到移動刪除的選項。

 

 

返回區塊選單


 

導覽列區塊

 

導覽列可以搭配錨點,用來引導您的收件人跳到郵件的其他地方,或是用來連到外部連結。

如何新增導覽列

  1. 拖曳導覽列區塊到您的版型。大部分的使用者偏好將導覽列放在郵件的頁首區段。
  2. 系統預設的導覽列外觀如下:
  3. 現在,點擊導覽列的連結。連結設定的選項會顯示在左列。
  4. 新增您要的欄位類型並設定。如果要移除連結,選擇您要移除的連結,然後點擊左列的「移除」選項。
  5. 點擊連結也可以修改邊界的顏色及外觀。如果您不需要邊界,將其顏色改為透明,或是把邊界粗細改為 0。

如何自訂導覽列區塊

 

想了解「設置」標籤,請瀏覽詞彙表

  1. 要新增連結,只要點擊「內容」標籤底下的「加號」按鈕。要自訂連結,點擊導覽列區塊的「連結」,設定的選項會顯示在左邊面板。您可以新增最多六組連結。連結類型有兩種可以選擇:文字或圖片。想了解更多關於不同種類的連結,點擊此處
  2. 導覽列有三種版型可以選擇。您可以結合圖片和文字。點擊並選擇符合您設計風格的選項。
  3. 使用水平對齊和垂直對齊選項設定導覽列的排列方式。「間距寬度」決定每個連結之間的距離。
  4. 行動裝置樣式可以選擇預設、垂直堆疊以及垂直堆疊並置中。您可以選擇著陸頁在行動裝置上呈現的樣貌。

 

 

 

返回區塊選單


 

郵件範例

 

這裡提供一些如何使用區段優化郵件設計的案例。

下方郵件範例列出郵件中使用的區段及區塊。

範例 1

首先在頁首的地方新增導覽列。範例的標題使用左側邊欄位的區段。下一個欄位使用圖卡區塊,新增圖片和文字。最後,在底部左側邊欄,我們新增社群媒體圖示,請訂閱用戶提供回饋。

 

 

範例 2

這裡我們使用一欄和兩欄區段建立郵件。我們也在「全局設定」裡面使用邊界背景以及圓角設定,突顯郵件主文內容。

 

 

範例 3

最後一個範例,我們使用多組欄位建立郵件。我們使用分隔線分開區段。如您所見,整封郵件我們使用了單圖區塊、文字區塊、按鍵區塊、社群媒體區塊以及影片區塊。

 

 

返回頁首


 

詞彙表

 

「設置」底下的選項會根據您編輯的區塊有所不同。

背景顏色

您可以使用這個選項設定某個區塊的背景顏色。點擊圓形圖示,從色條中選擇顏色。如果您有色碼,直接貼入方框中。完成後點擊「儲存」「重新編輯」選項會恢復原始設定。

框線和線條樣式

有些區塊裡有框線選項。要設定框線顏色,點擊圓形圖示,然後從色條中選擇顏色。使用色碼也可以。框線樣式有 9 種選擇,線條粗細可以設定 0 到 99。您可以更改顏色為透明,或將線條粗細設定為 0。「重新編輯」選項會恢復原始原始設定。

圓角半徑

有些區塊有圓角半徑選項。此選項決定物件的圓角半徑,設定  0 到 20。完成後,您可以勾選「套用所有區塊按鍵」選項,所有按鍵就會使用同樣的半徑。

間距寬度

部份區塊可以設定間距寬度,像是導覽列、社群追蹤以及社群分享區塊。此選項決定物件跟物件之間的寬度。要設定「間距寬度」,移動綠色滑桿,設定 0 到 20。

間距和邊界

「內容」標籤底下可以看到間距和邊界選項。兩者指的都是物件周遭的空間。移動滑桿就可以設定間距和邊界。

對齊

對齊選項跟物件的位置相關。要設定對齊方式,點擊下列選項:置中、靠左、靠右、底部或頂部。

行距

只有文字區塊才有行距選項,用來定義兩個行內物件的高度,選項有單行間距、1.25、1.5 以及2倍間距。 

色碼

色碼是代表顏色的值。色碼開頭是井字號 (#),後面接了六個字元。舉例,#CFCFDA 裡面的字元可能是數字或字母。色碼可用來加上品牌顏色。如果不確定要使用的色碼字元,您可以使用設計軟體或線上顏色挑選器。

返回頁首

 


 

關於如何使用區段或特定區塊,請透過電子郵件線上客服或電話與我們的支援團隊聯絡。

 


有回答到您的問題嗎?
You already voted!

找不到您要的答案嗎?

提交工單