WordPress divi主题

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

by | May 15, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

让我们开始吧。

抢先看

这是我们将在本教程中创建的最终全屏页面布局的预览。

全屏页面布局

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

全屏页面布局

你需要什么

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

订阅我们的 Youtube 频道

WordPress divi主题

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

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

基本思想解释

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

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

接下来,将倒数计时器模块(或任何模块)添加到一列行。

全屏页面布局

为方便起见,将倒数计时器中的背景颜色取出,并为部分添加背景颜色,以便我们更好地识别页面上部分的高度。 目前,该部分的高度是相对于它包含的内容的高度而言的。 在这种情况下,我们拥有的唯一内容是带有 sing 模块的单行。

全屏页面布局

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

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

全屏页面布局

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

fiverr建站WordPress程序员

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

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

全屏页面布局

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

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

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

独立站选品工具

全屏页面布局

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

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

唯一的区别是最小高度值。 现在有一个计算可以共同考虑页眉和底部页脚栏的额外高度(以像素为单位)。

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

全屏页面布局

高质量外链购买

现在我们已经基本了解了如何在 Divi 中创建自定义全屏页面,让我们深入了解更复杂的设计。

构建完整的全屏页面设计

要开始此设计,请创建一个新页面,为您的页面命名,然后部署 Divi Builder。 选择“选择预制布局”选项,然后从“从图书馆加载”弹出窗口中选择“健身健身房布局”页面。 然后单击以使用定价页面。

全屏页面布局

将布局加载到构建器后,单击按钮以在前端(可视化构建器)上构建,您就可以开始了。

创建新部分

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

JasperAI 10000字免费额度试用

全屏页面布局

将模块添加到您的列

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

全屏页面布局

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

全屏页面布局

WordPress备份工具updrafplus

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

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

全屏页面布局

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

全屏页面布局

这照顾了我们现在需要的所有模块。 我们稍后会重新访问设计设置,但现在,让我们自定义我们的行。

自定义行设置

打开行设置并首先向第 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:全节

全屏页面布局

现在打开第 3 列中滑块的 Slider Module 设置并添加以下 CSS ID:

CSS ID:全幻灯片

全屏页面布局

最后的润色

至此,全屏页面功能就位并且应该可以工作了。 您可以在隐身浏览器中检查它以确保。 剩下的就是一些最后的润色。

为我们的列添加间距

打开您的行设置,在第 1 列和第 2 列的顶部添加一些填充,如下所示:

第 1 列自定义填充:顶部 12vh,左侧 1vw,右侧 1vw
第 2 列自定义填充:顶部 12vh,左侧 1vw,右侧 1vw

全屏页面布局

请注意,我使用 vh 长度单位作为顶部填充值。 这将允许内边距随着视口的高度缩放,当浏览器窗口变高时创建更多内边距,并随着浏览器变短创建更少内边距。 我为左右填充值使用了 vw(视口宽度)长度单位,以便填充将根据浏览器的宽度进行缩放。

为大文本添加 vh 长度单位以最大化查看空间

如您所见,有一些模块的文本非常大,根本无法随浏览器窗口缩放。 为了解决这个问题,我们可以将文本大小设置为 vh 长度单位。 这将允许文本在较短的浏览器屏幕上按比例缩小。

打开第 1 列顶部的文本模块的设置,并将 h1 标题文本大小更新为 7vh(不是 vw)。

全屏页面布局

接下来,打开第 2 列顶部的文本模块的设置,并将标题 2 文本大小更新为 6vh。

全屏页面布局

更新滑块设计

要完成设计,您可以复制第 2 列中按钮的按钮设计并将其粘贴到滑块的按钮样式中。 为此,请打开第 2 列中按钮的按钮设置,然后右键单击按钮选项类别,然后单击“复制按钮样式”。

全屏页面布局

之后,打开滑块设置并将按钮样式粘贴到滑块的按钮选项类别中。

全屏页面布局

全屏页面布局

您还可以为各个幻灯片添加背景叠加层。

全屏页面布局

页眉和底部页脚栏调整

您可能还记得我们已经添加了一小段自定义 CSS,将我们的页脚扩展为全角。 这是为了让我们的主菜单栏也全宽。 要使您的主菜单栏全宽,请转到 WordPress 仪表板并导航到 Divi > Theme Customizer > Header & Navigation…

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题