如何在 Divi 中使用有效的 CTA 設計演講嘉賓部分

無論您有播客還是主持 WordCamp（或任何演講者活動），為您的網站設置一個演講嘉賓部分總是一個好主意。 與推薦書一樣，展示客座演講者是提升價值並在觀眾中建立可信度的有效方式。 演講嘉賓部分也是為您的下一個活動或劇集吸引一些新候選人的關鍵。 本教程將向您展示如何設計一個演講嘉賓部分，該部分不僅以優雅的方式展示演講者，而且還通過有效的號召性用語鼓勵新演講者申請。

但在我們開始之前，這裡是對最終設計的先睹為快。

搶先看

這裡還有一個額外的懸停效果，我也會向你展示。

讓我們開始吧！

訂閱我們的 YouTube 頻道

構建基本結構和內容

如果您還沒有這樣做，請創建一個新頁面並部署 Divi Builder 以在前端構建。

的，添加一個具有一列行的新部分。

將文本模塊添加到具有以下內容的行：

<h2>Guest Speaker</h2>

接下來，直接在文本模塊下添加分隔器模塊。

現在我們將添加一個具有四列結構的新行來容納我們的演講嘉賓。

在行的第一列中，添加人員模塊。

更新 Person 模塊內容如下：

名稱：[空白]
Facebook 個人資料網址：[現在添加“#”]
Twitter 個人資料 URL：[現在添加“#”]
LinkedIn 個人資料 URL：[現在添加“#”]

對於描述，添加以下內容：

<h4>James <strong>Smith</strong></h4>
<hr style="width: 90px; float: left;">

注意：hr 標籤生成一個分隔線，該分隔線具有一些內聯樣式，使其寬度為 90px 並浮動到左側。 包裹在姓氏周圍的強標籤使其成為獨特設計元素的粗體。

現在您已準備好內容，請保存人員模塊設置。

複製您剛剛創建的人員模塊並將其粘貼到剩餘的每一列中，以便在四列中的每一列中都有相同的人員模塊。 要復制和粘貼，您可以使用右鍵單擊菜單選項或快捷鍵 cmd+c cmd+v (mac) 或 ctrl+c ctrl+v (win)。

打開第 4 列中人員模塊的設置並更新內容，以便僅包含以下內容：

名稱：“這可能是你！”
描述：“使用下面的按鈕申請在我們的活動中發言。”

保存您的設置。

接下來，在第 4 列的人員模塊下直接添加一個按鈕模塊，並將按鈕文本內容更新為“立即申請”。 並保存您的設置。

回到第 1-3 列中的前三個人物模塊，並為每個嘉賓演講者肖像添加圖像。 確保它們的尺寸相同，高度和寬度尺寸相等，並且它們足夠大以考慮所有瀏覽器尺寸的列寬（理想情況下為 600 像素 x 600 像素）。

這就是您的 Guest Speak 佈局此時的樣子。

設計嘉賓演講者佈局

樣式部分

打開部分設置並更新以下內容：

背景圖片：[我使用的是我們代理佈局中的一張]

背景漸變左顏色：#293039
背景漸變右顏色：rgba(41,48,57,0.89)
頂部分隔線樣式：見截圖
頂部分隔線顏色：#293039
頂部分隔線高度：30vw

更改行寬

由於我們希望兩行具有相同的寬度，因此使用多選來選擇兩行並單擊其中一個設置圖標以打開元素設置。

然後更新以下內容：

自定義寬度：80%

現在，您的兩行都將具有相同的自定義寬度。

標題樣式

打開包含您的部分標題“嘉賓演講者”的文本模塊的設置並更新以下內容：

標題 2 字體：蒙特塞拉特
標題 2 字體粗細：粗體
標題 2 字體樣式：TT
標題 2 文本對齊方式：右
標題 2 文本顏色：#74bf46
標題 2 文字大小：70 像素（桌面）、50 像素（智能手機）

保存設置。

現在打開分隔線設置並更新以下內容：

顏色：#ffffff
高度：0px
寬度：90px
模塊對齊：右

設計人員模塊

由於我們希望為所有人員模塊提供相同的初始樣式，因此請使用多選來選擇每個模塊，然後單擊其中一個模塊的設置圖標以部署元素設置模式。

更新以下元素設置：

圖標顏色：#74bf46
標題字體：蒙特塞拉特
標題字體粗細：輕
標題文字顏色：#ffffff
標題文字大小：20px
正文字體：蒙特塞拉特
正文顏色：#ffffff
正文字母間距：2px
車身線高：1.8em

設置 CTA 人員模塊的樣式

我們將此人員模塊用作號召性用語，以吸引新的演講嘉賓申請演講。 因此，我們可以保留默認圖像（剪影）作為顯示空白點的創造性方式。 但是我們需要添加一些樣式調整來完成設計。 打開第 4 列中人員模塊的設置並更新以下內容。

圖片邊框寬度：18px
圖像邊框顏色：#d2d2d2
圖像不透明度：50%

標題字體粗細：粗體
標題行高度：1.5em

現在剩下要做的就是設計我們的按鈕。 打開按鈕模塊設置並更新以下內容：

按鈕文字顏色：#293039
按鈕背景顏色：#74bf46
按鈕邊框半徑：50px
按鈕字體：蒙特塞拉特
字體粗細：粗體

現在讓我們來看看最終的結果。

額外提示：圖像縮放懸停效果

不要忘記 Divi 中可用的所有內置懸停選項。 事實上，您可以在我們的博客上查看有關這些懸停效果的一些鼓舞人心的教程。 但是對於這個設計，我想我會跳出框框思考一下，給你一些 CSS 片段，它們會導致你的人物圖像在懸停時稍微縮放（或縮放）。

如果您正在尋找一種微妙的懸停效果來將您的人物模塊區分開來，這裡是如何做到的。

使用多選來選擇列 1、2 和 3 中的人員模塊。打開元素設置。 在高級選項卡下，在Main Element下輸入以下 CSS：

overflow: hidden;

此代碼將阻止擴展圖像擴展到模塊容器之外。

接下來在Member Image下添加以下 CSS：

transition: all 0.3s; 

當圖像按比例縮放時，這會增加平滑過渡。

要在懸停時添加 css，請單擊懸停圖標並選擇懸停選項卡並輸入以下 CSS：

transform: scale(1.1) translateY(-4.5%);

這會將圖像縮放（或擴展）到稍大的尺寸並將其向上移動一點。

現在圖像將在懸停時具有微妙的縮放效果。

最後的想法

好吧，我希望你喜歡這個教程，或者至少留下了一些有用的設計技巧。 這種客座演講者部分佈局可以以多種方式使用。 另一個完美的應用程序是員工頁面同時列出當前員工並鼓勵其他人申請職位。 隨時與我們分享一些想法。

我期待在下面的評論中收到您的來信。

乾杯!