SiteOrigin 隐藏行 - CSS

简介

SiteOrigin 是一款 WordPress 平台上广受欢迎的页面构建工具，它提供了很多方便易用的模块和构件，使得网站的布局设计变得更加简单、快捷。

在使用 SiteOrigin 进行网站布局设计时，有时候需要使用一些隐藏行来协助实现特定的效果。比如，在响应式布局设计中，由于不同屏幕尺寸的设备需要显示的内容不同，因此我们可能需要通过隐藏行来控制某些元素在特定的屏幕尺寸下是否显示。

SiteOrigin 提供了一种简单易用的 CSS 代码片段，可以帮助我们快速实现隐藏行的效果。

使用方法

在 SiteOrigin 的页面构建器中添加一个“Text”模块，然后在模块中插入以下 CSS 代码：

.sow-hidden {display: none;}
.sow-show-on-mobile {display: none !important;}
@media only screen and (max-width: 768px) {
    .sow-show-on-mobile {display: block !important;}
    .sow-hide-on-mobile {display: none !important;}
}

代码中包含了两个类名，分别是 sow-hidden 和 sow-show-on-mobile。其中 sow-hidden 表示该元素在任何情况下都将被隐藏，而 sow-show-on-mobile 表示该元素在屏幕尺寸小于等于 768px 时将被显示，否则将被隐藏。

如果你需要在屏幕尺寸大于 768px 时显示该元素，可以给该元素添加 sow-hide-on-mobile 类名。例如：

<div class="sow-show-on-mobile sow-hide-on-desktop">
    这里是需要在移动设备上显示的内容
</div>
<div class="sow-hide-on-mobile sow-show-on-desktop">
    这里是需要在桌面设备上显示的内容
</div>

以上代码将实现在移动设备上显示第一段内容，在桌面设备上显示第二段内容的效果。同时，如果设备宽度小于等于 768 像素，两个元素都将被显示。

结语

SiteOrigin 为我们提供了一种简单、方便、易用的隐藏行实现方法。在使用时，只需要按照上述代码片段的要求进行相应的标记，就能够实现移动端和桌面端的布局需求。