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

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

举例：

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

HTML代码

<div data-show="[attribute-value]">
    <!-- any tag can be used -->
    <p>Content visibility</p>
</div>
php
105 Bytes
© Flatsome 中文版
<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   <!-- 显示适用于移动设备，隐藏适用于台式机和平板电脑 -->
css
292 Bytes
© Flatsome 中文版
[attribute-value]:
hide-for-large   <!-- 隐藏桌面，显示平板电脑和移动设备 -->
hide-for-medium  <!-- 对于平板电脑隐藏，对于台式机和移动设备显示 -->
hide-for-small   <!-- 为移动设备隐藏，为台式机和平板电脑显示 -->
show-for-large   <!-- 显示桌面，隐藏平板电脑和移动设备 -->
show-for-medium  <!-- 显示平板电脑，隐藏台式机和移动设备 -->
show-for-small   <!-- 显示适用于移动设备，隐藏适用于台式机和平板电脑 -->

如何使用

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

笔记

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