在 Divi 中顯示公司徽標的簡單而有創意的方法

在您的網站上顯示公司徽標的原因有很多。 公司徽標的“精選”部分可能會影響潛在投資者或合作夥伴。 或者“我們的客戶包括”部分可以為訪問者建立有價值的社會證明。 但無論是什麼原因，重要的是要知道如何將這些徽標添加到您的網站。 在本教程中，我將介紹使用 Divi 將公司徽標添加到您的網站的三種不同方法。 我什至會向您展示如何將徽標畫廊添加到任何 Divi 模塊！

以下是本教程將涵蓋的內容：

• 準備您的徽標圖像
• 使用 Divi Gallery 模塊通過簡單的拖放來顯示徽標
• 使用 WordPress Gallery Embed 顯示徽標
• 使用 Divi Builder 為徽標創建自定義佈局

讓我們開始吧！

搶先看

以下是一些可能使用本教程中的技術進行的設計。

準備您的徽標圖像

在準備要在網站上顯示的徽標時，重要的是在將圖像添加到網站之前花時間使用照片編輯器調整圖像的大小。 這將為您省去嘗試使用自定義寬度、填充或邊距調整徽標大小和位置的麻煩。 相信我。 如果你沒有必要，你不想走那條路。

由於每個徽標都有獨特的尺寸，因此幾乎不可能使它們都具有精確的尺寸。 這是照片編輯器派上用場的地方。 例如，使用 Photoshop，您可以創建一個新文件並將文檔尺寸設置為您希望所有徽標圖像的大小（在本例中為 226 像素 x 100 像素）。

然後將徽標圖像添加到文檔中，並直接在中心調整圖像大小和位置。 確保它是具有透明背景的 png 圖像文件。

然後將圖像導出為png文件以保持透明背景。

然後對其餘徽標重複此過程。

您可以保留徽標的原始顏色或使用照片編輯器將它們更改為您想要的任何顏色。 如果您計劃使用 Divi（即圖像模塊或圖片庫）添加徽標，您始終可以使用 Divi 的內置濾鏡效果來調整顏色。

訂閱我們的 YouTube 頻道

#1 使用 Divi Gallery 模塊顯示公司徽標（簡單的拖放）

使用 Divi 將公司徽標添加到您的網站的第一種方法非常簡單。 使用 Divi 的拖放功能，您可以將所有公司徽標拖到 Divi Builder 中，以立即創建圖像庫以在網格中顯示您的徽標。

為此，請創建一個新頁面並部署 Divi Builder 以在前端構建。 選擇“從頭開始構建”選項。 Divi builder 啟動並運行後，打開包含所有圖像的文件夾並選擇它們。 然後只需使用 Divi Builder 將它們拖到瀏覽器窗口中即可。

Divi 會自動將這些圖像添加到新的圖庫模塊並打開圖庫設置為您啟動自定義過程。

由於我要添加 8 個徽標圖像並且不想顯示任何標題、說明或分頁，因此我可以更新以下內容：

圖片數量：8
顯示標題和說明：否
顯示分頁：否

默認情況下，圖庫模塊將為每個圖像添加一個帶有圖標的懸停疊加層。 您可以調整縮放圖標顏色、懸停覆蓋顏色或懸停圖標的覆蓋設置。

為了保持乾淨和簡單，您可以通過將縮放圖標顏色和懸停覆蓋顏色設置為透明來擺脫懸停覆蓋。

之後，您可以探索所有設計選項，為您的圖庫創建獨特的設計。 例如，您可以添加帶有微妙框陰影的邊框。

圖片邊框寬度：1px
圖像邊框顏色：#dddddd
圖像框陰影：見截圖

以下是最終設計在不同瀏覽器尺寸上的外觀。

因為這個圖庫可以添加到任何列結構中，所以您可以輕鬆地為您的公司徽標創建獨特的佈局。 這是一個兩列佈局的示例，左側是文本模塊，右側是圖片庫模塊（帶有徽標）。 我添加了背景漸變只是為了向您展示不同的外觀。

#2 使用嵌入的 WordPress Gallery 來顯示公司徽標（使用任何 Divi 模塊）

您還可以使用 WordPress Image Gallery 短代碼將公司徽標添加到您的網站。 這非常容易做到，並且非常適合徽標，因為在大多數情況下，您不需要向圖像添加自定義樣式。 這種方法的優點在於，您最多可以為徽標部署 9 列，這些列可隨瀏覽器窗口縮放，從而使您的列結構也能保持在移動設備上。

這是如何做到的。

在 Divi Builder 中，創建一個具有四分之一四分之三列結構的新部分。

假設您希望在六列圖庫中的公司徽標左側有一些文本。 首先在左欄中添加一個文本模塊並更新以下內容：

內容：“作為特色”
文字字體：蒙特塞拉特
文字字體粗細：粗體
文字文字大小：26px
文字方向：居中

現在在右欄中添加另一個文本模塊。 在內容選項卡下，刪除當前存在的模擬內容，然後單擊內容編輯器框頂部的“添加媒體”按鈕。

這將打開媒體庫彈出窗口。 接下來單擊彈出窗口左側的“創建圖庫”鏈接。 然後選擇要包含在圖庫中的徽標圖像（我在此示例中使用了八張圖像）。 單擊創建圖庫按鈕。

這將在彈出窗口中顯示“編輯圖庫”頁面。 更新右側邊欄中的圖庫設置，如下所示：

鏈接：無
列：8（這應該等於圖庫中的圖像數量，以便它們保持在一行上）
尺寸：全尺寸

然後單擊“創建新圖庫”按鈕。

這會將必要的圖庫簡碼嵌入到 WordPress 中，並在文本模塊中顯示圖庫。

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

使這一行全寬：是
使用自定義裝訂線寬度：是
天溝寬度：1
均衡柱高：是

通過這種設置，您有更多的空間讓您的徽標呼吸。 現在剩下要做的就是調整左側的文本，使其與右側的徽標垂直對齊。 您可以向左列添加必要的自定義填充來完成此操作，但為了保證兩個模塊保持垂直居中，您可以將以下自定義 CSS 添加到“行設置高級”選項卡下的主元素。

align-items: center;

這個 CSS 之所以有效，是因為我們將 Equalize Column Heights 設置為 YES，從而為行啟用“display:flex”屬性。 有關這方面的更多信息，請查看如何在 Divi 中垂直對齊內容。

為了去掉圖像周圍的灰色邊框，我們需要將以下 CSS 片段添加到我們的頁面設置中：

.gallery img {
border: none !important;
}

這是最終的設計。

這是在行中添加了黑色背景。

在移動設備上，列不會在任何屏幕尺寸上中斷。 圖像只是縮放到較小的尺寸。 我承認。 八列在智能手機上可能太多了，因為圖像變得非常小。

在任何 Divi 模塊中嵌入徽標畫廊

因為這是一個短代碼嵌入，您可以將此庫添加到幾乎所有 Divi 模塊中，這開闢了許多不同的可能性。

例如，您可以在切換、手風琴甚至選項卡模塊中添加徽標圖像。

這是將徽標的 wordpress 圖庫短代碼添加到兩個不同選項卡時的外觀示例。
在這個例子中，我為每個畫廊選擇了 6 個帶有 3 列的徽標。

這對於需要大量徽標的網站可能會派上用場。

#3 使用 Divi Builder 為公司徽標創建自定義佈局

如果您想讓公司徽標佈局更具創意，您可以使用 Divi Builder 來設計您能想到的任何東西。 Divi 的行元素支持最多 6 列的列佈局，這對於大多數公司徽標佈局來說已經足夠了。 我喜歡 6 列和 4 列佈局最適合徽標，這在很大程度上是因為它們在移動設備上的響應方式。

在下面的設計中，我將向您展示一些有關如何將您的公司徽標佈局提升到新水平的提示。

首先，讓我們從創建一個六列行的新部分開始。

在我們開始向列添加任何內容之前，請轉到行設置並更新以下內容：

自定義寬度：90%
天溝寬度：1
均衡柱高：是

自定義填充：4vw 頂部，4vw 底部

保存設置。

然後將圖像模塊添加到您的第一列，然後選擇一個徽標圖像。

然後繼續向每一列添加一個標誌圖像，如下所示：

第 1 列：1 個徽標
第 2 列：2 個徽標
第 3 列：3 個徽標
第 4 列：3 個徽標
第 5 列：2 個徽標
第 6 列：1 個徽標

現在通過此設置，您可以使用自定義 CSS 片段調整垂直對齊方式。 如果您想將內容垂直居中，您可以添加我們添加的相同 CSS 片段，以將我們的文本垂直居中放置在上面 #2 中的徽標庫旁邊。 打開行設置並將以下 CSS 添加到主元素。

align-items: center;

如您所見，這為徽標創建了圓形佈局。

但是對於這種佈局，我要將模塊與行的底部對齊。 因此，將“align-items: center”片段替換為以下內容：

align-items: flex-end;

這將所有模塊對齊到行的底部，這將與我們將添加的分隔線部分配合使用。

現在我們準備自定義我們的部分。 打開部分設置並更新以下內容：

背景：#2a3443

頂部分隔線樣式：見截圖
頂部分隔線顏色：rgba(255,255,255,0.03)
頂部分隔高度：13vw
頂部分隔線翻轉：垂直

自定義填充：0px 頂部，0px 底部

對於我們的標題，我們將創建一個新部分並將其放置在我們剛剛創建的部分之上。 創建一個具有一列行結構的新常規部分。

更新部分設置如下：

背景顏色：#2a3443

底部分隔線樣式：見截圖
底部分隔線顏色：rgba(238,238,238,0.09)
底部分隔線高度：13vw

自定義填充：底部 0px

現在保存您的設置並將文本模塊添加到該行並更新以下內容：

對於內容添加以下內容：

<h2>As Featured In</h2>

標題 2 字體：蒙特塞拉特
標題 2 字體粗細：粗體
標題 2 文本對齊：居中
標題 2 文本顏色：#ffffff
標題 2 文字大小：32px

自定義邊距：底部 0px

最後，在帶有公司徽標的文本模塊下添加一個圖像模塊，您希望在其他模塊上脫穎而出。 然後更新以下內容：

圖像對齊：居中
自定義邊距：-75px

查看最終結果。

最後的想法

在您的網站上為公司徽標創建一個部分實際上非常簡單。 一旦您使用照片編輯器正確調整了徽標圖像的大小，Divi 就可以處理其餘的工作。 本教程中涵蓋的方法應提供您創建所需的一切，以最少的努力實現您希望實現的佈局。 借助 Divi 的強大功能，您應該可以享受創建自己獨特佈局的樂趣。

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

乾杯!