如何向您的 Divi 站點添加浮動關於卡

在您訪問的幾乎每個網站上，元素都會彈出並粘在頁面上。 Cookie 警告和選擇加入、電子郵件註冊和聊天框。 我們都傾向於在某個時候忽略它們，對網站試圖告訴我們的任何內容視而不見。 我們只是點擊 X 而不閱讀。 但這並不意味著這些類型的元素沒有用處，也沒有一席之地。 使用 Divi，您可以輕鬆創建浮動卡片，為您的網站增加價值，不引人注意地解釋您是誰以及您的品牌是做什麼的。 讓我們看看它有多容易。

預覽

桌面

移動的

1. 創建頁面模板

您要做的第一件事是決定要包含此浮動卡片的頁面。 您可能希望在網站的每個頁面上都使用它，或者您可能只希望在特定的登錄頁面上使用它。 無論哪種方式，您都可以使用 Divi Theme Builder 進行設置。 作為全局模板或僅適用於某些頁面的模板。

使用主題生成器創建模板

首先，轉到 WordPress 儀表板中的Divi – Theme Builder 。 選擇頁面的自定義正文部分，將浮動關於卡片或全局正文應用到任何地方。

加載 Divi Visual Builder 後，選擇從頭開始。

添加 1 列行並發佈內容模塊

然後在出現提示時選擇一個單列行。

接下來，您要選擇Post Content模塊。 這是我們動態內容功能的一個示例。 該模塊顯示內置於 Divi 頁面本身的隨附設計，這意味著該模塊將使用此模板為不同的頁面顯示不同的內容。 對於博客文章，它將是博客內容。 對於商店頁面，它將是產品。 對於單個頁面，您使用 Divi 製作的自定義內容。

調整節和行間距

有了這些，我們需要進行一些間距調整。 進入部分設置（Divi 構建器中的藍色邊框）並刪除所有頂部和底部填充。 您可以在“設計”選項卡、“間距”標題下執行此操作，然後在“填充”下將“頂部”和“底部”設置為0px 。

保存更改並輸入行設置。 再次，將頂部和底部填充設置為0px 。

接下來，找到Sizing標題並打開Use Custom Gutter Width並將其值設置為 1。接下來，將Width和Max Width設置為 100%。

準備工作完成後，讓我們開始製作浮動卡片！

2.添加浮動卡

添加新的節和行

首先，您需要添加一個新部分。 通過滾動到頁面底部並單擊藍色 + 圓圈並在提示輸入部分類型時選擇常規來執行此操作。

添加模糊模塊

這將是專用於浮動卡的部分。 在裡面，我們要添加另一個單列行。 在裡面，我們想為浮動卡本身使用一個Blurb模塊。 Divi Blurb 模塊可能是構建器中最通用的模塊，因此我們希望利用它為此功能提供的功能。

調整部分和行設置

有了這個，我們需要調整這一行和部分的填充和定位。 因此，首先，進入部分設置並在Display – Spacing下將Top和Bottom Padding 設置為0px 。

然後，在“高級”選項卡下，找到“職位”標題。 將Z 索引設置為 12。數字越大，該部分及其內容將位於更“前面”的位置。 由於它是一張浮動卡片，我們希望它漂浮在所有其他元素之上。

最後，進入行設置並再次將其在頂部和底部的填充設置為0px 。

Blurb 模塊內容

現在是我們設計卡片本身的時候了。 輸入 Blurb 模塊的設置。 由於它是描述您的業務的元素，因此您需要簡要提及您的公司或品牌的業務。 因為這是一個示例帖子，我們用一些殭屍風味的lorem ipsum填充它。 您可以在“內容”選項卡下設置標題和正文內容。

設置背景顏色

您顯然希望浮動卡片在視覺上與您的網站相匹配，因此選擇正確的背景顏色非常重要。 我們將使用#ffffff （白色）。 Content選項卡也包含它，您可以在Background標題和Paint Can下找到它。

選擇卡片圖像

Blurb 模塊為您提供了為模塊包含圖像或圖標的選項，我們需要一個代表我們公司的圖像。 同樣，在內容選項卡下，找到圖像和圖標，然後上傳適用於您的模塊的圖像。

塑造卡片角

接下來，進入“設計”選項卡並進入“邊框”標題。 找到圓角選項並將每個角設置為25px 。 這將平滑鋒利的方形邊緣，而不會改變整體卡片的形狀。

文本對齊

在文本標題下，將文本對齊設置為居中。

設置浮動卡片的標題文本的樣式

您之前設置的標題文本默認為H4 。 要設置樣式，請進入標題文本標題，選擇H4選項卡，然後更改以下標題選項：

• 字體: Poppins
• 字體粗細：粗體
• 文字顏色：# 22303f
• 文字大小： 20px
• 線高： 1.3em

然後，我們需要進入響應設置並更改移動設備標題的大小。 將標題文本大小更改為14px 。

設置卡片文本的樣式

接下來，導航到正文並將正文字體更改為Poppins以匹配標題字體。

然後單擊鏈接選項卡（鏈圖標）並將鏈接文本顏色交換為您網站的互補顏色。 我們選擇了#97c357 。

調整關於卡的大小

在Sizing標題下，將以下值添加到這些設置中：

• 圖像寬度： 75%
• 內容寬度： 25vw
• 寬度： 25vw
• 最大寬度： 30vw

在響應設置下，調整以下值：

• 內容寬度： 90vw
• 寬度： 90vw
• 最大寬度： 95vw

這些值將確保卡片佔據移動設備屏幕的整個寬度，因為角落中的浮動卡片通常無法讀取。

Blurb 的間距

Spacing標題是一個快速修復，您需要將Left Margin設置為0px ，將頂部和底部填充設置為2vw ，將左右填充設置為1vw 。

對於響應式設置，只有頂部和底部填充會發生變化。 我們將這些設置為5% 。

添加框陰影

因為浮動的卡片將保持固定在其位置，我們希望它看起來好像它實際上漂浮在您的內容之上。 通過向模塊添加一個基本的框陰影，這種效果很簡單。 這個選項可以在Box Shadow下找到，我們選擇了基本的底部陰影。

調整響應式 CSS

現在是有趣的部分。 我們正在進入高級選項卡，我們將在其中將浮動卡片固定到頁面上。 為此，我們的第一步是關閉我們為桌面添加的圖像。 Blurb模塊中的圖像確實會影響移動設備上的大小和可用性，而且它是頁面加載的其他內容。

所以我們要添加display:none; 在自定義 CSS下的僅限移動設備的Blurb Image字段下。

使用位置設置固定和浮動卡

最後，我們要將卡片放置在我們希望它浮動的位置。 首先，我們要前往Advanced選項卡並滾動到Position 。 從下拉菜單中選擇固定。

接下來，找到位置選項。 這是屏幕上浮動卡將停留的點。 對於桌面，我們希望它位於屏幕的下角。 所以我們點擊與之相關的方塊。 我們還希望它稍微偏離窗口邊框，因此我們將垂直偏移更改為3% ，將水平偏移更改為2%。

接下來，我們要為移動設備創建不同的位置和偏移量。 上面，我們將卡片的寬度設置為拉伸整個屏幕寬度。 考慮到這一點，我們將固定位置更改為底部中心，以便卡片始終漂浮在屏幕底部。

此外，我們只會更改移動設備的垂直偏移。 將此值設置為3% 。 不需要水平偏移，因為它是移動屏幕的寬度並居中。

最終結果

為您的個人站點正確設置並調整所有內容後，最終產品應與此類似。

桌面

移動的

結論

借助 Divi 強大的選項和直觀的界面，您可以立即在您的網站上設計和粘貼一張浮動的關於卡片。 通過讓您的用戶從一開始就知道他們在與誰打交道，您一定會獲得一些品牌忠誠度。

您在網站上使用浮動卡做什麼？ 讓我們在評論中知道！