【Divi教學】如何製作Divi彈出視窗,適用任何內容
有時候我們需要利用「彈出視窗Popup」來展示部分資訊,例如餐廳的網站,可以設置彈出視窗讓客人訂位,或者是不想再為了一些幅度不夠長的資訊增加一個新的頁面,都可以使用「彈出視窗」,既可加入更多多元化的內容,又可增加網站的互動性。
這篇文章要教你如何在網站上製作「彈出視窗」(如下圖示範),步驟非常簡單,且不論各種內容都可以放到彈出的視窗中唷!
彈出視窗範例

如何製作彈出視窗
1. 安裝外掛「Popups for Divi」
請先到網站後台Dashboard,開啟外掛>安裝外掛,搜尋「Popups for Divi」,點選安裝外掛,安裝完成後啟用這個外掛。

2. 設置開啟彈出視窗的按鈕
開啟你需要加入彈出視窗的頁面,點選「Edit with Divi」進入Divi編輯器,在你想要放入按鈕的地方,新增一個Button Module。

在按鈕的Link中,加入#+彈出視窗的名稱(ID),這部分可以自訂,或者是像我一樣使用popup就好。

3. 製作彈出視窗的內容
彈出視窗只能是Section,不能是Row或Module,所以我們在這裡選擇一個你想要的Section類型,加入到網頁中,並且設計好視窗中的內容。

設計完彈出視窗中的內容後,點選Section的Settings圖示,打開設定。

你會發現上方多了一個叫「Popup」的選項,點開之後將「This is a Popup」從No改成Yes,並在下面的Popup ID輸入你剛剛決定好的彈出視窗名稱,或是跟我一樣輸入popup。

接著點選右下角的Save,就可以打開網頁看看效果如何啦~
在Popup設定下方還有許多細節可以調整,但我自己通常用預設的彈出視窗就非常足夠了,同一個頁面的彈出視窗可以有很多個,只要都使用不同的名稱ID就好,另外,叫出彈出視窗的觸發點不一定要是按鈕,也可以是選單、文字、圖片等等,只需要將連結設定成「#+ID」就好。
如果你的彈出視窗沒有被啟發的話,可以先清除快取,或者是檢查確認大小寫是否相符喔!
【Divi教學】停用Divi主題自動更新
許多人可能會認為「自動更新」等於可以使用更多新功能,或者是得到更好的使用者體驗服務,然而,為什麼我要選擇停用自動更新呢?
「更新」在大多數時候是為了解決一些bug,或者是將錯誤修正,確實可以得到更好的使用體驗,但是若這次的更新屬於很大規模,或者是要加入新功能的情況,很有可能會有些新的物件或程式碼,對原本在網站上的元件造成影響,甚至嚴重點的話,讓你整個網站錯誤呈現。
所以呢,這篇文章要教你如何停用Divi的主題/外掛的「自動更新」,避免網站在更新後出現問題,卻因為沒有即時注意到,而導致網站一直停留在有問題的狀況中,以及平時在更新主題與外掛時,我會進行的幾個SOP步驟。
如何停用Divi主題自動更新
如果你是用的是Divi主題,到網站後台Dashboard,點選外觀>佈景主題,打開Divi主題後,會看到如下圖的畫面,若畫面中顯示「啟用自動更新」,代表你的自動更新目前是停用的狀態,不需要作任何動作。
若畫面中像下圖一樣,顯示「停用自動更新」,代表你的Divi目前是會自動更新的,請點選「停用自動更新」,就ok囉!

如何停用Divi外掛自動更新
如果你使用的是Divi外掛,則到網站後台Dashboard,開啟外掛>已安裝的外掛,在外掛列表中找到Divi Builder,後方的自動更新欄位,若顯示為「啟用自動更新」的話,便不需要作任何動作,若顯示為「停用自動更新」的話,那就直接點下去,當它顯示成「啟用自動更新」就完成設定囉!

更新主題/外掛時的SOP
為了避免自動更新導致的問題,我個人會更偏好在進行每一次的更新前,先確認好網站已經備份完成,再來執行更新的動作,若在更新後,發現網站有無法快速處理好的問題,可以馬上將Divi恢復為舊的版本,或者是將網站的備份還原,才不會網站自己默默進行更新,然後在自己還未注意到網站狀況的期間,不知不覺就嚇跑了許多讀者。
以下是我在更新主題/外掛時會進行的幾個步驟,提供大家參考:
- 備份網站
- 更新主題/外掛
- 清除快取外掛的Cache
- 確認網站內容
- 更新完成
若在步驟4發現問題,有幾個選項可以試著解決,都沒有幫助的話,再進行備份恢復:
- 清除快取外掛的Cache
- 清除Divi的Static CSS File:Divi>Theme Options>Builder>Advanced>Static CSS File Generation>Clear
- 恢復Divi版本:Divi>Theme Options>Updates>Version Rollback>ROLLBACK TO THE PREVIOUS VERSION>選擇版本
- 網站備份復原
【DIVI教學】如何將手機版選單子選單折疊呈現
通常手機版的子選單,會自動在點選Menu圖示時,自動展開,有時候子選單數量太多的話,還會造成閱讀上的困難,今天這篇文章要教你如何在Divi的手機版選單加上+號,將所有的子選單收合起來,讓視覺上看起來更加整潔乾淨。
原始標題
下圖為原始的手機版選單樣式,子選單會全部展開,且無法收合。

成果展示
下圖為加入下方程式碼後,手機版的子選單將會被收合起來,使用者須點選+號後,才可以看到子選單內容。

步驟教學
1.增加CSS程式碼
首先,點選左方功能列的Divi → General → 將下方的程式碼全部選起複製,並貼上到Custom CSS欄位中。

/*Proper Collapsable Mobile Menu*/
/*Style the icon's placeholder*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
width: 44px;
height: 100%;
padding: 0px !important;
max-height: 44px;
position: absolute;
right: 0px;
top: 0px;
z-index: 999;
background-color: transparent;
border-bottom: 0;
text-align: center;
}
ul.et_mobile_menu > li.menu-item-has-children,
ul.et_mobile_menu > li.page_item_has_children,
ul.et_mobile_menu > li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu > li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu > li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu > li.menu-item-has-children .sub-menu li.menu-item-has-children {
position: relative;
}
.et_mobile_menu .menu-item-has-children > a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children > a {
background-color: transparent;
}
/*Hide the Sub-menu*/
ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
display: none !important;
visibility: hidden !important;
}
/*Show the sub-menu when the + icon is clicked*/
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
display: block !important;
visibility: visible !important;
}
/*Create the opening/closing icon using the Divi's Icons*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
top: 10px;
position: relative;
font-family: "ETModules";
}
/*Set the opening icon for custom Tax Pages*/
body.single-product:not(.et-tb-has-template) ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
body.tax-product_cat ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
body.tax-project_category ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
body.single-product.et-db:not(.et-tb-has-template) #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
body.tax-product_cat.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
body.tax-project_category.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
content: "+";
}
/*Set the opening icon for default WordPress Pages*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
content: "\4c";
}
/*Set the closing icon*/
ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
body.single-product:not(.et-tb-has-template) ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
body.single-product.et-db:not(.et-tb-has-template) #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
body.tax-product_cat ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
body.tax-product_cat.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
body.tax-project_category ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
body.tax-project_category.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after {
content: '\4d';
}
2. 增加JS程式碼
接著,點選Integration,將下方的程式碼全選複製貼上到「Add code to the <head> of your blog」之中,最後點選下方的儲存,就完成囉!

<script id="dt-collapsable-menu-items">
jQuery(function ($) {
$(document).ready(function () {
$("body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children").append('<a href="#" class="mobile-toggle"></a>');
$('ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, ul.et_mobile_menu li.page_item_has_children .mobile-toggle').click(function (event) {
event.preventDefault();
$(this).parent('li').toggleClass('dt-open');
$(this).parent('li').find('ul.children').first().toggleClass('visible');
$(this).parent('li').find('ul.sub-menu').first().toggleClass('visible');
});
iconFINAL = 'P';
$('body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children').attr('data-icon', iconFINAL);
$('.mobile-toggle').on('mouseover', function () {
$(this).parent().addClass('is-hover');
}).on('mouseout', function () {
$(this).parent().removeClass('is-hover');
})
});
});
</script>
【Divi教學】如何用Divi設計WooCommerce線上購物網站
*更新:Divi正式推出購物車及結帳頁面的Module啦~
線上購物是目前科技社會不可缺少的銷售管道之一,如果想要不受任何平台限制地製作一個自己的線上購物網站,利用Wordpress建站 + 安裝Woocommerce線上購物功能 + Divi設計商品頁面,這個方式不需要付任何手續費給Wordpress,還能讓你擁有網站的所有權,會是我目前最推薦的架站方式之一。
而這篇文章主要要教你的是,如何使用Divi編輯器設計你的線上購物網站,Divi的使用者可以利用Divi編輯器,來設計Woocommerce的各個頁面,例如:商品列表頁面Shop Page、商品頁面Product Page、購物車頁面Cart Page、結帳頁面Checkout Page等等。
並且,我會向你介紹,最實用的四個搭配Woocommerce及Divi的外掛,讓你的購物網站比別人的功能更完整,視覺上更漂亮!
在文章開始前,如果你對Divi主題還不熟悉,歡迎你先閱讀【Divi新手必看】網站設計完整步驟教學,看這篇就夠!了解Divi的基礎設定,如果你還沒購買Divi主題,可以透過這個連結,享有10%OFF的優惠購買Divi,那麼,我們就開始正式進入主題囉!
商品模板
Divi有提供WooCommerce的商品模板 Template 功能,只要你設計好商品模板,就不需要再逐一個別設計每個產品頁面,一但新增產品,系統就會自動套用這個商品模板,來展示你的商品頁面。
那麼,要如何設定商品模板呢?在安裝完Divi到你的Wordpress網站後,點選左邊功能列的Divi > Theme Builder > 右邊的+號,並在選單中(如下圖),選擇All Products (All 商品),並且使用下一段提到的Woo Modules進行設計。

Divi Woo Modules (WooCommerce Modules)
Divi所提供的Woo Modules,目前一共有25種Module,可以用來製作商品列表、商品頁面、購物車頁面、以及結帳頁面,他們各自有著不同的區塊功能,你可以依照網站風格作取捨,不一定要全部都使用。

下列Woo Modules中,1 是商品列表,可以用於商店頁面,2-17 可以用於設計商品頁面,而18-20可用於設計購物車頁面,最後21-25則是用於設計結帳頁面。
- 商店頁面 - Woo Shop:商品列表
- 商品頁面 - Woo Add To Cart:加入購物車
- 商品頁面 - Woo Breadcrumb:頁面路徑
- 商品頁面 - Woo Description:描述
- 商品頁面 - Woo Images:圖片
- 商品頁面 - Woo Price:價格
- 商品頁面 - Woo Related Product:相關商品
- 商品頁面 - Woo Stock:庫存數量
- 商品頁面 - Woo Title:標題
- 商品頁面 - Woo Additional Info:額外資訊(尺寸、顏色款式等)
- 商品頁面 - Woo Cart Notice:已加入購物車通知
- 商品頁面 - Woo Gallery:相簿(滑動圖片)
- 商品頁面 - Woo Meta:貨號
- 商品頁面 - Woo Rating:評分
- 商品頁面 - Woo Reviews:評價留言
- 商品頁面 - Woo Tabs:商品資訊(將描述、額外資訊、評價結合在一起)
- 商品頁面 - Woo Upsell:你可能也喜歡的商品
- 購物車頁面 - Woo Cart Products:目前在購物車的商品列表
- 購物車頁面 - Woo Cart Totals:目前購物車的運費、總金額
- 購物車頁面 - Woo Cart Cross Sells:顯示已被放入購物車內的商品的其他相關商品
- 結帳頁面 - Woo Checkout Billing:帳戶資料
- 結帳頁面 - Woo Checkout Shipping:運送資料
- 結帳頁面 - Woo Checkout Information:額外資訊
- 結帳頁面 - Woo Checkout Details:訂購細節及金額
- 結帳頁面 - Woo Checkout Payment:付款方式選擇
1.如何製作商品列表Shop Page
通常我會使用Divi的Shop module來展示商品的列表,並且搭配其他不同的Module設計整個商店頁面。

Shop Module可以讓你調整這個列表顯示的商品類型、單頁商品數量、一列顯示多少個商品、排列順序等等,另外你可以在Element中開啟或者關閉列表下方的頁數選項。
而在Design選項中,你可以調整各種顏色、文字大小、滑鼠移到圖片上時要顯示哪一種icon等等,按照你的網站風格設計即可。

2.如何製作商品頁面 Product Page
下圖是我用Divi的編輯器製作了一個簡易的商品頁面,為了畫面美觀,我沒有使用所有的Module,但你仍然可以參考下方圖片,比較快地暸解到製作商品頁面時,基本常用的幾個Woo Module有哪些。

3.如何製作購物車 Cart / 結帳 Checkout 頁面
購物車頁面相對比較單純,只有三個Modules,個別展示目前購物車的內容、總金額、運送方式及運費,另外還能再加上相關產品列表,吸引顧客購買其他相關產品,而消費者確認訂單內容無誤後,就能點選按鈕前往結帳頁面。

結帳頁面的Module呢,則是將原本WooCommerce預設的內容,分成五種不同的Module,讓你可以自由地更改順序及顏色設計,下圖的結帳部分,因為我使用的是平常拿來測試的網站,所以就沒有連接任何金流系統,也就無法正常顯示付費選項了,請大家忽略~

4.如何製作會員 My Account 頁面
至於會員頁面,Divi還沒有相對應的Woo Module可以使用,之後如果陸續推出的話,我會繼續更新在這篇文章中。
所以目前我直接採用WooCommerce所提供的短代碼,加入Text Module(或者是Code Module),並貼上短代碼後,Woocommerce預設的會員頁面內容就會出現了。
會員頁面短代碼:
[woocommerce_my_account
]

推薦搭配外掛
Divi在設計Woocommerce的頁面時,是以現有的Woocommerce系統型態去加以設計,並不能增加額外的功能,但是通常一個購物網站,會需要為了購買形式、商品類型而添加輔助的功能在網站上,以下我將介紹幾個我在用Divi時,會搭配著使用的功能型免費外掛。
1.商品篩選 Themify - WooCommerce Product Filter

第一個是可以篩選商品的Themify - WooCommerce Product Filter,通常在商品數量眾多的購物網站,都會在商品列表旁加入一些分類,讓顧客可以更快找到適合自己的商品。
而這個外掛雖然是免費的,但是功能非常齊全,非常推薦使用。
2.搜尋列 Ivory Search

第二個推薦使用的外掛是Ivory Search搜尋列,其實Divi本身已經有提供簡易型的搜尋Module,但如果希望將搜尋顯示的內容限定在商品,而不要顯示網站其他頁面,那就會需要使用到Ivory Search。
Ivory Search有分免費版跟付費版,免費版的功能對一般購物網站來說,其實已經綽綽有餘,是款相當好用的免費外掛。
3.商品第二圖示 WC Secondary Product Thumbnail

第三個外掛WC Secondary Product Thumbnail是以設計的角度而使用的外掛,它可以在滑鼠移動到商品圖片上時,顯示商品的其他圖片,為網站增添更多互動感,無需複雜的設計。
4.通知信件設計 Decorator - WooCommerce Email Customizer

第四款外掛是Decorator,原本Woocommerce提供的信件內容,是以他們的紫色作為主要用色,如果你不滿意Woocommerce的配色,想要改成符合自己網站風格的色彩,可以考慮安裝Decorator外掛。
Decorator可以讓你改變字型、顏色、大小、加入網站Logo,甚至還能改變訂單內容所顯示的外觀,記得在你設定完成後,測試一次購物流程,確保信件的圖檔都有順利顯示。
【Divi教學】如何製作WordPress網站選單&多排下拉選單
許多人會透過安裝「多層次選單」的外掛,來將數量過多、導致選單長度過長的子選單分成好幾排,但如果你使用的是Divi主題,Divi本身就已經有內建多層次選單的功能,而這篇文章除了會教你如何製作選單以外,還會教你如何不透過外掛,製作多層次的選單!
建立選單
首先,開啟WordPress網站後台,點選外觀>選單,開始製作選單。

接著,點擊「建立選單」。

輸入「選單名稱」後,如果要指定選單顯示的位置,請勾選下方的「指定編輯中選單的顯示位置」:
- Primary Menu:網站主要選單
- Secondary Menu:第二選單(通常會顯示在網站最上方,又稱為頂邊欄)
- Footer Menu:底邊欄(顯示於在網站最下方)
最後點選「建立選單」即可。

現在,就可以透過左邊的「新增選單項目」,增加選單內的選項,可以新增「頁面、文章、自訂連結、分類」。
新增頁面連結
「頁面、文章、分類」這三種選項都是找到想加入的連結,勾選後點擊「新增至選單」,就會顯示在右邊的選單內容中。

新增文章連結

新增分類連結

新增自訂連結
而自訂連結除了透過直接輸入「網址」及「連結文字」加入選單,若你想要加入一些「沒有連結」的選項到選單,可以在網址部分輸入「#」字號,就可以有一個空的選項了。

製作子選單
如果需要讓選單顯示第二層選單,只要使用滑鼠左鍵長按,向右邊移動,如以下圖示示範,「關於我們」的頁面,就會成為「首頁」的子選單囉。

製作多排下拉選單
回到外觀>選單內,我將子選單非常多的選單(左圖),利用空的自訂連結,整理成好幾個分類(右圖)。

接著,點選右上角的「顯示項目設定」,將「CSS類別」勾選起來,接著在每個選項打開時,就會出現一個新的欄位「CSS類別」。

請在需要顯示多層次選項的連結內,輸入「mega-menu」到CSS類別中,

點選右下角「儲存選單」,回到網站頁面,就會看到已經成功分成好幾排的選單囉!

【DIVI教學】如何用DIVI編輯器製作一頁式網站
今天這篇文章將會教你,如何使用Divi編輯器製作一頁式的網站,上方選單將會帶你快速地跳轉到相關的內容,省去替每一個選項都製作頁面的時間,在短時間內完成一個簡潔有力的網站。
一頁式網站範本
下圖就是一頁式網站的示範,只要點選右上方的選單,網頁就會跳躍至你所選定的區塊,在使用者的體驗上,提升許多與網頁的互動感,一頁式網站最大的好處是,你的顧客無需開啟新的分頁,就能將品牌想傳遞的訊息一次閱讀完畢。

在這個教學中,你將會需要...
- 網域及WordPress網站
- Divi主題
如果你還沒有網域跟WordPress網站,可以參考這篇文章架設:【網站架設】穩定快速又便宜,獨立型主機Cloudways
如果你還不熟悉Divi主題,或者是尚未安裝Divi主題的話,可以參考這篇:【Divi新手必看】網站設計完整步驟教學,看這篇就夠!
步驟教學
1.製作網頁
開啟你的WordPress後台,點選新增頁面。

輸入網頁名稱,並點選Use Divi Builder使用編輯器。

畫面上會跳出三個選項,左邊的是「Build From Scratch從零開始製作」,中間的是「Choose a premade layout選擇現有版型」,右邊是「Clone existing page複製現有頁面」。
在這裡我會先跳過網頁設計的部分,直接選擇中間的現有模板來作示範。

選擇你喜歡的模板即可。

挑選好後,點擊綠色按鈕「Use this layout 使用這個版型」,Divi就會幫你匯入模板的檔案囉。

2.加入錨點(為區塊ID命名)
當你在設計好整個頁面後,請預想你所需要的選單內容,舉例來說,這個網頁我打算要製作五個主要內容:
- Home 首頁
- Menu 菜單
- Story 故事
- News 最新消息
- Contact 聯絡我們
接下來,我們要幫這五個區塊命名,也就是給他們一個ID,讓選單知道被點選時要跳轉過去的位置。
跳轉的位置可以是Section, Row或者Module,點選齒輪icon進入設定。

點選Advanced,打開CSS ID & Classes區塊,並在CSS ID的欄位,填寫你想使用的ID名稱,像是選單中的「菜單」,我希望他能跳轉至ID名稱為menu的位置,那我就在ID欄位填入menu。

將你想要跳轉的幾個位置都命名完成,且網頁也設計好之後,點選右下角的Publish,如果之前已經點選過Publish了,那就點選Save。

3.製作選單(連結錨點)
接著回到WordPress後台,點選「外觀」裡面的「選單」,輸入選單名稱後,勾選「Primary Menu主要選單」,再點擊右下角的「建立選單」。

選單建立好後,左邊選單項目中,可以看到我們剛剛設計好的網頁,將它勾起來,並點選「新增至選單」,你就會看到Home首頁出現在「選單結構」當中。

接著點選「自訂連結」,在網址欄位輸入「#+ID」,而連結文字欄位則是輸入你要顯示的名稱,像剛才的Menu區塊,所使用的ID是menu,那麼就如下圖所示,在網址輸入「#menu」,兩個欄位都輸入好後,一樣點選「新增至選單」。

你有多少區塊需要連結,就重複幾次以上的動作,直到將選單完成後,點選「儲存選單」,就完成選單製作啦。

4.設定首頁
最後,我們到「外觀」的「自訂」中,點選「首頁設定」。


將網站首頁顯示內容選擇「靜態首頁」,接著選取剛剛我們製作好的Home首頁後,點選「發佈」。

最後,開啟一個新的分頁,並輸入網址打開你的網站看看,確認選單每個按鈕都有正確跳轉,你的一頁式網站就完成啦~。
【Divi教學】三分鐘教你如何置入Google地圖
這篇文章要教你如何透過Divi Builder,將Google Map貼入到你的網頁當中,方法非常簡單,三分鐘就能完成。
1. Google Map複製置入程式碼
首先,先開啟Google Map,搜尋到你要置入的地點後,點選分享Share,接著選擇嵌入地圖Embed a map,點擊右方的複製Copy Html,把整串程式碼複製起來即可。

2.選擇Divi Module
用Divi Builder開啟你要置入地圖的頁面,有兩種Module可以使用,如果你想讓地圖的寬度跟整個頁面寬度一樣的話,可以使用第一種,全幅寬度Fullwidth Section中的Fullwidth Code。

如果不需要全幅寬度的地圖,那就使用一般的Code Module即可。

3.貼上程式碼
最後,將你剛剛從Google Map那邊複製下來的程式碼,直接Ctrl+V貼上,如果你使用的是全幅寬度Fullwidth code的話,記得先找到程式碼中的width,把後方的預設數字600改成100%,如下圖所示,這樣你的地圖才會是整個頁面的寬度喔!

【Divi教學】Divi Builder加入頁面互動特效,讓你的網站更生動
有許多網站會在各個主要頁面中,為各個區塊或是元件加上動畫,或者是一些滑鼠碰觸到時產生的特效,通常這些效果需要透過編寫程式語法來達成,但如果你是使用Divi編輯器的話,不用懂任何語法,就可以做出許多讓網站看起來更有活力的特效!我在這篇文章會教你如何用Divi編輯器,製作出數種不同的網頁特效。
1.頁面載入特效
頁面載入特效呢,是指在網站頁面載入時,逐一呈現的動畫特效,也就是說,當讀者逐漸將網頁往下滾動,頁面中有套用動畫的元素,會一個個以動畫的方式展現在讀者眼前,這樣的載入特效,會讓人特別有好像一層一層逐漸探索網站的感覺。

特效教學
不論是單一元件Module,或者是區塊的Row、Section,都可以在設定中,點選Design設計,滑到最下面,找到Animation區域,你可以在Animation Style選擇你想要使用的特效模式:
- Fade 淡入
- Slide 滑入
- Bounce 彈跳
- Zoom 放大
- Flip 翻面
- Fold 折疊
- Roll 旋轉

每一個特效都有相對應的選項可以調整,以Slide滑入作為示範說明如下:
- Animation Direction 動畫方向:元件進入頁面的方向
- Animation Duration 動畫時間:整體動畫時間長度,時間越久會越柔和
- Animation Delay 動畫延遲:讀者在到這個區域時,要過多久才啟動動畫
- Animation Intensity 動畫強度:動畫的動作幅度,在這裡強度越高動畫會從越遠的地方出發
- Animation Starting Opacity 初始透明度:可以設定最一開始為半透明
- Animation Speed Curve 速度曲線:可以設定淡入或淡出
- Animation Repeat 動畫重複:動畫重複的次數

2.游標停留特效
游標停留特效則是指在滑鼠接觸到該元件的時候,才會觸發的特效,如下圖所示,當滑鼠碰到左邊圖片後,圖片會放大,而滑鼠離開後,圖片會再度縮小。

特效教學
而這樣的游標動畫要如何製作呢?一樣到Design區塊,將你的滑鼠移動到想要製作動畫的設定旁,Divi編輯器會自動滾出一串小圖示(或者滑鼠左鍵點幾下),將一個有滑鼠鼠標的圖示點選後,下方會出現兩個選項,電腦螢幕選項代表滑鼠游標沒有接觸到時的設定,而滑鼠游標選項,則是代表被滑鼠碰到時,該元件會產生的變化。
以下圖Width寬度為例,在一般狀況下,這個圖檔會顯示80%的寬度大小,而我在滑鼠圖標選項中,設定寬度為100%,於是就產生了像上方預覽圖的特效。

3.頁面滑動特效
第三個要介紹的是頁面滑動時出現的特效,跟載入特效不同之處在於,這個特效是以讀者所在的網頁位置而定,像下圖所示,如果我只往下一點點,那麼圖片就會在一半大小的狀態停下,而且這個動畫也沒有次數的限制,會不斷地出現,若有想要強調的網站內容,可以嘗試用用看。

特效教學
滑動特效可以在Settings設定→Advanced進階→Scroll Effect找到,特效部分從中間六個特效選擇開始,必須在選擇完特效後,將Enable Transform Effects調整為Yes,該特效才會啟用。
下面會緊接著出現特效的細節調整,中間帶有方向的圓圈,代表動畫在網頁正中間時,所顯示的位置與狀態,而Motion Effect Trigger則是啟動動畫的位置,這部分用文字敘述起來比較抽象,大家可以自己玩玩看,稍微調整一下就知道個別代表著什麼
除了特效以外,這裡還能設定Sticky Position,也就是可以將元件固定在某一個位置,我自己會利用這個功能製作頁首的選單,設定成Stick to Top後,不論往下滾動到頁面任何位置,我的選單都會維持在頁面的最上方不動,讓讀者在閱讀完文章後,可以快速地尋找他想要看的其他頁面。

【Divi教學】響應式手機平板頁面設計教學,讓你的網站怎麼看都好看!
響應式頁面指的是,當你的顧客不論用電腦、手機、平板瀏覽網站時,網站內容可以自動適應裝置大小的不同,而改變整個網站版面,將圖片、文字、元件大小都調整成適合觀看的模式。
在過去,響應式網站是一種優勢,但在現代這個人人手機不離身的環境下,響應式網站變成了一種必備要素,若你的網站無法自動提供適當的版面大小給用戶,那將會流失掉非常多的潛在客戶。
Divi編輯器提供了電腦、平板、手機的即時預覽畫面,讓你可以在設計網站當下,馬上確認該頁面在不同裝置上的效果,並且提供個別設定選項,讓你能夠自行調整每個裝置的數值大小,確保每一個用戶都能在你的網站有良好的使用體驗。這篇文章,我會教你如何查看各個裝置的預覽畫面,以及如何調整其個別數值設定,以及透過顯示設定,將任何你不想要顯示的元件隱藏。
1.查看電腦、平板、手機畫面
在你進入Divi Builder時,點開下方三個點點的紫色圓圈,會看到如下圖,可以調整整個頁面的設定。而左下角的灰色選項條,從左至右個別是列表、整體預覽、電腦預覽、平板預覽以及手機預覽。你可以在編輯網站時,隨時進行切換,確認你的內容可以完美地顯示在這三種裝置上。

2.調整個別數值設定
那麼學會如何預覽不同裝置的畫面後,當發現有些內容在其中一種裝置上,出現過大或過小的問題,該怎麼處理呢?
在Divi編輯器中,大多數可調整的選項,都可以針對裝置,進行個別設定,以下以文字大小作為舉例,將你的滑鼠游標,移到Text Size右邊時,Divi編輯器會自動滾出幾個圖示按鈕(如果沒有自動出現,點點滑鼠左鍵兩下就可以囉),點擊中間有個像是手機的圖示,會叫出下方三個裝置的選項。
假設你只有設定電腦裝置的文字大小,後面的平板與手機裝置,將會跟著電腦版本的設定,如果你只設定了電腦與平板的文字大小,那手機裝置將會依照平板的數值顯示文字大小。
如果在經過一番設定後,都不滿意的話,可以點選第四個圓圈箭頭的圖示,就會將所有設定歸回初始狀態囉。

3.顯示設定
有時候我們如果希望某些Section、Row、Module,只出現在電腦或手機畫面,可以跳到Advanced欄位,把不想要出現的裝置勾選,就能針對裝置作個別隱藏Disable。

舉例示範
我通常會在Theme Builder裡面建立頁首的選單列,並且針對電腦用戶以及平板手機用戶,設計出不同的選單內容。
電腦用戶因為螢幕大,可以看到比較全面的網站設計,我會設計一個專門給電腦用戶的Section,並且在Advanced→Visibility中,將手機Phoen跟平板Tablet隱藏,以避免造成手機用戶瀏覽上的不適。
而手機用戶的Section,內容會盡量單純,不加入過多複雜花俏的圖示,並將選單的高度限制在50px以內,以免手機用戶在瀏覽文章時,有一大部分的畫面被選單遮擋,最後在Advanced→Visibility中,將電腦Desktop隱藏,就不會讓電腦用戶看到兩個選單啦。


【Divi教學】在Divi主題中新增字體步驟教學
在使用Divi有文字內容的Module時(像是Text, Blurb...等等),在Text Font欄位中,除了現成的Google字體可以選擇以外,另外也可以上傳自己想要使用的特殊字體。今天這篇文章要教你如何在Divi編輯器中上傳字體,以及如果遇到上傳失敗的問題時,要如何解決。
1.新增字體至Divi步驟教學
首先,Divi提供的預設字體,基本上都是來自Google的免費英文字體,如果要使用特殊的中文字體,通常需要自行上傳。上傳的方法很簡單,照著以下圖示及步驟即可:
- 點選Module中的Design設定欄
- 打開你要設定的文字設定區塊(Text/Title)
- 點擊Text Font文字字體
- 點選Upload上傳
- 點選Choose font files選擇要上傳的字體檔案(ttf/oft)
- 輸入要顯示的字體名稱Font Name
- 點擊下方藍色按鈕Upload上傳
- 完成!

字體上傳完成後,整個網站可以使用,使用其他Module時,都可以直接選用已經上傳好的字體。
2.字體上傳失敗問題
當你在上傳字體時,有可能會碰到上傳失敗的狀況,視窗中會顯示「很抱歉,基於安全性考量,系統不接受這個檔案類型。」,如果是使用英文版Wordpress,則會顯示 'Sorry, This File Type Is Not Permitted for Security Reasons',而這個問題通常是來自於Wordpress系統本身為了安全考量而設置的檔案限制,避免你上傳了不適用的檔案導致系統有問題。

解決方法
解決方法有很多種,有些人會安裝可以更改檔案限制設定的外掛調整,使用起來雖然很方便,但變成你的網站要長時間使用這個外掛,有可能會拖慢網站速度,而且一但刪除外掛後,又再度不能上傳新的字體了。
我個人會建議使用另一種方法,透過網站管理員的外掛,直接修改網站的設定,修改完後,直接把外掛刪除,未來也還是可以上傳字體。
請先到網站後台Dashboard點選外掛→安裝外掛,並且搜尋File Manager,點選立即安裝,並在安裝完成後點選啟用。

開啟WP File Manager,找到一個名為「wp-config.php」的檔案後,滑鼠右鍵點選「Code Editor」

將下列程式碼複製貼上到編輯器最下方,點選Save & Close關閉編輯器,接著就可以再度開啟Divi編輯器,你會發現字體可以順利上傳囉!
define('ALLOW_UNFILTERED_UPLOADS', true);

注意事項
在完成上方的程式碼步驟後,記得回到外掛→已安裝的外掛中,找到WP File Manager,停用該外掛並且刪除。
之前曾經有過類似的外掛被駭客入侵的事件發生,許多有安裝該外掛的網站,都被駭到無法開啟網站,造成很多麻煩,所以我自己習慣在使用完類似的外掛後,都一律將其刪除,否則網站的後台一不小心就被完全掏空了。

Divi vs. Elementor 兩大WordPress編輯器優缺點比較
你是否正在猶豫要使用Divi還是Elementor,將你的網站外觀不再只是文章列表呢?
相信大多數人在使用Wordpress製作網站時,不論是部落格網站,或者是商業型品牌網站,都會遇到該如何製作、設計首頁的問題,而Divi跟Elementor這兩個頁面編輯器,正是目前世界上最熱門的兩個Wordpress編輯器。
這篇文章將會幫你比較出Divi及Elementor兩者的不同,協助你找到最適合你使用的頁面編輯器,如果你目前也有一樣的煩惱,那就跟我一起看下去吧!
一、Divi vs. Elementor 相同處
首先呢,Divi跟Elementor兩者其實有非常多的共通點,而這幾個共通點也是讓多數Wordpress使用者們,對Divi及Elementor趨之若鶩的特色:
1.視覺化編輯器
Divi編輯器畫面 Elementor編輯器畫面
首先,Divi跟Elementor都是使用視覺化的編輯器,你可以在編輯時,直接對網站實際地樣式作調整,不像過去必須在後台用一句句的語法、程式碼製作網站。
需要增加網站的內容時,Divi只需要點選+號,就可以從元件列表,選擇想要加入的項目,直接進行編輯即可。而Elementor則是使用拖拉的方式,把元素用滑鼠拖拉進適當的位置後,一樣能夠輕鬆地調整網站。
2.電腦、平板、手機視角
Divi手機視角 Elementor手機視角
並且,Divi跟Elementor都可以切換到手機或平板視角,針對有不同瀏覽習慣的使用者,來為網站進行更細節的調整,盡可能讓不同的使用者,在瀏覽你的網站時,都能夠有更好的使用體驗。
3.列表顯示
Divi列表顯示 Elementor列表顯示
除了上一段提到的電腦、手機、平板視角以外,Divi跟Elementor還有提供列表型的顯示方式,像這樣的瀏覽模式,適合用來確認網站中篇幅較長的網頁,而我個人經常會利用列表模式,來快速將已經設定好樣式,複製到尚未設定過的元素。
4.個別頁面設計
Divi Theme Builder Elementor Theme Builder
而Divi跟Elementor也同時有提供主題性的編輯器,讓你可以為整個網站製作統一的選單列、底部欄,但同時,也能為幾個指定的頁面,特別製作不同的頁首、頁尾。
5.設計選項
Divi 樣式設計 Elementor 樣式設計
在各個元素的設計選單,我個人認為Divi跟Elementor除了位置以外,基本上該有的設計選項都一應俱全,非常足夠應對各種常見類型的網頁設計。
二、Divi vs. Elementor 相異處
前面把Divi跟Elementor的相同處說得差不多了,接下來我們進入到這兩個網頁編輯器的相異處:
1.主題版本及外掛版本
Divi在網頁編輯器上提供兩種版本,一個是主題,另一個是外掛,如果你有習慣使用的主題,只需要為其中幾個頁面作編輯,那麼就可以選擇外掛版本的Divi使用。如果你想要全方面的為網站設計,包含頁首、頁尾、網站整體,那就使用主題式的Divi。
而Elementor只提供外掛版本,只能針對個別頁面調整,並沒有提供太多全面的設計方式。
2.範本數量
Divi範本
Divi最有價值的其中一點,就是它提供非常大量的免費範本給會員使用,所有的範本都是一個組合包的概念,每一個主題都包含5到8頁以上的頁面範本,也就是說,你可以選定其中一個主題,將所有頁面都匯入到自己的網站後,調整玩文字跟圖片,就是一個完成度非常高的網站,對於新手而言是一大福音。
Elementor範本

而Elementor的範本則是多數主題只有提供一頁或者兩頁,不能像Divi一樣快速建立出網站的各個頁面,使用者如果有製作首頁以外的需求,就必須再自行設計出網站的其他頁面。
3.語言
語言的部分,Elementor則是略勝一籌,因為他提供英文以及中文的版本,而Divi只提供了英文,儘管用字都不難,但仍會讓有英語焦慮的使用者望之卻步。
4.網站表現
Divi速度測試 Elementor速度測試
我在一個網站上,同時安裝了Divi跟Elementor,並且用它們製作了內容幾乎一樣的兩個頁面,而以上的測試結果看下來,似乎差異並不大,整體表現上由Divi略勝一籌,但頁面完整顯示出來的速度,則由Elementor勝出。
5.價格比較
Elementor價格

Elementor提供了免費以及一年僅需美金49元的方案,吸引更多剛入門的使用者踏入,但是當使用者有超過一個以上的網站時,價格便不再享有優勢,而且,Elementor不提供終生版的價格,必須要每年不斷地付款,Elementor的使用者在長時間比較之下,花費會遠超過Divi。
Divi價格

而Divi的會員方案,則是都不限使用的網站數量,提供一年型$89(需每年續訂)跟終生型$249(買一次即可終生使用)這兩個方案。而透過以下連結購買,則可以有10%OFF的優惠價哦。

6.支援性
基於價格方面,Elementor有提供免費的版本,讓更多新手會優先嘗試,而這點也讓Wordpress中Elementor相關的支援外掛,比起Divi更多一些,創作者更願意將時間投入在開發市場似乎更大一些的Elementor之中。
三、總整理
現在,我再為這篇文章所提到的Divi跟Elementor的優缺點作一個總整理,讓你快速簡單地複習一下:
Divi | Elementor | |
---|---|---|
視覺化編輯器 | 有 | 有 |
電腦、平板、手機視角 | 有 | 有 |
列表顯示 | 有 | 有 |
個別頁面設計 | 有 | 有 |
設計選項 | 豐富 | 豐富 |
主題版本及外掛版本 | 主題版本及外掛版本 勝 | 僅外掛版本 |
範本數量 | 較多 勝 | 較少 |
語言 | 英文 | 英文及中文 勝 |
網站表現 | 整體表現較佳 | 完整載入速度稍快 |
價格比較 | 長期使用較便宜 勝 | 長期使用較貴 |
外掛支援性 | 較少 | 較多 勝 |
四、Divi vs. Elementor 該選誰?
這兩個頁面編輯器各有各的優缺點,而且每個人喜歡的介面都不相同,我個人在各別使用過後,更加偏好Divi,對於長時間都在建立網站的我來說,Elementor長期使用下來所需要累積的價格非常驚人,而且我更喜歡Divi的整體編輯器畫面。
【Divi主題必備】10個WordPress外掛推薦清單,讓Divi功能最大化!
本篇文章將會介紹我個人在使用Divi製作網站時,會搭配Divi主題一起使用的外掛,不管你是用Divi製作商業品牌網站、個人作品集、部落格,或者是使用Woocommerce的電商類型線上購物網站,都可以參考使用!
Divi是一個非常強大的外觀主題編輯器,同時也提供使用者很多彈性空間,讓一些專業的工程師們,可以為Divi製作專屬的外掛,來補充額外的功能。
如果你還不清楚Divi是什麼樣的主題,可以先去看Divi的介紹文【WordPress】人人都可以是網站設計師,DIVI最強大的頁面編輯器,以及基礎使用教學的【Divi新手必看】網站設計完整步驟教學,看這篇就夠!。
那我們就正式進入Divi必備的外掛清單介紹囉!
外掛 #1. Supreme Modules Lite

首先,第一個要介紹的外掛是Supreme Modules Lite,它是我平常用Divi主題製作網站時,必裝的外掛第一名,它提供了Divi使用者更多設計款式的Module選擇,例如說,可以加入文字到分隔線Divider中、文字色彩可以選擇漸層色、提供文字的打字特效等等,讓你的網站變得更加豐富。
Supreme Modules Lite還有提供專門為Contact Form 7設計的模組,也就是說,你可以在Divi編輯器中直接調整Contact Form 7的樣式(文字大小、輸入框的顏色、按鈕款式等等),不必再靠語法來修改Contact Form 7的外觀,非常方便!
費用:免費/付費
範本:連結
外掛 #2. Popups for Divi

Popups for Divi外掛可以將任何一個Section設定為會彈跳出來的視窗,但它並不是自動彈跳的類型,而是要在頁面上加入一個按鈕,將按鈕的連結對象設定為此Section的ID,使用者點擊按鈕時,這個Section就會跳出,很適合放在資料量多,但又只能在一個頁面上呈現的網站,例如:一頁式推銷頁面、服務說明頁面等等。
費用:免費
範本:連結
外掛 #3. Filter for Divi

Filter for Divi外掛的表現方式類似於Divi的Tab Module,但是在設計上更加自由,我會發現這個外掛,是因為我覺得Tab Module不好用而且樣式醜XD,要大幅調整款式的話,還要利用程式碼修改,實在太麻煩。
而Filter for Divi可以將需要分類呈現的資料,利用按鈕來篩選資料,不必使用多個頁面表現,適合用在作品集類型的網站。但是Filter for Divi的壞處在於,剛開始設定比較複雜,雖然作者有寫教學,卻不夠詳細,期待他未來可以出更清楚的影片教學分享。
費用:免費/付費
範本:連結
外掛 #4. Simple Divi Shortcode

Simple Divi Shortcode外掛可以將你存在Divi Library,或者是建立在Divi Library的內容,用短代碼的方式加入至網頁中,如果Divi提供的Section及Row的種類不夠多,就可以使用短代碼來提升Section的分隔數量與種類。
並且,若有需要大量重複使用的網頁內容,也可以用短代碼的方式放在網頁中,這樣之後只需要修改一個地方,全部有此短代碼的內容,都可以一次被修改成最新版。
費用:免費
外掛 #5. Sticky Menu (or Anything!) on Scroll

Sticky Menu外掛可以將任何的Section、Row、Module,跟著滾輪一起移動上下,不會因為使用者往下瀏覽頁面,就看不到你想讓使用者看到的內容,適用於部落格網站,文章旁側邊欄的廣告之類的。
費用:免費
教學&範本:連結
外掛 #6. Use Any Font

Divi編輯器雖然有內建安裝新字體的功能,但常常會因為伺服器或者Wordpress本身系統的設定,而無法順利安裝字體檔案進去,這種時候我就會使用Use Any Font外掛,它的免費版可以讓你自由安裝一種字體,付費版則是不限字體安裝數量,適合不熟悉Wordpress後台設定的用戶。
費用:免費/付費
外掛 #7.Safe SVG

有時候我們網站上的圖檔,會因為解析度的不同,在不同的螢幕使用下,造成圖片有鋸齒狀的現象發生,一般的圖片還無所謂,但是像是Logo商標的圖片,則要盡量避免。
我會使用Save SVG外掛,幫助我的網站可以順利上傳SVG的檔案,因為Wordpress系統會預設幾種可以上傳到網站上的檔案類型,而SVG並不在其中,當然你也可以使用一些修改器,將系統設定更改,但之前有發生過幾種知名Wordpress後台修改器被駭客入侵,導致使用者的網站整個掛掉的情況發生,所以我會盡可能避免安裝能夠直接全面修改後台的外掛。
*SVG檔案:可以利用ai程式,將向量的檔案存成適合網頁觀看的SVG檔,可以有效解決圖形邊緣鋸齒的問題。
費用:免費
另外,如果你的網站是使用Woocommerce製作的網路商店,以下這幾個外掛,是我個人在製作線上購物網站時,常會使用的輔助外掛,使用上非常簡單,又能將你的購物功能變得更加完整。
外掛 #8. Themify - WooCommerce Product Filter

線上購物商店的商品數量若非常多,或者是品項複雜,會需要一個側邊分類欄,幫助你的客戶們更快地找到適合的商品,而Themify - WooCommerce Product Filter是我個人非常喜歡用的外掛之一,使用上比較單純,而且是完全免費的外掛,你可以自由地選擇要出現的分類內容、分類方式,Divi的官方網站甚至有提供一篇它的完整的使用教學。
費用:免費
教學&範本:連結
外掛 #9. Advanced Shipment Tracking for WooCommerce

Advanced Shipment Tracking外掛雖然不算是替Divi網站有任何美化的功能,但它確實很好用,所以我把它列在必備的外掛之一當中。
Advanced Shipment Tracking外掛會在你的訂單中,新增一個出貨的選項,當你完成出貨,將出貨單號填入訂單中,Advanced Shipment Tracking外掛就會自動寄送訂單狀態更新的信件到你的客戶信箱中,通知對方貨品已完成出貨,貨品的貨運單號、訂單細節,都會一併寄給客戶,能替你或你的員工減輕不少工作的負擔。
費用:免費
外掛 #10. Ajax Search for WooCommerce

Ajax Search外掛可以為你的Woocommerce網站增加搜尋列的功能,它的搜尋列會在關鍵字輸入的當下,跳出有關聯的分類、商品、金額等,讓客戶在搜尋產品時,省去要不停重複按Enter的步驟,就能查找他要的商品,是個設計得非常完整,使用上又只需要放入短代碼,就能夠馬上使用的外掛。
費用:免費
以上這十個外掛,希望可以幫助到你,將你的Divi網站製作的更加完整!