下載 Divi 的免費和高級客戶展示懸停/點擊設計

已發表: 2019-09-26

人們與其他人有關。 這就是為什麼在您訪問的幾乎所有網站上，您都會看到面孔出現的原因。 從以前的客戶到團隊成員等等； 您越早向客戶和公司背後的人展示您的公司、品牌或產品，您就越有可能說服他們您的公司、品牌或產品是合適的。 在這篇文章中，我們將專注於以一種美麗而先進的方式向您的客戶展示。 您也可以免費下載 JSON 文件！

讓我們開始吧！

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

客戶展示

移動的

客戶展示

免費下載客戶展示懸停/點擊設計

要體驗免費的客戶端展示懸停/點擊設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件
免費下載

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

讓我們開始重建吧！

添加新部分

您需要做的第一件事是向您正在處理的頁面添加一個新的常規部分。

客戶展示

添加新行

列結構

繼續使用以下列結構添加新行：

客戶展示

漿紗

在添加任何模塊之前，打開行設置並讓行佔據屏幕的整個寬度。

  • 使用自定義裝訂線寬度：是
  • 天溝寬度：1
  • 均衡柱高：是
  • 寬度：100%
  • 最大寬度：100%

客戶展示

間距

刪除下一行的默認頂部和底部填充。

  • 頂部填充：0px
  • 底部填充：0px

客戶展示

第 2 列設置

繼續打開第二列的設置。

客戶展示

間距

向該列添加一些自定義填充值。

  • 頂部填充：9vw
  • 底部填充：9vw
  • 左填充：8vw
  • 右填充：8vw

客戶展示

將文本模塊添加到第 1 列

添加 H3 和段落內容

完成行和列設置後，繼續向第 1 列添加文本模塊。將客戶端信息添加到內容框。

客戶展示

漸變背景

接下來轉到背景設置並應用以下漸變背景：

  • 顏色 1：RGBA(43,135,218,0)
  • 顏色 2：RGBA(0,0,0,0.55)
  • 將漸變放在背景圖像上方：是

客戶展示

背景圖片

同時上傳背景圖片。

客戶展示

文字設置

轉到設計選項卡並相應地更改文本設置：

  • 文字字體：Lato
  • 文字顏色：#dbdbdb
  • 文字大小：1vw（桌面）、1.8vw（平板電腦）、2.3vw（手機）
  • 文本行高：1.5vw（桌面）、2vw（平板電腦）、2.5vw（手機）

客戶展示

標題 3 文本設置

也對 H3 文本設置進行一些更改。

  • 標題 3 字體：Playfair Display
  • 標題 3 字體粗細：粗體
  • 標題 3 文本顏色：#ffffff
  • 標題 3 文字大小：3vw（桌面）、4vw（平板電腦）、5vw（手機）
  • 標題 3 行高：1.6em

客戶展示

間距

繼續轉到間距設置並相應地設置模塊的形狀和位置：

  • 最高利潤率：9vw
  • 底邊距：9vw
  • 左邊距：7vw（桌面）、16vw（平板電腦）、17vw（手機）
  • 右邊距：7vw（桌面）、16vw（平板電腦）、17vw（手機）
  • 頂部填充：32vw（桌面）、55vw（平板電腦）、49vw（手機）
  • 底部填充：3vw（台式機），6vw（平板電腦和手機）
  • 左填充：2vw（桌面）、4vw（平板電腦）、5vw（手機）
  • 右填充：2vw（桌面）、4vw（平板電腦）、5vw（手機）

客戶展示

盒子陰影

我們還添加了一個彩色框陰影。

  • 框陰影水平位置：0px
  • 框陰影垂直位置：0px
  • 箱影擴散強度：7vw
  • 陰影顏色：#ffcf0f

客戶展示

CSS ID

通過添加 CSS ID 完成模塊設置。

  • CSS ID：photo-display-1

客戶展示

克隆文本模塊五次

完成第一個文本模塊後，繼續克隆它 5 次。

客戶展示

更改每個副本的內容和背景圖像

更改每個副本中的內容和背景圖像。

客戶展示

更改每個副本的框陰影顏色

隨著框陰影。

  • 陰影顏色：#9f89ed

客戶展示

更改每個重複項的 CSS ID 並添加 CSS 類

第 1 列中的每個文本模塊都需要一個唯一的 CSS ID。 列中的第一個文本模塊包含“photo-display-1”CSS ID，第二個需要“photo-display-2”，第三個“photo-display-3”，依此類推。 也向每個重複的文本模塊添加一個 CSS 類（確保不要向原始文本模塊添加一個）。

  • CSS ID：photo-display-2（從 2 到 6）
  • CSS 類：photo-hide-first（第 1 列中的每個文本模塊，第一個除外）

客戶展示

將文本模塊 #1 添加到第 2 列

添加 H2 內容

完成第 1 列中的所有 6 個模塊後，您可以繼續進行第二列。 在那裡，我們需要的第一個模塊是帶有一些 H2 內容的文本模塊。

客戶展示

H2 文本設置

轉到設計選項卡並相應地修改 H2 文本設置：

  • 標題 2 字體：Playfair Display
  • 標題 2 文本顏色：#636363
  • 標題 2 文字大小：3vw（桌面）、6vw（平板電腦和手機）
  • 標題 2 字母間距：0.1vw
  • 標題 2 行高：1.2em

客戶展示

將文本模塊 #2 添加到第 2 列

添加內容

將另一個文本模塊添加到第 2 列，其中包含您選擇的一些段落內容。

客戶展示

文字設置

轉到設計選項卡並相應地更改文本設置：

  • 文字字體：Lato
  • 文本對齊：對齊
  • 文字大小：0.9vw（桌面）、2vw（平板電腦）、2.7vw（手機）
  • 文本行高：2.1em

客戶展示

間距

也修改間距設置中的邊距值。

  • 最高利潤率：2vw
  • 底邊距：2vw
  • 右邊距：7vw

客戶展示

將分隔模塊添加到第 2 列

能見度

進入下一個模塊，它是一個分隔模塊。 確保啟用了“顯示分隔線”選項。

  • 顯示分隔線：是

客戶展示

線

移至設計選項卡並更改線條顏色。

  • 線條顏色：#636363

客戶展示

間距

接下來修改不同屏幕尺寸的邊距值。

  • 底邊距：7vw
  • 左邊距：14vw（桌面）、39vw（平板電腦）、38vw（手機）
  • 右邊距：14vw（桌面）、39vw（平板電腦）、38vw（手機）

客戶展示

變換旋轉

旋轉分頻器模塊。

  • 左：90度

客戶展示

轉換 翻譯

並使用一些自定義轉換轉換值跨不同屏幕尺寸重新定位它。

  • 右：2vw（台式機）、3vw（平板電腦和手機）
  • 底部：-17.3vw（台式機），-43vw（平板電腦和手機）

客戶展示

將文本模塊 #3 添加到第 2 列

添加內容

我們需要的下一個模塊是另一個文本模塊。 確保將相應的客戶端名稱添加到內容框中（將其與第 1 列中的第一個文本模塊匹配）。

客戶展示

文字設置

轉到設計選項卡並相應地修改文本設置：

  • 文字字體：Lato
  • 文本字體樣式：大寫
  • 文字大小：1.3vw（桌面）、2.5vw（平板電腦）、3vw（手機）
  • 文字字母間距：1px
  • 文本行高：1.2em

客戶展示

間距

接下來添加一些自定義的頂部和底部邊距。

  • 最高保證金：1em
  • 底邊距：1em

客戶展示

CSS ID

轉到設計選項卡並添加一個 CSS ID。 確保數字與第 1 列中相應的文本模塊相同。

  • CSS ID：photo-click-1

客戶展示

克隆文本模塊 #3 五次

完成第一個客戶端文本模塊後，將其克隆 5 次。

客戶展示

更改每個副本的內容（與第 1 列中的文本模塊匹配）

在每個重複的文本模塊中更改客戶端名稱。

客戶展示

更改每個重複項的 CSS ID

並將每個重複項的 CSS ID 與第 1 列中的文本模塊匹配。

  • CSS ID：photo-click-2（從 2 到 6）

客戶展示

將代碼模塊 #1 添加到第 2 列

插入 CSS 代碼

本教程的最後一部分側重於使懸停功能起作用。 將第一個代碼模塊添加到第 2 列並插入以下 CSS 代碼行： 

<style>
.photo-hide-first {
display: none;
}
</style>

客戶展示

將代碼模塊 #2 添加到第 2 列

插入 JQuery 代碼

在上一個代碼模塊的正下方添加另一個代碼模塊並插入以下 jQuery 代碼以使懸停功能起作用： 

<script>
jQuery(function($){

$('#photo-click-1').css({'color': '#ffcf0f', 'font-weight': 'bold', 'padding-left': '0.5em'});

$('[id*="photo-click"]').hover(function() {

var selector1 = $(this).attr('id').replace('click', 'display');
var $photo = $('#' + selector1);
var $photoColor = $photo.css('box-shadow').replace(/^.*(rgba?([^)]+)).*$/,'$1')

$photo.siblings().hide();
$photo.show();

$('[id*="photo-click"]').css({'color': '', 'font-weight': '', 'padding-left': ''});
$(this).css({'color': $photoColor, 'font-weight': 'bold', 'padding-left': '0.5em'});

});
});
</script>

客戶展示

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

客戶展示

移動的

客戶展示

最後的想法

在這篇文章中，我們向您展示瞭如何創建一個漂亮的客戶端展示，您可以在您創建的任何網站上使用它。 我們將 Divi 的內置選項與一些 jQuery 代碼相結合，使該方法有效。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請務必在下面的評論部分留言。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。