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

看到这里时, 其实你已经创建了一个全新的 WordPress 展示站, Blog, 即博客文章列表, 并不是一个网站中必须的.

开办一个网站, 说明你是谁, 你提供什么服务, 你的作品有哪些, 这些是必要的内容.

现在, 你回头看 WordPress 网站自建房实录 – 索引篇 中所做的类比, 搭建一个 WordPress 网站, 是不是就像在老家自建房. 它有一些步骤, 但远远没有你想象的那么难, 甚至可以说, 建站, 仅仅是个力气活, 没有技术可言.

在搭建过程中, 你要付出的主要是汗水, 如果是看我写的这几篇文章, 足以确保你搭建一个一模一样的网站起来, 核心只有两个字 “照做”

万事皆有开头, 开头是最难的, 也不要指望一上来就和教程完成的完全一样, 你只需要照猫画虎即可, 有了这个 “虎” 形, 你才可能最终画出自己的 “虎”.

建站很难么, 功能完善的网站, 确实很难, 难到需要一整个团队, 半年才能出一个成品; 但也可以很容易, 像我们这样建一个展示站, 照做, 几天就可以了.

但是, 即使有一步电梯出现在你面前, 你需要做的, 必须包含迈出第一步, 在这个系列文章中, 第一步就是 2021 WordPress 小白新手建站教程保姆版 – 腾讯宝塔面板建站篇 , 先有这个基础, 你才能走到现在, 最终, 你会看到 http://hysen.me 这样的网站在你的手中诞生.

当然, 有各种高端人士会写高端标题 “一小时搞定 xxx”, 你去看, 去做, 如果 10 小时还没搞定, 欢迎你回来看我这个, 需要几天时间的 WordPress 自建站安装实录, 确保你只要照做, 即可做一个一样的网站出来.

现在, 我们进入到系列文章的最后一篇, 如何在 DiVi 主题中创建博客文章, 下面进入正题.

目标页面 : 创建 如下图所示的 Blog, 其中包含 6 篇 POST 文章, 即常说的博客文章.

目标 1: WordPress Blog 相关基本设置:

  • 1.1 设置 Blog Page 这个页面显示 Post, 及博客文章
  • 1.2 给 Post 文章分为两类: Self Improvment 以及 Other
  • 1.3 设置 WordPress 中 Link 的颜色为 #2F7BCB.
  • 1.1 设置 Blog Page 这个页面显示 Post, 及博客文章 Dashboard – Settings – Reading – Your homepage displays – A static page – Post Page — 选 Blog . 点击 Save 保存设置.
  • 1.2 给 POST 分类为两类: Dashboard – Posts – Categories – Add New Category: name 中输入 Other slug 中输入 other 点击下方按钮 Add New Category, 这样就增加了一个 Other 类别, 在右侧分类列表可以看到结果.
    同理增加 Self Improvement 类别.
  • 1.3 设置 WordPress 中 Link 的颜色为 #2F7BCB.

网站前台, 任意页面, 比如 Contact 或者 Blog 页面. 左上角 Site Title 处 悬浮鼠标指针. Site Title – Theme Customizer – General Settings – Typography – BODY LINK COLOR – #2F7BCB. 输入后点一下回车, 确认颜色变化后, 再点击上方的 Published. 设置完毕.

目标 2. 发布六篇 Post 文章

  • 2.1 创建第一个 POST , 名称: How to Expand Your Influence
  • 2.2 创建第 2 个 POST, 含有视频, 图片和文章链接及其他设置, 名称为 How do you Spend Your Time in Life.
  • 2.3 创建总计 6 个 Blog(包含之前的两篇 POST), 给文章分类, 并使用 Featured 图片, 最后用随机拉丁文填充.
  • 2.1 创建第一个 POST , 名称: How to Expand Your Influence

如上图所示, 常用创建 Post 的方式有两种. 如果你在网站首页, 悬浮光标到左上方的 New — 选择 Post. 如果你在网站后台, Dashboard – Posts — 点击 Add New.

创建之后, 点击 Use Default Editor , 使用默认编辑器.

上图是 Blog 编辑的页面, 已经填入文章标题及随机拉丁文的文字.

左侧是文章标题和文章内容, 右侧上方设置小齿轮, 单击可切换全屏编辑, 还有 Post 和 Block 双标签页菜单. 最右上角的三个小点是 POST OPTION 菜单.

  • 2.1.1 右侧 Post 标签页中, 设置两项: Categories — 选择 Self Improvement Featured image — 上传当前 POST 文章的标题图片.

最后, 点击 Publish 发布文章. 一篇带标题图片的博文就发布成功了. 此时, 在 http://hysen.me/blog 下可以看到刚刚发布的第一篇 Post: How to Expand Your Influence

  • 2.2 创建第 2 个 POST, 含有视频, 图片和文章链接, 名称为 How do you Spend Your Time in Life.
  • 2.2.1 填入文章标题及全部所需文字内容.

2.2.2 加入第一张图片.

光标悬浮在两行文字之间的空白处, 会出现 add block 的菜单, 点击它

  • 出现了包含 6 个项目 Paragraph, Heading, Image 等的菜单, 如果想查看全部菜单, 点击黑底白字的 Browse All, 里面共有 66 项 Blocks.

在众多 Blocks 中选择 Image, 然后选择从 Media Library 上传图片.

在 wordpress 5.6.2 + Divi 4.9 版本中, 共有 66 项可以添加的 Blocks. Text: 11 项 Media: 7 项 Design: 7 项 Widgets: 11 项 Embeds: 30 项
概念: WordPress Gutenberg 编辑器中的 BLOCKS.
在 Gutenberg 中, 文章是由一个个 blocks 构成的, 其中包括常见的 段落 blocks, 图片 blocks, 视频 blocks 等 66 个 blocks.
WordPress 中的默认编辑器名字叫做 Gutenberg, 早年使用量最广的经典的编辑器, 将于 2021 年年底不再支持. The Classic Editor plugin will be officially supported until December 31, 2021

图片上传后, 光标悬浮到图片上, 会出现横条编辑菜单, 选择 Change alignment 项目中的 Align right, 将图片向右对齐. 图片上方横条编辑菜单中的上下箭头, 单击 Move Down/up 可以上下移动图片的位置.

图片左侧和底线正中央的原点可以拖动编辑图片大小. 图片上方横条编辑菜单中最右侧的三个小点, 点击是下拉菜单, 最下方是 Remove block, 用于删除当前的 Blocks, 包括所有的 66 种 blocks 都可以这样删除, 图片, 段落等.

  • 2.2.3 同理添加第二张照片 (操作见上图最左图), 向左靠齐. 视排版需要上下调整图片的位置.
  • 2.2.4 加入文章链接:

选中你想链接的文字 How to expand your influence, 在弹出的菜单中点击 Link 图标, 在出现的输入框中输入 关键字 influence, 下方会出现之前的, 第一篇建立的 Post 链接, 选中它, 链接完成. 链接效果见上图最后一张图片.

  • 2.2.5 加入视频 Blocks

光标悬浮在两行文字之间的空白处, 会出现 add block 的菜单, 点击它, 输入关键字 Video, 在下方六项菜单中, 选中 Video. 在出现的 Video 菜单中, 选择从 Media Library 上传视频.

视频上传完毕后, 上方的横幅菜单, 除了可以通过上下箭头 move up/down 移动视频 blocks, 还可以通过光标所在的 Drag 图标拖动.

  • 2.2.6 设置一个含有 H4 标题的列表项
  • 2.2.6.1 设置 H4 标题 blocks 选中文字 Read More, 在光标小手所在的 Change block type or style 下拉菜单中, 选择标题字体, 随后按图中所示, 选择字号为 H4.
  • 2.2.6.2 设置 List blocks 全部选中下方的 6 篇文章题目, 在 Change block type or style 下拉菜单中, 选中 List

选中 H4 标题 Read More 和 6 篇文章构成的 List, 此时通过上下菜单可以将它们整体上下移动.

  • 2.2.7 其他设置

右侧 Post/Block 菜单设置如下五项.

  • Categories — 选择 Self Improvement
  • Tags — 输入 life, meanning. 中间敲击回车键间隔.
  • Featured image — 上传当前 POST 文章的标题图片
  • Excerpt — 输入文章概述内容
  • Discussion — 去掉如下两项之前的对勾, Allow comments 以及 Allow pingbacks trackbacks.
  • 2.2.8 发布 最后通过上方的 Publish 菜单发布. 一个包含常见编辑项目, 文字, 图片, 列表, 视频的 Post 就制作完成, 恭喜你.
  • 2.3 创建总计 6 个 Blog(包含之前的两篇 POST), 给文章分类, 并使用 Featured 图片, 最后用随机拉丁文填充.

博客文章名称分别为:
How to Sell 10,000 Copies of Your Own Time — 这三篇分类至 Self Improvment
How to Expand Your Influence
How do you Spend Your Time in Life
Why use WordPress — 此三篇分类至 Other
Why We use DiVi for Web Design
Top 10 Best Hosting Providers for DiVi

Tips: 如果碰到 无法刷出 Blog 的问题, 先在后台 Reading 中设置 blog 显示为空, 保存后再调整为 blog, 然后保存. 刷新几次即可.

目标 3: 取消如下四个小部件 Widges. 更改小部件 Categories 的显示内容

a. Search 搜索框

b. Recent Comments

c. Archives

d. Meta

通过之前的设置, 如右侧光标所在的 Sidebar 部分, 和本文当前的目标 Blog 页面对比, 你会发现右侧小部件菜单默认多 4 项. 这些小部件称为 Widgets, 下面我们去掉它们, 并更改 Categories 的显示方式.

网站后台设置: Dashboard – Appearance – Widgets – 页面右侧的 Sidebar 点击小部件项目 Search, 选择 Delete. 同理删除 Recent Comments, Archives, Meta 三项 Widgets. 在 Categories 中, 选中 Show post counts.

至此, WordPress 内置的 Blog 页面设置完毕. 打开你的域名 / blog, 在这里是 http://hysen.me/blog, 你可以看到初期我们设置的目标实现了, 共六篇博文.

最后, 留一个小作业. 如果你喜欢 http://hysen.me/blog 现在的版面, 在 Module 设置中, 将 Layout 由 Full width 改成 Grid 即可.

至此, WordPress 自建房实录 – DiVi 主题五页面建站篇, 上中下三篇全文完. 你已经可以很轻松的设计一个如 http://hysen.me 一样的展示站了,

如果你使用 Woocomerce, 可以进一步设置为独立电商网站. 使用数以千计的 WordPress 插件, 你还可以得到各种用途的网站.

我的工作就到这里, 我的初始目标, 就是解决 WordPress 建站从 0-1 的问题, 至于 1-100, 有太多的方案和教程可选. 希望你的 WordPress 之旅充满了期待, 祝你好运.

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

发布时间: 2021 年 10 月 9 日 – 20 : 55 分

更新时间:

更新版次 : 第 0.5 beta 版

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

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

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 主题五页面建站篇 (中)

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

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 版

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

2021 WordPress 小白新手建站教程保姆版 - WordPress 及 主题基础设置篇

WordPress 及 主题基础设置篇

上一篇文章 2021 WordPress 小白新手建站教程保姆版 – 腾讯宝塔面板建站篇, 写了搭建 WordPress 网站要解决基础问题, 涉及到网站装修前的关键问题. 包括选地址, 买地皮到打地基, 搭框架 (房子主体). 最终把一个 WordPress 网站基本搭建了起来. 虽然步骤较多, 但跟着这个 “WordPress 网站自建房实录 ” 系列文章做, 建站只是个力气活.

大多数文章提到的搭建一个 WordPress 网站, 就是上面完成的部分, 这只是房子主体搭建起来, 完全不能住人的.

看看, 它长这个样子:

就好像一个人从衣不蔽体 (没有自有网站) 到了麻袋片裹身 (WordPress 初步安装完成) 的阶段.

下面我们要解决的, 是 WordPress 的外观基础框架. 它的直观表现之一, 就是网站外观结构变化.

和右侧 DiVi 主题建设的网站对比一下看看, 是不是相差很多.

下面我们分 8 步完成基础设置. 我们会使用英文版 WordPress 及 DiVi 主题, 原因有三:

  1. WordPress 出自英语国家, 原生英文.
  2. 学习国外的新技术, 在可能的情况下, 尽量使用英文, 因为大量的术语和概念是英文的, 何况有人带着你做.
  3. 为了解决未来可能出现的各种问题, 你必须熟悉英文, 并使用英文搜索, 才可能找到精准的答案. 可以参考的例子是 Google 英文和百度中文搜索结果的对比, 从长期来看, 说二者天壤之别并不为过.

就像练习最基础的打字, 你最开始应该熟悉的, 必然是 26 个英文字母, 原因显而易见, 键盘是英文字母构成的.

下面进入正题: 如何做基本的 wordpress 设置, 以及 DIVI 的常见配置.

配置环境:

相关问题: 如何检查 “WordPress 网站自建房” 系列文章中涉及的软件是什么版本?

通用 wordpress 设置

1. WordPress 初始安装

我的域名是 www.hysen.me, 在你做完了上篇腾讯宝塔建站篇的这个步骤:8.2 通过软件商店中的 “一键部署” 安装 WordPress.

WordPress 第一次登陆, 可以看到如下 wordpress 设置的初始页面. 输入自己的域名后会自动跳转到 http://hysen.me/wp-admin/setup-config.php.

点击 Continue, 提示需要设置的项目, 包括最重要的 mysql 数据库用户名, 密码等.

点击 Let’s go! , 安装完 wordpress 后, 第一次登陆的链接是 http://www.hysen.me/wp-login.php, 输入之前设置好的三项, mysql 的数据库名字, 以及账户, 密码, 其他按照默认即可.

点击 Submit, 提示安装完成, 这意味着你之前的设置是正确的.

点击 Run the installation, 进入 wordpress 站点以及登录信息内容填写. 做登录前的最后准备.

填写完毕后, 选择 install wordpress, 出现安装成功的提示:

至此, wordpress 程序安装完成

2. WordPress 后台概览

点击 Login, 登录日常 wordpress 登录网址: http://hysen.me/wp-login.php, 或者 http://hysen.me/wp-admin 输入安装 wordpress 程序时设置好的账号和密码, 即可登录 wordpress 的后台 / BACK END.

前台 FRONT END 和 后台 BACKEND 可以简单理解为, 前台就是大家日常正常访问的网站. 后台就是这个网站的管理工具集合.

点击 Log In, 你登录后你看到的第一个页面是 wordpress 的后台, 里面包括帖子文件管理, 帖子设置, 外观选择等重要内容.

第一个很重要的地方是切换前台和后台的位置, , 在截图的小房子图标位置.

点击那个小房子一下, 就切换你网站的前台, 这是初始的默认 POST 页面, 所有的 wordpress 模板第一个页面都是它, Hello World! 再点击一下, 它就又回到网站后台

这时, 你会注意到, 第一次完整的显示你的域名 http://hysen.me , 这个模板是 wordpress 自带的模板, 名字为 twenty twenty 展示的页面, 并不是我们的 DiVi 主题. 在后面, 我们会讲解如何导入 DiVi 的主题文件. 现在我们解决的是 WordPress 的基本设置.

3. WordPress 安全瘦身

默认插件

下面我们删除默认插件, 流程是 先禁用, 再删除.

插件 plugin, 是一种工具, 能给网站带来更多的功能.

点击方框, 选中所有插件, Bulk action – Deactivate, 然后点击右侧的 Apply 按钮.

然后再次 Bulk acticions – Delete. 这样全部插件就删除空了.

– POST and Pages

删除原有的所有的 Posts 以及 Pages.

点击方框, 选中所有 Posts, 点击 Bulk action – Move to Trash, 然后点击右侧的 Apply 按钮.

点击进入 Trash, 准备清空里面的废弃项目

点击 Empty Trash, 清空废弃项目

同理清除 Pages 中的内容, 方法完全一致.

至此, 需要清空的项目已经全部结束, 下面进入 Howdy 信息, [‘Howdy‘ is an informal way of saying ‘Hello’.]

4, Howdy 信息更新

Howdy 信息是有关网站描述的基本的内容, 需要斟酌填写, 这些信息有助于背书, 增加网站信任度.

光标悬浮于 Howy, Hysen 处, 选择 Edit Profile, 即可进入 User 信息更新页面, 同时, 如果你选择点击 Hysen 或者 Edit Profile, 也可以进入.

我相信你已经留意到了, 我们可以通过点选颜色 Ocean 改变 wordpress 后台的视觉效果.

如上信息可以参考填写. 其中 Profile Picture 这里的图片需要在 Gravatar 注册才可以使用, 香港及海外服务器推荐使用, 中国内地不推荐用, 因为会拖慢整站速度.

项目 New Password 用于, 在你需要更新 WordPress 后台密码的时候.

点击 Update Profile, 完成 Howdy 资料更改.

下图是 GRAVATAR 官网.

点击 Dismiss 关闭 Welcom to WordPress 信息

点击小三角图标, 将 5 个项目都收起来, 腾出空间, 这样会看上去清爽很多.

5. 站点信息更新

位置: Setting – General 设置

点击 General, 进入 General Settings, 开始设置后台最重要的项目 Site Title: 这里的关键字决定了别人以什么关键字搜索到你.

比如你是做摄影的, 别人一般不会以 Hysen Media 这样的公司名去搜索你, 多数是用关键字比如 Phtographer 去搜索. 如果你希望别人在搜索关键字时, 必应或者百度中能在头几页显示你的结果, 那么请在 Site Tile 的最左侧写上你想用的关键字, 其他的放右边.

Tagline 项: 用一句话说明你是干什么的. 这个对于浏览者快速定位你的网站非常重要.

下面是基本的信息, 包括语言, 时区, 日期和时间的格式. 如无特定需求, 所有设置建议默认.

General 项目内容更改完成, 点击图片最左下角的 Save Changes, 保存更改.

箭头所指的位置, 我们看到的格式是 http://hysen.me , 而不是 https://hysen.me, 这意味着这个网站在浏览器中会提示不安全. 这是独立的 HTTPS 证书问题, 且有多种解决方案, 而它并不影响你的网站上线. 谷歌或百度高级搜索相关关键字可得答案. 在后面基于宝塔面板, 以及 LiteSpeed Web Server 会分别讲解如何启用 HTTPS/SSL certificate.

至此, 常见的 WordPress 项目已经设置完毕.

6. 为网站添加文章以及目录.

现在, 我要为网站增加一些内容, 就是添加几个 Pages 和 几篇 Posts 到网站. 当前的内容如下图, 首页是光秃秃的一片.

正确的顺序是先添加 Pages, 再添加 Posts.

对于我们涉及的展示用 WordPress 网站, Pages 代表的是菜单项 / 目录, Posts 就是一篇篇的文章.

本节目标页面: 在增加 Pages 和 Post 这一小节, 我们将实现的前台页面是这个样子的, 注意右上角 8 个菜单项.

设置好以后的八项 Pages, 在后台呈现如下, 所有 Pages, 包括目前 Home, About 等全部 8 项在这里可以看到.

Page 创建的顺序就是在 http://hysen.me/ 首页, 从左向右显示的顺序, 因此, 多数情况下, 你需要依次创建 Home – About- Service – Blog – Contact.

Home, 也就是常说的主页, 是别人进入你网站时默认出现的页面. 每个人的时间都很宝贵, 主页是你展示网站的最关键的页面, 如果它不够吸引人, 浏览者会很快的离开网站.
About, 也就是经常提到的关于你是谁, 你是干什么的, 很多情况下, 你的网站几乎必然存在同类竞争对手的, 他们也提供和你一样或者类似的服务, 所以, 人们很自然的想知道他们在和谁打交道. 所以你需要介绍一下自己, 或者你们的概况, 这样有助于别人了解你, 增加可信度.
Services, 指你提供哪些服务.

下面进入设置页面: 点击鼠标光标小手所在菜单的 New – Page, 或者左侧竖向菜单的 Pages, 都可以进入 Pages 页面.

或者左侧竖向菜单的 Pages, 都可以进入 Post 页面.

点击 Pages 后的 Add New 按钮, 进入新 Post 的编辑页面.

点击右上角的这个页面的三个小点, 注意不是 Chrome 浏览器的三个小点, 可以看到默认进入的是 Code Editor 模式, 你也可以手动切换到 Code Editor 模式, 这个并不影响我们当前的操作.

在 Editor 模式下, 有个小技巧能减少点你的烦躁. 避免点击两次 Publish 按钮. 选中 菜单最下方的 Preferences 选项, 会弹出一个 Preferences 菜单.

取消勾选 include pre-publish checklist 选项, 这样就不会每次都要点击两次 Publish 按钮.

如何发布一个 Pages 页面, 以 Home 页面举例:

  • 在下图位置输入 Home, 直接点击 Publish 即可.

接着将鼠标点击左上角的 W 标志, 即可浏览所有创建的 Pages

现在我想增加三项服务, 分别是 Photography, Videography 和 WebDesign. 那就 Publish 三个 Pages. 最终, 我们添加了 8 个页面, 分别是 Home, About, Service, Photography Videography WebDesign, Blog, Contact, 即本节开始提到 http://hysen.me 目标前台页面.

– 调整 WordPress 菜单

如果我不喜欢页面左上角的 About — Blog — Contact 这个顺序, 该如何调整呢? 看上图左上角, 将鼠标悬停在网站副标题 Photography | Webdesign | City | Hysen Media, 然后选择 Menu, 进入 http://hysen.me 后台 Dashboard 的 Appearance — Menus 管理项, 在这里我们可以调整有关 Pages 的顺序和布局.

在右侧 Menu Name 栏, 输入 Main Menu 这个名字, 点击 Create Menu. 此时, 菜单左侧灰色的不可选 Pages 部分, 变成了下图可选的 Pages 项目.

点击 Add to Menu, 将左边九个选项全部添加到 Main Menu 中. 右侧的 Menu Structure 就出现了全部的 9 个 Pages 项目.

上图可以看到, 在鼠标指针变成十字移动符时, 单击鼠标左键, Home 标签页是可以被左右和上下拖动的.

通过拖动 Home 标签, 调整标签页顺序和父子关系. 例如我们应该把三项服务归入 Service 中, 那么把 Photography 和 Film 标签页向右拖动一格, 它们会自动停下变为子项目.

菜单之间的层级关系可以有多层, 一般建议两层, 至多三层.

下图鼠标指针所在的标签页里, 小字体 sub item 标明 Film 和 WebDesign 之间的的菜单层级关系.

在 Menu Settings 中, 我们把全部选项都勾选上, 单击右下角的 Save Menu 按钮保存设置, 然后单击后台窗口的右上角小房子图标, 看下前台页面的菜单实际效果. 重要的是看横版和竖版菜单.

然后看下 Search 图标之前三个小点隐藏的竖版菜单:

上图中最下方是六个红圆圈链接是社交分享图标, 比如 facebook, 它目前是空的. 同时我们实际可以看到三排同样的 Pages 的 9 个项目, 分别是横版菜单, 竖版菜单, 还有一个是脚标菜单, 也是以调整好的 Home – About – Services 排序呈现.

下面我们回到后台 Appearance – Menu 设置项, 仅保留横版菜单 Desktop Horizontal Menu, 点击 Save Menu 保存设置.

点击 Save Menu 保存设置, 再单击页面上方的小房子按钮, 到前台刷新页面, 可以看到, 只剩下横版菜单了.

一个优化: 参考 apple 官网的页面, 我们并不需要一个单独的 Home 按键, 原因是这样并不简洁, 可以看到你在 macbook Pro 页面时, 只需要移动鼠标指针悬停到 Apple 的 logo 处, 单击即可回到 Apple 的主页.

因此, 我们到后台 Appearance 页面下, Remove Home 标签页,

单击右上角的 Save Menu, 即保存设置, 即可在前台页面看到 Home 选项已经从菜单栏消失,

此时即使你单击 Site Title 的位置, 就是 Photography | Webdesign | City | Hysen Media 的位置, 也不会回到之前 Home 页面. 该如何设置才能回到 Home 菜单的位置呢?

进入后台, 看左侧菜单,
Settings – Reading – Reading Settings 项目:

  • Your Homepage Displays 选中 A static page (select below),
  • HomePage: Home
  • Post Pages: Blog

然后单击 Save Changes 按钮保存设置. 进入前台刷新页面, 单击 Site Title , 可以看到又回到了 Home 页面, 完全等同于之前单击 Home 菜单的效果.

完成 Home 菜单优化后, 我想, 这应该是你见过的最丑的网站页面吧. 这样的页面显然是不能拿出来见人的.

那么, 如何让它漂亮起来呢, 常用的方法是, 我们换个主题, 这就是世界知名的主题 DiVi.

什么是 WordPress 的主题 / Theme ?
主题是网站的版面设计和功能的结合体, 简单说, 就是一个完整的有特定功能的网站. WordPress 之于主题, 就是平台之于具体项目的区别.

我们进入后台 Dashboard — Appearance — Themes 选项, 看到当前 Active 的工作 Theme 是 Twenty Twenty 主题.

如果我们用鼠标左键, 单击选中正下方的另外一个主题 Twenty Seventeen, 点击自动出现的 Active 按钮, 就会发现菜单的外观以及位置, 包括网站的布局, 都发生了变化; 看不到的, 还有主题的功能也发生了变化.

主题市场是 WordPress 中仅次于插件的第二大市场, WordPress 官方自带的主题虽然一直在更新, 但由于功能简陋, 知名博客, 使用 WordPress 自带主题非常少见. 国外流行的主题, TrustPilot 综合评价目前最好的, 是 DiVi 主题. 就是 hysen.me 使用的主题.

7. DiVi 主题的安装与基本设置

– 安装 DiVi 主题

后台 Appearance — Themes 项目中, 单击搜索框前的 Add New 按钮添加新的主题文件, 它是个压缩包, 文件名: divi.zip.

出现上传按钮画面, 单击 Upload Theme 按钮, 通过 Choose file 按钮选择 divi.zip 文件上传到 WordPress.

选中 divi.zip 文件, 单击 Open 按钮, 完成上传.

等待上传完成后,

单击 Install Now 按钮进行安装. 安装完毕后, 如下图会提示安装成功.

单击 Return to Themes page 回到后台 Themes 项目中, 可以看到 DiVi 主题已经出现在主题列表中.

单击 DiVi 主题中的 Activate 按钮, 激活 Divi 主题. 此时可以看到 Divi 主题已经处于激活的状态.

单击 Visit site 链接进入全新的 Divi 主题页面. 是不是清爽了很多.

– DiVi 主题的基本设置

通过 Divi 主题自带控制面板, 它还可以更美丽一些, 包括 General 以及 Layout, Updates 在内, 横向共 8 个设置项目.

下面就常用的基本项目做设置说明.

Divi 支持 Logo 的更换, 你可以上传自己的网站 Logo. Logo 尺寸建议最低 600 x 100 以上, 否则小到看不到就尴尬了.

让我们到网站后台 Dashboard — Divi — Theme Options — General — 右侧 UPLOAD 按钮,

点击 UPLOAD 按钮后会弹出一个两选项窗口, 选择箭头所在的 Upload files, 然后再展现的窗口中选择 Select Files, 弹出的文件夹中有你制作好的 logo 文件, 选择它.

点击文件夹窗体右下角的 Open 按钮, 进入 Media Library 目录, 在右侧的两个描述中, Alt Text 和 Title 输入简介文字,

点击 Set As Logo 后, 会返回 Divi Theme Options 选项, 点击 Save Changes, 完成 logo 文件的在网站后台的上传与设定.

点击左上角的小房子图标, 切换到网站前台, 在左上角可以看到设定好的 Logo, HMEDIA, 现在点击这个 Logo, 实现的就是返回 Home 主页的功能.

下面进入后台色板设置: Divi – Theme Options – General – Color Pickers Default Palette
8 个颜色选择处.

– Color Pickers Default Palette 是你常用的取色板

直接定义好默认的颜色, 以后使用就可以直接选择, 不必每次都输入数字了, 这在后面设计中非常方便, 务必设置.

比较常用的颜色有六个: 核心的是前两个
Color 1 #cc2b5e
Color 2 #753a88
Color 3 #565656
Color 4 #282828
Color 5 #A6A6A6
Color 6 #717171

步骤:
1, 首先选中你不要的颜色, 然后在鼠标箭头处, 输入你常用的十六进制颜色码,
2, 点击回车, 会弹出一个绿色的对号表示更改成功, 同时你也会看到色块从原来的颜色变为输入的 #717171 颜色.

继续往下看设置项目, 可以看到有关社交分享的部分, facebook, twitter, instagram 等, 每个社交分享包含两部分设置, 一个是是否显示 logo, 另外一个是填写入你自己的社交媒体链接.

面向国内客户群的, 这些基本都用不上, 可以全部关闭. 比如成对出现的 facebook 和 twitter 设置,

Show Facebook Icon — Facebook Profile Url
Show Twitter Icon — Twitter Profile Url

最后点击设置页面的 Save Changes 按钮.

Divi 在设置页面放置了两个完全同样功能的 Save Changes 按钮, 这样无论你在设置页面的上方还是下方, 不必翻页就可以直接设定内容. 十分人性化.

8. DiVi 主题常规定制

做完基础设置, 我们的网站大概长这个样子, 下面就要开始进入主题定制的环节了.

– Theme Customizer

随着 2012 年 WordPress Version 3.4 的发布, 引入了主题定制器 Theme Customizer.
这项方便的功能允许 WordPress 用户实时预览对其主题所做的更改,然后单击一下即可保存这些更改。过去需要多个窗口和无数次刷新才能搞定的内容, 现在可以在一个浏览器窗口中就可以快速完成。

正如之前所说的, 每个主题都有自己的自定义框架

一个网页的结构大致如下, 我们分步更改其中的部分. 我们从这里开始. 鼠标悬浮到左上角 Site Tile, 会出现一个 5 项的菜单.

点击 Theme Customizer, 进入 Customizer Option Set 界面, 看到有很多设置项, 是不是有点眼晕, 不要担心, 项目多说明功能强大, 这是目前世界综合排名第一的 Theme.

这里是 DiVi 高级 Theme 的核心定制区域, 包括功能和外观, 我们分步处理基本的选项就足够你搭建一个还像样的网站了. 对 Divi 了若指掌是需要时间的.

– Favicon 设置

Faviconfavorites icon的缩写,亦被称为 website icon(网站图标)、page icon(页面图标)或 urliconURL 图标), 浏览器可以将 favicon 显示于浏览器的地址栏中,也可置于书签列表的网站名前,还可以放在标签式浏览界面中的页标题前. – 自维基百科 Favicon 词条.

目标: 目前网站的 Logo 感觉有点小, 我想把它变大点. 并且, 网站的 Site icon 还没有, 我想增加一个.

我们从左侧进入, 选择 General Settings

同样点击进入 Site Identity,

然后选择 Site Identity 中的 Select icon, 我们的目标是更改网站的 favicon, 即鼠标指针所在的那个小圆球, 就像后面跟随的知乎和豆瓣的网页标签上的的 “知”” 豆 ” 二字.

点击 Select icon, 进入 Upload files 界面, 选择 Select Files 按钮, 在弹出的文件选择界面, 选中你的 site icon 文件,

点击 Open 按钮, 进入 Media Library 窗口, 默认它是选中你刚上传的 H site icon.PNG 文件的, 直接点击 Select, 进入裁切图片页面

直接点击 Select, 进入裁切图片页面

根据你图片的情况, 使用方框选中图片的部分后, 点击 cropping 按钮, 裁切出 Site Icon 所需的图片, 接着跳转至 Publish 页面, 点击 Publish 按钮, site icon 即刻设置成功. 图片推荐的尺寸是 512×512, 如果使用标准图片, 不必裁切.

和知乎, 豆瓣的 “知”” 豆 ” 图标一样, 在 http://hysen.me 网站的标签页前端, 出现了一个暗色的 H 图标, 这就是 site icon 设置成功的样子.

上图中, 你可以看到全黑的圆角正方形图片就是 site icon 的缩略图, 如果需要删除或者变更 site icon 图标, 通过左侧 Remove 或者 Change images 可以进入更改 site icon 的选项.

Publish 点击发布完成后, 会变成灰色.

至此, site icon 设置完毕

– Header & Navigation

下面我们开始设置 Header & Navigation

在 Site Identity 设置的页面, 后退两次, 到达 Header & Navigation, 点击进入这个设置页面.

留意, 如果你看到了上图右上角这种汉堡包的菜单, 因为页面宽度低于一定宽度, wordpress 会自动的变为这种汉堡包菜单, 这个通过 Chrome 浏览器的自带缩放功能即可解决. 下图是 chrome 缩放 90% 的结果.

上图鼠标指针所在的 4 个滑动的缩放条可以控制四种大小:

  • 分别是菜单高度,
  • logo 的高度,
  • about 等菜单文本的高度,
  • 菜单字母的间距大小.
    分别拖动一下看下效果, 4 个数字后面的复原箭头可以恢复当前的默认值, 比如, 分别恢复到 66, 54, 14, 以及 0.

FONT STYLE 的四个项目是更改菜单文字的格式, 其中 “TT” 是更改大小写的. 下面的颜色条是更改菜单颜色的.

至此, WordPress 及 主题基础设置篇已然完结, 下面我们进入, 不时会让你惊叹的的可视化 DiVi 编辑器, 用它来制作网站. 它是世界上少有的主题自带的可视化编辑器. 积累了丰富的功能, 现在是世界上最流行的视觉编辑器之一.

这是 “WordPress 网站自建房” 系列文章最新的一篇,
上一篇是有关使用腾讯云香港服务器搭建宝塔面板安装 WordPress 网站: 2021 WordPress 小白新手建站教程保姆版 – 腾讯宝塔面板建站篇

WordPress 自建房系列文章列表:

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

文章标题:2021 WordPress 小白新手建站教程保姆版 – WordPress 及主题基础设置篇

发布时间:2021 年 10 月 2 日 – 23 : 11 分

更新时间:2021 年 10 月 3 日 – 11:52 分

更新版次 : 第 0.8 版

知乎链接2021 WordPress 小白新手建站教程保姆版 – WordPress 及 主题 基础设置篇

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

2021 WordPress 小白新手建站教程保姆版 - 腾讯宝塔面板建站篇

副标题: 此篇对所有 WordPress 主题适用.

之前在 WordPress 网站自建房实录 – 索引篇中提到, 搭建一个网站, 类似于古代自建房, 就像在老家选地盖房. 没有什么技术含量, 就是个力气活. 大致步骤是, 选地址, 买地皮, 拿许可证, 打地基, 搭框架 (房子主体), 装修, 最后验收和使用.

本节我们我们要解决基础问题, 涉及到装修前的关键问题. 包括选地址, 买地皮到打地基, 搭框架 (房子主体). 最终把一个 WordPress 网站基本搭建起来.

WordPress 自建房, 先买地皮, 后选地址比较方便. 不仅如此, 如果你想更快的上手练习, 不买地址是最方便的. 这个在文章主体完成后有时间会说说, 方便目标更明确的人.

说到买地址, 术语叫域名. 这里涉及到一个基本概念: IP 地址解析. 形式呢就是把 123.123.123.123 这样的 IP 地址, 转换为 http://zhangsan.com 这样有意义的域名. 123.123.123.123 这样的 IP 地址只是举例, 每个人的每台云服务器的 IP 地址都是不同的, 比如你是 123, 我可能是 111.111.111.111. 这个是购买地皮时自动分配的, 不可自选.

本节自建房流程参考了一点统筹方法: 就是先买地皮, 之后在打地基的时候, 去买地址 (域名), 这样同时做两件事情, 时间节省很多, 而且互不干扰.

下面分四个步骤, 来完成 WordPress 的安装

  • 第一步: 买地皮 / 云服务器
  • 第二步: 选地址 / 域名
  • 第三步: 打地基 / 安装 LNMP
  • 第四步: 搭建房子的主体 / 安装 WordPress

第一步: 买地皮

无论在哪里盖房, 你得有地皮, 地皮是房地产中建筑房屋的土地. 服务器(VPS / 云主机 / 云服务器) 就像带基本水电管网的地皮, 常见的有阿里, 腾讯或者华为, 这里我们使用腾讯香港轻量服务器.

原因是, 这是当下大厂里, 针对当前安装要求, 综合性能, 价格, 服务支持的力度, 它是综合评价排第一的服务器. 不仅免备案, 在香港服务器里速度也相当快, 价格便宜. 为了节省时间, 我写这篇文字的时候, 同时开了几家大厂若干台服务器一起安装测试, 这是个人综合评定最高分的服务器.
缺点是, 这种优质的服务器, 早期有, 一般后面都会停产或者线路变差, 从而速度慢, 卡. 近些年的前车之鉴, 是阿里云国际站 (非国内站) 30M 香港轻量服务器, 现在缩水 10 倍到 3M, 价格没变.
国内阿里云香港或者新加坡的轻量服务器, 当前速度都不如腾讯云, 如果一定要选阿里的免备案服务器, 可以考虑阿里云轻量应用服务器 – 新加坡. 速度还比较稳, 而且也有官方宝塔面板 BT-7.5.1 的镜像, 我长时间开着 Gping 观察, 基本都在 60ms 上下, 速度尚可, 波动也不大.

如何买地皮

点开腾讯云服务器全球购页面,

1. 选择 轻量应用服务器

点击光标所在的位置确定套餐, 即进入注册页面.

真实的腾讯香港服务器数量并不多, 现在特价 144 的 1 核 1G(Liunx)的服务器经常售空. 暂时的替代方案是 204 元的 1 核 2G(Liunx)的服务器.
将来再缺货, 大厂可以考虑阿里云新加坡 288 元 2 核 1G 套餐.

2. 通过微信, QQ, 邮箱或者公众号注册并登陆腾讯云

腾讯云注册选项最丰富, 从微信, qq, 到邮箱, 设置还有小程序公众号. 一般用户建议用微信.

按官方文档, 选择任意其中一种方式注册后, 可 在账号信息中绑定其他三种方式作 为登录方式.

部分时候注册完成, 会跳回轻量服务器套餐选择界面, 参照上述第 1 点再次确认套餐即可. 结果以扫码完成为准.

3. 进入控制台, 找到轻量服务器管理页面

3.1 腾讯云首页, 点击右上角控制台, 通过账号登陆.

3.2 在产品总览页面, 点击云产品, 在下拉菜单中选择轻量应用服务器.

3.3 轻量服务器管理入口页面简介

进入服务器管理页面, 可以看到左侧是大菜单, 右侧是服务器信息. 这里有两个服务器, Tencent BT 7.6 和 Hysen.

左侧 Tencent_BT_7.6 这个名字是自定义的, 它所在服务器就是腾讯官方提供的宝塔面板镜像安装而成. 使用官方镜像的好处之一是, 你可以就镜像本身的问题打电话或者开工单提问. 如果是通过命令行自己安装的, 是没有这项服务的.

光标所在的位置一般是镜像的名字, 宝塔面板官方在这里使用了 http://BT.cn 域名作为 logo 图片. 中间的 CPU1 核 – 内存 1GB – 系统盘 25GB, 说明的是服务器配置. 最右下角是服务器的 IP 地址, 这里我 PS 了 8.8.8.8, 好记. 腾讯香港最近多见的是 43.xx.xx.xx 地址段, 下面遇到 8.8.8.8 ip 地址的, 都替换成你自己的 ip 地址即可. 右上角的蓝字, 一个用于远程登录服务器, 另外的 “更多” 包含了关机及升级套餐等选项.

有了 IP 地址, 域名才可以解析到 IP, 从而让别人通过诸如 zhangsan.com, http://lisi.net 的域名访问到我们的轻量服务器.

4. 在应用管理界面获得宝塔面板的登陆密码.

宝塔面板, 是一款简单好用的 Linux/Windows 服务器运维管理面板, 面板的好处,就是通过一个交互界面就能完成服务器的维护工作,比如更新系统,添加网站,修改设置等等,以前需要记住各种命令,现在通过面板点点按钮就可以了,省时省力。
另外, 宝塔面板正常使用, 需要使用手机号注册. 所以, 在 http://bt.cn 先注册好宝塔账号, 随后登录宝塔界面后, 会提示绑定宝塔账号.

通过单击上图光标位置, 进入进入服务器的管理页面, 点击上方的应用管理. 应用内软件信息模块中, 能看到 “”面板首页地址” http://8.8.8.8:面板端口/tencentcloud , “用户名和密码” 部分是告知, 如何获取宝塔管理面板的管理员账号密码.

看光标位置, 先单击复制, 然后点击蓝字登陆, 会弹出下面一个黑色的框体, 这是 ssh 的命令行窗口, 黏贴之前复制的

sudo /etc/init.d/bt default 命令,

然后回车, 即可得到宝塔管理面板的登陆地址, 登陆账号和密码.

宝塔管理外面板地址为 http://8.8.8.8:8888/tencentcloud 账号: username: urz9g98m 密码 password: 09b2444ad828

这一步一定要复制下来保存好, 后面会常用到.

5. 设置防火墙

防火墙中文意思的解释就是 “两所房子之间或者一所房屋的两个部分之间的厚而高的墙,可以防止火灾蔓延” 在设备之间产生了隔离的作用。防火墙是屏蔽主机在联网时, 互联网上一些没用的病毒与恶意软件的入侵。

我们这里用到的防火墙很简单, 就是开放关闭端口. 默认情况下, 所有云厂商只开放有限的几个端口, 所以以后碰到无法连接或者无法访问的问题, 先看看防火墙对应的端口是否开启.

在应用管理界面的后面, 单击防火墙, 进入防火墙设置界面.

点击光标所在的添加规则, 严格对照上图开放端口. 具体方法见下图.

按上图中所示, 添加端口, 点击确定按钮即可.

6. 登录宝塔管理系统

通过浏览器, 输入 http://8.8.8.8:8888/tencentcloud, 输入刚才复制黏贴的账号密码, 登录宝塔面板.

看到提示 : “关联腾讯云 API 密钥”, 直接关闭即可, 这里是用于读取服务器信息, 升级的一些操作, 和腾讯官方的功能重合.

第三步, 打地基

7. 一键安装 LNMP, 这是打地基的.

关闭 “关联腾讯云 API 密钥” 的窗口后, 看到后面第二个窗口, 就是宝塔面板方便的一键安装 LNMP.

严格照图选择选项, 单击一键安装, 等大概 20 分钟左右, 就安装完毕了. 其中在选择 Mysql 5.7 的时候, 会报错 “您的内存小于 2GB, 不建议安装 MYSQL-5.7”, 不用理会.

我们只是建一个 WordPress 站, 用不了多少内存. 在这里一般不建议关闭当前的安装窗口, 需要做什么另外再开个窗口即可.

现在趁 LNMP 打地基这个时间, 咱们去买域名.

第二步, 选地址 (没写错, 就是这个顺序)

买房子, 地段永远是第一考虑因素. 好的地段, 人多啊. 在网上就反映为流量大. 对应在网上建房, 就是你的域名, 要短小精悍好记.

我一律建议你首选 .com 域名, 是在不行就 .cn, 其他全部不推荐. 即使钱再少, 也别去买稀奇古怪的域名, 比如 .top, 要知道, 有很长时间, 百度是歧视 .top 域名的, 收录慢, 或者干脆几个月都收录不了. 别人百度都查不到你, 你的网站就是个死站, 只能自娱, 不能众乐.

另外域名购买, 国内和国外主要差别是国内要实名, 其他差别还有付款工具的差别, 国外主要是 paypal 或者国际信用卡.

就隐私保护而言, 国外做的比较好. 不过从长期来看, 你必然要在国内买域名, 因为阿里腾讯的很多服务, 都是依赖于你在它那里买了域名, 它可以自动化, 也可以提供更深层次的服务.

既然用腾讯的云服务器, 自然选腾讯的域名购买.

a. 购买域名

进入腾讯云控制台, 在云产品中选择 “域名与网站” 下的域名注册. 进入域名购买界面.

单击光标所在的立即选购即可进入域名购买界面, 输入 zijianfangshilu.com, 点击查询, 查看域名是否可用.

由于. me 域名在国内已经无法备案, 因此无法使用 http://hysen.me 的域名注册作为例子. 这里用 http://zijianfangshilu.com (自建房实录) 说明购买域名的过程.

然后加入购物车, 点击右侧的立即购买, 进入订单详情页面. 这里有最关键的实名认证步骤.

b. 域名实名

上图中, 提示 “无可用的域名信息模板,请先新建信息模板” 单击蓝色字体的新建信息模板,

勾选 “使用账号信息填写”, 这样能少重复填写内容. 照图填写并提交. 身份证号是为张三丰专门编的.

扫二维码付款完毕后, 即可在域名注册中看到你的域名了. 这里用了 http://hysen.me 进行域名解析

c. 域名解析到 IP 地址

在我的域名列表里, 选择 http://hysen.me 这个域名,

点击后方的蓝字 解析, 进入地址解析页面.

单击添加记录, 按照上图, 增加两条有利于搜索引擎优化 (SEO) 的 A 记录, 主机记录分别是 www 和 @, 记录值都是 IP 地址 8.8.8.8. 相当于域名 www.hysen.me 以及 hysen.me 都会指向 IP 地址 8.8.8.8.

至此, 域名解析完成.

我们接着第 7. 一键安装 LNMP. 登录宝塔管理系统, 开始通过宝塔系统安装 WordPress.

第四步, 搭建房子的主体 / 框架

8. 通过宝塔面板安装 WordPress

8.1 核实五项的安装情况.

首先核对一键安装的五项是否成功. 查看从光标开始的 Nginx 1.20.1 到 PhpMyAdmin 5.0 的 5 项是否全部安装成功.

如果有缺漏, 建议重装系统后关联腾讯 API, 具体参考文末的两个补充内容,

  1. 如何重装腾讯轻量服务器的系统.
  2. 如何使用腾讯的 API Key

8.2 通过软件商店中的 “一键部署” 安装 WordPress

选中左侧的软件商店, 在右侧先点击应用分类中的一键部署, 然后找到 WordPress 5.6(实际安装完是最新版 5.8),

在页面的右下角找到 一键部署的按键, 点击开始安装 WordPress 本体, 终于开始搭建房屋的主体了.

输入域名 hysen.me, 记录下数据库 hysen_me 和密码, 过下安装 WordPress 时候用到. 最后点击右下角的 “提交” 按钮.

WordPress 开始下载并安装. 最后提示 “已成功部署 WordPress”. 记录下弹出框的数据库名, 用户和密码. 后面 WordPress 安装马上要用到. 复制 “访问站点” 中提到的网站地址: http://hysen.me/index.php

8.3 WordPress 的安装设置

浏览器地址栏输入上图中你的域名, 我输入 http://hysen.me/index.php, 终于到了美丽的 WordPress 页面设置页.

选择简体中文, 继续.

现在是开始之前的页面提示信息, 点击 现在就开始.

输入三项数据库信息, 数据库名, 用户名, 密码. 点击提交.

出于安全以及将来的站群考虑, 上图的表前缀 wp_ 建议更改为 网站缩写 + wp_的形式, 比如 hs_wp_.

数据库信息正确, 会进入上图这个页面, 点击 现在安装. 进入 WordPress 站点基本信息填写页面

参考填写内容, 点击安装 WordPress.

选项: 对搜索引擎的可见性, 如果勾选, 那么搜索引擎就不会收录. 这项可以在后面更改, 位置是 WordPress – 设置 – 常规
如果你的密码太短, 记得勾选 “确认使用弱密码” 的选项.

8.4 WordPress 安装成功.

出现安装成功的提示, 点击登陆, 进入 WordPress 设置项.

通过左上角光标所在位置, 可以切换 WordPress 的前台和后台.

至此, 看到这个页面, 就说明安装成功了. 恭喜.

下一步, 我们将对 WordPress 做进一步设置, 同时也做主题的基础设置项, 具体见下一篇
2021 WordPress 小白新手建站教程保姆版 – WordPress 及 主题 基础设置篇 .

本文的导读在 WordPress 网站自建房实录 – 索引篇

补充内容:

1. 如何重装腾讯轻量服务器的系统

就像电脑一样, LNMP 总有需要重装的时候. 初期你重装整个系统的机会也非常多.

有两个入口可以重装系统, 称为 “重置应用”,

  • 一个入口在 应用管理中, 应用信息的后面, 蓝字的重置应用.
  • 另外一个参考本节 3.3 轻量服务器管理入口页面简介, 进入轻量服务器 “概要” 页面,

看光标位置, 选择重置应用, 进入系统重装界面

选择宝塔 Linux 面板的应用镜像, 点击确定即可开始系统重装, 不到一分钟, 一个新的干净的 BT7.6 镜像就安装完成了.

随后可以参考, 4. 在应用管理界面获得宝塔面板的登陆密码. 来进行相关操作.

2. 如何使用腾讯的 API Key

有时候, 安装并未成功, 比如一键安装 LNMP 后, 会发现丢掉了 MySql, 或者 Nginx. 那么我们就需要使用腾讯的 API.

设置腾讯 API

进入腾讯云控制台, 在云产品中下拉到底部, 在 “管理与审计” 中选择 ” 访问管理 “.

在左侧菜单中选择 访问密钥 – API 密钥管理, 在弹出页面中, 选择继续使用, 即可进入 API 生成页面.

点击新建密钥, 即可生成新的密钥. 密钥可以启用, 也可以点击后面的禁用从而不使用.

宝塔面板使用腾讯云密钥, 上次提到的位置是 第 7. 一键安装 LNMP.

登录宝塔面板, 在光标所在的位置, 点击 关联腾讯云 API 密钥, 然后在随后弹出的窗口中输入 Secret ID 和 Secret Key. 最后点击关联 API 密钥这个按钮.

设置完成后, 就可以看到主机的一些信息, 比如到期时间, 服务器地区. 关键的信息是, 在这里, 你可以直接通过下面的一排按钮付费去升级套餐或者续费. 这个功能可以实现, 意味着这个腾讯云的宝塔面板版本异常稳定, 凡是和收钱有关的系统, 做的都是最好的.

至此, 宝塔面板的腾讯云 API 密钥的关联完毕. 这个做完之后, 在进行 LNMP 一键安装, 会更稳定.

3. 如何手动打地基 / 安装 LNMP

LNMP 是 Linux, Nginx, Mysql

有时候, 安装并未成功, 比如一键安装 LNMP 后, 会发现丢掉了 MySql, 或者 Nginx. 那么我们就需要使用腾讯的 API.

设置腾讯 API

进入腾讯云控制台, 在云产品中下拉到底部, 在 “管理与审计” 中选择 ” 访问管理 “.

WordPress 自建房系列文章列表:

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

文章标题:2021 WordPress 小白新手建站教程保姆版 – WordPress 及主题基础设置篇

发布时间:2021 年 9 月 19 日 – 22 : 20 分

更新时间:2021 年 11 月 24 日 – 21:55 分

更新版次 : 第 0.91 版

知乎链接2021 WordPress 小白新手建站教程保姆版 – 腾讯宝塔面板建站篇

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

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

限时折扣