專業編輯器主要用途

專業編輯器是可以做出精美版面的網頁技術,主要是取代傳統網站套版與需要程式編輯的先進技術,沒有傳統套版無法修改固定版面的缺點,也不需要程式就能自由調整。
由我們設計的頁面,多使用專業編輯器,在此將介紹如何使用 專業網頁編輯器 修改我們為您設計好的版面。

什麼是專業編輯器?

“專業編輯器”是一個所見及所得,拖曳式的網頁編輯器,可讓您直接在網頁上,以即時、視覺化的方式調整您的版面。 這代表著您可以用最簡單的方式調整您的首頁版面及其他重要的頁面與文章。

由前台網頁進入編輯模式

登入後,回到欲修改的前端網頁,在上方管理功能區,選擇”使用專業編輯”,即可直接編輯版面;如果”使用專業編輯” 沒有出現,則此頁並非使用專業編輯製作,僅能使用”編輯頁面(或文章)” 修改。

由後台進入編輯模式

先登入後台,點選頁面,滑鼠移至首頁上,則會出現可用功能,然後選取使用專業編輯,即可進入編輯模式。
請注意,如果該頁並非使用專業編輯編輯,則不會出現專業編輯器的字樣,僅能使用一般編輯。

操作界面簡介

專業編輯器包含以下主要區域:

  1. 頂部選單:使用搜詢尋找小工具及設定顏色、字型或回到控制台。
  2. 小工具/小工具設置:選擇一個小工具按住並拖曳到 (8)或您需要的地方啟用。
  3. 預覽按鈕:使您能夠預覽頁面。點選它來隱藏/顯示面板。
  4. 頁面設定:設定頁面標題、特色圖片、版型及發布狀況。
  5. 響應式設計:您可個別調整電腦、手機、平板的設計,以達到各種裝置介面最佳設計。
  6. 復原重作:可復原回到之前的狀態,如果網頁做錯了,這個功能很有用。
  7. 發佈儲存:系統會自動儲存草稿,當您確認修改完成後,可按此發鋪頁面,也可以在此儲存本頁為版型。
  8. 新增新的區段/新增樣板:選擇建立一個新的區塊或插入一個現有的樣板。

修改網頁之文字

  1. 點選欲修改之文字,可直接修改,或以第2點方式修改。
  2. 在左邊方塊,輸入欲修改的文字。
  3. 按儲存按鈕即可。
  4. 可至”樣式”修改文字的顏色及大小等相關設定。

修改文字顏色、大小

  1. 點選左方功能表上方的樣式,進入樣是編輯功能。
  2. 點選顏色選擇器,選擇想要調整的顏色。
  3. 調整排版,點選按鈕進入調整文字大小。

更改網頁圖片

  1. 點選欲更改之圖片。
  2. 在左邊方塊的圖片上按一下,可進入媒體庫,選擇欲更換的圖片。或是點選”上傳檔案”自行上傳圖片更換。
  3. 按儲存按鈕即可。
  4. 可至”樣式”修改圖片的大小等相關設定。

更改背景圖片

我們幫您製作的版面,經常使用高質感的圖片來做為背景,提高質感,如果要更換背景圖片,請依照下列步驟:

  1. 點選欲更改之區塊進入該區塊的編輯模式。
  2. 選取樣式,進入樣式編輯功能。
  3. 選擇一般(通常為預設值)。
  4. 選擇背景類型為經典。
  5. 點選圖片椅進行更換。

請注意,這裡僅針對首頁標題,如果要修改每頁標題的背景圖片,請進入整站樣式修改。 ==> 進入編輯

插入區塊至您需要的區域

區塊是專業編輯器最基本的元素。這是每個頁面都是由區塊構成。區塊寬度可以設為全寬,或者預設的寬度。


建立一個區塊後,您可以在其中拖放一個小工具。您也可以將區塊分為幾列。您新建的每個頁面都可以包含盡可能多的區塊。您可以自由移動到上方或下方。

  1. 新增新區塊:點擊此按鈕建立一個新區塊,或者直接從左方功能面板中拖動一個小工具並將其放入想加入的區域。
  2. 選擇欄位結構:為您的區塊選擇一個架構(稍後,您可以自由拖曳其寬度)。
  3. 選擇預先設計好的範例版面匯入。
  4. 可關閉該區塊。

您可以編輯,複製或刪除一個區塊。您也可以將其另存為模板或在上面加入新的區塊。

選擇一個預先設計好的範例來修改

接續上一個步驟,我們知道許多人不知道如何設計,所以提供預先設計的範例讓您修改。

  1. 上個步驟 3之後,會進入範例的版型庫,如果您僅是要插入一個區塊,可以選擇區塊。
  2. 您也可以選擇頁面,插入一整個頁面範例。
  3. 可以選取分類來快速找到自己想要的類型。
  4. 找到適合自己類型後,滑鼠移至範例上會出現插入,點選插入,即可匯入範例,然後再修改成您需要的內容即可。

設計師預先設計好的精美版型。
點選 ” 插入” 後,就會匯入網頁中,再依照自己的需求修改即可。

新增小工具到欄位或區塊

您可以直接選擇左方需要的功能,按住拖曳的方式,拉至需要的區塊或欄位中,請注意,出現一個粗線時,代表該位置可以插入時才能放開,否則會沒有作用。

選擇及編輯

想要編輯甚麼項目,要先選擇該項目,左邊才會出現相對應的功能修改。

  1. 新增區塊(如之前的步驟)
  2. 選取整個區段,可編輯這整個區段的寬度、高度、內容位置、重設欄位結構、背景等內容,可以按住移動至上下方,也可按右鍵,會出現更多功能。
  3. 選擇 3 的 X,可以刪除整個區段。
  4. 修改該欄位內容、可設定該欄位的寬度、對齊、背景等;按住 4 的按鈕,可以左右移動,可更換欄位順序。
  5. 修改小工具內容,如為文字型態,可直接修改;如為其他功能,則左方會出現對應的功能可調整。
  6. 在欄位間的線可以拖曳,設定寬度。
  7. 大多功能都可搭配右鍵,可複製、刪除等。

編輯小工具

點擊小工具可開始編輯,也可按右鍵複製或刪除小工具。或是在欄位上按右鍵,也可複製整個欄位。
新增小工具:從左側功能表拉進小工具,並將其放入。

  1. 要編輯小工具,請單擊鉛筆圖標,如要刪除、複製、重設,請按右鍵,在功能表中選擇。
  2. 您可以選擇內容,來編輯小工具內容。
  3. 您可以選擇樣式,來編輯小工具顏色、字型、大小等樣式。
  4. 每種小工具都有不同的功能可供設置。
  5. 編輯完成後,您可以點擊綠色的更新按鈕來發佈。

響應式設計

  1. 要查看跟編輯頁面在不同設備上的外觀,請點擊下方的“響應模式”按鈕。
  2. 在不同的設備之間選擇。