如何在 Divi 中设计自定义全屏页面布局

已发表: 2018-12-27

全屏页面布局在网页设计世界中真的可以派上用场。全屏页面布局的一个主要好处是可见性。对于全屏页面，所有页面内容都保留在浏览器窗口中。在用户快速滚动的世界中，从一开始就将您的所有内容都包含在浏览器视口中可以让查看者耳目一新，还可以帮助转换。

如果您熟悉 Divi，您应该已经知道内置全屏功能的 fullwidth header 模块。这是创建具有最少内容的全屏页面的绝佳解决方案。但是，如果您想利用具有多行和模块的常规部分来构建全屏页面布局，那么这篇文章就是为您准备的。我将向您展示一些简单的技巧，以确保您的页面内容（甚至页眉和页脚栏）适合您的浏览器窗口，然后在不同的浏览器尺寸上很好地缩放。

让我们开始吧。

抢先看

这是我们将在本教程中创建的最终全屏页面布局的先睹为快。

全屏页面布局

请注意页面高度如何调整到浏览器窗口的高度，以便一切都保持原位。

全屏页面布局

你需要什么

对于本教程，您真正需要的只是 Divi。我还将使用可从 Divi Builder 访问的 Fitness Gym Layout 包。

订阅我们的 YouTube 频道

如何在 Divi 中制作自定义全屏页面

在进入本教程的主要设计之前，我想我会向您展示在 Divi 中创建全屏页面背后的基本思想。毕竟，您可能会对它的简单性感到惊讶。

基本思想解释

在新页面中，选择空白页面模板。这将阻止主页眉和底部页脚栏显示在页面上（稍后我将向您展示如何包含它们）。
全屏页面布局

现在在前端部署 Divi Builder 以从头开始构建您的页面。然后添加一个具有一列行的常规部分。

接下来，将倒数计时器模块（或任何模块）添加到一列行。

全屏页面布局

为了使事情更容易看，在倒数计时器中取出背景颜色并为该部分添加背景颜色，以便我们可以更好地识别页面上该部分的高度。当前部分的高度是相对于它包含的内容的高度。在这种情况下，我们拥有的唯一内容是带有 sing 模块的单行。

全屏页面布局

现在打开部分设置并转到高级选项卡并将以下自定义 CSS 添加到主元素：

min-height: 100vh;
display: flex;
flex-direction: column;

全屏页面布局

将部分的最小高度设置为 100vh（视口高度的 100%）将确保您的部分跨越整个浏览器窗口（或视口）。 “display:flex”属性是一种快速简便的方法，可以让您的部分内容垂直居中。

查看此有用指南，了解有关 vh 长度单位的更多信息。

在隐身浏览器中查看您的实时页面以查看结果，因为如果您登录到 WordPress，顶部管理栏会稍微偏离浏览器高度。

全屏页面布局

那么你去。这就是如何在 Divi 中创建自定义全屏页面布局的基本思想。

将页眉和页脚合并到您的全屏页面中。

如果您想在全屏页面中包含页眉和底部页脚栏，您需要进行一个小的调整。首先，将页面模板改回页面编辑器后端的默认模板。

全屏页面布局

包括页眉和底部页脚将为您的浏览器视口增加额外的高度，因此该部分将不再像以前那样完美地适合。这是因为您的页面现在由一个部分高度组成，该部分高度是视口高度的 100% 加上页眉和底部页脚栏的高度。这太多了。为了解决这个问题，我们需要将我们部分中的自定义 CSS 调整为以下内容：

min-height: calc(100vh - 133px);
display: flex;
flex-direction: column;

唯一的区别是最小高度值。现在有一个计算，用于说明页眉和底部页脚栏的附加高度（以像素为单位）。

132px 是基于页眉默认高度 (80px) 和底部页脚栏默认高度 (53px) 的总和。

全屏页面布局

现在我们对如何在 Divi 中创建自定义全屏页面有了基本的了解，让我们深入研究一个更复杂的设计。

构建完整的全屏页面设计

为了开始这个设计，创建一个新页面，给你的页面一个标题，然后部署 Divi Builder。选择“选择预制布局”选项，然后从“从库中加载”弹出窗口中选择“健身房布局”页面。然后单击以使用定价页面。

全屏页面布局

一旦布局加载到构建器中，单击按钮在前端（可视化构建器）上构建，您就可以开始了。

创建新部分

预制布局有助于启动设计。我们将沿途使用这些布局设计元素，并在完成后删除其余的布局。要为我们的全屏布局创建主要部分，请继续创建一个新的常规部分并将其拖到页面的最顶部。然后在行中添加四分之一四分之一二分之一列结构。这将是我们全屏页面的基础。

全屏页面布局

将模块添加到您的列

使用多选（按住 ctrl/cmd 并单击），选择布局第一部分前两行中的所有模块，并将它们拖到页面顶部新部分的第一列中。

全屏页面布局

接下来，使用多选复制布局相同第一部分第三行中的所有模块，并将它们粘贴到页面顶部新部分的第二列中。

全屏页面布局

由于白色背景，文本将被隐藏，但我们稍后将更改背景颜色。

在第三列中，添加一个滑块模块。这个滑块最终将跨越屏幕的整个高度，但现在让我们只设置内容。在滑块设置中，删除默认存在的两个默认幻灯片之一，然后单击打开单个幻灯片的设置。

全屏页面布局

在幻灯片设置中，添加一个背景图像，确保它足够大以跨越浏览器的整个高度。

全屏页面布局

这会处理我们现在需要的所有模块。我们稍后将重新审视设计设置，但现在，让我们自定义我们的行。

自定义行设置

打开行设置并开始向第 2 列添加背景颜色：

第 2 列背景颜色：#2a2e40

全屏页面布局

跳转到设计选项卡并更新以下内容：

使这一行全宽：是
天沟宽度：1
均衡柱高：是
自定义填充：0px 顶部，0px 底部

全屏页面布局

自定义部分设置

此时我们的部分设置唯一需要的是去掉任何默认填充，但我认为添加一个部分分隔线来框住第一列的顶部会很好。打开部分设置并更新以下内容：

顶部分隔线样式：见截图
顶部分隔线颜色：#2a2e40
顶部分隔线高度：8vw
顶部分隔线水平重复：0.8x
顶部分隔线翻转：垂直和水平

自定义填充：0px 顶部，0px 底部

全屏页面布局

由于分隔线设置为在部分内容下方显示，它将隐藏在第 3 列中的滑块后面，并且不会显示在第 2 列上，因为它与列背景的颜色相匹配。这为第 1 列创建了一个很好的框架设计元素。

删除其余的预制布局

在这一点上，我们的顶部部分已经为我们的全屏页面布局准备好了一切，因此我们可以删除预制布局附带的所有剩余部分。到目前为止，您的页面应该是这样的。

全屏页面布局

现在我们准备开始自定义我们的页面以成为全屏。

添加自定义 CSS 使页面全屏

在本文开头的基本示例中，我将自定义css直接添加到了部分中。但是，为了确保我们的全屏功能仅适用于桌面（并在移动设备上采用默认样式），我会将其添加到页面设置下的 CSS 中。这将允许我添加仅适用于此页面的外部 CSS，但也让我可以选择添加将样式限制为仅桌面的媒体查询。

从前端构建器底部的设置菜单中，打开页面设置。在高级选项卡下，输入以下自定义 CSS：

@media (min-width: 980px){

/*If CSS IDs are added, this makes the element the same height as the browser window taking into account the header and the bottom footer bar*/
  #fullsection, #fullslide .et_pb_slide {
    height: calc(100vh - 133px);
  }
/*This centers the content of the section when the CSS ID is applied*/
  #fullsection { 
    display: flex;
    flex-direction:column;
    overflow: hidden;
  }
/*This makes the bottom footer bar fullwidth to match the fullwidth header if applied*/
  #footer-bottom .container {
    width: 100%;
    max-width: 100%;
    padding-right: 30px;
    padding-left: 30px;
  }
}

对于那些不熟悉 CSS 的人，请注意，当浏览器的最小宽度为 980 像素时，该代码由应用样式的媒体查询包装。使用方括号，第一个片段包含一个名为“fullsection”的 CSS ID，后跟一个名为“fullslide”的 CSS ID。记住这两个 CSS ID 很重要，因为我们需要将它们添加到我们的部分和滑块中。一旦我们这样做了，css“height: calce(100vh – 133px)”将被应用，使它们都全屏（跨越浏览器窗口的整个高度）。

第二个代码段将 display flex 属性应用于该部分，使所有部分内容垂直居中。有关这方面的更多信息，请查看我们关于如何在 Divi 中垂直对齐内容的帖子。

第三个片段是完全可选的。这只是使底部页脚栏全宽以更好地适应设计，并匹配我们将添加的全宽页眉样式。

现在您已经有了外部 CSS，我们可以将 CSS ID 添加到我们的部分和滑块中。转到部分设置并添加以下 CSS ID：

CSS ID：全文

全屏页面布局