WordPress divi主题

如何在 Divi 中使用前后伪元素创建独特的设计

by | May 13, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

作为网页设计师,我们一直在寻找新的方法来为我们创建的网站添加个性。 Divi 提供了无穷无尽的机会来制作独特的布局,但我们总是可以添加很少的东西来将设计结合在一起。 这是 CSS 伪元素真正派上用场的地方。

google广告开户

什么是 CSS 伪元素?

简而言之,可以使用 CSS 伪元素来设置元素的特定部分的样式。 有五种类型的伪元素可以做不同的事情。 出于本文的目的,我们将研究 ::before 和 ::after。

这两个伪元素用于在元素内容之前或之后插入一些东西。 这特别有用,因为我们可以使用它们为现有图像、文本和其他任何内容添加额外的视觉元素!

那么我们为什么要使用这些伪元素呢? 之前和之后非常适合解锁设计可能性,而无需添加更多元素或模块。 同样,它们对于添加其他元素很有用,而无需触及 html 模板或核心主题文件。

你如何在 Divi 中使用之前和之后的元素?

如果到目前为止这一切听起来有点令人困惑,请不要担心! 如果我们在从头开始编写 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 模块之前和之后添加和自定义内容的快速快捷方式,我们可以利用它们来创建一些非常灵活和有趣的设计。

WordPress divi主题

抢先看

这就是我们将在本教程中创建的内容:

示例 1

示例 2

示例 3

入门

对于本教程,我们只需要一个 Divi 主题的副本和一张白板。 首先,我们将创建一个新页面,并在添加页面标题后,单击可视化构建器。

现在我们准备开始了!

示例 1:使用伪元素编号的模糊模块

简介可能是您可以使用的最灵活的 Divi 模块之一。 在这种情况下,我们将使用伪元素在每个简介之前添加数字,以逐步创建“它是如何工作的”部分。 我们还将在右侧添加一个箭头形状以指示该过程。

我们将要创建的内容:

fiverr建站WordPress程序员

尽管此设计适用于任何简介设计,但我们从 Web 代理布局中借用了简介部分。 如果您想使用这些作为起点,您可以通过创建新页面并访问前端构建器来访问 Web Agency Landing Page。

当您的页面加载时,您可以选择使用预制布局、您保存的布局之一或从头开始构建。 选择预制布局并使用搜索栏查找“Web Agency”布局。 本教程中的简介部分可以在登陆页面上找到。

独立站选品工具

加载后,预制布局与我们的示例之间的唯一区别是我们更改了每个简介的背景、标题和文本字体颜色并添加了一些填充。

高质量外链购买

一旦您在一个简介上更改了这些设置,您可以右键单击该模块并使用“扩展样式”将它们应用到其他三个。

现在我们已经自定义了我们的四个简介模块以使其看起来像我们想要的那样,是时候添加一些代码来创建编号元素了。 然而,为了使这个设计工作,我们首先需要在主元素自定义 css 框中添加一行 css。

overflow: visible;

这将允许我们在接下来的步骤中创建的任何元素在与我们的简介模块边缘重叠的任何地方都可见。

JasperAI 10000字免费额度试用

完成此操作后,打开模块选项并导航到“高级选项卡”。 在“之前”框中,添加以下 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.’;

WordPress备份工具updrafplus

…等等。

现在我们已经对数字进行了排序,我们需要添加一点 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 */

然后将以下代码添加到“之后”框中:

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 添加到特定选项卡,因此我们需要稍微不同地完成此操作。

打开选项卡模块选项并在高级选项卡中为模块提供“fancy-tabs”类。

一旦你添加了这个 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 来实现上面显示的完整设计。 再次,复制…

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题