splitpane如何设置竖条的宽度_如何使用Divi的主题生成器创建404页面模板

Divi的主题生成器和内置的设计选项打开了设计的新的大门。  现在，你比以往任何时候都可以自定义客户访问的每个页面。 

这包括设置404页面。 在本教程中，我们将向你展示如何创建漂亮的404页面模板并将其立即应用于你的网站。   希望本教程能启发你在下一个404页面设计中发挥创意。 让我们开始吧！ 预览 在开始学习本教程之前，让我们快速浏览一下不同屏幕尺寸的显示效果。 桌面

手机

1. 转到Divi Theme Builder并创建新模板 转到Divi Theme Builder 要开始创建404页面模板，请在Divi设置中转到Divi Theme Builder。

创建新模板 点击“添加新模板”，然后为404页面设置一个新模板。

• 使用于：404页面

隐藏页眉和页脚区域 通过单击眼睛图标隐藏404页面的自定义页眉和页脚。

创建全局正文 完成所有前面的步骤后，你可以通过选择“构建自定义正文”来开始构建404页面正文。

2. 开始构建404页面正文 添加新部分 背景颜色 进入模板编辑器后，你会在页面上看到一个部分。打开此部分并添加白色背景色。

• 背景颜色：#FFFFFF

底部分隔线 转到该部分的“设计”标签，然后添加一个底部分隔线：

• 分隔线样式：在列表中查找

• 分隔线颜色：＃ffee00

• 分隔线高度：25vw(桌面)，77vw(平板电脑)，90vw(手机)

• 分隔线翻转：垂直

• 分隔线排列：在部分内容下方

间距 接下来，在不同的屏幕尺寸上添加一些自定义填充值。

• 顶部填充：4.6vw(桌面)，23vw(平板电脑)，25vw(手机)

• 底部填充：4.6vw(桌面)，13vw(平板电脑)，11vw(手机)

添加第1行 列结构 完成部分设置后，你可以添加第一行。选择以下列结构：

尺寸大小 在未添加任何模块之前，请打开行设置，并允许该行占用屏幕的整个宽度。

• 使用自定义装订线宽度：是

• 装订线宽度：1

• 宽度：100％

• 最大宽度：100％

间距 接下来，修改该行的顶部和底部填充值。

• 顶部填充：2vw

• 底部填充：2vw

将文本模块1添加到列 添加内容 是时候开始添加模块了！我们需要的第一个模块是文本模块。插入你选择的一些段落内容。

文字设定 转到模块的“设计”标签，并按如下所示更改文本设置：

• 文字字体：Monoton

• 文字颜色：＃000000

• 文字大小：24vw(台式机)，35vw(平板电脑和手机)

• 文字行高：1em

• 文字对齐方式：居中

将文本模块＃2添加到列 添加内容 进入下一个模块，这是另一个文本模块。添加你选择的一些内容。

文字设定 相应地更改模块的文本设置：

• 文字字体：Montserrat

• 文字颜色：＃000000

• 文字大小：1.2vw(台式机)，2.6vw(平板电脑)，3vw(手机)

• 文字行高：1.8em

• 文字对齐方式：居中

间距 通过添加一些自定义的顶部和底部边距来完成模块的设置。

• 顶部边距：2vw

• 底部边距：6vw

添加第2行 列结构 继续使用以下列结构添加新行：

尺寸大小 打开行设置并按以下方式调整大小设置：

• 宽度：32vw(台式机)，50vw(平板电脑和手机)

• 最大宽度：100％

间距 修改间距设置。

• 顶部边距：7vw(台式机)，22vw(平板电脑)，59vw(手机)

• 顶部填充：0vw

• 底部填充：0vw

第1列和第2列设置 默认背景色 完成常规行设置后，你可以从背景颜色开始分别打开每一列并进行一些更改。

• 背景颜色：#FFFFFF

悬停背景色 修改悬停时的背景颜色。

• 背景颜色：＃fffa00

边框 也添加一些圆角。

• 圆角：20px(所有角)

默认盒子阴影 转到盒子阴影设置并应用以下更改：

• 盒子阴影模糊强度：50像素

• 阴影颜色：rgba(0,0,0,0)

悬停盒子阴影 修改悬停时的阴影颜色。

• 阴影颜色：rgba(0,0,0,0.12)

默认变换比例 然后，转到转换比例设置，并确保默认值保持为“ 100％”。

• 右边：100％

• 底部：100％

悬停转换比例 在悬停时更改变换比例值：

• 右边：110％

• 底部：110％

将文本模块添加到列1 添加内容 完成行和列设置后，将文本模块添加到第1列，并选择一些段落内容。

添加链接 接下来，添加模块的链接。

• 模块链接网址：＃

• 模块链接目标：在同一窗口中

文字设定 转到模块的“设计”标签，然后按如下所示更改文本设置：

• 文字字体：Montserrat

• 文字字型粗细：粗体

• 文字字体样式：大写

• 文字颜色：＃000000

• 文字大小：0.8vw(台式机)，2vw(平板电脑)，3vw(手机)

• 文字字母间距：1px

• 文字行高：1.8em

• 文字对齐方式：居中

间距 然后，转到间距设置，并在不同的屏幕尺寸上应用一些自定义的顶部和底部填充值。

• 顶部填充：2vw(桌面)，3vw(平板电脑)，4vw(手机)

• 底部填充：2vw(桌面)，3vw(平板电脑)，4vw(手机)

克隆文本模块并在第2列中放置复制的副本 完成文本模块及其所有设置后，你可以克隆整个模块并将复制的模块放置在第2列中。

变更内容 确保你更改了复制模块的内容。

变更链接 更改链接。

3. 保存主题生成器更改 设计完成后，你可以保存所有模板的设置。

预览 现在我们已经完成了所有步骤，让我们最后看一下不同屏幕尺寸的结果。 桌面

手机

最后有感 在本文中，我们向你展示了如何设置和创建404页面模板。  Divi的主题生成器和内置设计选项使你可以使用自定义模板来设计网站的每个页面。  希望你喜欢所有Divi Theme Builder教程！ 如果你对创建网站有兴趣 欢迎来撩 爱极致 小哥哥哦~

长按 关注，有更多干货哦~ ▼ ▼ ▼

- End -

点个赞，证明你还爱我