可以在WordPress的编辑器窗口中创建一个全宽的行吗?

时间:2018-07-10 作者:YCode

是否可以仅使用WordPress的编辑器(包括CSS编辑器)创建全宽的部分?(不包括使用第三方插件)?

编辑:下面的信息旨在证明我已经完成了我的研究。我知道人们可以编辑PHP或CSS文件以获得所需的结果,我对在WordPress的本机参数范围内工作感兴趣。

使用Chrome中的web检查器,我可以看到我放在编辑器窗口中的任何内容都属于div class="entry-content", 但我想在头版上放置一条横幅,横幅横跨整个屏幕——比entry-content 区域,这意味着覆盖div class="entry-content" 设置。

以下是我尝试过的一些事情:

添加唯一的div 在后端(“文本”)编辑器中初始化(“横幅”),然后添加.banner: 100% 在WordPress的CSS定制器中;我在Customizer中添加了:.banner { position: absolute; width: 100%; left: 0; }header.php 具有.banner: full-width;entry-content)?

目前,我正在WordPress主题216th中进行实验。

1 个回复
最合适的回答,由SO网友:Krzysiek Dróżdż 整理而成

一种方法是进行一点聪明的CSS黑客攻击;)

这是斯文·沃尔夫曼的解决方案(codepen)

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

结束