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

写在前面的话:

正如 WordPress 网站自建房实录 – 索引篇 所说, 搭建一个网站, 就像自建房的过程, 它有一些步骤需要完成, 但并没有什么难度.

大体上参考这里写的几篇系列文章, 只要你遵循 “照做” 两个字, 搭建一个和 http://hysen.me 一样的网站, 虽然不是一小时搞定, 但是几天时间是够了.

同时, 你必然同时掌握设置常见的不同页面的方法, 对于自己写个网上简历, 展示下作品, 公司做个简单的介绍网站, 肯定不在话下.

换句话说, 认真跟着做一遍, 建立一个展示站, 将不是个问题, 因为, 你这不就跟着做了一个, 还不算差的网站 (同 http://Hysen.me ) 么.

在你做完一遍的时候, 你的感受必然和我一样, 使用 WordPress 的 DiVi 主题 建站就是个力气活, 没有技术可言.

照做的前提是前两篇的基础文章:

翟海生:2021 WordPress 小白新手建站教程保姆版 – 腾讯宝塔面板建站篇翟海生:2021 WordPress 小白新手建站教程保姆版 – WordPress 及 主题 基础设置篇

下面我们进入正题, 如何使用 Elegantthemes 旗下的 世界知名主题 DiVi, 制作一个五个页面的网站, 示例网站是 http://hysen.me

目录:

一. DiVi 的基本概念

  • DiVi 是什么
  • Divi Builder 是什么
  • Divi Builder 的入口以及三个基础 概念
  • 如何创建 Section,Row 以及 Module

二. 版面设计

  • I. Blurb 设置
  • II. 常用功能之 Module 的复制以及 格式保存
  • III. 调入模板
  • IV. New Section — Full WIDTH 全宽版块
  • 图片之搜索引擎初步优化
  • 1. 压缩图片工具网站 http://tinypng.com
  • 2. 图片搜索引擎优化
  • 3. 按照三分法原则截图, 进一步缩小图片体积
  • V. 本节终章 – 背景图片的渐变色滤镜

配置环境:

一 DiVi 的基本概念:

– DiVi 是什么

Divi 不仅仅是一个 WordPress 主题,它还是一个完整的设计框架和网站建设平台, 可让你从头开始设计和自定义网站的每个部分。

  • 使用 DiVi Builder 这个 DiVi 排版工具, 你几乎可以实现任何想要的页面.
  • 使用 Bloom 弹出窗口构建您的营销列表。
  • 使用 Monarch 社交分享在社交媒体上推广您的网站。
  • 通过 Divi Leads 拆分测试, 增加网站转化率。

上面是 DiVi 官网的介绍, 其实对新手最有用的是, 上述工具全是 Elegant Themes 母公司原生集成在 DiVi 主题里的, 经过广泛的兼容性测试.
这是其他主题和插件所不能比拟的地方. 也就是说, 你在使用 DiVi 这些核心功能时, 不必担心常见的兼容性问题, 或者各种莫名其妙的报错.

– DiVi Builder 是什么

Divi Builder 的全名是 Divi Visual Builder, 字面意思就是 DiVi 可视化编辑器. 这是一个拖放式页面构建器,允许通过组合和排列内容元素来构建几乎任何类型的网站。

上图是 DiVi Builder 在使用过程中的官方宣传截图. 大致如此. 我们现在打开它实际看看.

– DiVi Builder 的入口以及三个基础概念

WordPress 自建房系列文章, 基础文章的第二篇, 2021 WordPress 小白新手建站教程保姆版 – WordPress 及 主题 基础设置篇 中, 我们讲到了 “8. DiVi 主题常规定制”. 接着这里, 我们可以在 Home 页面和任意一个 Pages 中, 找到 DiVi Builder 的入口.

点击高亮的 Enable Visual Builder, 进入 Divi 编辑器, 首先自动弹出的是 Divi 编辑器的 Tutorial, 直接退出, 或者选择 Start Building, 我们会一步步讲解如何创建一个网站.

在这个页面你能看到三个选项:

  • BUILD FROM SCRATCH 全新创建一个页面
  • CHOOSE A PREMADE LAYOUT 从数百个模板库中选择页面
  • CLONE EXISTING PAGE 复制自制已有的页面

我们将从 Build From Scratch 开始, 不仅因为这是基础, 你学会了从 0 开始, 你就可以建造一切页面. 更是因为, 在从 0 开始创建的过程中, 你能看到 DiVi Builder 的强大, 实现无尽的可能性.

点击 Start Building, 选择从头开始创建页面, 不用担心, 我们随时可以选择第二个选项, 使用预制模板快速开始.

首先, 提示几个基本操作, 默认操作, 默认选项
1.. Esc 键可以让大多数当前窗口消失
2.. Cmd + Z 是取消.
3.. 未保存情况下刷新页面, 会从头开始, 回到 Start Building 的位置.
4.. 一般含有可调节选项的内容, 都可以通过悬浮光标, 选择环形箭头图标, 恢复默认值.
5.. Cmd + s 保存当前页面.
6.. 每个设置框下都有回退, 前进, 以及确认保存的选项

记住三个基本概念, 让你一眼看尽 DiVi 网站的页面布局, 只要是 DiVi 的网站, 必然是由三个基础部分构成,

Sections, Rows and Modules , 这是 Divi Builder 三个基础概念, 也是三个基本组成部分.
Section 是最大的构建模块,它们容纳了几组 Row.
Row 位于 Section 内, 用于放置 Module.
Module 被放置在 Row 内, 用于展示具体内容.
上述就是每个 Divi 网站的结构.

下面我们会看到它们三者, 使用同一色系的设置条, 区域线框, 添加按钮; 分别用蓝色, 绿色以及藏青色显示.

– 如何创建 Section, Row 以及 Module

我们从在页面中的一个 Section 开始, 在这个 Section 中, 我们可以有一个三列的 Row, 在这些 Row 中, 每个都有一个 Module 模块.

当你点击 Enabe Visual Builder, 选择 Build From Scratch, 进入 Divi 网页排版工具后. 上图是 Divi Visual Builder 的第一个画面, 默认已经建立了一个 Section, 提示让你插入一个 Row,

共有 20 种 row 布局, 窗口窄只能看到 6 个. 点击 x 关闭.

  • 蓝色 Section
    Section 是 Divi 中可以编辑的最大页面单位, 它把一个网页分成了几个主要区域.

鼠标悬停在下图页面中部的区域, 点击一空白处, 会看到一个蓝色的长方框, 这就是 Section 的部分.

  • 绿色的 Row:
    通过悬浮鼠标在绿色和蓝色两个加号上, 可以看到, 一个是 Add New Row, 一个是 Add New Section. 另一个基本概念 row 在右侧图片.

定位上图右半图, 点击它屏幕正中央的绿色加号, 出现 Insert Row 窗口, 可以看到鼠标悬浮在 3 Row 时, 颜色会变深. 点击 3 row 这项,

此时可以看到新建立的绿色分三栏的 3 row 长方形框架, 这个绿色长方框, 就是第二个基本概念 ROW 的区域, 光标小手悬浮于三个藏青色加号之一, 可以看到 Add New Module 的字样.

  • 藏青色的 Module.
    下图中点击 3 row 框架的第三个 row 中的加号, 会出现 Inser Module 的选项.

Insert Module 这个窗口中, 包含了图片所示的 4 项 b 开头的 Module, 共 38 项 module.

基于 Divi 多年的发展, , Insert Module 的模块越来越丰富, 不仅包含用作简介的 blurb, 还有图文影音文件模块, 商店模块, 社交分享等强大的功能.

而且, 你可以观察看, 这个 Add Module 项目里, 所有的项目都支持通过字母关键字, 索引查找, 这对于忙碌的设计者是个十分贴心的设计, 例如上图中右侧竖线光标前输入的字母 b, 就包含了所有以 b 开头的选项, 例如 Blurb, Blog 等.

我们在 3 row 框架中, 最左侧的 row 中点击添加 Module, 出现了下图 Blurb Setting 的窗口,

点击鼠标所在的对勾, 确认使用 Blurb 这个 module 默认的配置, 光标右侧的斜线双箭头, 是这个窗口的大小拖曳滑块.

Blurb Module 添加后, 我们从上述过程, 就可以看到三个基本概念 Section, Row, Module 的全貌了, 下面进一步说说如何添加它们, 以便你有个直观的对比.

  • 增加 Section, 蓝色的 Section 设置条, 蓝色的 Section 区域边界线. 页面正下方, 长边正中的蓝色加号
  • 增加 Row, 绿色的 Row 设置条, 绿色的 Row 区域边界线. 页面正下方, 长边正中的绿色加号
  • 增加 Module, 藏青色的 Module 设置条, 藏青色的 Module 区域边界线. 它的正下方, 长边正中的藏青色加号

如果我们增加另一类 Module, 一个 Audio Module, 添加一首歌, 在后面 Blurb 的设置步骤中, 可以观察到这个 Audio Module 的设置项的名字很明确的叫 Audio Setting, 里面的一些项目, 也和左侧的 Blurb Module 有一些不同.

删除这个 audio 的 module, 开始设置 Blurb Module 等设置.

万事开头难, 网页布局的这三个概念, 是开始, 也是基础. 看上去有点点难, 只要你把握住三个概念, Section, Row, Module 的关系: Module 包含在 Row 中, Row 包含于 Section 中;
然后创建一个 Module 三次, 基本概念你也就了解了, 也谈不上难了.

二 版面设计

现在我们开始排版的工作, DiVi Builder 类似 Word 的排版工具, 现在有几个人说自己不会 Word 的? 跟着做, 很简单, DiVi Builder 仅仅是一个新的排版工具, 针对网页的排版工具而已.

下面我们从最常用的 Blurb 页面排版开始.

I. Blurb 设置

Blurb 目标页面:

下面开始制作.

Section 的设置

第一步, 设置 Section 的背景色,

在 Home 页面, 进入 DiVi Builder. 光标悬浮到前台页面 Section 的左上角, 会自动出现 Secotion 的蓝色设置条,

鼠标悬浮到蓝色 Secion 的设 置条上时, 光标会变成小手样子, 移动到齿轮, 后面显示 Section Setting 的字样, 单击它.

我们看到, Section 的菜单共三个选项 / 子菜单, 分别是 Content, Design 和 Advanced. 分别对应 [译文: 内容, 设计, 高级],

我们要调节的是 Section 选项中的 Content 项目里的 BackGround 项目, 即背景颜色.

点击 BackGround, 在弹出的 Section Settings 中, 选择 Content – Background – Add Background Gradient [译: 添加背景渐变]

点击光标所在的加号, 会出现两个可以混搭的颜色选项.

通过光标所在的色块选择颜色, 这里第一个选 cc2b5e, 第二个颜色选 753a88. 点击 Content Menu 右下角的对勾, 保存当前颜色设置. 此时, 会发现 Blurb Module 中的文字看不清楚了, 这是因为背景色被改变了. 黑色字体不明显. 点击 Esc 键退出 Section Menu,

我们在 Row 长方框中除了 Blurb Module, 还有两个加号可以添加 Module, 这三个 Module, 它们所在的列称为 Column.

点击选中 Row 所在的绿色长方框, 点击右上角的绿色 Row 设置条的小齿轮, 我们进入 Row Menu 设置. 和 Section Settings 类似, Row Settings 菜单也提供了 Content, Design 和 Advanced 三项子菜单.

在 Row Settings 菜单中, 观察 Content 子菜单中的 Column Structre 选项, 我们看到这个选项内有三个 Column, 每个 Column 设置条上都有小齿轮设置图标, 以及删除的垃圾斗图标.

这三个 Column 对应的是我们在上图中 Row 中的三个 Module, 其中准备设置文字背景颜色的就是 Blurb Module, 其他两个 Module/Column 还未添加, 现在是两个加号.

通过点击 Content 菜单中下方的 Add New Column, 可以把这个 Section 中的 Column/Module 变为 4 个或者 5 个, 如果需要删除, 只要点击对应 Column 选项条上的垃圾斗图标即可. 点击 Row Settings – Content – Column Structure 下 Column 设置条上的小齿轮, 进入 Column Settings 菜单, 依然是经典的三项子菜单, 分别是 Content, Design, Advanced.

仅仅字体背景的改变, 是可以通过 Row Menu 中的 Column 背景色或者 Blurb Module 中的背景色更改的, 这里我们选择更改的是 Row Menu 中的 Column Setting.

Column Settings – Content – Background – Add Background Color – 选择白色

然后你看到左侧的 Blurb Module 描述文字的背景色已经变成白色, 点击子菜单下角的对勾, 保存设置, 点击 ESC 退出菜单.

然后我们可以进入 Module Settings 菜单设置 Blurb Module 的文字, 图片以及图片指向的链接. 点击藏青色 Module Settings 上的小齿轮设置按钮, 进入模块 Blurb Settings.

在弹出的 Blurb Settings 菜单中, 依然可以看到经典的三项式菜单, 分别是 Content, Design 和 Advanced.

在 Blurb Settings – Content – Text -Title 中, 将文章标题 “My Blurb — Your Title Goes Here” 改为: Photography, 同理更改 Body 项目中的文字描述内容如下:

点击两次对勾, 保存更改结果.

Module 中的图片设置

  • 上传你的 Logo 图片:

在 Blurb Settings – Content – Image & Icon 中, 点击空白图片, 选择 logo 文件, 点击 Upload an image 上传 logo 文件.

点击 Upload an image 上传 logo 文件.

Logo 文件出现在 Blurb Settings 中, 点击对勾确认保存. 这样, 现在看到的就是一片图文并茂的 blurb module. 点击 cmd + s 保存结果.

Blurb 的 Title link 的设置

就是当别人点击 Blurb 这个模块时, 会链接到哪里. 我们设置链接到 WordPress 中的一个 Page 页面 – Photography.

在 Blurb Settings – Content – Link 中, 设置 Title link URL 为动态内容的链接 Page Link – Photography.

同时设置 Title link Target 为 In the New Tab, 这是在新窗口中打开的意思. 每次在一个页面设置完毕都单击对勾保存一下.

对 Logo 图片进行编辑

在 Module 设置的 Blurb Settings 出现时, 鼠标悬停左侧 Blurb 上, 会出现三个像毛笔一样的快捷键图标. 这三个小毛笔所在的区域分别对应右侧 Blurb Settings – Image&Icon – Image Rounded Corners , Title Text 以及 Body Text.

  • Logo 图片的编辑

目标: Logo 图像的圆角矩形值: 下角 0, 上角 20px. 图像的边框样式: 底部边框, 颜色为 753a88, 宽度为 10px. 图文内容整体距底边距为 40, 其他三边距为 20.

每设置完一项, 点击对勾保存设置结果.

设置 Blurb 的文字部分

目标:
Title Text 标题字体样式改为大写 标题文本居中
Body Text 正文文本居中 正文文本字体改大一点到 16px 正文文本字母间距增加 1px
尝试调节正文文本的行高, 比如增加一个 0.1 个单位以查看效果

至此, 第一个 Blurb Module 设置完毕.

II. 常用功能之 Module 的复制以及格式保存

如果你感觉这个 Blurb module 不错, 想现在复用, 那么可以 Module Settings 设置条中, 通过点击 Duplicate Module 按钮复制两个. 为了展示方便, 下图是三幅设置的合成图,

  • 最左侧是标示 Duplicate Module 操作按钮的, 初始 Blurb Module,
  • 中间是复制出来的 Module, 背景色需要改成白色. 拖动它位置方法是通过 Move Module 这个按钮.
  • 最右的 Module 设置, 是需要更改背景, 所采用的方法是 Row Setting – Content – Column Structure – 第二个 Column 设置. 在其中选择这个 Colume 的背景色为白色. 点击对号保存结果.

同样的 Column 背景设置为白色的方法 , 调整第三个背景为白色, 这样就看到了三个同样效果的图片.

PS: 复制完成后, 有三个 Blurb Module 是从上到下一顺儿排列的, 拖动的方法是通过上图中间 Move Module 这个按钮. 我拖了 10 次才有这个结果, 所以, 别气馁, 你并不孤独.

最终, 我们看到了整整齐齐三个 Blurb 并排显示的结果: 完成了我们初期设定的目标.

点击上图中的 Wireframe View [译: 线框视图], 可以看到你在设计过程中迷路时很有帮助的版面结构. 可以一次点击左下方悬浮菜单上的选项, 查看包括电脑, 平板以及手机视图的效果. 通过快捷键 cmd + 和 cmd – 可以依次按序展示版面.

点击页面底部正中央的 “”三点圆饼”” 图标, 可以收放整个底部菜单. 在线框视图下, 最方便操作调整的是 Section, Row 和 Module 的菜单.

在 Zoom Out 模式下, 整个页面会缩小, 你可以方便的通过 Row Setting 设置条, 点击 Duplicate Row 按钮复制整个 Row, 从而看到 6 个 Blurb Module.

III. 调入模板

底部 Divi Visual Builder option 菜单, 底部菜单一共有六项,
终于做完一个简版的 Blurb Module, 我们已经有了一个初步的页面, 下面看下能极大提高效率的, 通过模板来设计页面的方法.

具体步骤:

1.. Load From Library, 从库中加载

点击加号. 这里可以加载上百个 Divi 制作好的模板页面, 有餐饮, 摄影, 作品, 简历, 以及公司简介.

2.. Save To Library . 保存当前工作, 即将当前页面保存到库, 同时对比最后的 Potable 保存当前页面布局到文件的选项.

  • Layout Name: 自己为当前保存的布局起个名字
  • Creat New Category: 为了管理方便, 为上面的内容创建一个目录

上图中的二者, Save/Add to Library 是保存到当前网站的布局库中, 位置在 Your Saved Layouts 标签中. Portability 是保存布局文件到本地硬盘.
如何导入本地硬盘的 Layout 文件? 见最右图片, Portablity Import 导入页面布局文件的方法: Divi Visual builder option – Portaility – Import – 选择 Layout 文件 – 点击 Import Divi Builder Layout 按钮, 完成导入.

通过之前保存好的, 页面布局文件导入后效果如上. 这样你设计的东西, 可以很方便的复用, 或者给别人使用.

3.. 删除按钮, 可以把当前页面清空.

4.. Page 设置按钮, 后面会讲到它的具体用法, 下面是它经典的三菜单

Divi 相对于其他主题, 最罕见的特色之一是, 官方内置了 Split Testing, 这个功能包含大名鼎鼎的 A/B 测试. 它能让你知道你的页面哪些东西对用户是无用的. 常见的用法就是, 你能知道那种类型的页面, 或者哪种颜色, 能带来更高的销售收入. 如果你有一个真正可以商用的网站, 你会爱死它的.

5.. 编辑的历史记录

你可以看到自己最近的多次编辑记录, 点击其中的一个, 就可以回到那一步当时的状态. 这算是第三种方法让你可以吃颗后悔药, 前提是没有使用快捷键 cmd+s 或者页面最右下角的 Save 按钮.

6.. Portability 按钮, 见第二项 save to library.

至此, DiVi 底部菜单的简介完成

IV. New Section — Full WIDTH 全宽版块

Full Width Section 目标页面: 为 Home 页面准备

苹果官网首页, 图片部分是典型的 FUllWIDTH Setcion. 它横贯整个页面宽度, 能让视觉冲击力最大化.

下面我们要实现的是这样一个版块, 样貌如下: 我们要经过创建 全宽 Section – 全宽 Module 两个过程实现它.

1. 全宽 Section

在主页页面中, 使用 Divi 构建器选项菜单上的删除按钮, 清空所有页面, 创建一个新的全宽 Section 版块.

点击选中 Section 的蓝框, 再点 Section 的蓝色加号, 选择 Fullwidth 按钮, 从弹出的共 9 种 Module 中. 选择 Fullwidth Header.

下图就是新建的 FullWidth Header 的 Module. 常用于吸睛的公司或个人故事简介.

例如: 如何向你的网站客户说明你是干什么的呢, 比如我想在一个背景视频中展示我可以做什么,然后我想有一段文字介绍, 我可以为我的潜在客户提供什么,并促使他做点什么,了解更多关于我们的服务, 或与我们取得联系,当他们考虑选我们的服务. 就可以使用 Fullwidth Header 模块.

这个刚建立的 FullWidth Header 是一个贯穿页面的图文框, 其中也可以增加视频. 每一个小毛笔的编辑图标对应着 Module Settings 菜单中的快捷选项.

2. Full Width 模块 / Module

下面我们可以看到这个模块 FullWidth Header[译: 全宽标题], 也是经典的三项式菜单, 分别是 Content, Design, Advanced

设置位置: Section – 选中 Fullwidth Title 所在的 module – 悬浮光标并选择 Module Option 菜单的设置图标 – Fullwidth Title 的菜单.

设置目标:
1.. 更改 Title 为 Let Us Tell Your Story ..
更改副标题为 Subtible 为 Rebranding | Marketing | Web Development ..
增加两个按钮, 一个是 Learn More, 一个是 Contact.
2.. 删除全部正文描述. … 调节背景颜色为 753a88, cc2b5e. 参考 ” 设置 Section 的背景色, 方法相同
3.. 为 Module 使用背景图片.

上图是 module 设置内容的关键三个步骤图片, 下图是设置完毕的样子. 其中用图来自 https://pixabay.com/

3. 全宽模块采用视频

这是视频背景图, 截图明暗两幅对比看. 我们最终要完成的是下面页面的效果, 包括鼠标悬浮在 Contact 有相应的图标.

设置位置: Section – 选中 Fullwidth Title 所在的 module – 悬浮光标并选择 Module Option 菜单的设置图标 – Fullwidth Title Settings 菜单.

设置项目:

  1. 两种视频上传方式, 一个是本地视频文件, 一个是 知名视频网站的网页链接.
  2. 设置 button 链接到 Page 页面: button1 -> about, button2 -> contact 链接打开方式为在当前页面.
  3. 给视频增加滤镜 a6a6a6 并调节透明度到 rgba(166,166,166,0.74)
  4. 开启 Scroll Down Icon, 大小 33px
  5. 居中布局, Title 字体大写增大到 65px, Sub Title 到 32px. Subtitle line height 到 1.1em 尝试调节 sub title 字间距.
  6. 编辑 button 1 的圆角程度到 4px, 更改 button2 的图标为 Email 图标. 测试关闭 button 自定义, 效果消失. 尝试更改 button 颜色, 边框厚度. 尝试在 TItle 文字上直接更改文字内容
  7. 上传视频到网站的方法有两个:

a. 上传视频文件;

设置位置为: Fullwidth Title Settings – Content – BackGround – 第四项视频图标 – Add Background Video

选好视频文件后, 点击 Upload a Video 即可.

b. 使用视频网站的链接.

选择 Insert from URL, 填写视频网站, 例如优兔网的 CCTV 美丽中国视频 《美丽中国》小熊猫跟妈妈学爬树 Amazing China-Tree Climbing Lesson | CCTV 纪录

点击页面右下角的 Insert to post 即可.

使用视频链接效果是一样的, 但从稳定性考虑, 无论国内国外, 不推荐视频链接, 因为这是第三方的提供商, 不确定因素过多, 都可能导致视频不可用.

2.. 设置 button 链接到 Page 页面

Button1 “”Learn More” 设置步骤

点击两次对号保存当前结果.

Button 2 “Contact” 同样方法选择到 Page Link 的 Contact 页面即可.

最后点击 cmd + s 保存页面结果并生效.

3.. 给视频增加滤镜 a6a6a6 并调节透明度到 rgba(166,166,166,0.74)

在第一幅图的位置输入色号 #a6a6a6, 在第二幅图最右侧的滑竿, 调节上下到 rgba(166,166,166,0.74). 点击对号保存, 点击 cmd + s 生效.

4.. 开启 Scroll Down Icon, 大小 33px

按图设置, 在图标选择是留意实际页面的图标变化. 保存并让页面生效.

5.. 字体调整

整体布局居中. Title 字体调整增大到 65px, Sub Title 到 32px. Subtitle line height 到 1.1em 尝试调节 sub title 字间距.

在 Layout 中选择居中的图标, 保存并使之生效.

通过下图, 我们可以看到字体调整的各种可能性, 是这个实录的插曲. 分别是 Title Font Weight 为 Bold, TItle Font Style 为斜体, 下划线, 首字母大写, 下划线标记颜色.

好, 取消上述设置, 开始本节的设置任务,

5.. Title 字体调整增大到 65px, Sub Title 到 32px. Subtitle line height 到 1.1em.

6.. Button 1 和 Button2 的调整

a. 编辑 button 1 的圆角程度到 4px, 更改 button2 的图标为 Email 图标. b. 测试关闭 button 自定义, 效果消失. c. 尝试更改颜色, 边框厚度.

按图设置, 设置完毕, 点击保存并退出.

至此, Module 以及首页 Full Width Header 的设置完毕.

图片之搜索引擎初步优化

在网站搭建过程中, 不可避免的, 我们要谈及到图片的体积压缩, 以及不损失画质压缩图片所带来的好处. 并要对图片进行搜索引擎优化,

  • 第一步是缩小体积.
  • 第二步是名称及描述优化.

最终呈现的目标页面如下, 这节实录的图片体积从最初的 606k 到了 285k . 体积缩小了 2 倍, 从某个角度讲, 你的网站比最初可以多两倍的浏览人数.

目标:

  1. 通过 http://tinypng.com 缩小图片体积
  2. 图片的搜索引擎优化, 给图片命名 Rebranding Marketing ShangHai, 在 wordpress 中增加图片的关键字描述: View of the WaiTan, Pudong New Area, Shanghai, China
  3. 什么是三分法
    使用三分法截图并让背景图片生效.
  4. Overlay 依据所需色系以及文字清晰度选择你所需的效果

1.. 压缩图片资源 http://tinypng.com

正如网站的标语, 这是一个智能的 PNG 和 JPEG 压缩器, 免费用户每个图片体积上限是 5m, 一次最多上传 20 张.

这是上海外滩的一张外景图片, 体积 606k. 点击 choose 上传图片.

处理结果是 284.6k, 比原来小了 322k, 整整压缩了一倍多, 要知道这是本身就具有高压缩比的 jpeg 图片, 十分难得, 且画质基本没有变化. 点击光标所在的 Download 下载即可.

2.. 搜索引擎优化

  • 给图片更名,

从原来的名字更改为 Rebranding Marketing ShangHai.jpg , 这样更名后, 别人在搜索相关关键字时, 你的图片就会被搜到, 进而你的网站就更容易被别人看到.

  • 上传图片并添加相关描述.

上传入口: 找到 Section – 选中 Fullwidth Header 所在的 module – 悬浮光标并选择 Module Option 菜单的设置图标 – Fullwidth Header Settings 菜单.

上传背景图片具体位置为: Fullwidth Title Settings – Content – BackGround – 第三项图片图标 – Add Background Image – upload files – Select Files – 选中图片并上传

如上具体步骤的设置图片见: “2. Full Width 模块 / Module”

点击 Upload an image 上传图片. 这样你可以看到未优化前的页面. 外观一致, 速度大不同.

3.. 按照三分法原则截图, 进一步缩小图片体积

什么是三分法: 三分法,有时也称作井字构图法,是一种在摄影绘画设计等艺术中经常使用的构图手段,这是最基本又最稳妥的构图手法,一般情况下都适用。在这种方法中,摄影师需要将场景用两条竖线和两条横线分割,就如同是书写中文的 “井” 字。把主体放置在分界线或点上,又或将画面以三份作分配,使主体突出之余,亦保留了恰当的空间感,让人看得舒服。另外,如果把空间分成三份来分配,也会得到很舒服的效果。这是在一般风景摄影建筑摄影常用的构图法 [1]。当代的智能手机摄影 App 大多配备三分法构图辅助线 [2]

进入网站后台设置图片 Dashboard – Media – Library

点击 Edit Image 编辑图片.

通过上图的 Crop 启动截图框, 选择区域完毕后再次点击 Crop, 才可以点击 Save 保存. 图片大小直接影响你网站的呈现速度, 这个直接影响访者体验.

另外, 在图片右侧 New dimensions 中也可以输入相应的数值, 比如 1920 x 1080 并截图, 因为截取的始终都是原图的一部分, 所以, 也可以减小图片的体积.

图片保存完毕后可以看到, 从 285k 进一步减小到 213k, 另外, 通过图片文件链接 Files URL, 你可以从网站下载图片.

最后, 调节 Overlay, 依据所需色系以及文字清晰度选择所需的效果,

位置: Fullwidth Title Settings – Design – Overlay.

至此, 图片初步优化完成.

V. 本节终章 – 背景图片的渐变色滤镜设置

目标:

  1. 通过按钮 1 去往 about 页面, 通过 Logo 图标回到 Home 页面.
  2. 在背景图片上设置渐变色. Gradient Direction 设置为 0

1.. 通过按钮 1 “Learn More” 去往 About 页面, 通过 Logo 图标回到 Home 页面,

  • 参考本文 “3. 全宽模块采用视频” 中的第 2 点, “2.. 设置 button 链接到 Page 页面”, 进行设置

至于点击 Logo 图标 “Hmedia” 回到首页, 在基础设置文章 https://zhuanlan.zhihu.com/p/416385580 中, 调整 WordPress 菜单这一部分.

当前页面, 点击 Learn More 会去往之前设置的 Button 1 — About 页面. 到达 About 页面后,

点击 Logo 图标 Hmedia. 会回到首页 Home, 也就是上图.

2.. 在背景图片上设置渐变色.

目标页面要达到的效果:

背景素材规律: 位置 Content – Background 的 4 项, 背景纯色, 渐变色, 图片, 视频依次排序, 右侧会覆盖左侧. 反过来不行.
a. 因此在背景图片上实现渐变色滤镜, 需要选择打开一个特别的选项: Place Gradient Above Background Image. b. 解决渐变色作为背景图片的滤镜, 必须先分别选择渐变色系 cc2b5e 和 753a88, 再调节透明效果, 才能达成双色渐变效果. Gradient Direction 设置为 179

位置: Content- background- gradient 给背景图片附上渐变效果. 可以设置透明度. 这是 overlay 无法实现的.

点击 Add Background Gradient 后, 才能选择 Place Gradient Above Background Image, 先设置 Gradient Direction 为 179.

双色渐变色的第一个颜色为 #cc2b5e, 在设置页面的左下角选择 Select Color 后就可以输入颜色的 16 进制数字.

设置第一个颜色为 #cc2b5e 后, 先设置透明色滑块到 rgba(204,43,94,0.49), 然后在设置框的右下角选择 Select Color 设置第二个颜色 #753a88, 紧接着设置 rgba(117,58,136,0.49). 点击对号保存, 设置完毕. 最后 cmd + s 让设置生效.

至此, 页面的第一板块设置完毕, 下一章开始设置其他的板块.

恭喜你, 首页工作已经完成了大半. 下面我们将进行, WordPress 自建房实录 DiVi 主题五页面建站篇 (下).

WordPress 自建房系列文章列表:

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

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

发布时间: 2021 年 10 月 7 日 – 21: 21 分

更新时间: 2021 年 10 月 7 日 – 23: 21 分

更新版次 : 第 0.51 版

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

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

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

限时折扣

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

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

支付宝扫一扫打赏

微信扫一扫打赏