行銷畫布 使用大圖解


這是封面,選擇一張好的背景情境圖或影片,網友就會繼續往下看

 

關於內容元件

行銷畫布的頁面設計是由內容元件版塊疊成的,我們目前提供 7 種內容元件,你可以任意添加。

每個內容元件的展示設計不同。未來我們會陸續新增不同的內容元件,豐富頁面的互動與視覺。

  1. 文字編輯區(可以編輯html原始碼)
  2. 單張圖片 (PC 和手機的圖可分開上傳)
  3. 多張圖片輪播
  4. 影片 (支援 Youtube,FB)
  5. URL 左右排列
  6. URL 上下排列
  7. Embed 插件功能(支援 iframe,Javascript 的插件)

而每個元件的右上角的齒輪   是元件的控制中心,可以設定背景以及佈局

關於背景

每個元件都可以設定背景圖。背景設定有4種選擇

1  固定色:選擇一個顏色做背景色

2  雙色漸層混搭:背景可選擇2個顏色做漸層。左右移動底下的調節器可以改變漸層的角度。

3  背景圖:可自行上傳圖片,PC和手機可以分開上傳,讓效果更好,也可以上傳 SVG 的動畫檔案 (範例: 下雨天背景)

4  影片背景:可自行上傳3-5mb 左右的影片作為背景

 

遮罩設定 ( 最底下3個 icon ) 為了讓前景文字清楚,建議你可以依照背景設定黑色遮罩或白色遮罩。

 

文字元件與編輯佈局

文字區塊就是使用編輯列處理文字相關的編排,也可以上傳及插入圖片;熟習html的話,也可以編輯原始碼做簡易的排版調整。

文字元件的特色是可以選擇 1 欄,2欄,或 3 欄編輯佈局,在 PC上會依照你設定的欄位展示,但手機畫面有限,所以手機會依照 RWD 自適應特性 1 欄顯示。

關於元件佈局

元件佈局是指內容顯示的寬度,我們提供3種PC的寬度佈局,按%設定

1. 58%(7/12)的螢幕寬度

2. 83%(5/6) 的螢幕寬度

3. 100% 佈滿整個螢幕寬度

手機上螢幕小,所以都是100% 佈局

文字區塊的排版應用示範

 

實際展示

佈局1 : 文字區塊 1 

 

 

實際展示

佈局2 : 文字區塊 1

 

實際展示

佈局2 : 文字區塊 2+圖片

 

實際展示

佈局3 : 文字區塊 1 

 

 

實際展示

佈局3 : 文字區塊 2 

 

 

實際展示

佈局3 : 文字區塊 3 

 

影片

圖片 Slideshow

以佈局的寬度 100% 呈現,高度自動

建議 Slideshow 使用同等寬高比例的圖片,效果才能一致

左右排列 URL

適合用來做商品賣場連結

上下排列 URL

適合用來做相關文章延伸閱讀

Embed 插件功能

這是活動模組

主辦方社群媒體

在後台編輯主辦單位,就可以設定你目前經營的媒體:Facebook, Line, Youtube, Instagram, Twitter

 

這是一場數位編輯大革命

好玩的行銷畫布,讓企劃編輯工作者發揮無窮的創意空間

 

本頁面由發燒網最新上線的「行銷畫布」編輯器製作。

本活動並非由 Facebook 平台贊助、管理及開發。本活動乃由 Feversocial 發燒互動 主辦,你所提供的資料僅供管理本活動使用。