WordPress divi主题

Divi 中固定位置的理解和使用指南

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

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

固定位置属性是学习如何正确使用的关键位置类型。 固定元素对于改善您网站的用户体验很重要。 滚动浏览网页时,固定标题保持在视图中,使用户更容易浏览网站。 固定侧边栏使重要的 CTA 和电子邮件选项保持可见,从而提高转化率。 固定通知栏、弹出窗口和许多其他内容也是如此。 一旦我们了解了固定位置的工作原理以及如何在 Divi 中正确使用它,我们将拥有一个强大的设计工具,将我们的 Divi 网站提升到一个新的水平。

google广告开户

在这篇文章中,我们将介绍:

  • Divi的四种定位方式概述
  • 固定位置如何“定位” Divi 中的元素
  • 在 Divi 中使用固定头寸选项
  • 使用固定位置时要记住的提示
  • 在 Divi 中使用固定位置的 6 种有用方法

看看这个!

Divi的四种定位方式概述

固定仓位是 Divi 仓位选项中可用的四种仓位类型之一。 以下是对以下每一项的快速概述。

静态(默认)

Divi 绝对位置

静态元素在技术上没有“定位”,因为它们保持页面上元素的正常流动或顺序,并且它们不像其他定位元素那样响应顶部、右侧、底部和左侧属性(这就是为什么不静态/默认位置的元素在 Divi 中可用)。 在 Divi 中,当我们为模块选择默认位置时,我们选择的是静态位置。 还值得一提的是,Divi 中的某些元素(如行和节)默认情况下会有相对位置(不是静态位置)。

相对的

Divi 绝对位置

相对定位的元素有点像静态元素,因为它们遵循页面的正常流程。 主要区别在于相对定位的元素可以使用 top、bottom、left 和 right 属性进行定位。 此外,与静态元素不同,它们也可以使用 Z Index 属性定位。

有关更多信息,请查看我们的指南,了解和使用 Divi 中的相对位置。

绝对

Divi 绝对位置

WordPress divi主题

绝对定位的元素会脱离正常的文档流,因此不会在页面上为该元素创建实际空间。 我们可以将其视为浮动在页面上其他占用实际空间的元素之上的元素。 它将相对于最近定位的父容器定位。

有关更多信息,请查看我们的指南,了解和使用 Divi 中的绝对位置。

固定的

Divi 绝对位置

与绝对位置一样,位置固定的元素会脱离页面的正常流动,在页面内没有创建实际空间。 绝对和固定之间的主要区别在于固定位置是相对于浏览器窗口或视口的。 换句话说,无论元素在页面的正常流程中的什么位置,一旦给定了一个固定的位置,它的位置现在将直接与浏览器窗口相关。 我们可以使用 top、bottom、left 和 right 属性在视口中定位元素。 因为固定元素通常会悬停在页面上其他元素的后面或前面,所以 Z Index 将有助于将固定元素排序在其他元素之上。

注意:CSS 中还有另一种类型的定位,称为粘性。 粘性定位元素的行为类似于相对定位的元素,直到我们滚动到它的容器(在某个点由顶部值确定)。 然后元素变得固定(或卡住),直到用户滚动到容器的末尾。 但是,粘性位置可能有点不可预测,因为其他因素可能会抑制功能。 粘性定位将在不久的将来内置到 Divi 中。

固定位置如何“定位” Divi 中的元素

正如概述中提到的,固定位置类型类似于绝对位置,因为元素突破了文档的正常流程(页面上的 HTML)。 打破文档流意味着元素不会留下它最初位于页面上的实际空间。 这是一个将相对位置更改为固定位置的模块的图示。 注意它最初在列中创建/占用的区域现在是如何消失的,模块现在固定在浏览器窗口的左上角。

divi固定位置

固定和绝对的最大区别在于,与相对于其父容器的绝对位置不同,固定位置是相对于浏览器窗口或视口的。 这就是为什么当用户向下滚动页面时固定元素会显示在视图中,而绝对定位的元素可能不会。

这是向下滚动页面时三个位置(相对、绝对和固定)如何起作用的说明。 请注意,当用户滚动时,固定模块保持原位(相对于浏览器定位)。

在 Divi 中使用固定头寸选项

在 Divi 中,您可以通过在高级选项卡下的位置选项组切换中选择固定位置选项来为任何元素提供固定位置。 一旦选择了相对位置,您还将找到其他固定位置选项(位置、偏移量、z 索引)。

fiverr建站WordPress程序员

divi固定位置

调整固定位置的基准位置

选择固定位置后,您可以使用可视位置界面选择基准位置。 根据您选择的基准位置,新的 X 和 Y 偏移控件将可用。

使用固定位置的偏移

垂直和水平偏移控件允许您进一步调整固定元素在其位置轴上的基本位置。

Offset Origin 和 Offset 值将一起工作以将我们的元素定位在浏览器视口中我们想要的任何位置。 在这个例子中,我们有一个具有固定位置、左上偏移原点、50px 垂直偏移和 50px 水平偏移的模块。 请注意偏移值将如何将元素从偏移原点水平和/或垂直移动(远离浏览器的左上角)。

divi固定位置

独立站选品工具

在 Divi 中为固定元素使用水平和垂直偏移值(如 CSS 中的 top、bottom、left 和 right 属性)时,重要的是要记住这些值将相对于浏览器视口定位元素。 Z Index 属性也可以用于固定元素。 因为大多数时候您希望这些固定元素保持在页面上其他元素的前面,所以您需要给它一个高 Z 索引值(例如 9999)。

使用可拖动锚重新定位页面上的固定元素

当您将元素的位置更改为固定时,当您将鼠标悬停在该元素上时会出现一个可拖动的锚点。 这允许您拖动元素以更改其位置。 当您重新定位元素时,其 X 和 Y 偏移会在模块设置中进行调整。

使用固定定位的一些技巧

为移动设备调整固定元素

不要忘记,您可以在不同的设备显示器上设置不同的位置和偏移量,以实现响应式设计。 例如,您可能希望在桌面上使用固定的标题,但在移动设备上却不需要。 固定侧边栏对桌面来说是有意义的,但在手机显示器上是不可能的。 要进行切换,您可以在平板电脑和手机上将 Divi 中的位置选项调整为相对。 这会将其捕捉回文档流中的原始位置。

divi固定位置

为固定元素创造空间

因为固定位置将元素放置在文档流之外,所以它们位于页面内容之上。 因此,如果您不希望固定元素隐藏内容,则需要为固定元素创建空间。 这可以通过多种方式完成,但通常通过在页面布局中添加填充或边距来完成。

高质量外链购买

一个很好的例子是固定侧边栏。 如果您想在 Divi 中为页面模板添加固定侧边栏,您首先需要确保主要内容区域的宽度减小,以便为固定侧边栏创建必要的空间。 因此,如果您使用一个部分来创建侧边栏,您可以为该部分指定一个固定位置、100% 的高度和 300 像素的宽度。

divi固定位置

然后,您需要为包含帖子内容模块(页面的主要内容区域)的其他部分提供 300 像素的左边距,以适应页面左侧边栏的宽度。

divi固定位置

对固定元素使用更高的 Z 索引

除非在您的页面上为固定元素提供了足够的空间,否则它将与页面上的其他内容重叠。 在大多数情况下,您会希望固定元素在滚动时与页面上的其他元素发生碰撞时保持可见(在顶部)。 为此,您可以向固定元素添加更高的 Z 索引,以确保它保持在 Z 空间中的所有其他内容之上。 如果你不知道要给什么值,你可以添加一个像 9999 这样的大数字。

JasperAI 10000字免费额度试用

6种使用固定位置的方法

#1 固定标题

新的固定位置选项的最佳用途之一是创建固定标题。 使用 Divi Theme Builder,您可以构建一个完全自定义的标题并使整个部分固定。

如何发布

这是一篇关于如何在 Divi 中构建固定标题的帖子:

#2 固定页脚栏

就像固定页眉一样,一些网站也受益于固定页脚或页脚栏。 这使用户可以在更隐蔽的位置将重要信息保持在最前沿。 固定页脚栏非常适合手机,因为它们非常接近那些渴望点击按钮的拇指。

操作方法帖子

以下是一些关于如何在 Divi 中构建固定页脚栏的帖子:

#3 固定侧边栏/垂直菜单

固定侧边栏使访问者在浏览您的网站时可以随时使用菜单、电子邮件选择加入和 CTA 等内容。 如果您愿意,您可以将溢出滚动添加到固定侧边栏,以获得具有大量内容的可滚动固定侧边栏。

WordPress备份工具updrafplus

操作方法帖子

这是一篇关于如何在 Divi 中构建固定侧边栏的帖子:

#4 固定的返回顶部按钮

返回顶部按钮通常固定在网站的右下角,用户始终可以单击以将其返回到页面顶部。

这是一篇关于如何在 Divi 中构建固定的返回顶部按钮的帖子:

#5 固定菜单

大多数滑入或弹出的菜单都有固定的位置。 这些也非常适合移动设备。

滑入式菜单

这是一篇关于如何在 Divi 中构建固定菜单的帖子:

#6 固定通知框、号召性用语、电子邮件选择加入等……

滑入式号召性用语

这是一篇关于如何在 Divi 中构建固定通知框的帖子:

最后的想法

在遇到使用固定位置的需要之前,您不会在 Web 开发中走得太远。 它用于构成网站的许多关键元素。 在 Divi 中,固定位置只需点击一下即可,但重要的是要了解它的工作原理才能很好地使用它。 希望本文能帮助您了解如何更好地使用 Divi 中的固定位置,以便您可以将下一个项目推向新的高度。

您对固定位置类型的体验如何?

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

干杯!

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