「行銷畫布」網頁編輯器 使用大圖解


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

 

關於編輯器裡的內容元件

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

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

  1. 獨立選單(供單一頁面使用、選單項目可以設定為連結或本頁錨點段落)
  2. 文字編輯區(可以編輯html原始碼)
  3. 單張圖片 (PC 和手機的圖可分開上傳)
  4. 多張圖片輪播
  5. 影片(支援 Youtube,FB)
  6. URL 左右排列
  7. URL 上下排列
  8. Embed 插件功能(支援 iframe,Javascript 的插件)
  9. 商品櫥窗(可以顯示原價及優惠價)
  10. 分類頁面(可以顯示屬於同個類別的其他頁面、作為延伸閱讀的區塊)

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

關於背景

每個元件都可以設定背景圖。背景設定有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 發燒互動 主辦,你所提供的資料僅供管理本活動使用。
icon_BackToTop