如何在 Divi 中使用前後偽元素創建獨特的設計

已發表: 2019-04-14

作為網頁設計師，我們一直在尋找新的方法來為我們創建的網站增添個性。 Divi 提供了無限的機會來產生獨特的佈局，但我們總是可以添加很少的東西來將設計結合在一起。這就是 CSS 偽元素真正派上用場的地方。

什麼是 CSS 偽元素？

簡而言之，CSS 偽元素可用於為元素的特定部分設置樣式。有五種類型的偽元素可以做不同的事情。出於本文的目的，我們將查看 ::before 和 ::after。

這兩個偽元素用於在元素內容之前或之後插入一些內容。這特別有用，因為我們可以使用它們為現有圖像、文本和其他任何內容添加額外的視覺元素！

那麼我們為什麼要使用這些偽元素呢？前後非常適合解鎖設計可能性，而無需添加更多元素或模塊。同樣，它們對於添加額外元素非常有用，而無需接觸 html 模板或核心主題文件。

你如何在 Divi 中使用 before 和 after 元素？

如果到目前為止這一切聽起來有點令人困惑，請不要擔心！如果我們在從頭開始編寫 CSS 代碼時使用 ::before 和 ::after ，它看起來有點像這樣：

想像一下，我們有一行帶有“text-example”類的文本——用於樣式化和自定義該行的 CSS 將是：

.text-example {*This is where you add the styles*}

現在，如果您想添加 ::before 或 ::after 元素並為其設置樣式，CSS 將如下所示：

.text-example::before {*This is where you add before content and styles*}

.text-example::after {*This is where you add after content and styles*}

幸運的是，Divi 提供了對 ::before 和 ::after 偽元素的輕鬆訪問，而且麻煩更少。事實上，如果您曾經為任何模塊打開“高級”選項卡以添加自定義 CSS 代碼，您就會看到我們所指的區域。

這些框提供了在任何現有 Divi 模塊之前和之後添加和自定義內容的快速快捷方式，我們可以利用它們來創建一些非常靈活和有趣的設計。

搶先看

這是我們將在本教程中創建的內容：

示例 1

示例 2

示例 3

入門

對於本教程，我們只需要 Divi 主題的副本和一張空白的石板。首先，我們將創建一個新頁面，並在添加頁面標題後，單擊可視化構建器。

現在我們準備開始了！

示例 1：使用偽元素編號的模糊模塊

簡介可能是您可以使用的最靈活的 Divi 模塊之一。在這種情況下，我們將使用偽元素在每個簡介之前添加數字，以逐步創建“它是如何工作的”部分。我們還將在右側添加一個箭頭形狀以指示該過程。

我們將要創建的內容：

儘管此設計適用於任何宣傳語設計，但我們從 Web Agency Layout 借用了宣傳語部分。如果您想使用這些作為起點，您可以通過創建一個新頁面並訪問前端構建器來訪問 Web Agency Landing Page。

當您的頁面加載時，您可以選擇使用預製佈局、您保存的佈局之一或從頭開始構建。選擇預製佈局並使用搜索欄查找“Web Agency”佈局。本教程中的簡介部分可以在登陸頁面上找到。

加載後，預製佈局和我們的示例之間的唯一區別是我們更改了每個簡介的背景、標題和文本字體顏色並添加了一點填充。

一旦您在一個簡介上更改了這些設置，您可以右鍵單擊該模塊並使用“擴展樣式”將它們應用於其他三個。

現在我們已經自定義了我們的四個簡介模塊，使其看起來像我們想要的那樣，是時候添加一些代碼來創建編號元素了。但是，要使此設計起作用，我們首先需要向 Main Element 自定義 css 框添加一行 css。

overflow: visible;

這將簡單地允許我們在接下來的步驟中創建的任何元素在它們與我們的模糊模塊的邊緣重疊的任何地方都可見。

完成此操作後，打開模塊選項並導航到“高級選項卡”。在“before”框中，添加以下 CSS 片段：

content: '1.'; /* Adds the number 1. as before content */
font-weight: bold;
font-size: 80px;
opacity: 0.7; /* Makes the number slightly transparent */
color: blue; /* Changes the color of the number text */
position: absolute; 
z-index: 9999;
left: 0; /* Positions the content 0px away from the left border */
Top:-20px; /* Positions the content 20px above the top border */

添加此代碼片段後，您將看到數字顯示在模糊模塊的左上角。您可以通過更改“left:”和“top:”行或更改此 CSS 代碼段中數字的顏色和字體大小來修改數字的位置。

完成第一個模塊的此操作後，進入三個新的簡介模塊並將“內容：”行更改為：

內容：'2.';
內容：'3.';

…等等。

現在我們已經對數字進行了排序，我們需要添加一點 css 來創建箭頭形狀。

打開每個模塊並將其輸入到自定義 CSS 區域中的 After 框中：

content: '';
display:block;
height:60px; /* Size of the shape */
width:60px; /* Size of the shape */
position:absolute;
top:40%;
right:-30px;
z-index: -1;
background-color: #e8e8e8; /* Colour of the shape */
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);

現在你的四個簡介應該是這樣的：

示例 2. 向現有模塊添加獨特的形狀

這種設計依賴於添加到每個文本模塊中的 ::before 和 ::after 自定義 CSS 框的簡單但有效的小代碼片段。

在這裡使用偽元素的好處在於，我們可以將獨特的形狀和對象集成到我們現有的模塊中，而無需向我們的頁面添加任何額外的元素或模塊。因為這些偽元素包含在我們現有的模塊中，所以它們不會為我們的設計增加任何額外的空間，並且在所有設備上看起來都很棒。

我們將要創建的內容：

要創建初始佈局，我們需要添加一個帶有三列行的常規部分，設置為默認寬度。完成此操作後，將文本模塊添加到新列之一。

同樣，您可以根據需要設置此文本模塊的樣式，但是如果您按照以下步驟進行操作，以下是實現此設計的步驟：

打開文本模塊選項並根據需要添加文本內容和背景圖像或背景顏色。我們使用了頂部帶有透明漸變的普通背景圖像：

接下來，配置以下設計選項：

1.頂部填充：120px &底部填充：120px

2.文本對齊：居中&文本顏色：#ffffff

3. 標題對齊：居中 & 標題顏色：#f5ee5d

現在我們已經為您的第一個文本模塊準備好了所有的視覺方面，是時候添加 CSS 來實現奇蹟了。在文本模塊的高級選項卡中，將以下代碼添加到“之前”框中：

content:'';
height: 30px; /* change the size to suit your design */
width: 30px; /* change the size to suit your design */
display: block;
position: absolute;
border-top: solid 3px #f5ee5d; /* change the colour to suit your design */
border-left: solid 3px #f5ee5d; /* change the colour to suit your design */
left: 20px; /* change the position to suit your design */
top: 20px; /* change the position to suit your design */

然後將以下代碼添加到“after”框中：

content:'';
height: 30px; /* change the size to suit your design */
width: 30px; /* change the size to suit your design */
display: block;
position: absolute;
border-bottom: solid 3px #f5ee5d; /* change the colour to suit your design */
border-right: solid 3px #f5ee5d; /* change the colour to suit your design */
right: 20px; /* change the position to suit your design */
bottom: 20px; /* change the position to suit your design */

將這些代碼片段添加到模塊後，您將看到我們添加的精美新形狀。

如果你想知道這個 CSS 是做什麼的，它實際上很簡單。我們所做的就是創建一個透明的正方形，它的位置距離文本模塊的頂部和左側（以及底部和右側）20px。然後我們為這些方塊添加兩個邊框以創建箭頭效果。

當您對第一個文本模塊的外觀感到滿意時，只需複制並粘貼它以填充其他列並更改文本內容、背景和样式以使其適合。

這種方法的好處是它幾乎可以與任何帶有一點自定義的 Divi 模塊一起使用。如果你想要更花哨，可以嘗試添加一些額外的 CSS 來進一步旋轉、傾斜和自定義 ::before 和 ::after 元素。玩得開心！

示例 3. 向選項卡標題添加圖標和描述

在這個設計中，我們將利用在一些現有內容之前添加圖像圖標以及下面的小文本描述的能力。這非常適合自定義 Divi 選項卡模塊，比您通常能夠做到的更進一步。

注意——雖然通過 css 添加內容對設計很有好處，但它並不容易被搜索引擎索引（雖然 Google 實際上確實索引了 CSS 和 Javascript 內容，但它需要更長的時間並且目前不可靠。像 Bing 和 DuckDuckGo 這樣的搜索引擎可以根本不索引此內容）。出於這個原因，您的內容應該最少，您不應該依賴它來影響您的排名潛力。

我們將要創建的內容：

首先，我們需要添加我們的標準部分和一個 1 列的行，然後是 Divi 選項卡模塊本身。在選項卡模塊中，我們只需要將標題和內容添加到每個選項卡，因為我們將在接下來的步驟中處理樣式。

一旦我們的內容就位，我們需要開始向模塊的 ::before 元素添加內容。由於我們無法使用上面遵循的方法將自定義 CSS 添加到特定選項卡，因此我們需要稍微不同地完成此操作。

打開選項卡模塊選項，並在高級選項卡中為模塊指定“花式選項卡”類。

添加此 CSS 類後，我們需要做一些準備工作。要將一些圖標或圖像添加到您的標籤標題，我們顯然需要將這些添加到 WordPress。轉到 WordPress 儀表板中的媒體選項卡，然後像往常一樣上傳您選擇的圖標。

上傳您的圖片後，我們需要點擊每個圖片並複制 WordPress 為我們生成的 URL。瀏覽您的每個圖像並將這些 URL 複製並粘貼到文檔或您選擇的筆記應用程序中。

使用您選擇的圖像的 URL，在 WordPress 儀表板的 Divi 菜單中轉到您的 Divi 主題選項。

在此頁面的底部，您會看到一個框，您可以在其中添加自己的自定義 CSS。我們將在此框中粘貼一些 CSS 代碼。

以下代碼段將在每個選項卡標題上方添加圖像。只需將此片段複製並粘貼到自定義 CSS 框中，然後將星號之間（並包括）的內容替換為您之前記下的 URL（例如*將其替換為您的第一張圖片的 URL*）。

.fancy-tabs .et_pb_tab_0 a::before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
display: block;
}

.fancy-tabs .et_pb_tab_1 a::before {
content: url(*Replace this with the URL for your second image*);
padding-top: 20px;
display: block;
}
 
.fancy-tabs .et_pb_tab_content a::before {
content: '' !important; }

如果您返回帶有選項卡模塊的頁面，您現在應該看到圖像已添加到每個標題上方 - 成功！

那麼添加描述呢？幸運的是，這也很簡單。在您剛剛複製到自定義 CSS 框中的代碼正下方，粘貼以下內容：

.fancy-tabs .et_pb_tab_0 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
 
.fancy-tabs .et_pb_tab_1 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
 
.fancy-tabs .et_pb_tab_content a::after {
content: '' !important; }

與之前的圖像一樣，您需要用您自己的內容替換“這是一個描述”。返回帶有標籤模塊的頁面，您會看到我們現在也有精美的描述！

最後，我們只需要應用更多的 CSS 來實現上面顯示的完整設計。同樣，將以下代碼段複製到同一個自定義 CSS 框中：

.fancy-tabs .et_pb_tab_content a:after {
content: '' !important; }

.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.fancy-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align: center;
}

@media (max-width: 768px) {

.fancy-tabs .et_pb_tabs_controls li {
width: 100% !important;
}

.fancy-tabs .et_pb_tabs_controls {
padding: 0 !important;
}
}

此代碼將您的選項卡文本和圖像居中，並增加選項卡的寬度以覆蓋整個模塊。

我們還添加了一些 CSS 以確保標籤在所有設備上看起來都不錯——如果您不想讓標籤在移動設備上全寬和堆疊，我們需要返回並在媒體查詢中包含原始 CSS 代碼。這意味著在平板電腦和更寬的設備上，我們添加描述和圖標，但在較小的設備上，我們將恢復為 Divi 默認樣式。

為此，請複制下面修改後的 CSS 代碼並將其粘貼到 Divi 主題選項面板中的自定義 CSS 區域中：

@media (min-width: 769px) {

.fancy-tabs .et_pb_tab_0 a::before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
display: block;
}

.fancy-tabs .et_pb_tab_1 a::before {
content: url(*Replace this with the URL for your second image*);
padding-top: 20px;
display: block;
}
 
.fancy-tabs .et_pb_tab_content a::before {
content: '' !important; }

.fancy-tabs .et_pb_tab_0 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
 
.fancy-tabs .et_pb_tab_1 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
 
.fancy-tabs .et_pb_tab_content a::after {
content: '' !important; }
.fancy-tabs .et_pb_tab_content a:after {
content: '' !important; }

.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.fancy-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align: center;
}
}

添加更多標籤

在本例中，我們創建了一個包含 2 個不同選項卡的選項卡模塊，但在實踐中我們有時需要的不止這些。如果您正在尋求創建 2 個以上的選項卡，我們將需要修改您剛剛添加的代碼。

從代碼片段中可以看出，Divi 自動為每個選項卡標題分配一個類——第一個從 0 開始（.et_pb_tab_0），每次增加 1（.et_pb_tab_1、.et_pb_tab_2 等）。我們已經處理了前兩個選項卡，因此在添加更多選項卡時，我們可以簡單地為每個新選項卡複製和粘貼一段代碼：

.fancy-tabs .et_pb_tab_0 a:before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
}

並將類 (.et_pb_tab_0) 中的數字更改為 2、3、4 等。您也需要對描述執行相同操作。

我們需要做的最後修改是再調整一行 CSS。取你的標籤數除以 100。記下這個數字並導航到自定義 CSS 中的以下部分：

.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}

並用你的答案交換 50%。這將確保您的標籤在模塊的寬度上等距分佈。

例如，如果您要創建第三個選項卡，您需要的附加 CSS 代碼如下：

.fancy-tabs .et_pb_tabs_controls li {
width: 33% !important;
}

在結束

我們有了它，三種利用 CSS ::before 和 ::after 元素來創造新設計可能性的好方法。希望本指南能激發您探索如何在未來的創作中使用偽元素——機會真的是無窮無盡的！