FLATSOME 响应式显示隐藏内容 HTML嵌入方法

在Flatsome主题的 UX Builder 可视化编辑中,你可以选择某些元素隐藏或显示特定屏幕的内容。通过使用这些属性,您可以对内容块中的内容执行显示隐藏操作。

举例:

这个段落在桌面上可见,但在移动设备上看不到。

HTML代码

<div data-show="[attribute-value]">
    <!-- any tag can be used -->
    <p>Content visibility</p>
</div>

属性

[attribute-value]:
hide-for-large   <!-- 隐藏桌面,显示平板电脑和移动设备 -->
hide-for-medium  <!-- 对于平板电脑隐藏,对于台式机和移动设备显示 -->
hide-for-small   <!-- 为移动设备隐藏,为台式机和平板电脑显示 -->
show-for-large   <!-- 显示桌面,隐藏平板电脑和移动设备 -->
show-for-medium  <!-- 显示平板电脑,隐藏台式机和移动设备 -->
show-for-small   <!-- 显示适用于移动设备,隐藏适用于台式机和平板电脑 -->

如何使用

使用具有相应 data-show 属性的标签

笔记

任何元素都可以与这些属性一起使用。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注