如何設計帶有翻轉動畫的名片單擊以在 Divi 中展示您的團隊

設計可在點擊時翻轉的名片可以是您網站上任何團隊成員部分或頁面的創造性補充。 名片已經是一種熟悉且直觀的方法，用於提供有關在公司工作的人員的簡明信息。 因此，在網絡上提供相同的設計是有意義的。 此外，每張卡片上提供的信息可以變得更加動態和互動，允許用戶複製信息和/或單擊名片內的鏈接。

在本教程中，我們將向您展示如何在 Divi 中設計獨特的名片，該名片還具有單擊翻轉以顯示有關人員的信息的功能，就像真正的名片一樣。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

免費下載佈局

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

下載文件

免費下載

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

下載

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

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

完成後，分區佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

設計一張在 Divi 中點擊即可翻轉的名片

行和列設置

首先，為常規部分創建一個單列行。

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

• 均衡柱高：是
• 寬度：90%
• 最大寬度：1200px

打開列的設置並為其添加一些填充，如下所示：

• 填充（桌面和平板電腦）：頂部 30 像素，底部 30 像素，左側 50 像素，右側 50 像素
• 填充（手機）：頂部 15 像素，底部 15 像素，左側 15 像素，右側 15 像素

在高級選項卡下，將以下 CSS 類添加到列中：

• CSS 類：卡片列

這個類將在我們的代碼中作為一個目標來觸發點擊事件，這將導致稍後的翻轉動畫。

重複列

現在我們有一個列設置，複製該列，以便我們有一個兩列佈局，每列具有相同的填充和 CSS 類。

建立後卡

名片設計的第一個元素是我們將要調用的背面卡片，它將作為帶有卡片信息的名片背景。 要創建正面卡片，請向第 1 列添加分隔符。

打開分隔線設置並單擊以使分隔線不​​可見。 我們僅將分隔線用於名片的背景圖像。

然後更新以下選項：

背景顏色

• 背景顏色：#322b3f

背景漸變

• 背景漸變左顏色：rgba(50,43,63,0.72)
• 背景漸變右顏色：#322b3f
• 漸變類型：徑向
• 結束位置：34%
• 將漸變放在背景圖像上方：是

背景圖片

• 背景圖片：【上傳團隊成員圖片或肖像】
• 背景圖片尺寸：適合
• 背景圖片位置：中心

漿紗

• 寬度：100%
• 最小高度：300px
• 高度：100%

盒子陰影

• 盒子陰影：見截圖
• 框陰影垂直位置：0px
• 框陰影模糊強度：50px

CSS 類和絕對位置

接下來將以下 CSS 類添加到分隔符：

• CSS 類：背卡

並將位置更新為絕對：

• 位置：絕對

創建背面卡片徽標

背面卡片（分隔線）到位後，我們可以開始添加卡片信息元素。 首先，我們將在左上角添加一個徽標。

在分隔/背卡模塊下添加圖像模塊。

然後上傳大約 60 像素 x 60 像素的徽標圖像。

然後使用 CSS 類和絕對位置更新圖像，如下所示：

CSS 類

• CSS 類：卡片內容

位置

• 位置：絕對
• 垂直偏移：30px（桌面和平板電腦），15px（手機）
• 水平偏移：50px（桌面和平板電腦），10px（手機）

名字

要為名片創建名稱，請在徽標圖像下添加一個新的文本模塊。

使用您希望在名片上展示的人的姓名更新正文內容。

在設計選項卡下，更新段落文本樣式選項如下：

• 文字字體： Poppins
• 文字文字顏色：#ffffff
• 文字文字大小：28px（桌面和平板電腦），22px（手機）
• 字母間距：1px
• 文本對齊：右

工作職位（或角色）

要在卡片上添加此人的職位（或角色），請使用名稱複製之前的文本模塊。

然後用人的位置（或角色）更新正文內容。

然後更新位置文本模塊的設計設置，如下所示：

• 文字字體樣式：TT
• 文字文字大小：16px（桌面和平板電腦），14px（手機）
• 邊距：底部 15px

公司

為了將公司名稱添加到名片，複製之前的（職位）文本模塊。

然後用公司名稱更新正文內容。

然後按如下方式更新公司文本設置：

• 文字字體粗細：輕
• 文本字體樣式：默認
• 文字文字大小：22px（桌面和平板電腦），18px（手機）
• 文本對齊方式：左

電話號碼

要為名片創建電話號碼，請在（公司）文本模塊下添加一個簡介模塊。

使用您希望在卡片上展示的電話號碼更新（電話）簡介的正文內容。

單擊以使用電話圖標作為簡介。

在設計設置下，更新以下內容：

• 圖標顏色：rgba(162,71,232,0.6)
• 圖像/圖標放置：左
• 使用圖標字體大小：是
• 圖標字體大小：20px
• 正文字體： Poppins
• 正文顏色：#ffffff
• 正文文字大小：16px
• 邊距：底部 10px

電子郵件地址

要在卡片上顯示電子郵件地址，請複制（電話）簡介模塊並使用電子郵件地址更新正文內容。

然後將圖標更新為信封圖標。

網站

要在卡片上展示網站，請複制（電話）簡介模塊並使用網站更新正文內容。

然後用更合適的圖標更新圖標。

社交媒體關注圖標

對於我們的最後一塊卡片內容，我們將向卡片添加社交媒體關注圖標。 為此，請在（網站）簡介下添加社交媒體關注模塊。

在社交媒體關注設置模式中，使用透明背景更新每個社交網絡。

（您也可以稍後根據需要添加鏈接網址）

然後給模塊一個正確的對齊方式。

向所有卡片內容模塊添加相同的 CSS 類

一旦我們為名片創建了所有的卡片內容模塊，我們需要為所有這些模塊提供相同的 CSS 類。 為此，請使用多選功能選擇所有卡片內容模塊（徽標、名稱、職位、電話、電子郵件、網站和社交媒體圖標），然後打開元素設置，並添加以下類：

• CSS 類：卡片內容

我們將針對這個類的自定義 CSS 代碼來隱藏和顯示前卡片翻轉動畫前後的內容。

前卡

既然我們的背面卡片已完成所有卡片內容，我們就可以創建位於背面卡片和背面卡片內容之上的正面卡片。 為此，我們將使用第 2 列中的圖像模塊設計正面卡片。然後我們將其移到第 1 列中的背面卡片頂部。

首先，將圖像模塊添加到第 2 列。

上傳與用作圖像的背面卡片徽標相同的徽標圖像（60 像素 x 60 像素）。

然後打開背卡（分隔線）模塊的設置，複製背景設計。

然後打開我們正在設計的前卡的圖片設置，將背景設計粘貼到圖片模塊背景選項中。

在設計選項卡下，更新圖像的間距如下：

• 填充（桌面和平板電腦）：頂部 30 像素，左側 50 像素
• 填充（電話）：頂部 15 像素，左側 10 像素

高級設置

在高級選項卡下，為圖像提供以下 CSS 類：

• CSS 類：前卡

將以下自定義 CSS 添加到主元素：

[/css]
高度：100%；
寬度：100%；
[/css]

更新位置選項：

• 絕對位置
• Z指數：13

自定義高度和寬度（結合絕對位置）使包含圖像（或徽標）的模塊跨越父列的整個高度和寬度。 因此，即使它是一個圖像模塊，我們也使用它來顯示兩個分層圖像（徽標和背景圖像）作為我們名片設計的漂亮正面卡片。

不要忘記更換新的背景圖像。 在這種情況下，我使用的是同一個人的不同肖像。

完成後，將正面卡片圖像模塊拖到第 1 列。它應該完全覆蓋背面卡片。

自定義代碼

最後一步是添加一些自定義 CSS 和 JQuery 以完成實際製作名片翻轉動畫的功能。

要添加代碼，請在第 1 列中的社交媒體關注模塊下方添加代碼模塊。

自定義 CSS

在樣式標籤之間粘貼以下 CSS 代碼：

.card-column {
  perspective: 1400px;
}
.front-card:hover {
  cursor: pointer;
}

.front-card,
.back-card {
  transition: all 500ms ease-in-out;
  transform-style: preserve-3d;
}

.back-card {
  transform: rotateX(-180deg) rotateY(0deg) rotateZ(0deg) !important;
}

.divi-transform-active .back-card {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}

.divi-transform-active .front-card {
  transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);
  transform-origin: 50% 50%;
}

.card-content {
  transition: all 300ms ease-out 0ms;
}

.divi-transform-active .card-content {
  transition: all 300ms ease-out 500ms;
  opacity: 1 !important;
}

.divi-transform-active .front-card {
  opacity: 0;
  visibility: hidden;
}

JQuery

在 CSS 下，將以下 JQuery 粘貼到腳本標籤之間

(function ($) {
  $(document).ready(function () {
    $cardColumn = $(".card-column");
    $cardContent = $(".card-content");

    $cardContent.css("opacity", "0");

    $cardColumn.on("click", function (e) {
      $(this).addClass("divi-transform-active");
      e.stopPropagation();
    });
    $(document).on("click", function (e) {
      if ($(e.target).is($cardColumn) === false) {
        $cardColumn.removeClass("divi-transform-active");
      }
    });
  });
})(jQuery);

創建額外的名片

要創建其他名片，您需要做的就是複制包含我們用來構建它的所有模塊的列。 複製該列後，您將需要刪除額外的代碼模塊。 有兩個具有重複代碼的代碼模塊是行不通的。

複製列/卡片後，只需根據新名片的需要使用模塊更新背景圖像和卡片內容。

最後結果

這是名片設計的最終結果，單擊時具有翻轉動畫。 當您單擊前面的卡片圖像時，它會翻轉並消失，後面的卡片分隔符也會翻轉但保持可見。 翻轉動畫完成後，卡片信息會逐漸消失。 要將卡片翻轉回來，您需要做的就是在包含卡片的列之外單擊。 我不想在單擊卡片時再次翻轉卡片（如切換），以便用戶可以單擊卡片中的元素。

最後的想法

希望這種交互式名片設計將幫助您在如何在網站上顯示團隊成員部分或頁面方面獲得更多創意。 事實上，這種技術不僅限於名片。 您幾乎可以將它用於您想要顯示的任何信息。 嘗試一下，看看它是否適合您的下一個項目。

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

乾杯!