Visual Portfolio, Posts & Image Gallery for WordPress

【CF7教學】如何將訊息寄送給不同收件人,適用餐廳分店/不同部門業務

如果你的公司業務量逐漸增加,也許是有多個分店,或者是有多個業務/部門在處理客戶需求,當客戶在填寫聯絡表單時,如果可以讓客戶直接選擇他想向哪一名業務,或者哪一個分店聯絡的話,將可以協助客戶更快地聯絡上能夠替他解決問題的對象。

這篇文章要教你如何使用Contact Form 7,透過製作一個下拉式選單,將你想列出的收件者列出,並讓客戶直接選擇要將此封訊息寄送給誰,方法非常簡單哦!

1. 效果預覽

下圖所展示的就是聯絡表單的完成品,透過選擇不同的分店,聯絡表單就會將這封訊息寄送給到分店的聯絡信箱

Finished contact form

2. 步驟教學

Step 1. 安裝外掛Contact Form 7

本教學是以Contact Form 7外掛作為基礎來製作表單的喔,若你的網站還沒有的話,請到「控制台>外掛>安裝外掛」搜尋Contact Form 7後,點選「立即安裝」並「啟用」即可。

安裝Contact Form 7

Step 2. 新增聯絡表單

安裝完畢後,控制台左邊會出現一個「聯絡表單/Contact Form 7」的選項,點開後,你可以選擇「新增聯絡表單」,或者是直接使用你現有的表單。

新增聯絡表單

Step 3. 增加下拉式選單

進入表單後,一開始你會看到有幾個預設好,要讓客戶填寫的欄位,每一個[]符號都等於一個欄位。

以第一個「名字」的欄位作說明,[text* your-name]最開始的text是欄位的類型,*符號代表這屬於必填的欄位,your-name則是這個欄位的標籤代碼,用來顯示在電子郵件中。

<label>跟<label/>是方便工程師調整表單樣式用的,這部分我們先忽略,不必調整。

你可以依照自己的需求點選上面藍色的按鈕加入不同的欄位,而我要先加入可以選擇收件人的「下拉式選單」,首先,點選「表單」的上方選項「下拉式選單」。

增加下拉式選單

Step 4. 輸入選項

勾選「必填欄位」,在「欄位名稱」中輸入代表該欄位的標籤代碼。

接著在「選項」中,加入「名稱|電子信箱」,在|符號前面的名稱會顯示在聯絡表單中,而|符號後面的電子信箱,則會對應地成為收件者。

每一行會是一個選項,按照下圖範例所示,聯絡表單到時候會有五個選項,完成後點擊「插入標籤」即可。

輸入選項

Step 5. 填入收件者

接著到「電子郵件」欄位中,將收件者填入剛剛的「欄位名稱」,記得前後要加上[]符號哦,像我是將標籤代碼輸入branch,就填上[branch]即可,這樣之後客戶選好分店後,系統便會幫你把這封訊息寄給該分店。

寄件者可以填寫你的主要電子信箱,這樣分店收到訊息時,訊息比較不會被自動分去垃圾郵件區。

主旨會是訊息的標題,我自己習慣將客戶的姓名資訊放在標題後方,未來要找信件時比較方便。

電子郵件的內文就可以將所有的標籤代碼都放進去,訊息內容才不會漏掉,都完成後,點選右手邊的儲存即可。

填入收件者

Step 6. 使用短代碼

最後,上方會有一段「短代碼」,將短代碼整串複製起來,並貼到你想要他顯示的位置,就大功告成囉。記得要自己測試一下傳送訊息,確認是否都有順利運作喔。

使用短代碼

利用Cloudways建立臨時網站Staging Site,更新網站超簡單!

相信很多人在對網站進行版面或頁面大更新時,會採取將網站暫時設置成「網站更新中」的模式,暫時讓訪客不會看到網站更新期間所出現的錯位或亂碼,但相對而言,你的新訪客也可能因此而直接離開網站,永遠不回頭~

如果你的網站主機商,使用的是Cloudways,則可以考慮使用Cloudways提供的「Staging Site」功能,將網站複製出一個臨時網站,在臨時網站上完成你的更新後,直接將臨時網站所做的變更,推送到正式網站,如此一來,便不必擔心這段期間損失的訪客數,或者是更新網站時把網站給搞壞了。

如果你還不是Cloudways的客戶,可以先參考【網站架設】穩定快速又便宜,獨立空間Cloudways主機,註冊你的Cloudways帳號,或者是參考這篇【主機】載入速度快10倍!從Godaddy搬家至Cloudways完整教學,進行你的網站搬家計畫。

而這篇文章呢,將會介紹如何使用「Staging Site臨時網站」功能,讓你的更新計畫變得更簡單、更安全!


Step 1. 替要更新的網站製作「Staging Site」

首先,登入Cloudways後,點擊以下滑桿,開啟Applications網站列表。

開啟Applications

在你想要製作臨時網站的網站右手邊,點選三個點點的選單圖示,點選Clone App/Create Staging 複製/製作臨時網站。

點選複製網站

選擇要存放臨時網站的伺服器,直接選擇你目前現有的伺服器即可,接著勾選Create as Staging,點擊Continue繼續下一步。

選擇伺服器

這時你會看到畫面顯示Creating Staging Application...代表Cloudways正在幫你製作臨時網站中,通常網站檔案不大的話,幾分鐘內就會完成了。

等待臨時網站製作完成

複製完成後,你會在Applications網站列表中看到一個Staging Site臨時網站,代表你已經複製完成啦。

確認臨時網站已經架設好了

Step 2. 進入「臨時網站」並進行更新

進入臨時網站的後台後,Application URL就是你的臨時網站的網址,點開後網頁會要求你輸入帳號密碼,將後台列出的帳號密碼複製貼上並登入後,就可以看到你的臨時網站囉。

更新的步驟就按照你平時調整網站的作法,進入網站的控制台Dashboard,並進行調整與修改。

查看臨時網站的連結及登入資訊

Step 3. 更新完成後,將有更改的部分推送至正式網站

當你在臨時網站上的更新完成後,回到Cloudways,點開左手邊的「Staging Management」,會出現兩個按鈕:

  • Push:將臨時網站的更新內容「推」至正式網站
  • Pull:將正式網站複製至臨時網站(如果你想重新調整網站,才點擊這個選項哦!)

在這裡請點選「Push」,把你辛辛苦苦做好的修改,傳送到正式網站上。

將臨時網站中所修改的內容推送到正式網站

接著會跳出詢問你要複製臨時網站的「哪幾個部分」上到正式網站,我個人會建議直接全部覆蓋(如下圖勾選),並且將「Yes, please take backup」也勾起來,這樣Cloudways會先備份你的正式網站,之後才將臨時網站的內容覆蓋上去。

最後點選Proceed,稍等一下,就完工啦!

選擇要覆蓋的內容及是否進行備份

【Divi教學】如何製作Divi彈出視窗,適用任何內容

有時候我們需要利用「彈出視窗Popup」來展示部分資訊,例如餐廳的網站,可以設置彈出視窗讓客人訂位,或者是不想再為了一些幅度不夠長的資訊增加一個新的頁面,都可以使用「彈出視窗」,既可加入更多多元化的內容,又可增加網站的互動性。

這篇文章要教你如何在網站上製作「彈出視窗」(如下圖示範),步驟非常簡單,且不論各種內容都可以放到彈出的視窗中唷!

彈出視窗範例

Popup sample

如何製作彈出視窗

1. 安裝外掛「Popups for Divi」

請先到網站後台Dashboard,開啟外掛>安裝外掛,搜尋「Popups for Divi」,點選安裝外掛,安裝完成後啟用這個外掛。

Popups for Divi

2. 設置開啟彈出視窗的按鈕

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

Add a button

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

Add button link

3. 製作彈出視窗的內容

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

Insert Section

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

Section Settings

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

Popup settings

接著點選右下角的Save,就可以打開網頁看看效果如何啦~

在Popup設定下方還有許多細節可以調整,但我自己通常用預設的彈出視窗就非常足夠了,同一個頁面的彈出視窗可以有很多個,只要都使用不同的名稱ID就好,另外,叫出彈出視窗的觸發點不一定要是按鈕,也可以是選單、文字、圖片等等,只需要將連結設定成「#+ID」就好。

如果你的彈出視窗沒有被啟發的話,可以先清除快取,或者是檢查確認大小寫是否相符喔!

【Divi教學】停用Divi主題自動更新

許多人可能會認為「自動更新」等於可以使用更多新功能,或者是得到更好的使用者體驗服務,然而,為什麼我要選擇停用自動更新呢?

「更新」在大多數時候是為了解決一些bug,或者是將錯誤修正,確實可以得到更好的使用體驗,但是若這次的更新屬於很大規模,或者是要加入新功能的情況,很有可能會有些新的物件或程式碼,對原本在網站上的元件造成影響,甚至嚴重點的話,讓你整個網站錯誤呈現。

所以呢,這篇文章要教你如何停用Divi的主題/外掛的「自動更新」,避免網站在更新後出現問題,卻因為沒有即時注意到,而導致網站一直停留在有問題的狀況中,以及平時在更新主題與外掛時,我會進行的幾個SOP步驟。


如何停用Divi主題自動更新

如果你是用的是Divi主題,到網站後台Dashboard,點選外觀>佈景主題,打開Divi主題後,會看到如下圖的畫面,若畫面中顯示「啟用自動更新」,代表你的自動更新目前是停用的狀態,不需要作任何動作。

若畫面中像下圖一樣,顯示「停用自動更新」,代表你的Divi目前是會自動更新的,請點選「停用自動更新」,就ok囉!

Divi theme auto update

如何停用Divi外掛自動更新

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

Divi plugin auto update

更新主題/外掛時的SOP

為了避免自動更新導致的問題,我個人會更偏好在進行每一次的更新前,先確認好網站已經備份完成,再來執行更新的動作,若在更新後,發現網站有無法快速處理好的問題,可以馬上將Divi恢復為舊的版本,或者是將網站的備份還原,才不會網站自己默默進行更新,然後在自己還未注意到網站狀況的期間,不知不覺就嚇跑了許多讀者。

以下是我在更新主題/外掛時會進行的幾個步驟,提供大家參考:

  1. 備份網站
  2. 更新主題/外掛
  3. 清除快取外掛的Cache
  4. 確認網站內容
  5. 更新完成

若在步驟4發現問題,有幾個選項可以試著解決,都沒有幫助的話,再進行備份恢復:

  1. 清除快取外掛的Cache
  2. 清除Divi的Static CSS File:Divi>Theme Options>Builder>Advanced>Static CSS File Generation>Clear
  3. 恢復Divi版本:Divi>Theme Options>Updates>Version Rollback>ROLLBACK TO THE PREVIOUS VERSION>選擇版本
  4. 網站備份復原

【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 theme builder

Divi Woo Modules (WooCommerce Modules)

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

Divi - Insert Module

下列Woo Modules中,1 是商品列表,可以用於商店頁面,2-17 可以用於設計商品頁面,而18-20可用於設計購物車頁面,最後21-25則是用於設計結帳頁面。

  1. 商店頁面 - Woo Shop:商品列表
  2. 商品頁面 - Woo Add To Cart:加入購物車
  3. 商品頁面 - Woo Breadcrumb:頁面路徑
  4. 商品頁面 - Woo Description:描述
  5. 商品頁面 - Woo Images:圖片
  6. 商品頁面 - Woo Price:價格
  7. 商品頁面 - Woo Related Product:相關商品
  8. 商品頁面 - Woo Stock:庫存數量
  9. 商品頁面 - Woo Title:標題
  10. 商品頁面 - Woo Additional Info:額外資訊(尺寸、顏色款式等)
  11. 商品頁面 - Woo Cart Notice:已加入購物車通知
  12. 商品頁面 - Woo Gallery:相簿(滑動圖片)
  13. 商品頁面 - Woo Meta:貨號
  14. 商品頁面 - Woo Rating:評分
  15. 商品頁面 - Woo Reviews:評價留言
  16. 商品頁面 - Woo Tabs:商品資訊(將描述、額外資訊、評價結合在一起)
  17. 商品頁面 - Woo Upsell:你可能也喜歡的商品
  18. 購物車頁面 - Woo Cart Products:目前在購物車的商品列表
  19. 購物車頁面 - Woo Cart Totals:目前購物車的運費、總金額
  20. 購物車頁面 - Woo Cart Cross Sells:顯示已被放入購物車內的商品的其他相關商品
  21. 結帳頁面 - Woo Checkout Billing:帳戶資料
  22. 結帳頁面 - Woo Checkout Shipping:運送資料
  23. 結帳頁面 - Woo Checkout Information:額外資訊
  24. 結帳頁面 - Woo Checkout Details:訂購細節及金額
  25. 結帳頁面 - Woo Checkout Payment:付款方式選擇

1.如何製作商品列表Shop Page

通常我會使用Divi的Shop module來展示商品的列表,並且搭配其他不同的Module設計整個商店頁面。

Divi shop page

Shop Module可以讓你調整這個列表顯示的商品類型、單頁商品數量、一列顯示多少個商品、排列順序等等,另外你可以在Element中開啟或者關閉列表下方的頁數選項。

而在Design選項中,你可以調整各種顏色、文字大小、滑鼠移到圖片上時要顯示哪一種icon等等,按照你的網站風格設計即可。

Divi Shop Module Settings

2.如何製作商品頁面 Product Page

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

Sample Product Page

3.如何製作購物車 Cart / 結帳 Checkout 頁面

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

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


4.如何製作會員 My Account 頁面

至於會員頁面,Divi還沒有相對應的Woo Module可以使用,之後如果陸續推出的話,我會繼續更新在這篇文章中。

所以目前我直接採用WooCommerce所提供的短代碼,加入Text Module(或者是Code Module),並貼上短代碼後,Woocommerce預設的會員頁面內容就會出現了。

會員頁面短代碼:[woocommerce_my_account]

Text Module

推薦搭配外掛

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

1.商品篩選 Themify - WooCommerce Product Filter

Themify - WooCommerce Product Filter

第一個是可以篩選商品的Themify - WooCommerce Product Filter,通常在商品數量眾多的購物網站,都會在商品列表旁加入一些分類,讓顧客可以更快找到適合自己的商品。

而這個外掛雖然是免費的,但是功能非常齊全,非常推薦使用。


2.搜尋列 Ivory Search

Ivory Search

第二個推薦使用的外掛是Ivory Search搜尋列,其實Divi本身已經有提供簡易型的搜尋Module,但如果希望將搜尋顯示的內容限定在商品,而不要顯示網站其他頁面,那就會需要使用到Ivory Search。

Ivory Search有分免費版跟付費版,免費版的功能對一般購物網站來說,其實已經綽綽有餘,是款相當好用的免費外掛。


3.商品第二圖示 WC Secondary Product Thumbnail

WC Secondary Product Thumbnail

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


4.通知信件設計 Decorator - WooCommerce Email Customizer

Decorator - WooCommerce Email Customizer

第四款外掛是Decorator,原本Woocommerce提供的信件內容,是以他們的紫色作為主要用色,如果你不滿意Woocommerce的配色,想要改成符合自己網站風格的色彩,可以考慮安裝Decorator外掛。

Decorator可以讓你改變字型、顏色、大小、加入網站Logo,甚至還能改變訂單內容所顯示的外觀,記得在你設定完成後,測試一次購物流程,確保信件的圖檔都有順利顯示。

【Divi教學】如何製作WordPress網站選單&多排下拉選單

許多人會透過安裝「多層次選單」的外掛,來將數量過多、導致選單長度過長的子選單分成好幾排,但如果你使用的是Divi主題,Divi本身就已經有內建多層次選單的功能,而這篇文章除了會教你如何製作選單以外,還會教你如何不透過外掛,製作多層次的選單

建立選單

首先,開啟WordPress網站後台,點選外觀>選單,開始製作選單。

外觀>選單

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

Add menu

輸入「選單名稱」後,如果要指定選單顯示的位置,請勾選下方的「指定編輯中選單的顯示位置」:

  • Primary Menu:網站主要選單
  • Secondary Menu:第二選單(通常會顯示在網站最上方,又稱為頂邊欄)
  • Footer Menu:底邊欄(顯示於在網站最下方)

最後點選「建立選單」即可。

Type menu name and select menu position

現在,就可以透過左邊的「新增選單項目」,增加選單內的選項,可以新增「頁面、文章、自訂連結、分類」。

新增頁面連結

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

Add page link

新增文章連結

Add post link

新增分類連結

Add category link

新增自訂連結

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

Add custom link

製作子選單

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

Create child menu

製作多排下拉選單

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

將選單分層

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

Tick CSS code

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

Add mega-menu code to CSS blank

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

Menu finish

【建站教學#4】如何選擇WordPress主機商,我對主機的條件標準

市面上的虛擬主機商百百種,在初期接觸WordPress時,要選擇出一個適合自己使用的主機商,也許是很多人很頭痛的問題之一,這篇文章我會和你簡要介紹虛擬主機的類型選擇主機商時必備的重點常見且評價優良的三個主機商評比,以及我個人目前選用的主機商

還沒看前一篇教學文章嗎?請點擊→【建站教學#3】如何選擇網域商?六大網域商比較

主機類型

1.分享型主機 Shared Hosting

分享型主機又稱做共享型主機,顧名思義就是在一台虛擬主機上,有數個、或數十個、數百個使用者同時在上面運行自己的網站,分享型主機的最大好處在於價格平價實惠,對於剛開始啟用網站的新手來說,可以將初期成本壓低,而缺點則在於,若別人的網站有狀況、被攻擊、或者是流量爆炸,會或多或少地影響到你的網站運行,輕則網站速度變慢,重則網站出現Error狀態。

2.獨立型主機 Virtual Private Server / VPS

獨立型主機除了主機的硬體設備、容量、速度更快以外,會給予每個使用者獨立的空間營運網站,確保你的網站不會被其他使用者的網站影響,因此價格上也就稍微貴出分享型主機一些,但如果你的網站順利地營運,且你很確定自己會持續營運該網站,那我會很建議你升級使用獨立型主機,確保你的網站訪客可以獲得更好的使用體驗。

3.專用主機 Dedicated Hosting

專用主機通常適合大型企業或者是流量非常非常非常高的網站使用,這類型的主機提供最高品質的空間、流量,每個月的價格也同樣走一個高價位路線,期許我有一天也可以將網站經營到這個規模(遠目)。


主機服務

主機商除了虛擬主機的空間、速度這些硬體條件以外,通常會附加幾種不同的服務內容,而以下是我在選擇主機時,主機商必備的數個要點,如果少了其中一種,就會從我的主機選項中淘汰:

1.可營運網站數量

有些提供給新手的分享型主機方案,會限定可安裝的網站數量(一至三個網站),以我過去狀況來說,自從我的第一個網站順利步上軌道,開始對WordPress充滿信心後,就開始不止經營一個網站了,所以我偏向使用的是不限網站數量的虛擬主機

2.客服支援

由於我並不是工程師出身,若碰到無法解決的程式後台問題,除了請身邊的網站工程師協助處理以外,我自己會先向主機商的客服線上諮詢,他們可以幫你確認網站發生什麼狀況,或者是恢復網站的備份等等,所以有全年無休的客服是非常重要的。

3.自動備份

主機商若能提供定期備份的話,網站的風險可以大幅降低,讓人覺得安心不少,所以主機商是否有提供簡易的備份與還原服務,將是挑選主機時的重點之一。

4.監控系統狀況

雖然前面有大致提到三種不同的主機類型,但各個主機通常會再細分數種不同的方案內容,單看那些流量數、空間幾GB,一般人根本分不出自己到底該用哪個方案,而如果主機商可以在後台提供監控系統,就能時時確認網站近期的使用狀況,如果發現流量的使用比率非常高,或是可用空間快要不足夠了,那麼就是時候該升級啦。

5.付費方式

多數分享型的空間,方案會提供每月付費以年為單位付費的主機空間。如果是網站新手,剛要開始接觸架站、還不確定網站是否會持續運營的話,最多選擇一年方案就好,因為大多數的新網站撐不過三個月的持續更新。而我目前使用的是每月付款一次的主機,隨時可以升級或終止,不必被一年的合約綁住。

6.能否運行Divi主題

我個人在建立網站時,最常使用、也最愛使用的主題/頁面編輯器是Divi主題,所以我會參考一下Divi社群大家的發言,看看這個主機適不適合運行Divi主機,如果有負評的話就不考慮該主機。


主機商比較

推薦主機

下方是目前我覺得不論品質、評價都相當不錯的主機選擇,價格從底到高由左至右列出,付費方式主要是月費及一年制方案,也都符合以上我列出的六個條件:

主機商DreamHostA2 HostingCloudways
主機類型分享主機高速型分享主機獨立主機
方案WordPress UnlimitedDRIVELinode 1GB
費用美金$2.95/月(一年方案)美金$9.99/月(一年方案)美金$12/月(月費方案)
自動備份每日備份每日備份每日備份
網站數量無限無限無限
全年客服OOO
免費試用XX三天試用期
網域SSL憑證OOO
無條件退費97天內30天內試用期過後,用多少付多少
專業信箱有提供有提供額外付費

不推薦主機

以下幾種是我有切身經驗,比較不推薦使用的主機名單,在選擇主機商時請盡量避免以下幾個選項:

  • Siteground:台灣用戶無法使用,不然這間的分享主機其實便宜又好用
  • Godaddy:主機非常不穩,經常網站死掉,但他們的網域服務很不錯
  • Bluehost:速度慢,網站體積大一點常會撐不住

我目前使用的主機 - Cloudways

上面表格列出的Cloudways就是我目前使用的主機,自從搬家到Cloudways後,不論是網站穩定度、客服的專業程度,都讓我非常非常滿意,之前甚至有外掛的問題,都是向他們請教進而解決的,朋友問我要用哪一家主機,我都會私心用力推薦Cloudways,雖然價格較高,但是很符合我目前幾個網站的需求。

我之前有寫一篇更詳細的Cloudways介紹文章,若有興趣的人可以點擊前往閱讀喔 ➡️ 【網站架設】穩定快速又便宜,獨立型主機Cloudways

而下方是Cloudways提供的最新優惠,若對Cloudways有興趣的人,可以使用下方優惠碼註冊一個免費會員試用,如果喜歡且想要繼續使用的話,就可以享用優惠喔!

【WordPress】一次搞懂WordPress,完整介面使用教學

剛開始接觸WordPress後台,總會讓人覺得有些混亂,這篇文章要帶你認識WordPress控制台的所有選項,帶你了解每個區塊的功能,以及管理WordPress網站時,有哪些需要先設定好的部分,讓你快速熟悉WordPress這個超級好用的網站管理系統。

如何進入WordPress後台 - 控制台Dashboard

在安裝好WordPress系統,且將網站與網域連結好之後,只要在網址後方加上/wp-admin,就會開啟後台登入的畫面,輸入你的帳號密碼登入,接著會看到像是以下畫面的網站後台,也就是WordPress控制台Dashboard。

Wordpress Dashboard

如果你的控制台介面是英文,想要更改為中文的話,可以點選左邊工具列的Settings設定→General一般→Site Languale語言,並選擇你習慣使用的語言,點擊下方的Save按鈕,網站語言設定就更改完成囉。

Language

1.控制台Dashboard

首頁Home

首先,在控制台的首頁區塊,你會看到很多功能區塊,區塊內容會因為你在網站內安裝新的外掛、更換主題而有所不同,如果想要設定區塊的顯示與否,在右上角有個「顯示項目設定」的按鈕,點開後就可以自由設定要顯示哪些區塊。

Dashboard

更新Updated

更新頁面中會顯示網站內有哪些需要更新的內容,包含系統版本、外掛、主題等,若有更新的版本,都會統一在這裡顯示。而在你執行更新前,最好先將網站進行備份,再來為網站進行更新,因為有時更新的版本也許會讓網站產生一些問題,如果網站毀壞了,就可以馬上將備份檔案還原,以確保網站的安全。

Updates

2.文章Posts

WordPress系統最初的主要用途,是讓使用者可以快速建立一個部落格網站,而文章正是讓你增加網站內容、提升網站自然流量與搜尋引擎排名,最簡單也最好用的方式之一,如果你希望讓更多人可以看見你的網站,那麼多發表文章,提供使用者資訊,會是很棒的方法之一。

在文章選項內,依序會看見:

  • 全部文章
  • 新增文章
  • 分類
  • 標籤

全部文章All Posts

在「全部文章」內,你可以看到網站內所有文章的列表,以及它們各自的作者、分類、標籤、留言數、日期等。

All posts

新增文章Add New

點選「新增文章」會直接進入文章撰寫的畫面,左半邊會是主要的文章內容,WordPress會不時地自動將你所編輯的文章內容儲存,而右半邊的「文章」選項中,可以為整篇文章進行設定,例如調整發佈時間、改變文章的連結位置、增加分類、標籤,精選圖片會成為你的文章封面圖。

Add a new post

在編輯文章內文時,滑鼠移到右邊會出現一個+號,裡面將提供你各種類型的內容,你要學習善用這些不同的內容區塊,將你的文章以更清晰、容易理解的樣貌展示給讀者,而點選右上角的「區塊」選項,則可以為每個不同的區塊調整部分設計,例如「段落」區塊,可以改變文字顏色等。

常見問題

前陣子有讀者問我,為什麼他在Word寫好文章,調整好字體後,複製貼上到網站,結果所有字體設定都不見了?WordPress的使用方法跟Word不同,網站內除了有使用頁面編輯器的網頁以外,整個網站的文章、顏色、字體、標題等,都必須在控制台→外觀內統一調整,這部分在下方外觀的段落會再說明。

Post contents

分類Categories

你可以在編輯文章時新增分類,也可以在分類頁面中編輯所有分類,名稱就是分類的名字,代稱則是該分類的網址,我會建議你使用英文,免得網址有可能會變成亂碼,另外要提醒你的是,若你想要將大分類再區分成數個小分類,記得在新增小分類時,在「上層分類」中,選擇大分類的名稱。

Categories

標籤Tags

標籤可以將幾個有所關聯的文章集結在一起,分類跟標籤的用法沒有一定的規則,最重要的是從讀者的角度去思考,讓他們可以更簡單地找到想要的內容。

Tags

3.媒體Medias

媒體庫Library

在媒體庫頁面,你可以確認整個網站的所有圖片、影片、文件檔案,並且上方提供篩選器及搜尋欄,當網站檔案龐大時,可以更輕鬆地找到你想要的檔案內容。

Media

新增媒體Add New Media

若需要一次上傳多個檔案,點選「新增媒體」來上傳檔案的話,可以看到右手邊會有進度條,更好掌控所有檔案的上傳時間。

Add new media

4.頁面Pages

全部頁面All Pages

在頁面→全部頁面中,可以查看目前網站的所有頁面,網站的頁面通常會環繞在你的網站主題來設計,最常見的幾個頁面有:

  1. 首頁
  2. 關於我們
  3. 服務內容
  4. 產品
  5. 問與答
  6. 最新消息
  7. 聯絡我們

可以透過以上幾個頁面快速向使用者介紹你的品牌,當然也可以依照每個品牌的不同需求改變網頁形式。

All pages

新增頁面Add New Pages

一般的「新增頁面」介面通常會和「文章」很類似,右手邊會有頁面的基本設定,如果你有安裝SEO相關的外掛,例如All in One SEO、Yoast SEO等,SEO設定的相關選項就會在文章內容下方出現。

如果你想要個別設計每個頁面,可以搭配頁面編輯器,像是我個人最喜歡用的Divi、很多中文用戶的Elementor,都是不錯的選擇,對Divi有興趣的話,歡迎參考另一篇Divi的安裝使用教學文:【Divi新手必看】網站設計完整步驟教學,看這篇就夠!

Add new pages

5.留言Comments

在每篇文章的下方,會有提供讀者留言的區域,你可以在網站控制台→留言中,管理並回覆所有的留言,若有垃圾訊息,可以直接丟到垃圾留言或者回收桶中。

Comments

6.外觀Appearance

佈景主題Themes

整體網站的設計,主要會被「佈景主題」影響,點選上方的「安裝佈景主題」,你可以看到目前WordPress提供了超過4000種的免費主題,每個主題你都可以先使用「預覽」確認套用之後網站會變什麼樣式。

但你也許在套用幾個主題後會有點疑惑,為什麼我的網站都沒有像Sample一樣漂亮?原因有幾個:網站還沒有太多內容、沒有文章、主題內有一些圖片需要另外上傳等,都會是造成主題套用後與期待有落差的原因。

Themes

自訂Customize

以我這個暫時作為示範的網站來看,因為裡面只有兩篇沒有內文的文章、右手邊的側邊欄也幾乎沒有內容,整體看起來就會很空虛,若你想調整網站的設計,除了新增文章、側邊欄內容外,可以到控制台→外觀→自訂中調整網站的設計,在這裡你可以找到目前所安裝的主題提供的選項,將每個選項都點進去玩玩看,你就會慢慢越來越熟悉這個網站主題。

Customize

小工具Widgets(側邊欄、底邊欄)

前一段有提到的側邊欄,可以在小工具這裡調整,左手邊是各式各樣的內容,右手邊則是要顯示的區域,用滑鼠左鍵按著要新增的內容,拖拉至右邊區域列即可。

Widgets

選單Menus

選單通常會用於顯示在網站的上方,協助使用者更快了解這個網站有提供哪些內容,左手邊可以直接勾選你想要加入選單的頁面,選取後點擊「新增至選單」,右手邊出現頁面選項後,一樣可以直接用滑鼠按著拖拉改變順序。

記得勾選下方的「主要選單」選項,這個選單才會出現在各個頁面中喔。

Menus
Website sample

佈景主題編輯器Theme Editor

佈景主題編輯器可以透過編寫程式碼改變主題的設計,如果你是新手的話,建議這塊就先不要動它,不然隨時會有毀掉主題的可能性在,未來如果有需要或者是有教學可以跟著操作的話,再來自行嘗試。

Theme Editor

7.外掛Plugins

已安裝外掛Installed Plugins

安裝外掛等同於是在替網站安裝更多額外的功能,WordPress上有來自各路高手提供的免費外掛,可以滿足大多數你想要擁有的網站功能,不過這些免費外掛並不一定全然都非常好用,安裝前記得先參考一下評分、留言,確認大多數使用者都滿意這個外掛後再進行安裝。

安裝完成且外掛啟用後,每個外掛的「設定」位置都不一樣,有時候在「設定」,有時候在「工具」,更有時候是直接新增一個選項在左邊列表中,如果你真的找不到該外掛在哪裡,可以回到外掛頁面中,點選該外掛下方的「設定/Settings」,畫面就會直接跳轉到該外掛的設定位置囉。

至於如果要刪除某一個外掛的話,記得要先點選「停用」,再「刪除」,任何正在啟用中的外掛,都不能直接被刪除喔。

Installed Plugins

安裝外掛Add New Plugins

如果你在免費外掛中找不到理想的選擇,要轉向使用付費外掛的話,通常下載好的外掛檔案會是zip檔,不必進行解壓縮,直接點選上方的「上傳外掛」,選擇該外掛的zip檔,進行安裝即可。

Add new plugins

外掛編輯器Plugin Editor

外掛這裡一樣有外掛編輯器,讓你能直接編輯各個外掛的程式碼,一樣要提醒你,如果還是初學者的話,建議不要更動不了解的部分,以免影響到網站的運行喔。

Plugin Editor

8.使用者Users

全部使用者All users

如果網站需要由多個使用者操作、發布文章、改變設計等,可以替每個工作人員新增一個專屬的使用者帳號密碼來管理網站內容。

All users

新增使用者Add New Users

每種使用者的網站權限都不同,以下列出幾個基本的角色權限:

  • 訂閱者 Subscriber:僅能閱讀網站內容
  • 投稿者 Contributor:可以投稿文章,但不能發布
  • 作者 Authur:可以投稿文章並直接發佈
  • 編輯 Editor:可以管理並編輯所有文章
  • 網站管理員 Administrator:可以擁有網站管理的所有權限

使用者的類型會因為網站不同的功能而有所增減,例如,如果安裝了WooCommerce外掛,網站包含了線上商店的功能,那麼使用者就會多出「商店管理員」之類的角色。

Add New Users

個人資料Profile

在個人資料這裡,你可以調整網站控制台的配色,以及使用者名稱、部分操作上的改變。

Profile

9.工具Tools

可用工具Available Tools

在工具區域,通常會有一些能進行批次處理的程式,例如像下圖中的「分類與標籤轉換程式」,可以將分類轉換成標籤,或是標籤轉換成分類,以我個人經驗來說使用上比較不頻繁,只有少數幾次要轉換WooCommerce商店資料時,會使用到這裡的程式。

Available Tools

匯入/匯出程式Import/Export

匯入/匯出程式大多會用在網站搬家,當你從其他部落格網站搬家至WordPress時,根據各個部落格所提供的檔案不同,可以將原有的文章一次匯入,不用自己一篇一篇搬運。又或者是不喜歡WordPress的操作方式,決定搬家到別家建立網站,也可以在這裡將資料匯出。

Import
Export

網站狀態Site Health

在網站狀態中,可以快速查看網站是否有設定需要優化或調整,例如:有更新的版本可以進行更新,或是將未使用到的主題、外掛刪除,會讓網站的運行速度更快等。

Site Health

匯出/清除個人資料 Export/Erase Personal Data

在匯出個人資料這部分,跟前面提到的匯出網站資料很像,只是這裡是專門針對使用者的資料備份、匯出、搬家等。

Export/Erase Personal Data

10.設定Settings

終於來到最後一個控制台選項「設定」,我們可以在這裡更改網站的基本狀態,基本上不需要經常更動,網站初期調整好後就可以放著不管了。

一般General

網站名稱及說明會通常顯示在瀏覽器左上方,而且像Google、Baidu之類的搜尋引擎,把你的網站名稱顯示在搜尋結果之中,所以務必兩欄都一定要填寫。

兩欄網址部分直接輸入你連結好的網域即可,以我的網站舉例,就需要輸入https://notjustdesigner.com。

網站管理員電子郵件地址會用來接收來自網站的信件,例如你的網站自動更新到最新系統,或者是流量過多導致掛站,網站系統都會發信通知你。

其他語言、時區、日期格式就按照你的喜好填寫即可。

General

寫作Writing

在寫作設定內,可以調整發布文章的預設分類及格式,避免你在發文時忘記選擇文章分類,而下方的電子郵件發布文章,我個人並不建議使用,畢竟一篇好的文章需要透過編輯器調整每個段落的格式、內容,所以建議大家還是直接用「新增文章」來發布。

Writing

討論Discussion

討論設定用來決定你的讀者該怎麼留言、留言的顯示順序、是否需要註冊、有人留言時是否寄送電子郵件到管理員信箱等,這裡也是按照個人需求設定即可。

Discussion

媒體Media

如果你的網站會需要上傳大量圖檔,可以在這裡設定圖片在上傳後,系統會自動進行的圖片尺寸處理。

Media

永久連結Permalinks

永久連結會決定你每次新增網頁、文章時,會產生的永久連結內容,我會建議選擇使用「文章名稱」,讓文章或頁面的標題直接成為網址,但如果你的標題都是中文為主,記得可以在編輯文章的當下改成英文,比較不會有網站變成亂碼的狀況產生。

Permalinks

隱私權Privacy

最後,每個網站都會需要加入隱私權政策,基於你所在的國家增加隱私權頁面的內容,將隱私權政策跟聲明製作成頁面,這個頁面不需要顯示在選單內,但每個網站都建議要有。

網路上有很多隱私權政策聲明的範本可以直接使用,在這邊我提供給你我個人會使用的隱私權政策文本

Privacy

【DIVI教學】如何用DIVI編輯器製作一頁式網站

今天這篇文章將會教你,如何使用Divi編輯器製作一頁式的網站,上方選單將會帶你快速地跳轉到相關的內容,省去替每一個選項都製作頁面的時間,在短時間內完成一個簡潔有力的網站。

一頁式網站範本

下圖就是一頁式網站的示範,只要點選右上方的選單,網頁就會跳躍至你所選定的區塊,在使用者的體驗上,提升許多與網頁的互動感,一頁式網站最大的好處是,你的顧客無需開啟新的分頁,就能將品牌想傳遞的訊息一次閱讀完畢。

Sample

在這個教學中,你將會需要...

  1. 網域及WordPress網站
  2. Divi主題

如果你還沒有網域跟WordPress網站,可以參考這篇文章架設:【網站架設】穩定快速又便宜,獨立型主機Cloudways

如果你還不熟悉Divi主題,或者是尚未安裝Divi主題的話,可以參考這篇:【Divi新手必看】網站設計完整步驟教學,看這篇就夠!


步驟教學

1.製作網頁

開啟你的WordPress後台,點選新增頁面。

Add. a new page

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

畫面上會跳出三個選項,左邊的是「Build From Scratch從零開始製作」,中間的是「Choose a premade layout選擇現有版型」,右邊是「Clone existing page複製現有頁面」。

在這裡我會先跳過網頁設計的部分,直接選擇中間的現有模板來作示範。

Choose option

選擇你喜歡的模板即可。

Layout library

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

Use this layout

2.加入錨點(為區塊ID命名)

當你在設計好整個頁面後,請預想你所需要的選單內容,舉例來說,這個網頁我打算要製作五個主要內容:

  1. Home 首頁
  2. Menu 菜單
  3. Story 故事
  4. News 最新消息
  5. Contact 聯絡我們

接下來,我們要幫這五個區塊命名,也就是給他們一個ID,讓選單知道被點選時要跳轉過去的位置。

跳轉的位置可以是Section, Row或者Module,點選齒輪icon進入設定。

Section/Row/module Settings

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

Add CSS ID

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

Publish the page

3.製作選單(連結錨點)

接著回到WordPress後台,點選「外觀」裡面的「選單」,輸入選單名稱後,勾選「Primary Menu主要選單」,再點擊右下角的「建立選單」。

Add menu

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

Add homepage

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

Add links

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

Save menu

4.設定首頁

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

Customize
Homepage Settings

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

Publish

最後,開啟一個新的分頁,並輸入網址打開你的網站看看,確認選單每個按鈕都有正確跳轉,你的一頁式網站就完成啦~。

【Divi教學】三分鐘教你如何置入Google地圖

這篇文章要教你如何透過Divi Builder,將Google Map貼入到你的網頁當中,方法非常簡單,三分鐘就能完成。

1. Google Map複製置入程式碼

首先,先開啟Google Map,搜尋到你要置入的地點後,點選分享Share,接著選擇嵌入地圖Embed a map,點擊右方的複製Copy Html,把整串程式碼複製起來即可。

Copy Embed code from Google Map

2.選擇Divi Module

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

Select Divi code module

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

Insert module

3.貼上程式碼

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

Paste code

【Divi教學】Divi Builder加入頁面互動特效,讓你的網站更生動

有許多網站會在各個主要頁面中,為各個區塊或是元件加上動畫,或者是一些滑鼠碰觸到時產生的特效,通常這些效果需要透過編寫程式語法來達成,但如果你是使用Divi編輯器的話,不用懂任何語法,就可以做出許多讓網站看起來更有活力的特效!我在這篇文章會教你如何用Divi編輯器,製作出數種不同的網頁特效。

1.頁面載入特效

頁面載入特效呢,是指在網站頁面載入時,逐一呈現的動畫特效,也就是說,當讀者逐漸將網頁往下滾動,頁面中有套用動畫的元素,會一個個以動畫的方式展現在讀者眼前,這樣的載入特效,會讓人特別有好像一層一層逐漸探索網站的感覺。

Loading Animation Preview

特效教學

不論是單一元件Module,或者是區塊的Row、Section,都可以在設定中,點選Design設計,滑到最下面,找到Animation區域,你可以在Animation Style選擇你想要使用的特效模式:

  • Fade 淡入
  • Slide 滑入
  • Bounce 彈跳
  • Zoom 放大
  • Flip 翻面
  • Fold 折疊
  • Roll 旋轉
Animation Style

每一個特效都有相對應的選項可以調整,以Slide滑入作為示範說明如下:

  • Animation Direction 動畫方向:元件進入頁面的方向
  • Animation Duration 動畫時間:整體動畫時間長度,時間越久會越柔和
  • Animation Delay 動畫延遲:讀者在到這個區域時,要過多久才啟動動畫
  • Animation Intensity 動畫強度:動畫的動作幅度,在這裡強度越高動畫會從越遠的地方出發
  • Animation Starting Opacity 初始透明度:可以設定最一開始為半透明
  • Animation Speed Curve 速度曲線:可以設定淡入或淡出
  • Animation Repeat 動畫重複:動畫重複的次數
Animation Settings

2.游標停留特效

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

Hover Effect Preview

特效教學

而這樣的游標動畫要如何製作呢?一樣到Design區塊,將你的滑鼠移動到想要製作動畫的設定旁,Divi編輯器會自動滾出一串小圖示(或者滑鼠左鍵點幾下),將一個有滑鼠鼠標的圖示點選後,下方會出現兩個選項,電腦螢幕選項代表滑鼠游標沒有接觸到時的設定,而滑鼠游標選項,則是代表被滑鼠碰到時,該元件會產生的變化。

以下圖Width寬度為例,在一般狀況下,這個圖檔會顯示80%的寬度大小,而我在滑鼠圖標選項中,設定寬度為100%,於是就產生了像上方預覽圖的特效。

Hover Effect

3.頁面滑動特效

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

Scroll Effects Preview

特效教學

滑動特效可以在Settings設定→Advanced進階→Scroll Effect找到,特效部分從中間六個特效選擇開始,必須在選擇完特效後,將Enable Transform Effects調整為Yes,該特效才會啟用。

下面會緊接著出現特效的細節調整,中間帶有方向的圓圈,代表動畫在網頁正中間時,所顯示的位置與狀態,而Motion Effect Trigger則是啟動動畫的位置,這部分用文字敘述起來比較抽象,大家可以自己玩玩看,稍微調整一下就知道個別代表著什麼

除了特效以外,這裡還能設定Sticky Position,也就是可以將元件固定在某一個位置,我自己會利用這個功能製作頁首的選單,設定成Stick to Top後,不論往下滾動到頁面任何位置,我的選單都會維持在頁面的最上方不動,讓讀者在閱讀完文章後,可以快速地尋找他想要看的其他頁面。

Scroll Effects