自定义商店布局中的Off-canvas侧边栏

创建于2026-10-01

上次更新时间2026-10-01

由Mloun

抽屉式侧边栏会将筛选器或其他侧边栏内容隐藏起来，直到客户通过按钮将其打开。在自定义产品归档布局中，该设置由抽屉式侧边栏区域、内容区域以及一个用于打开侧边栏的按钮组成。

设置方法取决于用于产品归档布局的编辑器。

WPBakery

步骤 1. 添加一个包含两列的行。将侧边栏元素或筛选小部件放在一列中，将归档产品元素放在另一列中。

步骤 2. 编辑两列并配置抽屉式布局的列角色。将侧边栏列设置为抽屉式列，将产品列设置为内容列。为两个角色启用相同的桌面、平板和移动设备。

步骤 3. 在内容列内添加抽屉式按钮元素。

步骤 1. 添加一个父容器，其中包含两个水平排列的内层容器。将侧边栏元素或筛选器放在一个容器中，将归档产品放在另一个容器中。

步骤 2. 为两个内层容器配置抽屉式布局的列角色。为侧边栏选择抽屉式列，为产品选择内容列。为两个容器使用匹配的设备选择。

步骤 3. 在内容容器内添加抽屉式按钮小部件。

步骤 1. 添加抽屉式布局区块。它提供了所需的侧边栏和内容结构。

步骤 2. 选择内部的侧边栏区块，并配置它应作为抽屉式区域运行的设备。

步骤 3. 将抽屉式按钮区块添加到内容区域，并为其配置相应的设备。

抽屉式侧边栏及其打开按钮必须为兼容的屏幕尺寸启用。在桌面、平板和移动设备上预览归档页面，以确认侧边栏按预期显示或隐藏，并且按钮可以将其打开。