WordPress divi主题

如何将 Blurb 图标样式设置为 Divi 中内容的设计重点

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

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

使用模糊图标作为设计重点可以为您的页面布局提供您以前可能从未想过的独特设计。 除了将简介模块的图标定位到与文本模块重叠之外,您还可以使用文本模块的背景和边框来设置图标的样式。 这创造了一个很好的设计重点,在为您的图标提供完全独特的设计的同时为内容提供框架。

google广告开户

在本教程中,我将向您展示如何在 Divi 中为您的内容设计风格模糊图标作为设计重点。

让我们潜入吧!

抢先看

以下是我们将在本教程中构建的一些设计示例。

简介图标

简介图标

简介图标

简介图标

简介图标

简介图标

WordPress divi主题

下载本教程的示例布局

要掌握免费的简介模块口音设计布局,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

从头开始构建设计

首先,创建一个新页面并为您的页面命名。 然后在前端部署 Divi builder。 添加具有一列行的常规部分。 在添加您的第一个模块之前,请使用以下内容更新行设置:

使用自定义装订线宽度:是
自定义装订线宽度:1

这将消除模块之间的任何自定义边距。

创建文本模块

接下来在行内添加一个文本模块。

简介图标

使用以下填充文本更新文本模块:

<h2>Our Services</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. </p>

简介图标

样式化文本模块

现在更新 Text 模块设置的其余部分,如下所示:

背景颜色:#ffffff

fiverr建站WordPress程序员

简介图标

  • 标题 2 字体:Nunito
  • 标题 2 字体粗细:粗体
  • 标题 2 字体样式:TT
  • 标题 2 文本颜色:#f24a5b
  • 标题 2 文字大小:42 像素(桌面)、32 像素(平板电脑)、22 像素(手机)
  • 标题 2 字母 Sp[acing: 16px
  • Heading 2 Line Height: 1.3em

blurb icons

  • Width: 500px (desktop), 490px (tablet)
  • Module Alignment: center
  • Custom Padding (desktop): 40px top, 40px bottom, 50px left, 50px right
  • Custom Padding (phone): 20px left, 20px right
  • Border Width: 10px
  • Border Color: #ffffff

blurb icons

Since we will be overlapping the text module with blurb icons, we need to make sure the text module sits above the icons in z-space order. To do this we must first add the following snippet of CSS to the Text module Main Element CSS box:

position: relative;

Then set the z-index value to 1.

独立站选品工具

blurb icons

Now this text module will sit above any other overlapping modules which is important to the design.

Creating the Blurb Icon

Now we are ready to create the first blurb icon. To do that we must first add a blurb module and drag it to the top of the text module. Then delete the mock content (the title text and body text) and Click to use an icon instead of an image for the blurb.

Then update the following design settings:

高质量外链购买
  • Icon Color: #2ea3f2
  • Use Icon Font Size: YES
  • Icon Font Size: 100px
  • Custom Margin: 0px bottom (this takes out the default bottom margin between modules; not necessary if you are using a row gutter width of 1)

Next, since we aren’t using any text with the module (only the icon), we can get rid of the default bottom margin under the blurb icon. To do this, add the following custom CSS to the Blurb Image CSS box:

Blurb Image CSS:

margin-bottom: 0px

blurb icons

Duplicate the Blurb Icon

Before we start positioning the blurb, let’s go ahead and duplicate the blurb module and drag the duplicate under the text module. You should now have a blurb icon above and below the text module.

blurb icons

JasperAI 10000字免费额度试用

Positioning the Blurb Icons Using Transform Translate

To position the blurb icons, we are going to use Divi’s transform options which allow us to place the blurb module with the icon anywhere we want on the page.

Positioning Blurb Icon #1

To position the top blurb icon, open the blurb module settings and update the following:

  • Transform Translate X-axis (desktop): -242px
  • Transform Translate Y-axis (desktop): 50px
  • Transform Translate X-axis (phone): -170px

blurb icons

Positioning Blurb Icon #2

Before we position this blurb icon, let’s make it a bit larger. To do this, open the blurb module settings and change the Icon Font Size to 150px.

Then position the blurb icon by updating the following transform options:

WordPress备份工具updrafplus
  • Transform Translate X-axis (desktop): 242px
  • Transform Translate Y-axis (desktop): -100px
  • Transform Translate X-axis (phone): 190px

blurb icons

Creating the Two Column Row

To create the next column, duplicate the existing row and change the row’s column layout to a two-column layout (1/2 1/2).
blurb icons

Next, use Divi’s multiselect feature to select the all three modules in the left column and then copy and paste them over into the second column.

blurb icons

Then, delete the bottom blurb icon in column one.

Aligning the Blurb Icons in Column 2

For the Blurb Icons in column 2, we need to shift the top icon to the left and the bottom icon to the right. We can do this simply by changing the Transform Translate X-axis value.

Open the blurb module settings for the top blurb module in column 2 and update the following:

  • Transform Translate X-axis (desktop): 242px
  • Transform Translate X-axis (phone): 170px

Basically all you are doing is changing these values from a negative to a positive to shift it in the opposite direction along the x-axis.

blurb icons

Next, update the transform translate value for the bottom blurb module in column 2 as follows:

  • Transform Translate X-axis (desktop): -242px
  • Transform Translate X-axis (phone): -190px

blurb icons

Update Text Module Styles in Second Row

The second row of content serves as a subset of featured services. Therefore, we want the title font size to be different and smaller than our header. To update the two text modules at the same time, use multiselect to select both of the text modules. Then update the following:

Change the h2 heading content to read “Service”.

  • Heading 2 Text Size: 28px (desktop), 22px (tablet), 18px (phone)

blurb icons

Save Settings.

Now open the settings modal for the text module in column 2 and update the following:

blurb icons

Adjusting the Spacing of the Layout

Right now there is probably a bit too much white (or negative) space between the two rows of content. To take away some of that space, we can add a negative bottom margin to the bottom blurb module in the top row as follows:

  • Custom Margin: -100px bottom

blurb icons

Final Result

Now let’s take a look at the final result.

blurb icons

blurb icons

blurb icons

Trying out Other Icons

To try out different icons for your layout, you can use the find and replace feature. Open the blurb settings for one of the blurbs containing your icon. Then right click on the icon in the settings modal and select Find & Replace.

blurb icons

In the Find & Replace popup, update the following:

  • Within: This Section
  • Replace With: [select new icon]

之后,单击替换按钮。

简介图标

这将用新的内容更改您部分中的所有内容。

以下是一些使用不同图标的布局示例。

简介图标

简介图标

简介图标

最后的想法

将简介图标作为设计重点添加到您的内容是如何组合两个模块以创建完全独特的设计的一个示例。 在这种情况下,文本模块背景和边框用作周围图标的部分覆盖。 结果是独一无二的,为探索更多设计变化打开了大门。 随意探索不同的图标和颜色组合,以创建满足您自己需求的东西。

我期待在评论中收到您的来信。

干杯!

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