Oxygen Builder Header Builder标题生成器

Oxygen Builder Header Builder标题生成器

Oxygen Builder Header Builder标题生成器

  Header Builder可以轻松创建响应式、粘性、多行的标题。从“+Add”->”Helpers”->“Header Builder“将Header Builder添加到您的页面。

Oxygen Builder Header Builder标题生成器
Oxygen Builder Header Builder标题生成器

  本文,晓得博客为你介绍如何使用Oxygen Builder Header Builder标题生成器。

  推荐:什么是lazy loading延迟加载

Positio Elements定位元素

  每个Header Builder元素由多个Header Row元素组成。每个Header Row元素分为三个子部分-left、center 和 right。可以通过用鼠标拖动元素来定位每个标题行内的元素。您还可以使用结构面板进行定位。

Positio-Elements定位元素
Oxygen Builder Header Builder标题生成器
多行

  要向Header Builder添加另一个Header Row,请激活Header Builder,然后在Header Builder设置中单击“Primary“->“Add Another Row”。

Header-Builder多行设置
Oxygen Builder Header Builder标题生成器

  推荐:如何将可点击的电话号码添加到WordPress菜单

粘性标题

  要将页眉粘贴到页面顶部,以便在用户向下滚动页面时保持在浏览器视口的顶部,请执行以下步骤:

Header-Builder粘性标题
Oxygen Builder Header Builder标题生成器
  • 在右侧的Structure面板中选择Header Builder。
  • 单击左侧面板中的Sticky粘性标题。
  • 选中粘性复选框。

粘性标题的配置选项

粘性标题的配置选项
Oxygen Builder Header Builder标题生成器
  • scroll distance滚动距离——在显示粘性标题之前用户必须滚动多远。
  • sticky background color粘性背景颜色——仅当它具有粘性时才会应用到Header Builder的背景颜色-用于使覆盖在英雄背景图像上的透明标题具有粘性。
  • sticky above——只会在这个屏幕宽度之上是sticky,用于隐藏移动设备上的sticky header。
  • sticky box shadow粘性框阴影——CSS代码用于自定义在标题下方显示为粘性时显示的阴影。
  • sticky header z-index粘性标题——为粘性标题定义z-index-有助于防止页面上的其他元素在滚动时出现在粘性标题的顶部。
  • fade in sticky 粘性淡入——选中此框可在标题变为粘性时使用淡入淡出动画。
  • fade in speed淡入速度——动画淡入的速度。

  推荐:如何在Elementor中创建粘性标题

粘性标题行可见性

  Header Builder元素中的每个单独的Header Row都可以配置为显示或不显示,具体取决于Header Builder的粘性状态。要更改这些设置,请在右侧的“Structure结构”面板中选择一个标题行。

粘性标题行可见性
Oxygen Builder Header Builder标题生成器

  在左侧的属性窗格中,在Primary选项卡下,您会看到一个名为“”Sticky Display“”的部分。在那里,您可以选择仅在Sticky中显示或隐藏在Sticky中。

  推荐:WordPress网站如何在移动设备隐藏小部件

响应式标题设置

  默认情况下,标题中的元素水平堆叠。Header Row的 left、right 和 center元素将并排显示在一行中。但是,在较小的屏幕上,您可能希望标题的元素垂直堆叠而不是水平堆叠。

  要垂直堆叠整个Header Builder或单个Header Row,请选择Header Builder或Header Row并转到Primary。然后在Stack Vertically Below垂直向下堆叠”下拉列表中选择屏幕宽度。当屏幕宽度低于所选值时,标题行或标题生成器内的元素将垂直堆叠。

响应式标题设置
Oxygen Builder Header Builder标题生成器

  要将特定标题行隐藏在某个屏幕宽度以下,只需在“Hide Row Below隐藏行”下拉菜单中选择宽度。

  推荐:Oxygen Builder页面构建器教程

给文章评分

晓得博客,版权所有丨如未注明,均为原创
晓得博客 » Oxygen Builder Header Builder标题生成器

转载请保留链接:https://www.pythonthree.com/oxygen-builder-header-builder/

Claude、Netflix、Midjourney、Chatgpt Plus账号购买,ChatGPT API购买,优惠码XDBK,用户购买的时候输入优惠码可以打95折

Chatgpt-Plus注册购买共享账号
Kinsta-free-hosting主机
Kinsta-free-hosting主机
Elementor可视化创建WordPress网站
Elementor可视化创建WordPress网站
滚动至顶部