以前，要修改網站的圖片和文字得來回和 網頁設計 公司溝通，耗時又繁瑣。
現在不用煩惱啦！
我們的 網站後台 已經內建了 SP 網頁設計 編輯器，
輕鬆搞定 網頁設計 網站優化。
只要點一下、拖一下，從 網頁 佈局設計到圖片調整、選單圖示，都能隨心所欲！
真的就像玩遊戲一樣簡單，讓你隨時隨地掌控網站外觀！

網站教學：無須程式碼，輕鬆做網頁 影片內容

 

1. 網頁設計 編輯器介紹

現在要跟各位來介紹，我們在做網站時使用的網頁設計編輯器部分。

在以前的時候，如果我們要做 網頁設計，必須使用 HTML 和 CSS 來設計一個網頁。

如果網頁有動畫的話，還需要加上JavaScript來做設定。

 

2. 現代 網頁設計 編輯器的便捷性

現在，我們的網站非常方便，後台有有一個 網頁設計 編輯器，

不用寫程式碼也可以編輯網頁，並且具備所見即所得的功能。

 

3. 修改網頁的步驟概述

這裡我來介紹一下，假設我們今天要修改這個網頁，該怎麼做。

 

4.  網頁設計 結構概述

首先，我們一般的網站會有一個banner，接著會有三個重要的區塊，有最新活動、最新消息，以及代理品牌。

 

5. 代理品牌和關於我們

代理品牌這裡有各個廠牌的logo，我們也可以新增logo。底下是關於我們的部分，今天要修改的頁面大概就是這些內容。

 

6. 使用 網頁設計 編輯器進行修改

現在來看如何使用 網頁設計 編輯器來進行修改。

 

7. 進入 網站後台 編輯介面

首先，我們先進入網站後台，點擊網頁編輯，這會開啟 網頁設計 編輯器的介面，我們找到要修改的頁面，然後點擊前端編輯。

 

8. 前端 網頁設計 編輯介面介紹

進入前端 網頁設計 編輯後，就會看到我們要編輯的網頁介面。

 

9. 如何修改Banner

要怎麼修改banner呢？

很簡單，只要點擊它，就會在左邊跳出一個視窗。

這個視窗裡可以看到我們要修改的第一個頁面。

這裡有圖片，如果要換圖片，我就直接把這個圖片清掉，然後重新選擇一個圖片就可以了。當然，

圖片的尺寸最好與原來的一樣。

 

10. 修改Banner內的文字

如果我要修改這個banner裡面的文字，我就來這裡看，這裡是Title，也就是主標題，這裡是副標題，然後這裡是文字。

接著還有按鈕，也可以修改文字和連結。

連結部分也很簡單，只要點進去，它會有一個URL，可以直接輸入網址，或者選擇連結到網站的某個頁面。

 

11. 按鈕與Icon的設置

如果想在按鈕前面放icon，這裡也有預設的icon，可以選擇位置。

其他設定好後，直接按Apply就可以了。

 

12. 網頁動畫效果設置

再來，我們可以看到這個文字有一些動畫效果。

如果是手刻網頁，你可能需要用JavaScript來控制這個動畫，但現在有 網頁設計 編輯器，就不需要這樣做了。

我們來看這裡，可以設定文字的動畫類型、動畫位置、動畫的延遲時間等。

 

13. 網頁輪播圖設置

再來，這是第二個輪播圖。這個輪播圖沒有限制圖片的數量，但我們一般建議圖片在5~6張左右，這樣比較不會影響網站的加載速度。

如果要增加第三張圖片，可以直接用複製或新增按鈕來加第3、第4張圖片。

 

14.  網頁設計 區塊的修改

接著，我們來看其他部分。比如這裡有三個區塊，我只要點擊這個區塊，就可以直接修改標題、文字和按鈕。

這跟前面講的是一樣的，操作方式都差不多。

 

15. 最新活動與消息的管理

再來就是最新活動和最新消息。點擊後可以修改文字和顏色。

比較特別的是，我們的最新消息和最新活動是使用網站模組來管理的。

只要在網站後台文章分類裡新增文章，網站前台就會自動更新。

 

16. 隱藏與顯示特定內容

網頁裡有些部分是隱藏的，因為客戶希望先隱藏起來，之後有需要再打開。

如果要打開隱藏部分，只要點擊這個眼睛圖示就可以了。現在我要隱藏的部分，我就把它關閉。

 

17. 網頁代理品牌區塊的設置

再來是代理品牌部分，這個功能非常實用。

可以在網站上看到，放置實績介紹或合作夥伴的內容。

點擊後可以修改文字，如果要新增圖片，就點擊這裡，選擇圖片，複製圖片，然後更換logo就可以了。

 

18. 關於我們與聯絡我們的設定

這是目前的功能介紹，關於我們的部分也很簡單，直接點擊就可以修改文字和圖片。

再來是聯絡我們部分，操作也是一樣簡單。

 

19. 結語

這就是今天的介紹，下一次影片會再跟大家介紹如何做響應式的調整。謝謝大家。

 

20. 相關文章
網頁設計 頁面編輯器 Page Builder ：無需寫程式碼：輕鬆上手教學
https://des13.com/news/1563-page-builder.html

網頁設計 教學：打造完美的 JOOMLA 和 WORDPRESS 網站
https://des13.com/faq/cms/joomla/1532-sp-page-builder.html

---

網頁設計　問與答：

網站建置 報價相關　 https://des13.com/faq/quote.html

網站建置 技術相關　 https://des13.com/faq/webtech.html

購物網站 網路開店    https://des13.com/faq/e-commerce.html

B2B形象官網建置　  https://des13.com/faq/b2b.html

網站升級維護　 https://des13.com/faq/upgrade.html

---

推薦閱讀：全後台模組化形象官網

簡易電子書下載：一頁式網頁設計電子書

如果您喜歡我們的文章，歡迎分享！也歡迎查看我們的其他文章。如果有任何疑問也歡迎加line和我們聯絡

全後台模組化形象官網，符合各式商業模式與需求，請參考：https://des13.com/service/rwd.html

Written by Ring
作者：益盛科技 專案經理
通過Google Ads-Measurement Assessment
15年 網站專案管理及人員管理實務經驗。 
具網站美編企劃繪製能力
具多媒體網頁設計與 RWD設計之實務經驗