# （進階）Email 版型設計教學，Newsleopard 拖放式編輯器

> 


本篇帶你更進階的設定你的電子報版型，查看初階的教學：Newsleopard 拖放式編輯器，基本教學












Email 整體版型設定






一欄 / 卡片式 / 滿版，線條設定





右側整體版型設定，可以設定不同的版型，並且可以設定是否要線條外框，下圖為包含外框的一欄式與卡片式範例。














整體寬度





藉由調整整體寬度，讓你的 Email 在電腦版的版型更寬廣。可以調整範圍：640px-800px。














區塊寬度設定





點選區塊邊邊區域，即可進入區塊整體設定，可以設定 0-100px 的距離。










段落文字元件





點選右下角的「展開」icon，即可展開文字編輯器，可編輯文字顏色、背景、粗體、斜體等等。













點選 { } 即可插入名單自訂欄位的變數。










雙欄、三欄元件





點選區塊整體設定，可以設定雙欄、三欄中間的距離，1-100px。









點選各自的區塊，可以上傳圖片、連結、文字、按鈕樣式等等。








**分類：** Newsleopard 後台教學  
**作者：** Bao  
**發布日期：** 2022-09-15T00:28:00.000+08:00


本篇帶你更進階的設定你的電子報版型，查看初階的教學：[Newsleopard 拖放式編輯器，基本教學](https://blog.newsleopard.com/how-to-use-drag-and-drop-editor-20190606/?ref=cms.newsleopard.com)

## Email 整體版型設定

### 一欄 / 卡片式 / 滿版，線條設定

右側整體版型設定，可以設定不同的版型，並且可以設定是否要線條外框，下圖為包含外框的一欄式與卡片式範例。

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/01/email-examples-card-list.jpg)

左邊為一欄式，右邊為卡片式

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/01/layout-setting.png)

### 整體寬度

藉由調整整體寬度，讓你的 Email 在電腦版的版型更寬廣。可以調整範圍：640px-800px。

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/01/email-width-640.png)

Email 寬度 640px

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/01/email-width-760.png)

Email 寬度 760px

## 區塊寬度設定

點選區塊邊邊區域，即可進入區塊整體設定，可以設定 0-100px 的距離。

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/01/block-setting-1.png)

## 段落文字元件

點選右下角的「展開」icon，即可展開文字編輯器，可編輯文字顏色、背景、粗體、斜體等等。

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/01/text.png)

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/01/text-color.png)

點選 { } 即可插入名單自訂欄位的變數。

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/01/insert-variables.png)

## 雙欄、三欄元件

點選區塊整體設定，可以設定雙欄、三欄中間的距離，1-100px。

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/01/columns.png)

點選各自的區塊，可以上傳圖片、連結、文字、按鈕樣式等等。

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/01/edit-columns.png)

## 按鈕元件

利用上下、左右的空間，設定按鈕的高矮胖瘦。並且可以設定實心、線框版本，以及按鈕的文字大小顏色。

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/01/button-2000x1097.png)

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/01/buttons.png)

## 社群 icon 元件

三種不同的 icon 顏色，搭配你的 Email 主題。

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/01/social.png)

* * *