Divi WordPress Theme

无论您的主题多么令人惊奇,开发人员多么有才华,或者网站设计有多完美,在某个时候,您都有可能想要更改某些内容。 不多,只是拿 边栏或 文本框消失。 但是在单个页面上,而不是在所有页面上。 为此,您需要了解两个特定的CSS属性, 能见度展示,这可以帮助您通过略有不同的方式完成对特定页面上某些元素的隐藏。

为什么要隐藏元素?

网站所有者想要隐藏的更普遍的元素之一是网站标题。 或更具体地说,是标题导航菜单。 也许是博客文章的元数据或评论部分。 问题是,为什么有人要这样做? 为什么不从网站设计中完全删除数据?

通常,这是因为一个单一的元素妨碍了,但是将其删除不值得重写主题或要剪切的页面。 也许您的“关于”页面上有博客文章列表,但您不想在其中发布元数据。 您没有理由为该实例重写模板文件。 因此,您可以通过CSS删除它。

或者,作为另一个示例,您想简单地在单个帖子或页面上取消评论部分,而无需使用编辑器。 CSS使您可以完全隐藏或删除它,而不会影响网站的任何其他部分。 在特定页面或帖子上使用CSS隐藏元素的一个流行原因是调整字体或标题大小。 在仍然适用博客主题和布局的情况下,可以用几行代码完成特定页面的季节性字体更改以及隐藏的元数据和侧边栏,而无需进行完整的模板调整或重新设计。

但是,无论出于何种原因,您都有许多隐藏元素的选项。

如何找到要隐藏的元素

如果您知道要隐藏哪个元素而不是要调用的元素,则始终可以右键单击它并选择 检查。 这将打开 开发工具 浏览器中的“窗格”,让您找到它使用的CSS ID或类。

检查元素

完成此操作后,当您将鼠标悬停在该元素上并单击右侧检查工具中的正确行时,该元素将突出显示。

隐藏元素css

之后,只使用那些选择器来调整CSS。 请注意,悬停在元素上的选择器语法 (1) 将在您的CSS文件/字段中显示。 内联选择器 (2) 是浏览器呈现的内容。

使用显示CSS

隐藏元素的最简单方法是将其完全删除。 这 显示:无 财产就是那样。 它会完全删除您附加的所有元素。 页面的那一部分将不再呈现,它在页面上占据的空间将被删除,布局也将重新调整。

删除内容

这可能是删除页面上元素的最常用方法。 您可以将其用作网站范围的删除,也可以定位单个页面或帖子类型。

使用可见性CSS

可见度:隐藏 CSS非常类似于 显示:无。 从理论上讲,它们可以用来实现相同的目标。 但是,最大的不同是,使用此控件,您不会删除该元素。 和 能见度,您只是使它不可见。 从设计的角度来看,最大的不同是 能见度,隐藏的元素本身仍会占用设计空间。

如果要删除页面上的标题,但要与DOM顶部保持间距,则可以使用它。

标题菜单

页面渲染时,空间仍将存在,但元素将不存在。

没有标题

何时使用可见性和何时使用显示

如果在其他元素上使用hide元素CSS,则使用一位的主要原因很简单。 使用时 显示:无,子元素的整个继承都被隐藏了。 任何具有样式或嵌套在元素中的内容都将消失。 和 可见度:隐藏,因为元素的空间仍然存在,所以所选元素的所有子元素都保持可见。

例如,如果您想隐藏一行和一行的背景,则可以使用 可见度:隐藏 保持其他元素的格式和渲染,删除 只要 您指定的那些。 使用 显示:无 在这种情况下,将删除整个行或列,从而重新组织页面内容。

如何在WordPress中隐藏特定页面上的元素

使用以下两种方法之一隐藏WordPress特定页面上的元素时,您很可能需要找到 网页ID类别 对于要在其上隐藏元素的特定页面。 请记住,这是简单的页面ID号而不是CSS ID。 实际上,它是一个CSS类选择器: .page-id-1337, 例如。

您可以在编辑页面的URL中找到页面或发布ID。 最快的方法是将鼠标悬停在链接上并查看预览URL。

页面编号

您还可以通过以下方法找到该ID: 编辑 或者 预览 页。 这些URL中列出的数字是您将在CSS选择器中使用的页面ID,用于定位该特定页面上的元素,而不是网站上的其他任何地方。

.page-id-55341 header#main-header {
display:none;
}

上面的代码将仅删除具有该特定ID的页面上的标题。 以下CSS会将其从每个页面上删除并发布在网站上的位置。

header#main-header {
visibility:hidden;
}

用Hide Element CSS进行包装

无论您出于何种原因,都知道何时以及CSS属性之间的区别 能见度展示 (以及何时使用它们)可以帮助您自定义和突出显示WordPress网站上的不同页面。 有时,您可能需要图像以使其根本不出现在页面上。 或者,博客文章不需要显示元数据或日期。 无论您要删除什么元素,都可以使用hide元素CSS的某些变体来实现目标。

您必须使用CSS隐藏特定WordPress页面上的元素的原因是什么?

maryliflower / shutterstock.com的文章特色图片


【免费外贸推广营销视频培训教程】
https://school.yooopaaa.com

WordPress著名Avada主题官方优惠
https://1.envato.market/xxPav

WordPress可视化建站Elementor插件
https://elementor.com/?ref=19904

WordPress外贸独立站DIVI主题官方优惠
https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=59787

亚马逊选品工具Jungle Scout官方优惠
https://junglescout.grsm.io/jieqiu1568

独立站SEO优化工具Semrush免费7天试用
https://shareasale.com/r.cfm?b=1577772&u=2541755&m=97231&urllink=&afftrack=