Divi 作品集 Banner|Divi 教學

Divi 教學:學會 Divi 作品集功能,輕鬆設計 3 款專業級樣式!

Divi Theme 是在 WordPress 裡一個很好用的主題編輯器。

很多人會運用 Divi Builder 去編排自己的部落格、作品集,甚至是運用在網路電商,將作品或商品展示在官網上,供人觀看挑選。

因此,不少的設計師、攝影師、電商業主等等,都會想要學習這一方面的技巧。這一篇 Divi 教學文章就是要來教大家,如何在網站上建立作品集。

不論是攝影圖像、線上商品目錄,都能透過 Divi Builder 完美呈現。更多完整的 Divi 中文教學


1. 開始使用 Divi Builder

Elegant Themes 旗下產品相當豐富,而且每一個功能都非常強大。

像是 Divi Theme 佈景主題、Divi Builder 頁面編輯器、Extra 主題、Bloom 電子報行銷Monarch 社群工具等,而這邊是要用 Divi Builder 如何製作 Divi 作品集!

在 Divi 教學一開始,我們在後台左側介面選「 頁面 」,再點選「Use The Divi Builder」。

如果說還沒有安裝 Divi Theme,可以看這一篇「Divi Theme 中文教學」,裡面有安裝步驟介紹、主題安裝解說,還有基礎的 Divi 教學,讓您能輕易操作 Divi Builder。

開啟 Divi Builder
開啟 Divi Builder

點進去後我們就會進入編輯頁面,然後選擇建立頁面的種類。


2. 建立空白頁面

點選「Use The Divi Builder」之後,會進入到建立頁面的畫面。

這邊有 3 個選項,如下圖。

Divi 作品集建立
新增空白頁面
  • 左邊是 Build From Scratch,那個選項是新建一個空白網頁,所有的內容是從 0 開始建立,也是多數人製作的選擇。
  • 中間是 Choose A Premade Layout,可以選擇一個範本的模板做使用,裡面的 模板種類 非常多,可以挑選自己喜歡的,很適合新手在接觸時,練習使用。更多 Divi 精美子主題
  • 右邊那個是 Clone Existing Page,選擇已存在的頁面做編輯,如果之前有做一個網頁頁面,之後想使用它,可以選擇這個頁面。

然後,我們選擇左邊的「Build From Scratch」,從空白頁面開始製作!


3. 如何設定作品集模塊?

馬上進入我們 Divi 教學的重點章節!

Divi 的作品集總共有 3 種展示方式,每一種方式給人觀感上的效果都不同,可以根據個人需求做選擇,這邊根據不同路徑分為兩部分講解!

方式 1:模塊建立作品集

進入後台,我們會到一個都是區塊的編輯介面,藍色的 Section 是區塊,點選裡面綠色的「+」按鈕。

會出現許多不同格式的框框,這些綠色的框是 Row(行),依據個人需求選取。

新增行的區塊,並挑選排版種類

選擇好一個行的格式,裡面會有一個黑色的「+」按鈕,點選新增 Module(模塊)。

這邊有兩種作品集的模塊可以選擇:Portfolio 跟 Filterable Portfolio,兩種差別在是一個沒有目錄、一個有目錄,下一章節會說明差異。

點選要使用的模塊後,就會進入到模塊編輯模式。

挑選模塊種類

我們在新建立的模塊,進行作品集初步編輯,可以勾選要展示的分類,曝光的作品數量等等,內容完畢後就按打勾儲存。

編輯展示數量及作品分類

方式 2:區塊建立作品集

全寬作品集的建立路徑跟前面兩者不同,是在「區塊」內新增的!

首先,我們開啟區塊(藍色「+」按鈕),裡面會有 3 個選項,點選最右邊的 Fullwidth,就會進入到「全寬」的佈局。

新增全寬區塊

在新的佈局裡,在目錄裡尋找「Fullwidth Portfolio」,點擊後就會出現全寬尺寸的作品集,然後可以依據個人需求調整。

新增全寬作品集

之後至前台編輯全寬的作品集設定就完成,後面的章節會特別詳細說明,也會有圖示範例,讓大家更加清楚。


4. 作品集的展示種類?

在 Divi 教學的前面章節,我們有提到建立模塊的時候,有 3 種作品集的種類可以挑選。

前兩種分別是:Portfolio 跟 Filterable Portfolio,第三種則是 Fullwidth Portfolio,以下會分開說明,讓大家更清楚!

先來說 Portfolio 跟 Filterable Portfolio 這兩種作品集,唯一差別是在有無「目錄」可以切換。

Portfolio( 無目錄的作品集 )

Portfolio 呈現的作品集樣式是一張張文章介紹,在頁面上只有排整齊而已,假設有不同種類的作品,是混在一起展示。

沒有目錄版本的作品集

Filterable Portfolio( 有目錄的作品集 )

Filterable Portfolio 則是有目錄區分,創作者可以設定不同分類,不會所有作品混雜在一塊,而閱讀者在切換分類種類時,觀看頁面的感受上,對於作品種類會比較清楚明瞭。

有目錄版本的作品集,目錄位於左上角

Fullwidth Portfolio( 全寬式作品集 )

這一個作品集呈現的方式比較特別,不是在模塊裡編輯,而是在「區塊」編輯出來,可以在左右兩側箭頭點選,觀看其他作品,下一個章節會說明如何設定。

Fullwidth Portfolio 1
全寬版型作品集,可以設定滑動頁面效果

以上是這三種版型的樣式,可以依據個人對於網頁介面風格的樣式做調整,以下將介紹如何編輯這些模塊。


5. 編輯作品集的模塊

Divi Builder 有一個很棒的功能是「可以到前台編輯」,選擇 Build On The Front End,畫面就會跳轉至前台網頁,然後進行模塊的編輯。

進入前台編輯

點選一個要編輯的模塊,會有出現一個齒輪圖案的符號,那個是模塊設定(Module Settings),點入後會跳出一個編輯選項的小視窗。

點編輯按鈕進行調整

裡面有 3 大類種類,分別是模塊內容(Content)、模塊設計(Design)、進階設定(Advanced),大多時候都是用模塊內容跟模塊設計較多。

舉例來說,假設要編輯圖像的外觀,可以選擇模塊設計的圖像編輯,裡面可以增加圖片圓角、陰影等等功能,還可以設定圖片的邊框造型及顏色。

編輯介面項目

文字方面,可以更改標題及分類的文字,調整字體大小粗細、排版位置、陰影角度、文字顏色以及字體間距等等,功能相當多元,有時間的人可以花時間摸索了解!

可以調整標題文字大小、間距、位置

關於在前台編輯的功能,對我來說是非常便利,因為可以在調整的過程中,可以看到旁邊的作品排版效果,不用「先排版後預覽」,直接邊調整邊檢查,並做出即時修正!


6. 如何編輯作品集文章?

很多人在設立好模塊時,要去前台編輯才想起忘記上架作品集;或是需要上架作品集,但不知道要去哪個介面新增,這邊就要來告訴大家,新增上架作品集文章。

首先我們在後台左手邊的介面,尋找「projects」的選項,這個是作品集的稿區,所有要新增的作品集都在這裡編輯,然後點選新增文章。

新增作品集文章

進入編輯界面,就可以打字輸入內文,編排作品集,完成後就按發佈。

編輯作品集內文

以上是 Divi 教學的建立作品集介紹,希望能幫助到更多需要架設的朋友!

如果有 Divi 教學相關的進階問題,例如:增加社群分享跟關注按鈕,可以閱讀這篇 Divi 主題文章( Monarch 外掛 ),進行深度學習!


常見問題

我的作品集畫面是佔據整個頁面,該如何改變尺寸?

很多人在設定 Divi 作品集的模塊時,未注意到佈局尺寸,所以在前台看的時候,圖片大小佔滿整個頁面。

如果要調整,模塊的設定裡,找到模塊設計的佈局尺寸(Layout),把全寬(Fullwidth)改為格子版面(Grid),這樣做品集呈現出來的排版,就是一張張圖像了。

作品集的佈局可以調整嗎?

答案是可以的!

每個區塊左側都會有編輯選項,如果需要調整的話,點選左側的 icon,就可以進行拖曳區塊,移動到自己想要的位置,非常簡單。

如果對於 Divi Builder 有不懂的地方,可以看哪篇文章學習?

官網內有許多關於 Divi 主題的文章,其中有一篇非常適合新手,這篇 Divi 教學 文章除了介紹各個操作介面以及步驟,還有介紹如何安裝 Divi,剛入門的新手是絕對容易上手!


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 3 項架站資源,可有效幫助大家處理網站問題。

資源一:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源二:WP 精選模組攻略書

由於 WordPress 主題 / 外掛有非常多種,很多網友私訊我不知道安裝哪一款,才有辦法實現功能。或是已經試了很多款外掛,但始終找不到適合自己的。

對此我整理了 高達 90 多款精選主題&外掛大全(電子書),這些都是我們團隊協助客戶開發案件時,會搭配使用的。一來外掛品質優良,二來功能性也足夠強!

WordPress 模組電子書

資源三:官方教學資源(含 FB 社群解答)

如果你偏愛自架網站,也歡迎持續關注 犬哥網站 Blog,我們都持續有發布新的網站架設、網路行銷教學。

或是你比較喜歡看影片學習,也可關注 YouTube 頻道,幫助你更容易進入狀況。

當然,如果你在操作過程中遇到問題,也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ,除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

犬哥網站:WordPress 架站 x SEO 優化技巧,一站式學習!

希望這些對你有所幫助,祝一切順利啦!

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

返回頂端