如何取消侧边栏

Linda 2019年11月28日09:23:57
评论
876

侧边栏是网站的重要组成部分,它能扩展某一些功能,对其进行自定义。可以使访问者更轻松找到所需要的信息。

通常我们是通过网站仪表盘的Appearances – Widgets进行拖拽添加

为什么我们要移除侧边栏

如果这个页面的侧边栏会使人分散注意力,那我们就不得不优化它了。记住,一个页面只有一个主题

移除侧边栏的方法

先在带侧边栏的页面上找出侧边栏的ID。快捷键shift+ctrl+c,移动到侧边栏的位置,可以看到以下内容

<aside id=”right-sidebar” class=”sidebar-container widget-area sidebar-primary” itemscope=”itemscope” itemtype=”http://schema.org/WPSideBar” style=””>

此页面的侧边栏ID为 “right-sidebar”

然后我们将下面代码放入 Appearances – Customize – Additional CSS

1.所有页面不显示侧边栏

Elementor 制作的页面,在页面属性和模板中选择elementor 全宽.也可以用代码实现

#right-sidebar {
display:none;
}

2. 手机端不显示侧边栏

@media only screen and (max-width:767px)
{
#right-sidebar {
display: none;
}
}

3. 移动端显示,PC端不显示侧边栏

#right-sidebar {
display:none;
}

@media only screen and(max-width:767px)
{ #right-sidebar
{
display:block;
}
}

成功删除边栏后,现在必须将内容宽度调整为:

#primary //use id/class name of your page-content
{
Float: none;
Width: 100%;
}

Linda
  • 本文由 发表于 2019年11月28日09:23:57
  • 转载请务必保留本文链接:https://beydian.com/remove-the-sidebar-in-mobile-view/

发表评论