WordPress的divi主題可視化圖文標blurb模塊教程(免費)

在使用WordPress做網站的時候,經常需要使用圖文標來顯示,模塊可以放置在您創建的任何列中。

圖文展示的信息模式是WordPress建站中最常用的樣式之一。

很多新手不懂得如何在WordPress中創建圖文模塊。

在這篇文章中,

WP花園將教會大家如何使用divi主題中的blurb圖文標模塊創建豐富多彩的數據樣式。

請確保自己正確安裝了divi主題,

然後我們開始上課了!

什麼是圖文標模塊

圖文標是一個可以直觀的顯示技能和功能信息的板塊,

是圖像、圖標和文本的組合搭配使用。

在圖像和圖標中只能選擇其中一個

如果您為“使用圖標”設置選擇了“是”此選項將為您提供了配合使用的可用圖標列表。

如果選擇使用圖像,那便將圖像上傳便可設置圖像信息

真實案例需求

我們有個客戶需求,創建一個PDF文件下載的模塊,

讓模塊顯示特定的圖像和文件名,

整個模塊大概長這個樣子:

WordPress的divi主題可視化圖文標blurb模塊教程(免費)

那麼使用DIVI的圖文標的模塊,就能夠非常輕鬆的解決這個問題。

WordPress的divi主題可視化圖文標blurb模塊教程(免費)


divi的blurb圖文標模塊編輯步驟

接下來,

我將用使用圖像加文字的模板來演示如何製作如下的模塊

WordPress的divi主題可視化圖文標blurb模塊教程(免費)

首先先在的頁面中點擊灰色+號按鈕插入“圖文標”

(此模塊只能在行的內部添加)

添加模塊成功之後將為您提供模塊的選項

添加成功之後,

在文本的編輯頁面可輸入你想要的文字即可,

若不想要標題或正文可直接刪除即可。

WordPress的divi主題可視化圖文標blurb模塊教程(免費)

如果需要文件下載,

那麼我們首先需要在媒體庫上上傳指定的文件,

點擊“選擇文件”上傳所要的文件

WordPress的divi主題可視化圖文標blurb模塊教程(免費)

上傳成功後,點開文件,

將文件鏈接複製下來

WordPress的divi主題可視化圖文標blurb模塊教程(免費)

WordPress的divi主題可視化圖文標blurb模塊教程(免費)

將複製的鏈接複製到圖文標—內容—鏈接(模塊鏈接URL)中,

這樣可在內面中查看文件內容。

WordPress的divi主題可視化圖文標blurb模塊教程(免費)

接下來便是圖像的使用,

先上傳指定的圖像,

後可在設計頁面內圖像和圖標中設置調整位置。

WordPress的divi主題可視化圖文標blurb模塊教程(免費)

WordPress的divi主題可視化圖文標blurb模塊教程(免費)

在圖像/圖標的放置中選擇靠左可將圖像放在文字前面。

WordPress的divi主題可視化圖文標blurb模塊教程(免費)

若要將文字與圖片在一水平上可在文本設置中設置文本的行高設置,

可調整文字上下位置。

WordPress的divi主題可視化圖文標blurb模塊教程(免費)

調整好位置之後可點擊盒子陰影,

加入立體效果

(若是要調整字體與陰影的距離,可在間距內適當調整)

WordPress的divi主題可視化圖文標blurb模塊教程(免費)

點擊保存便可以在頁面中看到這次的圖文標設置展示效果,

之後點擊文字便能跳轉到文件內容之中。

WordPress的divi主題可視化圖文標blurb模塊教程(免費)

WordPress的divi主題可視化圖文標blurb模塊教程(免費)

WP花園結語

一個圖文標的模塊中便能設置出許多樣式選擇,

在頁面設置文件的顯示內容,

提供了我們瀏覽時能快速方便獲取信息資訊。

也能夠快速靈活的創建出豐富多彩的功能模塊。

在使用divi主題的過程中,

如果你遇到各種問題,

歡迎給我們留言。


分享到:


相關文章: