你想在WordPress块之间添加或删除空白空间吗?
在你的WordPress块之间添加或删除空白,使你对你的WordPress网站的设计有更多的控制。
在这篇文章中,我们将向你展示如何在WordPress块之间添加或删除空白空间,一步一步来。
为什么要在WordPress区块之间添加或删除空白空间?
WordPress让创建自定义页面和帖子变得很容易,其内置的 WordPress块编辑器.
然而,你可能注意到,当你添加某些块时,有太多或太少的间隔。通过在你的WordPress块之间添加或删除空白空间,你可以完全按照你的意愿创建自定义页面布局。
有了对你最终的控制 WordPress网站 设计,你可以为你的访问者提供更好的用户体验。
既然如此,让我们来看看如何在你的网站上添加或删除WordPress块之间的空白空间。只需使用下面的快速链接,就可以直接跳到你想使用的方法。
方法1.用区块编辑器在WordPress区块之间添加空白空间
在你的块之间添加空白的最简单的方法是使用WordPress的块编辑器。有一个内置的间隔块,让你只需点击几下就可以添加空白空间。
要使用这个,请打开 帖子或页面 你想编辑的帖子或页面,并点击 “加号 “添加块按钮。
然后,搜索’垫片’并选择该块。
这将自动在页面中插入一个间隔块。 。
你可以通过向上或向下拖动该块来使其变大或变小。
一旦你完成了,点击 “更新 “按钮,保存你的修改。
请记住,这种方法只允许你在块之间添加空间。要删除空间,你将需要使用下面的其他方法之一。
方法2.通过添加自定义CSS在WordPress区块之间添加或删除空白空间
另一个在你的区块之间添加和删除空白的方法是通过在你的主题中添加自定义CSS代码。
如果你以前没有这样做,那么我们建议你看一下我们的指南。 如何轻松地在你的WordPress网站上添加自定义CSS 在你开始之前。
接下来,打开你想编辑的页面或帖子,然后点击你想添加或删除空白的块。
然后,点击右侧选项面板中的 “块 “菜单项。
之后,向下滚动到 “高级 “下拉菜单并点击它。这就为该区块带来了一组额外的选项。
然后,在’附加CSS类’框中添加以下代码。
.add-remove-bottom-space
这段代码为该区块专门创建了一个新的CSS类, 。
之后,点击 “更新 “按钮,保存你的修改。
接下来,导航到 外观 ” 自定义 来调出 WordPress主题定制器.
然后,向下滚动并点击 “附加CSS “菜单选项。
这就会出现一个你可以添加CSS代码的区域。
接下来,将以下代码片段粘贴到框中。
.add-remove-bottom-space {
margin-bottom: 0;
}
这个代码片断将底部边距设置为零,并将删除区块中的空白空间。如果你想在底部增加空间,那么只需将 “0 “改为类似 “20px “的数值。
一旦你做了修改,请确保点击 “发布 “按钮,使你的修改生效 。
使用插件保存自定义CSS代码
通过在WordPress主题定制器中添加自定义CSS,它只会为你当前使用的主题保存。如果你 改变WordPress的主题,然后你需要复制CSS代码到你的新主题。
如果你想让你的自定义CSS无论在什么主题下都适用,那么你需要使用 简单自定义CSS plugin.
你需要做的第一件事是安装和激活该插件。更多细节,请看我们的指南 如何安装一个WordPress插件.
激活后,只需到 外观 ” 自定义CSS 并添加你的自定义CSS代码。
当你完成后,点击 “更新自定义CSS “按钮,保存你的修改。
方法3.用CSS Hero添加或删除WordPress块之间的空白空间
另一个对初学者友好的在WordPress块之间添加或删除空白的方法是使用WordPress自定义CSS插件。这可以让你在视觉上改变你的 WordPress博客 无需编辑任何CSS代码。
我们建议使用 CSS英雄 插件。它可以让你在WordPress网站上编辑几乎所有的CSS样式,而不需要写一行代码 。
成交。 WPBeginner的读者可以通过使用我们的 CSS Hero优惠券代码.
你需要做的第一件事是安装和激活该插件。更多的细节,请看我们的初学者指南中的 如何安装一个WordPress插件.
激活后,你需要点击 “继续进行产品激活 “按钮来激活该插件。你会发现这个按钮就在你已安装的插件列表上方。
这将把你带到一个屏幕,你需要输入你的用户名和密码。然后,按照屏幕上的指示,一旦你的账户被验证,你就会被重新定向到你的仪表板。
接下来,你需要打开你想编辑的页面或帖子,然后点击WordPress管理工具栏顶部的 “CSS Hero “按钮。
这将打开同一页面的 CSS英雄 在它上面运行。该插件使用可视化编辑器,因此你将能够实时进行修改。
当你点击你的页面上的任何元素时,它将在页面的左侧弹出一个工具栏,供你进行定制。
要删除或添加块之间的空白,只需点击 “间隔 “选项,然后向下滚动到 “边距-底部 “部分。
在这里,你可以向上或向下移动滑块,以增加或删除空白空间。
你所做的任何改变都会自动显示在你的页面上。
一旦你完成了修改,你需要点击’保存’按钮,使你的修改生效。
方法4.用SeedProd添加或删除WordPress区块之间的空白空间
SeedProd 是 最好的拖放式页面生成器 被超过100万个网站使用。
你可以使用150多个模板库来创建自定义的 404页面,销售页面。 着陆页,以及更多。SeedProd甚至可以被用来 创建一个自定义的WordPress主题 无需编写任何代码。
通过拖放构建器,你可以完全控制你的网站设计,你可以轻松地删除或添加任何网站元素的间距。
要了解更多信息,请参阅我们的指南 如何在WordPress中创建一个自定义页面.
当你在定制你的页面时,你可以通过使用间隔块在任何地方添加空间。
只需把它拖放到页面上任何你想在块之间增加空间的地方。
然后你就可以用滑块来调整它的高度。
你也可以控制任何块之间的间距。要做到这一点,只需点击你想增加或删除空间的任何块。
这就会出现左边的选项面板。然后,点击 “高级 “标签。
接下来,向下滚动到 “间隔 “下拉菜单并点击它。
这就会出现一个菜单,你可以控制’边距’。只需在底部边距框中输入一个数字,就可以增加空间,或者删除数字,就可以删除任何现有的空白空间。
一旦你完成了修改,点击 “保存 “按钮,选择 “发布 “下拉菜单,使你的修改生效。
我们希望这篇文章能帮助你学习如何在WordPress块之间添加或删除空白。