如何从WordPress页面中识别和隐藏/删除元素

Question

我使用Elementor和一个名为Webify的全合一主题创建了我的第一个WordPress网站。

由于我是新的WordPress和网站设计，我已经导入了一个演示网站，与Webify的主题，我是编辑的基础上的导入。

我注意到，在我的网站上的一些网页有这个顶部的‘条纹’与背景图像和一些文本的网页名称和位置。

例如，博客页面有一个带有红色背景图像的水平条带，左侧是文本博客，右侧是Home / blog：

你看到了吗？就在徽标和标题菜单下？我想去掉这个水平条纹！问题是我找不到方法。据我所知，它不是Elementor元素，因为当我在Elementor中编辑页面时，我无法与它交互。我也没有找到如何从WP自定义工具中删除它。

我的网站上确实有一些页面没有这个顶级的水平条纹，就像这个：

让我们称这种页面为“好页面”

我可以编辑一个好页面来创建我想要的漂亮页面：

但是每当我尝试创建一个新的页面时，我就会得到一个带有这个水平条带的页面。我尝试直接从WP创建一个新页面，从Elementor，我尝试使用一个好的页面，然后从它创建一个Elementor模板，然后将这个模板导入到一个新的页面中，甚至尝试使用这个WP插件克隆一个好的页面，但是在所有这些尝试中，我得到的新页面都是这样的)；

看看我创建的一个好页面和一个新页面的页面属性，我找不到控制这个水平条带的任何属性。

我将非常感谢您的帮助，以消除这个水平条纹！

此外，我还喜欢一些调试提示，说明如何识别像这个元素这样的元素，然后将其隐藏在CSS中。

非常感谢你的帮助:)

Answer 1

如果您看到的元素不能在Elementor中编辑，那么这就是主题模板的一部分。您应该考虑直接查看在此页面上使用的主题页模板来解决问题。

越少越好，根据您的问题，您可以使用css全局删除这个问题。在浏览器中，您可以检查元素，选择此div元素并使用选择器在自定义css中添加以下代码。

 .yourexampleselector {
    
    Display: none;
    
    }

Answer 2

正如P.Sav所说，它来自于你的主题。您安装了wordpress的“显示当前模板”扩展，它将显示页面上的模板，然后您可以找到它来自哪个模板文件。

如果您不能这样做，您可以始终查看wordpress在body标记中的每个页面中添加的类，它们允许逐页应用CSS属性。

您也可以通过élementor添加自定义css代码，但是我发现这个解决方案有点不干净，因为我们很快就忘记了我们把代码放在哪里了。