WordPress divi主题

如何在 Divi 中创建具有水平滚动的响应表

| 5月 3, 2022 | Divi主题使用教程 | 0 条评论

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

创建响应式表格可能是一项挑战,尤其是在您有一个包含很多列的表格时。 解决此问题的一个好方法是向表格添加水平滚动功能。 具有水平滚动的表格解决了两个主要问题。 首先,它允许设计人员保持表格内容所需的间距(非常窄的列会导致内容过多地挤在一起)。 其次,它允许用户在移动设备上查看易于阅读的表格内容。

google广告开户

在本教程中,我们将向您展示如何使用 Divi 构建一个完全自定义的水平滚动表格。 我们将向您展示如何将水平滚动功能添加到溢出表格容器的列。 另外,我们甚至会在表格中添加一些水平滚动按钮来提升用户体验。 这一切都没有插件!

让我们开始吧。

抢先看

下面是我们将在本教程中构建的带有水平滚动的响应式表格的快速浏览。

免费下载布局

要掌握本教程中的设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

要将部分布局导入 Divi 库,请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中,选择导入选项卡并从您的计算机中选择下载文件。

然后单击导入按钮。

迪维通知框

WordPress divi主题

完成后,部分布局将在 Divi Builder 中可用。

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 选择“从头开始构建”选项。

之后,您将有一个空白画布开始在 Divi 中进行设计。

使用水平滚动构建响应式表格

第 1 部分:构建表格列

对于此表设计,我们将使用行创建表列。 为此,我们将使用 flex 属性(自定义 CSS)像列一样水平对齐行。

更新部分设置

在添加一行之前,打开默认常规部分的部分设置,并在主元素中添加以下自定义 CSS:

display:flex;
overflow-y:scroll !important;

这将强制该部分的水平溢出具有滚动功能,并为我们提供水平而不是垂直组织行所需的 flex 属性。

带水平滚动的divi表

添加行

现在部分 CSS 已就位,在该部分中创建一个单列行。

fiverr建站WordPress程序员

带水平滚动的divi表

行设置

打开行设置并更新以下内容:

  • 天沟宽度:1
  • 宽度:100%

这将确保我们的表格列在我们将为表格项目添加的文本模块之间没有任何额外的边距。

带水平滚动的divi表

然后给该行一个右边框,如下所示:

独立站选品工具
  • 右边框宽度:1px
  • 右边框颜色:#cccccc

带水平滚动的divi表

然后更新填充:

  • 内边距:0px 顶部,0px 底部

带水平滚动的divi表

在高级选项卡下,为该行提供一个自定义 CSS 类,如下所示:

  • CSS 类:et-scroll-table-column

稍后我们将需要此自定义代码。

高质量外链购买

带水平滚动的divi表

使用文本模块创建表格项

要在每一行(或表列)中创建表项,我们将使用文本模块。

添加文本模块

带水平滚动的divi表

文字内容

接下来,将文本“Table Item”添加到文本模块的正文内容中。

带水平滚动的divi表

JasperAI 10000字免费额度试用
文字设计

在设计选项卡下,更新以下内容:

  • 文字对齐:居中
  • 高度:80 像素

带水平滚动的divi表

  • 右边框宽度:1px
  • 底部边框颜色:#cccccc

此边框将匹配行的右边框。

带水平滚动的divi表

文本 CSS

要确保模块中的文本保持垂直和水平居中,请将以下 CSS 添加到高级选项卡下的主元素:

WordPress备份工具updrafplus
display:flex;
align-items:center;
justify-content: center;

带水平滚动的divi表

更多表格项目的复制文本模块

现在我们的第一个表项已经创建,复制文本模块(根据需要多次)以在行中创建其他表项。

带水平滚动的divi表

创建表格列的标题

我们需要将最顶部的文本模块变成表格列的标题。 为此,请打开顶部文本模块的设置,将图层视图中的标签更新为“标题”,并在正文内容中添加文本“标题”。

带水平滚动的divi表

然后更新背景颜色。

带水平滚动的divi表

并更新文字的设计如下:

  • 文字字体粗细:粗体
  • 文字字体样式:TT
  • 文字文字颜色:#ffffff

带水平滚动的divi表

复制更多表格列的行

现在第一行已经完成,我们可以复制该行以根据需要为表创建尽可能多的表列。 对于此设计,我们将复制该行八次以创建总共九行。

带水平滚动的divi表

第 2 部分:设计带有垂直标题的粘性表格列

最左边的行(或第一行)将作为我们表格的垂直标题。 首先,我们需要更新行背景和每个文本模块,使它们具有与每列顶部的标题相同的设计。 然后,我们将让整行保持粘性,以便在用户水平滚动以查看隐藏的表格列时保持原位。

更新行背景

为此,请打开第一行的设置并更新背景颜色:

  • 背景颜色:#333333

带水平滚动的divi表

更新文本模块

然后,打开包含标题的顶部文本模块的设置。 右键单击文本选项组并选择扩展文本样式。 在“扩展样式”弹出窗口中,选择 扩展文本的样式所有文本 自始至终 本栏目. 然后单击扩展按钮。

带水平滚动的divi表

然后多选该行中的所有文本模块(按住 ctrl(或 cmd)并单击每个模块)并使用文本“标题”更新正文内容。

带水平滚动的divi表

添加徽标

由于我们不需要此列中最顶部的标题,因此我们将在表格中添加一个徽标。

打开第一行中最顶部的文本模块的设置。

然后删除正文。

带水平滚动的divi表

然后添加徽标(确保其大小约为 40 x 40 像素)作为背景图像。 确保背景图像大小设置为“实际大小”。

带水平滚动的divi表

使垂直标题行具有粘性

要使该行具有粘性,请将以下自定义 CSS 添加到主元素:

min-width: 150px;
position: -webkit-sticky !important;
position: sticky !important;
left: 0;

(您可以忽略任何将使用粘性属性显示的代码错误。)

带水平滚动的divi表

要确保粘性行在其他行上方保持可见,请更新 Z 索引:

带水平滚动的divi表

第 3 部分:更新表的部分

现在表格元素都准备好了,我们可以用特定的大小和溢出来更新部分(表格容器)。

打开部分设置并添加背景颜色:

  • 背景颜色:#ffeaef

带水平滚动的divi表

然后更新大小和间距如下:

  • 宽度:100%
  • 最大宽度:900px
  • 保证金: 10vh 顶部
  • 内边距:0px 顶部,0px 底部

带水平滚动的divi表

然后添加以下 CSS 类:

  • CSS 类:et-scroll-table

并更新溢出:

  • 水平溢出:滚动
  • 垂直溢出:隐藏

(注意:我们已经将“overflow:scroll”作为自定义 CSS 添加到该部分,以便滚动功能也将在可视化构建器上生效。)

带水平滚动的divi表

第 4 部分:添加水平滚动按钮

因为水平滚动功能在桌面上很明显,我们将添加水平滚动按钮以获得更好的用户体验。

添加部分

为此,请创建一个新的常规部分。

带水平滚动的divi表

打开部分设置并取出默认填充:

  • 内边距:0px 顶部,0px 底部

带水平滚动的divi表

添加行

给该部分一个单列行。

带水平滚动的divi表

并按如下方式更新行设置:

  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:900px
  • 内边距:顶部 10 像素,底部 10 像素,右侧 10 像素

带水平滚动的divi表

创建左滚动按钮

要创建左滚动按钮,请在列/行中添加一个简介模块。

带水平滚动的divi表

取出默认的标题和正文内容,并添加一个左箭头图标。

带水平滚动的divi表

在设计选项卡下,更新以下内容:

  • 图标颜色:#333333
  • 图像/图标对齐:居中
  • 使用图标字体大小:是
  • 图标字体大小:40px
  • 内容宽度:100%
  • 宽度:50 像素

带水平滚动的divi表

然后给简介一个 CSS 类:

  • CSS 类:et-scroll-left

这对于稍后使用我们的代码将点击滚动功能添加到简介/按钮是必要的。

带水平滚动的divi表

创建右滚动按钮

要创建右滚动按钮,请复制简介,并使用右箭头更新图标。

带水平滚动的divi表

然后更新 CSS 类:

  • CSS 类:et-scroll-right

带水平滚动的divi表

要水平对齐按钮,请打开列的设置,然后添加以下自定义 CSS:

display:flex;
justify-content:flex-end;

带水平滚动的divi表

第 5 部分:添加自定义代码

对于本教程的最后一部分,我们需要添加为行(实际上是我们的表格列)设置最小宽度所需的 CSS 以及为按钮添加滚动功能所需的 JS 代码。

要添加代码,请在第二个简介下添加一个代码模块。

带水平滚动的divi表

在代码框中,粘贴以下 CSS 确保将代码包装在必要的 风格 标签。


.et-scroll-left:hover, .et-scroll-right:hover{
cursor:pointer;
}
.et-scroll-table-column {
min-width: 150px;
}

@media all and (max-width: 980px) {
.et-scroll-table::-webkit-scrollbar {
display: none;
}
.et-scroll-table {
-webkit-overflow-scrolling: touch; 
-ms-overflow-style: -ms-autohiding-scrollbar; 
}
}

在 CSS 代码下,粘贴以下 jQuery,确保使用必要的包装代码 脚本 标签。

(function($) {
$(document).ready(function(){
var $scrollTable = $(".et-scroll-table");
var $rightButton = $(".et-scroll-right");
var $leftButton = $(".et-scroll-left");
var singleColumnWidth = $(".et-scroll-table-column").width();
var scrollByColumnNumber = (singleColumnWidth + 1) * 2;

$rightButton.click(function () {
$scrollTable.animate({scrollLeft: "+=" + scrollByColumnNumber}, 300);
});
$leftButton.click(function () {
$scrollTable.animate({scrollLeft: "-=" + scrollByColumnNumber}, 300);
});
});
})( jQuery );

带水平滚动的divi表

更新列宽

如果要更新每个表格列的最小宽度,可以在 CSS 中更改最小宽度的值。

带水平滚动的divi表

更新滚动的列数

目前,单击按钮将水平(向左或向右)滚动等于两列宽度的距离。 要更改滚动时的列数,请更新变量值中最右边的数字(当前为数字 2) 按列数滚动.

带水平滚动的divi表

添加交替列颜色

现在,部分背景颜色决定了所有表格列(或行)的颜色。 如果要为这些列创建交替颜色,请使用多选来选择每隔一行并为每一行添加白色背景颜色。

带水平滚动的divi表

最后结果

现在看看最终结果!

这是桌面上表格的最终设计。

带水平滚动的divi表

这是桌面和移动设备上的水平滚动功能。

最后的想法

无论我们在网页设计领域走了多远,表格似乎总能占据一席之地。 他们继续提供有价值的解决方案,以用户理解的方式组织内容。 这个带有水平滚动的表格应该可以在广泛的用例中派上用场。 而且,也许最好的部分是,您可以更新表格内容(通过 Divi 的内置内联编辑器)并使用视觉构建器以无数创造性的方式为表格设置样式。

有关在 WordPress 中创建响应式表的更多信息,请查看我们关于如何在 WordPress 中创建响应式表的帖子。

我期待在评论中收到您的来信。

干杯!

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