WordPress 自建房实录 - DiVi 主题五页面建站篇 (中)

看完之前几篇基础文章之后, 你知道, 使用 WordPress 的 DiVi 主题搭建一个展示网站, 只是个力气活, 没有技术可言. 在 WordPress 自建房系列实录文章中, 你需要具备的最基础技能便是 “照做” 二字.

做不下去也不必难过, 你并不孤独, 绝大多数人, 折腾来折腾去, 好几年也没学会什么, 不也一样好好的生活么. 在一门技术已经变为力气活时, 你依然无法完成, 个中原因, 值得思考几次.

新东方曾经有个最 N 的写作课老师 — 不需要加之一. 当年直接把托福 185 篇命题全部写了范文, 最后集结成册出版, 长销 16 年. 至今豆瓣评分依然在 7 分以上. 他曾经有过一段非常精彩文字, 来描述, 把一份时间卖出一万份的重要性.

想要获得财富自由的你,必须学会写作. 写作是 “把自己的同一段时间重复销售很多很多次” 的极少数选择之一,也是相对来看最容易成为普通人起步的台阶之一。
在这样的时代里,有效沟通,显然是最重要的技能,甚至应该归类到 “最重要的生存技能” 中去,一个人的沟通效率,从底层决定了一个人最终可能获得的资源及其质量.
写作,是比私下交流更为高效更具价值的有效沟通方式.

这段话和这篇文字貌似没啥关系, 是吧? 看过去是这样的, 你进一步想一想就知道了, 你总得有地方写作吧?

当然知乎豆瓣简书都是不错的地方, 但是你写作这么多年, 有没有过被删帖气愤的经历, 自建站除了道德和法律, 没有任何限制, 是任何限制! 现在你理解 “独立站” 中独立二字的含义否?

而且, 建站是少有的, 普通人能掌握的, 把一份时间卖出一万份的渠道.

正如我们在 WordPress 网站自建房实录 – 索引篇 中所述, 在网上搭建一个自有的网站, 就像在老家盖自建房, 有一些步骤, 但是并没有什么难度.

你需要选地址 (买域名), 买地皮 (选服务器), 搭地基 (安装 LNMP 或者 LiteSpeed), 进行简单的装修 (使用 DiVi 进行基础设置). 然后, 这个房子就可以住人了.

最关键的是, 这是你在网上能建设的, 自由度最大的渠道, 没有之一. 对于很多真正期望掌控渠道的人来说, 仅这一点就够有魅力的了.

经过前面的准备工作, 我们已经了解 DiVi 最核心的三个基本概念: Section, Row 以及 Module, 而且, 在上一篇文章 WordPress 自建房实录 – DiVi 主题五页面建站篇 (上) 里, 我们已经完成了部分 Home 主页的排版工作,

其实, 你已经具备 DiVi Builder 的基本排版能力, 你已经做好了准备.

Come On, 在本文中, 我们将一起完成 Home, About, Service, Contact 四个页面.

就文章整体而言, 最难的部分是 Home 主页的设计, 一多半的工作是手动完成的.
后面 About, Service, Contact 三个页面, 都是基于 DiVi 强大的模板库设置而成, 基本没有难度.
Blog 页面 需要单独设置以及填充内容, 难度仅次于 Home 页面, 将另起一篇文章.

目录:

  • Home 主页设置
  • About 页面
  • Service 页面
  • Contact 页面

配置环境:

HOME 主页设置

之前我们在上篇文章 IV. New Section — Full WIDTH 全宽版块中, 已经做好了 “Let Us Tell Your Story” 这个首页全宽图片, 这一小节我们完成的最终目标页面是下图的下半部分.

一个新 Section, 包含三个 module 的 row. 其中三个 column, 分别是, 图片, 视频和滚动图库. 实现并排三列 Blurb, Photography, Film 和 Web Design.

I. 并排 3 列 Blurb 设置目标:

1.. 第一个 Column 建立一个 Title Text 为 Photography 的 Blurb 模块, 其中包含图文和一个按钮, 两个 link.

  • 1.1 重命名 blurb 的 Text Title 为 Photography 并 link 到 Pages 的 Photography 页面.
  • 1.2 更改文本内容为:

We specialize in helping people enhance their display. Images are an important element for you to present yourself online. To find out how to make images attract more traffic, please contact us.

  • 1.3 增加 Blurb 所用的 image.

上图步骤的 Blurb 建立参见: WordPress 自建房实录 – DiVi 主题五页面建站篇 (上), 其中 I. Blurb 设置. 添加完毕, 点击对号保存.

  • 1.4 在 Module 的 Design 标签页中设置文字排版格式
  • 1.4.1 更改 Title Text:Photography 字体为 25, 大写, 并居中
  • 1.4.2 更改 Body Text 字体为 15px, 1.9em
  • 1.5 增加 Learn More 按钮
  • 1.5.1 颜色改为 #cc2b5e, Button Alignment 设置居中
  • 1.5.2 链接到 pages 的 photography 页面.
  • 1.5.3 打开 Use Custom Styles For Button 选项, 在颜色中输入 #cc2b5e

2.. 第二个 Column, 建立一个 Video 模块, 其中包含 text 模块和一个按钮, 两个 link.

  • 2.1 创建 Video 模块, 增加一个视频.

上图最后一幅图是增加 text module 的入口. 关键点是在页面出现的 video module 上悬浮鼠标, 会出现增加 module 的按钮.

  • 2.2 增加 Text 模块并重命名 Title Text 为 Film, 并 link 到 pages 的 Film 页面.
  • 2.2.1 Film 字符设置为 H4 标题.
  • 2.2.2 更改 Body Text 为:
    As you know, short videos are the best form of display advertising. In our package, a short promotional video is included, So you get a website with great pictures and movies.

把 Film 从普通的文本变为 H4 标题文本, 意味着可以在 Design 标签页中对 H4 标题的文本进行独立的外观设置, 也就是说 H1. H2. H3…. 这些标题文本, 可以有不同于彼此的独立外观格式. Divi 在自定义上确实很强大.

  • 2.3 在 module 的 Design 标签页中设置文字排版格式
  • 2.3.1 选中 Title Text:Photography 标题为 H4 后才能设置, 大写, 居中, 字号 25px.
  • 2.3.2 更改 Body Text 字体为 15px, 1.9em

先在 Design – Heading Text 中设置 Film 的外观版式, 留意鼠标指针所在位置的选项.

  • 2.4 增加 Learn More 按钮 方法: 通过复制 Photography 模块中的 Learn More 按钮, 直接拖动过来

先通过 Duplicate Module 复制一个一模一样的按钮, 然后悬浮鼠标到 Move Module 十字移动标处, 直接按着鼠标左键拖到 video 模块的位置, 留意, video 模块作为目的地, 必须出现哪个浅色的横条才可以放手, 否则会错乱.

3.. 第三个 Column, 幻灯片

通过复制 Video 模块的 Colummn, 从而实现 video + 文本 + 按钮整列一起复制, 并且包含所有格式.

复制完 Column FILM 后的结果, 右边两个是完全一样的 video+text+button 组合.

上图是设置入口, 在右上角绿色 Row Option 悬浮菜单中, 选择 Row Settings, 在其中三个 Column 中, 先删除第三个, 然后复制第二个. 就会出现两个一摸一会的 FILM 组合项目. 记得保存退出. Divi 的设置, 横着也行, 竖着也成, 方便.

  • 3.1 下面增加 Gallery 模块并使它 Slide 形式展示. 务必先增加 Galley 模块, 再删除 video 模块.
  • 3.1.1 添加 5 张照片
  • 3.2.2 Content 中设置关闭 elements 下的全部两个项目
  • 3.2.3 Design 中设置 Layout 为 Slider.
  • 3.2.4 同时打开 Animation 并设置 Automatic Animation Speed 为 3000 毫秒.
  • 3.3 在 module 的 Design 标签页中设置文字排版格式. 注: 打开 Text 模块的设置框后再更改文本内容:

标题 Web Design 设置为 H4 Heading 格式. 如下为文本内容: We use Divi to create eye-catching websites.DIVI theme is one of the best among many. she is so easy for everyone to build elegant websites quickly. So please feel amazing and very free to contact us.

  • 3.4 两种 Text Module 文字选择连接的方法, 不限于 H4 Heading 格式的文字, 是任意文字均可.
    第一种方法, 直接在文本框选中任意需要建立 link 的文字, 比如 FILM , 点击 insert link 后, 输入/film即可.
    第二种方法, 在模块设置 text setting 中的文本框, 直接选中要更改的文字 Web Design, 选中 insert/edit link 图标, 在弹出的 insert link 框中输入/webdesign, 这是又一种方法链接到 pages 的 webdesign 页面.

按钮 Learn More 更改链接到 pages 的 webdesign 页面. 前面说了多次, 不赘述.

至此, 我们设置完毕一个新的, 包含三个 module 的 Section.

II. 制作 Why Choose Us 这个 section, 设置主页图片与三列之间的曲线效果

目标:
制作 Why Choose Us 这个 section. 其中包含三个含有图标的 blurb 模块. 并实现两个 Divider 曲线效果.

1.. 复制页面上方三个 blurb 的 section, 以它为基础制作新的 section.

选中上图的蓝框 Section, 在出现的 Setion Options 菜单上, 点击 Duplicat Section.

2. 设置三图标所在的 Section 外观布局

  • 2.1 设置 section 背景色为深色系, 底色: #1D0914, 渐变双色, 取上个 section 的 gradient 的两个颜色, rgba(204,43,94,0.49), rgba(117,58,136,0.49)

底色设置, Section Settings – Content – Backgroud – Add Background Color, 输入 #1D0914. 渐变色设置: Section Settings – Content – Backgroud – Add Background Gradient, 选择颜色并依次输入两个颜色 rgba(204,43,94,0.49), rgba(117,58,136,0.49) .

  • 2.2 删除无用的部分. 从上往下删较快.

通过悬浮菜单上的垃圾斗删除按钮删除无用内容.

  • 2.3 删除 blurb 中的图片, 增加对勾图标。 设置 blurb 字体颜色为 light, Title Text 大写,

Blurb Settings – Content – image — 删除图片; Blurb Settings – Content – Use Icon — 选择对勾图标 Blurb Settings – Design – Text – Text Color — 选择 Light Blurb Settings – Design – Title Text – Title Font Style — 选择大写 (未配图)

3.. 增加 text 模块 Why Choose Us

  • 3.1 增加一个单一的 Row

选中 blurb 所在的 Row, 点击加号 – New Row — 选择单一 Row

  • 3.2 增加文本 module, 设置 Why Choose Us 字体大写, 字号 36px, 居中, 字体浅色

Add New Module – input “text” — 单击 Text module

Text Settings – Text – Body — 输入 Why Choose Us Text Settings – Text Alignment — 选择居中 Text Settings – Text Font Style — 选择大写 Text Settings – Text Text Size — 输入 36px

  • 3.3 将 Why Choose Us 所在的 row 拖动到三图标上方, 调整上位置为 53px, 下位置为 45px.

鼠标悬浮到 Why Choose Us 所在的 Row, 在出现的 Row Options 菜单中, 选择 Move Row, 拖动到图片范围内的上方

按住 Move Row 按钮移动图片, 图标变为一个绿色加号, 移动上图上方的时刻, 出现一个半透明长长的框体时, 松开鼠标.

![](data:image/svg+xml;utf8,)

选中 Why Choose Us 所在的 Row, 鼠标悬浮到文字上方, 出现一个长长的半透明的框体时, 单击鼠标左键向下拉

单击鼠标左键向下拉动 53px, 以调整上方空间. 同理调整下方空间为 45px.

松开鼠标左键, Why Choose Us 的上下空间调整完毕.

4.. 在图标 Blurb 模块中 设置 CSS 代码, 实现外框效果.

 border: 1px solid #3194c8;
 padding: 25px;
 border-radius: 4px;
  • 4.1 把制作好的 blurb 复制两个出来。

Blurb Settings – Advanced – Custom CSS – Main Element — 黏贴 css 代码 选中 Blurb 模块, 在 Blurb module Options 菜单上选择 Duplicate Module, 点击它两次即复制两次, 如最右方图片所示, 复制的内容出现在下方.

  • 4.2 更新每个 blurb 文本内容以及图标.
    文本 Title 依次为 Professional Work, Great Ideas, Fast Delivery

Blurb Settings – Text – Title — 标题分别为 Professional Work, Great Ideas, Fast Delivery Blurb Settings – Image&Icon – icon — 选择对应的图标. 此部分设置完毕, 记得点击对号保存, 快捷键 cmd + s 存档.

5.. 使用 animation-blurb 代码实现鼠标悬浮上方, blurb 模块变色效果

  • 5.1 在 Divi 中填写 CSS 代码, 复制字符 “animation-blurb”

.animation-blurb.et_pb_blurb:hover {
background: #315669;
transition: all 1.0s ease-in-out 0s;
}

黏贴完毕, 单击 Save Changes

  • 5.2 在 blurb CSS 项目中引用 “animation-blurb”, 实现光标悬浮高亮显示效果.
  • 5.3 通过复制 module 样式,把另外两个样式也变成悬浮变色效果。

Row Settings – Advanced – CSS class — 黏贴字符 “animation-blurb”, 点击对号保存, 观察看 Professional Work 所在的 blurb 已经实现光标悬浮高亮显示的效果. 在 Professional Work 所在的 Blurb 上单击右键, 选择 Copy Module Styles 复制当前 Blurb 的样式, 在 Great Ideas 上右键选择 Paste Module Styles 黏贴样式; 继续黏贴 Module Styles 到 Fast Delivery 上.

至此, 全部三个 icon blurb module 均实现了光标悬浮, 高亮显示的效果.

PS: 通过 Design – Animation 可以设置动画效果以及动画持续的时间.

III. 实现曲线分割效果

6. 目标: 实现两个 Divider 曲线效果.

  • 6.1 实现 Divider, 尝试左右翻转和垂直翻转

下图三个设置项对应上述三个 Divider 效果.

选中 Full Width Header: Tell Us your story 所在的 Section, Section Settings – Dividers – Divider Style — 选择你所需的 divider 样式. Section Settings – Dividers – Divider Flip — 选择所需的翻转模式.

  • 6.2 实现本节最终页面效果里所需的两个 Divider,
  • 6.2.1 在 Full Width Header: Tell Us your story 下实现一个 Diviver, 高度 36px
  • 6.2.2 在 icon blurb 模块 Why Choose Us 上部加入一个 Divider, 高度 75px

选中 Full Width Header: Tell Us your story 所在的 Section, Section Settings – Dividers – Dividers — 选择 Top, Divider Style — 选择你所需的 divider 样式, Section Settings – Dividers – Divider Hight — 设置为 36px

选中 icon blurb 模块 Why Choose Us 所在的 Section, Section Settings – Dividers – Dividers — 选择 Bottom Divider Style — 选择你所需的 divider 样式, Section Settings – Dividers – Divider Hight — 设置为 36px

本节制作 Why Choose Us 这个 section. 其中包含三个含有图标的 blurb 模块, 设置完毕.

IV. 使用 4 个 image 模块 和 Text 模块, 创建 COMPANIES WE HAVE WORKED FOR. 项目品牌展示区?

** 目标:** 使用 4 个 image 模块 和 Text 模块, 创建下图所示效果.

1. 创建新 Section, 使用 4 列 Row 格式. 其中包含 4 个 image 模块.

选中 Why Choose Us 所在的 Section, 下方出现蓝底色的加号, 点击加号创建 New Section — Regular. 新 section 在后台创建完毕; 此时在弹出的 Insert Row 窗口中, 选择 New Row 下的四列格式. 同样的, 新 Row 也在后台创建完毕, 在弹出的 insert module 中输入 image, 点击 image module 创建它.

  • 1.1 设置 Module: 上传 image module 所需图片, 设置格式准备复制这个 image module

最后一幅图片的设置是设置 4 个 image 所在的 Row 的选项, 在后面要用到.

  • 1.2 设置 Row: 将上述 image module 通过 Duplicate Module 按键复制三个. 如下图所示

通过左键拖动 image module 设置菜单上的 Move Module 图标, 将复制好的 image module 拖动到对应的位置. 使用和上述相同的方法, 将第 2,3,4 个 image module 中的图片依次替换为 WooCommerce, WPML, 以及 bbPRESS.

  • 1.2.1 设置 Row: 创建 Text 模块, 内容为 Companies we have worked for.
  • 1.2.2 将文字居中, 大小为 36px.

选中 4 个 image module 所在的 Row, 点击下方出现的增加 row 的加号, 选择单列 row, 输入 text, 选中 text module 并创建它, 内容为: Companies we have worked for , Text Settings – Content – Body – 选择 Align center 将文字居中.

Text Settings – Content – Body – Paragraph — 选择 Heading 2 格式 Text Settings – Design — Heading Text – H2 – Heading 2 Font Style — 选择将文字大写 Text Settings – Design — Heading Text – H2 – Heading 2 Text Size — 设置字号为 36px.

  • 1.3 设置 Row, 选中 4 个 image module 所在的 row,

你要用到的设置项是上图的最右图, Row Settings – Sizing — 开启 Use Custom Gutter Width, 并设置 Gutter WIdth 为 1. Row Settings – Sizing — 开启 Equalize Column Heights, 设置 Width 为 100%, Max Width 为最大值 2560px.

本节的 Companies we have worked for 模块, 设置完毕.

预制模板的导入

本节单独列了一个二级目录的原因是, 虽然我们因为制作 Home 主页使用预制模板, 但它是独立的, 且是 DiVi 主题相较于其他厂商最核心的区别之一.

如果你想大幅提高网站完工的速度, 你应该学会使用 Divi 最出彩的部分: 预置网页模板 Layout.

在过去一年里, Divi 的预制模板总数增长了 40%, 总数达到了 200 多个网站, 其中每个网站包含 5-10 个页面, 将近 1700 不同的页面, 涵盖了简历, 作品集, 博客, 电商网站, 联盟推广, 几乎所有常见网站类型. 足以满足你绝大多数需求, 必然有一款或多款页面有你需要使用的部分.

你可以选择导入整个 layout, 也可以选择只使用其中的一部分, 在你面对需要限期完成的网站时, 这能大量的节省时间, 而且, 这些页面都是响应式的, 它们多数情况下, 比你自己做的要好的多.

目标: 实现页面下部图示的 What Our Customers Say 和 Creat your own 两个新版块.

目标 1: 版块 What Our Customers Say, 其中含有三个 blurb module.

  • 1.1 通过预制模板导入整个页面.

点击页面下方带有三个小点的圆形按钮, 从弹出的 Divi Visual builder option 菜单中, 点击 Load From Library. 然后你就看到了 Divi 大名鼎鼎的预置模板库.

Divi 有着知名 WordPress Themes 中最强大的预置模板库, 英文是 Layout Packs, 每一个 Layout pack, 就是一个独立的网站页面, 在这个库中, 总共有 1440 个页面, 左侧列表是目录, 从艺术, 商务, 教育, 餐饮, 时尚到技术博客, 对绝大多数人来说, 算是应有尽有. 而且这个数量还在不断增加.

例如, 你想选取的是模板 Digital Payments Landing Page 一个页面, 点击进入它的展示页面, 左边默认是 Home 页面, 可以上下滚动查看, 右边是具体的每个页面, 你选中一个页面, 就可以在左侧观察页面的大致结构.

你要用的就是左侧 Home 页面中的 What Our Customers Say, 在取用页面的某一部分时, 请务必取消 Replace existing content, 如果你选择勾选了此项, 它就会把你原有的页面清空. 点击左侧页面下方的 Use This Layout, 即开始载入页面, 第一次载入时间会比较久. 日常网络不抽风的时候, 10 秒左右就可以载入所需 Layout.

  • 1.2 删除所有无用的部分, 包括 What Our Customers Say 版块自带的 Text Module
  • 1.3 设置当前 Section
  • 1.3.1 复制 WHY CHOOSE US 版块的 section style, 并粘贴到当前 section.
  • 1.3.2 删除原 Section 底色, 使之最终呈现白底色

选中 WHY CHOOSE US 版块所在的 Section, 在 Section Settings 菜单的齿轮上单击右键, 单击 Copy Section Styles. 然后到 What Our Customers Say 版块所在的 Section, 在 Section Settings 菜单的齿轮上单击右键, 单击 Paste Section Styles. 这样就完成了格式而非内容的复制.

What Our Customers Say 版块所在的 Section – Section Settings – Content – Background — 删除底色以及渐变色. 此时 版块背景色为白色.

  • 1.3.3 使用指定的双色 rgba(204,43,94,0.88) rgba(117,58,136,0.86), 改变 Row 的背景色.

选中 What Our Customers Say 版块中, 三个 Blurb Module 所在的 Row. Row Settings – Content – Background – Gardient — 删除原有的渐变色. Row Settings – Content – Background – Gardient — 点击 Add Background Gradient Row Settings – Content – Background – Gardient – Select Color — 在色卡框中输入基色 1:rgba(204,43,94,0.88). 同理输入基色 2:rgba(117,58,136,0.86). 点击对号保存.

目标 2: 版块 Create Your Own Style,

其中含有一个 button module, 一个 image module, 一个 divider module, 两个 text module.

  • 2.1 通过预制模板导入整个页面.
  • 2.2 删除所有无用的部分, 包括 Create Your Own Style 版块下方自带的 空白 Row.
  • 2.3 设置当前 Section
  • 2.3.1 复制 WHY CHOOSE US 版块的 section style, 并复制到当前 section.

从预制模板库 Layout pack 中载入 Fashion Landing Page, 我们要用的, 是它 Home 页面中左侧图示的部分. 方法和版块 What Our Customers Say 的载入方法完全一致. 唯一要注意的是: 在删除无用部分时, 请从下面开始删除无用的 Section 等部分.

  • 2.3.2 设置 button module
  • 2.3.2.1 复制 Service 版块 Photography 下方 Learn More 按钮的 module style, 并粘贴到当前按钮
  • 2.3.2.1 设置 Button 向左靠齐, Button 颜色为白色

http://hysen.me 网站首页最上方, 三个 Blurb 版块下方的 Learn More 按钮, 选中这个 Button Module, 在 Module Settings 菜单的齿轮上单击右键, 单击 Copy Module Styles.

然后到 Create Your Own Style 版块中的 Learn More 按钮, 在 Button Module Settings 菜单的齿轮上单击右键, 单击 Paste Module Styles. 这样就完成了 Module 格式而非内容的复制.

上图中最后一设置幅图是合成图: Button Settings – Design – Alignment – Button Alignment — 选中向左靠齐. Button Settings – Design – Button – Button Text Color — 选中白色.

最后点击对勾保存设置结果.

  • 2.3.3 设置 Divider Moudle 中的 line 项颜色为白色.

单击 Create Your Own Style 版块左侧的横线, 在弹出的 Divider Module 菜单中: Divider Settings – Design – Line – Line Color — 选择白色. 最后点击对勾保存设置结果.

至此, http://hysen.me 首页, 页面下部的 What Our Customers Say 和 Creat your own 两个新版块设置完毕.

About 页面

目标页面: 本节我们通过载入预制模板, 要制作出最终如下的 About 页面. 因每个人操作过程有差, 最终页面效果会有所差别.

目标: 1. 载入 Pre made template, 选择 SEO agency about 模板

点击 http://hysen.me 首页的 About 页面, 当前是个空白的页面. 在页面下方 Divi Visual builder option 菜单上, 点击左边的加号, 进入 Load From Library 页面.

然后选择所需的 SEO Agency Layout Pack. 选择上图右侧的 About 页面, 点击 Use This Layout 载入这个 About 页面. 注: 在退出 DiVi Visual Builder 的情况下, 你才能够点击 About 或者 Service 页面等.

目标 2: 删除不用的部分: 删除三个版块, 增加一个视频

  • 2.1 WE KNOW WHAT WORKS 版块和最下方的 Let’s Work Together! 以及 Contact information 版块.
  • 2.2 增加一个视频. 内容是 Divi 宣传片, 位置在 How We Deliver The Results That You Want! 版块.

由于上图的视频加载的是优兔网的 DiVi 宣传片链接, 并非 mp4 视频文件, 因其在国内无法访问, 所以会出现一个 false 的字样, 技巧: 鼠标悬浮在 false 字样附近, 尝试一两次会看到一条线, 单击它即可出现 Video Settings 的 Module 菜单. 单击进入并上传一个 Mp4 视频即可.

目标 3: 三种方法复制文本的格式

  • 3.1 由于下面效果比较都需要一个对照单位, 因此我们把 Target All The Right Customers 版块设置 Heading Text 和 body text 格式. Title Text 和 Body Text 全部大写, Tile Text 设置 H2, 居中. 红色.

在版块 Target All The Right Customers 中点击选中 Text Module, 点击菜单上的小齿轮, 进入 Text Settings. Text Settings – Design – Text – Text Font Style – 选择 TT 选项, 让全部文字大写. Text Settings – Design – Heading Text – Heading 2 Text Alignment — 选择居中. Text Settings – Design – Heading Text – Heading 2 Text Color — 选择红色.

  • 3.2 三种方式 复制 H2 字体样式
  • 3.2.1 通过 Copy Module Styles, 到目标 Module Settings 菜单 Paste Module Styles 粘贴样式, 实现整个 Moduel 格式的复制.
  • 3.2.3 通过 Text Setings – Design – Heading Text – 三个小点菜单 — 选择 Copy Heading Text Styles, 然后到目标 Module Settings 菜单 Paste Heading Text Styles 粘贴样式.
  • 3.2.4 通过 Text Setings – Design – Heading Text – 选中 H2 – H2 上右键菜单 — Copy Heading Text H2 Styles, 然后到目标 Module Settings 菜单 Paste Heading Text H2 Styles 粘贴样式.

从左到右, 上下一一对照看,

三个复制, 三个黏贴, 共两张图上下对比, 一看即知. 其中: module style 复制是将整个 module 格式复制过去. Heading Text H2 Style, 是仅仅将 H2 文字的格式复制过去.

目标 4: 统一页面内的 H2 字体,

  • 4.1 TARGET ALL THE RIGHT CUSTOMERS 版块上, 通过 Module Settings 菜单, 小齿轮图标右键菜单, 选择 Extend Text Styles, to this page, 把当前版块的 H2 红色大写标题及大写 Body Text 的格式, 扩展到整个页面.
    经过这个步骤后, 当前页面内所有的 H2 字体以及新建的 H2 字体都将维持统一的格式.

注: 一般情况下, Copy module style 只针对 Text settings 里 design 中 Text 项 (包括标题和文本) 的设置起作用.

  • 4.2 上图中最后一幅图片, TARGET ALL THE RIGHT CUSTOMERS 版块, 通过 Module Settings 菜单, 小齿轮图标右键菜单, 通过 Heading Text 设置页面三个小点, 选择 Extend Heading Text Styles , 会弹出一个 Extended Styles 的界面, 再选择 To – All Texts, Throughout – This Page,
    点击 Extened 按钮后, 可以只将 heading text 格式发送到当前页面的所有 Heading Text 文本.

目标 5: 两种方法类似的方法改变 Button 的样式

  • 5.1 设置 Read More 按钮 Call to action module 的 Read More 按钮, 更改背景色为 75a833, 字体为白色.
  • 5.2 通过 Extend Button Styles 更改 Section 中其他按钮的格式

下图中选中 Search Engine Optimization 这个文本版块所在的 Call to action module, 点击 Module Option 菜单上的小齿轮设置图标,

菜单 Call To Action Settings – Design – Button – Button 后的三点下拉菜单 — 点击 Extend Button Styles. 出现 Extned Styles 菜单, 第一项选择 To All Buttons, 第二项选择 Throughout — This Section. 注: 此操作只将 button 的格式复制到当前 Section 内的其他按钮, 不更改其他内容.

  • 5.3 通过 Extend Call To Action Styles 到当前 section, 更改 Call to action Moudle 的整体格式

选中 Search Engine Optimization 这个文本版块所在的 Call to action module, 在 Module Option 菜单小齿轮设置图标上右键, 选择 Extend Call To Action Styles 到当前 section. 结果是更改当前 Section 中全部 Call to Action Module 的样式. 留意: 此操作对 Module 菜单中 Content 标签页的 body text 不起作用.

目标 6: 使用 Shift 选中多个项目

  • 6.1 为三张图片多选; 文字格式: Our SEO Experts 版块中第一张图片换成 Lucy Wang, Name: Lucy Wang, Position: Founder

使用 Shift + 左键单击同类项目, 会实现三个 Person Module 被一次选中, 同时 Module 菜单会变成 四项的小菜单, 一起出现在每个 Person Moudle 的上方.

  • 6.2 通过 Copy Module Styles, 将 Lucy Wang 这个 Personal Module 的格式复制到其他两项. 这个文本格式操作, 本节有多次涉及, 不再赘述.
  • 6.3 三个 Person Module 多选并设置 Left Border 为 6px, 颜色为 #960096
    Box shadow 为第二模式, Box Shadow Horizontal Position 为 3px.

使用 Shift + 左键, 依次单击三个 Person Module, 全部选中后, 点击 Module Option 菜单上的小齿轮图标, 进入 Element Settings – Border – Border Styles 第五项 Element Settings – Border – Border Width — 设置 3px Element Settings – Border – Border Color — 设置为 #960096 Element Settings – Box Shadow – Box Shadow — 选择第二个格式. Element Settings – Box Shadow – Box Shadow Horizontal Position — 设为 3px 最终得到了上图最右侧的效果.

目标 7.. 尝试为跨 section 的两个 module 实现多选, 为两个 section 多选 , 并同时改变背景颜色

至此, about 页面 / 本节设置全部完毕.

Service 页面

目标页面: 通过载入模板, 并修改为如下的 7 个 Section 的页面

载入 Pre made template, 方法和上一节载入 SEO agency about 模板的方法完全一致, 这次我们要载入的是 Learning Management(LMS) Layout Pack 中的 Landing 页面. 选中之后, 点击按钮 Use This Layout 即可载入.

目标: 1. 版块 Learn to Code Websites Apps Games 的基础设置

  • 1.1 Section Background 的渐变色设置 #75a833 和 960096. Gradient Direction 90. 注: Gradient Direction 90 和 180 是两种颜色.

在版块 Learn to Code Websites Apps Games 所在的 Section, Section Settings – Content – Background – background — 选中 Gradient 标签页, 点击 Select Color, 输入颜色 #75a833. 同样方法输入第二个颜色 #960096.

同时设置图片中的最下方的选项 Gradient Direction 为 90deg.

  • 1.2 按钮 VIEW COURSES 的设置及扩展样式到页面.
  • 1.2.1 Button 背景 #960096, Button Border Color #960096, Button Border Width: 11px Box Shadow 设置为 No

Button Settings – Design – Button – Button Background — 单击背景色空白区域, 输入颜色 #960096 Button Settings – Design – Button – Button Border Width 设置为 11px. Button Border Color 设置为 #960096

Button Settings – Design – Box Shadow — 选择 Box Shadow 为 None.

  • 1.2.2 扩展按钮样式到当前页面.

VIEW COURSES 按钮上单击右键, 选择 Extend Button Styles, 在弹出的 Extend Button Styles 中默认选择 This Page, 点击 Extened, 从而实现整个页面的按钮统一格式.

  • 1.3 图片笔记本的设置及样式扩展
  • 1.3.1 Image Settings – Design – Filters – Hue – 73
  • 1.3.2 把含有笔记本的 module 样式, Image Settings 格式, Extend Image Styles 到整个页面
  • 1.4 版块 Learn to Code Websites Apps Games 所在的 Section 样式复制到两个版块, 版块 Become an expert , 和版块 My entire team was prototyping by the end of the first day.

版块 Learn to Code Websites Apps Games 所在的 Section 任意空白处, 单击出现 Section Option 菜单, 在其上单击右键, 选择 Copy Section Styles, 然后到另外两个指定版块, 右键选择 Paste Section Styles.

目标 2. 版块 100’s of Courses, H2 Title 字体设置颜色为 #e02b20, 并复制到其他版块.

通过快捷键 Option + Cmd + V, 复制 Style 到如下 5 个小版块的 H2 Title 文本. a. Learn by Doing b. Build your portfolio c. Achieve your goals d. FAQ e. Ready to get started?

选中版块 100’s of Courses 所在的 Text Module, Text Settings – Heading Text — 选中 H2 – Heading 2 Text Color — 选择颜色 #e02b20. 此时 100’s of Courses 的文本为红色.

复制文本格式的方法 1: 在文本所在的框体中, 直接右键, 选择弹出菜单上的 Copy Module Styles, 然后到目标文本上右键 Paste Module Styles.

复制文本格式的方法 2: 具体操作: 先复制 100’s of Courses 所在的 Module Style, 然后悬浮到目标文本 Module 上, 此时显示 module 的外框, 使用快捷键 Option + cmd + V 即可. 不需要左键点击, 点击选中反而不能使用.

有个看上去更简单的的做法, 分析下页面的 Title 文本, 只有 My entire team was prototyping by the end of the first day!, 这段字是 H3 , 粗体, 且间距 1.3em, 其他都是 H2 Title, 所以, 直接通过 Exteneded H2 style 可以将所有的 H2 Title 文本变成同一格式 . 但不推荐这种方法,因为穷举 H3 Title 的格式可能要花很多时间且可能遗漏, 从而导致版面错乱。.

目标 3. 通过操作 Line 短线的 Module 设置, 将页面内所有的颜色 #09e1c0 统一更换为为 #960096.

在任意短线 Divider, 比如版本 Become an expert 的文本, 它下方的短线上单击左键, 选中这个短线形式的 Divider, 在 Module Option 上, 选择 Module Settings, 弹出菜单 Divider Settings. Divider Settings – Line – Line Color — 右键选择 Find & Rreplace, 弹出的弹出 Find & Replace. Find & Replace – Replace With — 输入颜色 #960096, 勾选下方的方框: Replace all found values within every option type, not mited to Line Color, [意思是: 替换所有选项类型中的所有找到的值,不仅限于线条颜色.] 最后点击 Replace 按钮, 实现整个页面 Line 颜色的替换.

Divider Settings – Line – Color — find&replace — 既可以输入颜色 960096, 也可以通过色块搜索, 这是 Divi 主题无比强大的批量操作方式, 在更改预制模板时, 不是方便可以形容的.

目标 4. 微调部分内容

  • 4.1 统一替换 100s of Courses 版块里的各个小版块的 Body Text 文字颜色, 从 #8585bd, 查找替换为 #444444.

选中 Web Development 版块所在的 Blurb Module, 点击 Module Option 菜单上的小齿轮. Blurb Settings – Body text – Body Text Color — 右键菜单选择 Find Replace, 在弹出的 Find & Replace 菜单里, Replace With 处输入 #444444. 在下部的方框里, 勾选 Replace All. 最后, 点击 Replace 按钮, 实现该板块 Body Text 文字颜色全部更改为 #444444.

  • 4.2 将 Web Development 所在的 Blurbl Moudle 里, Image Hue 这项设置值扩展至全部 Blurb 模块.

Blurb Settings – Image Icon- Image Hue — 设置为 93 deg. 然后在 Image Hue 上单击右键, 从弹出菜单中选择 Extend Image Hue, 在弹出框 Extend Styles 中选择如图两项内容, 点击 Extened. 从而实现 Image Icon 的 Image Hue 值, 扩展到当前页面所有的 Blurb 模块.

  • 4.3 Become an expert 版块, 其中的 Divider 形式 Line, 改成 #ffffff, 版块包含的正文部分改为 #ffffff.
  • 4.4. Free Courses 这个 H4 Title 文字更改颜色为 #e02b20, Premium Courses 这个 H4 Title 文字更改颜色为 #cc2b5e.

Become an expert 版块, 选中 Become an expert 文字下方的 Line 短线, 在出现的 Module Option 菜单上, 选择 Module Settings. Divider Settings – Design – Line – Line Color – 选中颜色 #ffffff.

版块 Free Courses: Blurb Settings – Design – Title Text – H4 – Title Text Color – 选择颜色 #e02b20. 版块 Premium Courses: Blurb Settings – Design – Title Text – H4 – Title Text Color – 选择颜色 #cc2b5e.

至此, Service 页面设置完毕.

Contact 页面

目标页面: 通过载入模板, 并修改为如下的 3 个 Section 的页面.

步骤: 自建一个 Contact 内容的 Section, 载入预制模板 Contact 页面, 删除不用部分, 配色调整, 完工.

目标 1. 自建一个 Contact Section 并设置其中的 Call to action 模块

  • 1.1 Section 添加背景图片并设置渐变色 设置渐变色 Gradient, rgba(224,43,32,0.48), rgba(117,58,136,0.65), Gradient Direction 90. Place Gradient Above Background -YES. ImageSection Settings – Spacing – Padding Bottom 40px

当前是 Contact Page 的空白页面, 点击空白区域, 选择出现 Section Option 菜单上的设置图标. Section Settings – Content – Backgound – 选择图片图标 – Add background image — 点击加号上传图片 Section Settings – Content – Backgound – 选择渐变色图标 – Add background Gradient — 点击加号设置渐变色

Section Settings – Content – Backgound – gradient – Select Color — 设置双色渐变色的第一个基色 rgba(224,43,32,0.48). 同样的方法设置第二个基色: rgba(117,58,136,0.65).

Section Settings – Content – Backgound – Gradient Direction — 设置为 90. Section Settings – Design – Spacing – Padding — 设置 Bottom 为 40px.

  • 1.2 添加 Call to action 模块并设置字体
  • 1.2.1 添加 Call to Action Module
  • 1.2.2 在其中增加文本内容, 设置字体并删除背景色

在 Section 中心点击加号, Insert Row – New Row — 选择单列的 Row 输入关键字 Call, 选择 Call to Action 这个 module 在弹出的 Call To Action Settings – Content – Text – Title 标题处输入 Contact, Body 文本处输入 We’re here to help.

Call To Action Settings – Design – Title Text: 设置如下 7 个部分 Title Heading Level: H2 Title Font Weight : Bold Title Font Style: TT 大写 Title Text Alignment: 选择居中 Title Text Size: 112px Title Letter Spacing: 13px Title Line Height: 2.7em

同理在 Call To Action Settings – Design – Body Text 中设置 Semi Bolt, 大写, 居中, 33px. 点击对号保存退出, 至此第一个 Section 设置完毕.

目标 2. 载入 Contact 页面并删除不用部分.

载入的是 Learning Management(LMS) 这个 Layout Pack 中的 Contact 页面.

注: 当前 Divi 版本, 若 Section 页面中没有内容, 那么载入的页面会直接覆盖全部页面, 且没有避免覆盖的选项可以选择.

在 Divi Visual builder option 菜单里选择 Load From Library, 在弹出的载入页面 Premade Layouts 中, 选择 Learning Management(LMS), 在页面展示框的右侧, 选中 Contact 页面. 不勾选 Replace existing content, 点击 Use This Layout 载入预置模板 Contact 页面.

  • 2.1 删除首尾两个 section. 同时删除 SUBSCRIBE 这个 email option module 所在的 Row. 删除 Contact Us 下方的 Divider 短线.

删除 Send us a Message 和 Ready to get started 所在的两个 Section, 同时删除 SUBSCRIBE 这个 email option module 所在的 Row, 删除 Contact Us 下方的 Divider 短线.

  • 2.2 在 Contact Us 版面 增加一个 module, Contact Form Module

在 Contact US 这个模块所在的 Row 上, 点击加号添加一个新的单列 Row. Insert Row – New Row – 选择单列 Row. 在弹出的 Insert Module 菜单中, 输入关键字 contact, 选择 Contact Form 这个 module.

  • 2.2.1 按钮启用设置项 Use Custom Styles For Button, 并设置文本颜色白色. 即时效果是, 包括边框以及字体都变成了白色. Contact Us 下的 body text 设置为白色.

创建 Contact Form 时会弹出菜单 Contact Form Settings, Contact Form Settings – Design – Button – Use Custom Styles For Button — 选择 Yes. Contact Form Settings – Design – Button – Use Custom Styles For Button – Button Text Color — 选择白色. 点击对号保存.

选中 Contact Us 下的文本 Module 并设置文本白色, Text Settings – Text – Text Text Color — 选择白色.

至此, Contact 页面的版面结构设置完毕.

目标 3: 整页的三个 Sction 配色调整

  • 3.1 Contact US 所在版块 Section 颜色 753a88, Gradient, rgba(224,43,32,0.48), , rgba(117,58,136,0.65) padding 上 68, 下 42.

Contact US 所在版块 Section, 空白处单击左键出现 Section Option 菜单, 选择 Setting 菜单, Section Settings – Content – Backgound – Add Background Color — 在鼠标悬停处输入 753a88, 点击后面的对勾设置它.

Section Settings – Content – Backgound – Add Background Gradient — Select Color — 输入 rgba(224,43,32,0.48). 同理输入第二个颜色 rgba(117,58,136,0.65).

Section Settings – Design – Spacing – Padding — 在 Top 一栏输入 68px, 在 Bottom 一栏输入 42px.

  • 3.2 Frequently Asked Questions, 颜色 753a88 Blurb Settings – Image &Icon 问号? 颜色全部替换为 cc2b5e. 文本颜色全部替换为 444444, 完工.

进入 Frequently Asked Questions 所在的 Module 设置菜单, Blurb Settings – Image & Icon – Icon Color — 在该图标上单击右键选择 Find & Replace. Find Replace – Replace With — 输入颜色 #cc2b5e 勾选 Replace all found values within every option type, not limited to Icon Color, 更换当前页面所有同色的元素. 最后点击 Replace, 完成颜色更换.

同理更换所有 Body Text 的颜色, 从 #8585bd 更改为 #44444.

至此, 当前页面的三个 Section 全部设置完毕.

行文至此, Home, About, Service, Contact 四个页面全部设置完毕. 恭喜你, 网站工作已经完成了多半. 下文我们将进行颇为常用的 Blog 设置.

WordPress 自建房系列文章列表:

翟海生:Wordpress 网站自建房实录 – 索引篇 2 赞同 · 0 评论文章 2 赞同 · 0 评论文章2021 WordPress 小白新手建站教程保姆版 – 腾讯宝塔面板建站篇 3 赞同 · 0 评论文章 3 赞同 · 0 评论文章2021 WordPress 小白新手建站教程保姆版 – WordPress 及 主题 基础设置篇 2 赞同 · 0 评论文章 2 赞同 · 0 评论文章WordPress 自建房实录 – DiVi 主题五页面建站篇 (上)0 赞同 · 0 评论文章 1 赞同 · 0 评论文章翟海生:WordPress 自建房实录 – DiVi 主题五页面建站篇 (中)翟海生:WordPress 自建房实录 – – DiVi 主题五页面建站篇 (下)

文章标题:WordPress 自建房实录 – DiVi 主题五页面建站篇 (中)

发布时间: 2021 年 10 月 8 日 – 23 : 55 分

更新时间:

更新版次 : 第 0.5 beta 版

知乎链接: WordPress 自建房实录 – DiVi 主题五页面建站篇 (中)

非商用可任意转载,转载请保存全文信息即可。商用请联系作者获得授权.

赞(0) 打赏
未经允许不得转载:WordPress SelfStudy » WordPress 自建房实录 - DiVi 主题五页面建站篇 (中)
分享到: 更多 (0)

Elegant Themes 旗下 DiVi 主题, 使用最广的主题.

限时折扣

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏