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

时间:2021-11-27 作者:polo

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

由于我不熟悉WordPress和网站设计,我已经导入了一个带有Webify主题的演示网站,我正在根据该导入进行编辑。

我注意到,我网站上的一些页面顶部有一条“条纹”,带有背景图像,页面名称和位置上有一些文本。

例如,博客页面具有此水平条纹,带有红色背景图像和文本Blog左侧和Home / Blog右侧:

blog page

你看到了吗?在徽标和标题菜单的正下方?我要删除此水平条纹!问题是,我不知道怎么做。据我所知,它不是Elementor元素,因为当我在Elementor中编辑页面时,我无法与之交互。我也没有找到如何从WP自定义工具中删除它。

我的网站上确实有没有顶部水平条纹的页面,例如:

enter image description here

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

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

enter image description here

但每当我尝试创建一个新页面时,我都会得到一个带有此水平条纹的页面。我尝试直接从WP、Elementor创建一个新页面,我尝试使用一个好页面并从中创建Elementor模板,然后将模板导入新页面,甚至尝试克隆一个好页面,使用this WP plugin 但在所有这些尝试中,我得到的新页面都有条带);

查看我创建的一个好页面和一个新页面的页面属性,我无法找出控制这个水平条带的任何属性。

如果您能帮助我删除这条水平条纹,我将不胜感激!

此外,我还希望得到一些关于如何识别像这样的元素,然后将其隐藏在CSS中的调试指针。

非常感谢您的帮助:)

2 个回复
SO网友:P.Sav

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

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

 .yourexampleselector {
    
    Display: none;
    
    }

SO网友:Arnaud Dev

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

如果你做不到这一点,你可以随时查看wordpress在body标记中的每个页面中添加的类,它们允许CSS属性逐页应用。enter image description here

您也可以通过élementor添加自定义css代码,但我发现这个解决方案有点不干净,因为我们很快忘记了代码放置的位置。

enter image description here