數位行銷
網路行銷
以前，若要修改網頁的圖片和文字，通常需要透過 網頁設計 公司，這樣的來回溝通花費了相當多的時間。
現在，我們的網站內建了 SP Page Builder 網頁設計 編輯軟體，可以使用所見及所得的拖曳式編輯。
從網站的佈局、頁面結構到圖像間距、選單圖示等，都可以輕鬆使用滑鼠拖曳來完成。
更重要的是，我們的編輯工具適用於所有方案，無需額外支付費用即可使用。
完成一個 網頁設計 專案需要投入大量心力和反覆修改程式碼，
但現在可以透過這些 網頁設計 工具來節省時間並提高效率！
來看看本篇教學吧！
影片教學
網頁設計 網站教學：無須程式碼，輕鬆做網頁
網頁設計 網站教學：怎麼做 響應式網頁？
一．什麼是 網頁設計 頁面編輯器 Page Builder ？
網頁設計的頁面編輯器（Page Builder）是一項相當關鍵的工具。
透過這樣的編輯器，使用者可以以所見即所得的方式進行網頁的設計和編輯，而無需深入了解程式碼或是倚賴網頁設計公司。
Page Builder讓使用者可以直接在網頁上進行拖拉、調整，輕鬆地製作網頁的布局、結構和內容。
在眾多著名的頁面編輯器中，如 Elementor、Brizy、Divi、Oxygen、Qubely 等，
我們今天要介紹的是 SP Page Builder，
全球下載量更超過1170萬次。
二. SP Page Builder 功能說明
- 完全可視化的建構過程：
「SP Page Builder」具有直觀的前端編輯器，可以在即時預覽的情況下直接進行網站設計和編輯，無需猜測效果。 - 節省時間：
它提供了大量預先設計好的 網頁設計 布局包，以及可重複使用的模板資料庫，可以快速構建網站，不必每次都從頭開設計相同的部分。 - 高度相容且開發者友好：
「SP Page Builder」與常用的 網頁設計 模板相容，並且具有擴展性和開發者友好性，也就是說開發人員可以輕鬆地集成和擴展，滿足不同的需求。 - 自由度極高的自定義：
它提供了無限的自定義自由度，可以根據自己的想法和需求建立功能豐富的網頁，實現完全符合實際需求的設計。 - 強大的附加功能：
它提供了豐富的附加功能，包括行、欄、手風琴、聯絡表單、輪播圖、產品展示、社交分享、電子商務等，建立功能豐富的網站。
使用「SP Page Builder」可以更加輕鬆、快速地建立出具有吸引力和功能性的網站，同時也提供了許多方便的工具和功能，讓 網站建置 更加流暢和有效率。
三、 banner 輪播圖片教學
我們在網站第一眼看到的就是首頁 BANNER 輪播圖，優點如下：
- 視覺吸引力:
輪播圖可以吸引訪客的注意力，將他們的焦點引導到網站的主要內容或產品上。 - 多功能性:
輪播圖可以用來展示多個內容或產品，讓訪客能夠在短時間內瀏覽多個重要資訊。 - 提高網站互動性:
可以在輪播圖中添加互動元素，例如按鈕或連結，引導訪客進行更多的操作，如查看更多內容或前往特定頁面。 - 優化空間利用:
在有限的首頁空間中，輪播圖可以有效地利用空間，展示更多內容，提高網站的訊息傳達效率。 - 提高用戶體驗:
透過展示動態和吸引人的圖像，輪播圖可以為訪客提供更豐富的用戶體驗，使他們對網站產生更大興趣。
那麼要怎麼製作呢？以以下兩張圖及網頁為例
1. 進入網站後台 sp page builder 之後，
滑鼠滑過要編輯的網頁旁，會出現前端編輯按鈕 [Frontend Editor] 到前台網頁
2. 在進入前台網頁編輯頁面後，會看到以下的使用介面。
這個介面可以預覽網頁在不同螢幕寬度下的顯示樣式。
也可以進行回復上一步、下一步、預覽網頁以及儲存等操作。
3. 若要修改 banner，請使用滑鼠左鍵點擊一下該 banner ，左邊會彈出設定視窗
4. 在視窗中，會看到目前有兩個 banner 輪播。
若需要新增橫幅 banner ，請點選「+add」。
若需要更換圖片，則請點選「鉛筆
5. slider items 視窗介面功能說明：
如需更換圖片請按” clear”，再上傳新圖片，完成之後點選 apply 鍵進行儲存
6. 關閉視窗後，請再按右上角［save ]儲存
![ééè¦çªå¾ï¼è«åæå³ä¸è§ï¼»save ]å²å](/images/2024/SP/sp9.jpg)
四、 修改 網頁 標題 / 文字
1. 若需要修改標題，例如「關於我們」，用滑鼠左鍵點選「關於我們」，
接著將會出現左側的設定介面，即可在此進行所需的標題修改。
2. 修改完成後，請再按右上角［save ]儲存
3. 若需要修改內文文字，用滑鼠左鍵點選內文文字，
接著將會出現左側的設定介面，即可在此進行所需的內文文字修改。
4. 修改完成後，請再按右上角［save ]儲存
五、 修改 動態數字 / 數字動畫 ( Animated number )
"Animated number" 意指一種動畫效果，通常在網頁中，用以顯示數字的變化。
這種效果可以是數字逐漸增加或減少的動畫，常見於展示統計數據、計數器或其他需要動態顯示數字的場景中。
例如，一個網站可能會使用 animated number 來顯示其客戶數量、完成的專案數、或是年度營收等數字的變化。
1. 若需修改動態數字，例如「16年豐富經驗」或「500+實績案例」，請透過滑鼠左鍵點擊欲修改的文字。
接著，會看到左側出現設定介面，可在此進行所需的修改。
2. 修改完成後，請再按右上角［save ]儲存
六、 網頁設計 匯入 / 匯出
花費了許多心力設計的網頁檔案，要如何保存和重複使用呢？
匯入／匯出是一個非常實用的功能，匯入／匯出不但可以節省時間和提高效率。
並且匯入／匯出也能輕鬆地保存現有的 網頁設計 ，並在其他網站中重複使用，不必每次重新設計。
這對於需要在多個網站或專案中使用相似設計元素的設計師和開發人員來說尤其寶貴。
這不僅能保持品牌形象的一致性，還可以大幅減少工作量。
1. 點擊“Layers”。
2. 點擊 Canvas 右邊的“：”，彈出更多功能。
3. 選擇匯入或匯出。
說明：
匯出：能夠匯出以建立的頁面、模組或文章內容，匯出檔案為 .json 。
匯入：可將 .json 檔案匯入
2. 請記得匯入之後再按右上角［save ]儲存
注意！匯入檔案會覆蓋當前頁面內容。
切記！可以在不同的網站上重複使用匯出的頁面，但它必須包含相同的模組程式碼及圖像結構。如果不是，部分內容可能無法運作。
匯出的 .json 檔案不包含任何模組程式碼，只包含佈局和頁面設定。
新的網站也需要儲存相同的圖片和路徑才會顯示。
七. Open Graph 標籤，讓網站在社群平台上分享時更具吸引力
要提高轉換率並觸及更多人，分享文章到社群軟體是不可或缺的。
但有時會在分享時預覽中出現了錯誤的標題、圖片和說明。
要怎麼設定Open Graph 標籤呢？
(1) 進入網站後台 sp page builder 之後，
滑鼠滑過要編輯的網頁旁，會出現前端編輯按鈕 [Frontend Editor] 到前台網頁
(2)選擇[tools] -> [page settings] -> SEO
SEO沒有寫會依照網站全站設定顯示
3. 往下拉，填寫 open graph title 網頁標題 及 open graph description 網頁描述
4. 上傳網站圖片，圖片尺寸請依照line規範
5. 編輯完成後，點選［儲存］
6. 至網站前台尋找剛才已完成的文章，複製網址
7. 前往 Line 網址預覽縮圖工具https://poker.line.naver.jp
8. 進入 Line 網址預覽縮圖工具之後，輸入你要在 Line 上分享的網址，語言選擇台灣，然後點擊「Clear Cache」，最後下方點擊「Submit」送出。
9. Line 正確顯示分享連結網址的預覽縮圖
▼送出之後，你就會在下方看到 Line 已經更新了你剛剛輸入的網址預覽縮圖，連原圖的尺寸大小都會顯示。
教學影片：
相關文章：
【教學】網頁設計 頁面編輯器 Page Builder ：無需寫程式碼：輕鬆上手
網頁設計 教學：打造完美的 JOOMLA 和 WORDPRESS 網站
B2B 企業網站 建置教學 ：全方位 產品目錄 、 詢價清單 與 網頁設計 說明
網頁設計 問與答：
網站建置 報價相關 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設計之實務經驗
