使用Elementor建网站的时候,想要做一些垂直的分割线需要怎么做呢?有两种方法,通过边框或者使用Spacer Widget,本文Elementor教程网会给大家介绍下这两种方式的具体操作步骤。
使用栏边框
通过给栏添加边框的方式,我们可以设计出来一个垂直的分割线,如下图:
我们给段设置2个或者多个栏,然后选择其中一个栏,例如教程中我们选择的第一个栏。
切换到样式标签,边框选项处,边框类型选择实线。
宽度右侧设置为2,其他位置的为0
设置边框颜色为红色。
设置完毕就可以看到在两个栏之间多了一根竖着的直线划分开了。
最后我们还需要切换到手机端样式上,把这个右侧的边栏宽度改为0,避免手机端出现垂直分割线。
使用间隔元素
使用间隔元素(Spacer Widget)添加垂直分割线的话,我们需要单独给Spacer Widget分配一个栏,比如正常我们是2栏,中间想要插入一个垂直分割线,使用Spacer Widget来做的话就需要变成3栏。
首先我们个间隔小部件分配一个中间的栏,正常的栏加起来总宽度是100%,我们可以设置左右两边的栏宽度分别为48%,中间的栏宽度就变成了4%。
我们把间隔元素拖动到中间的栏之后进行设置。
首先,在间隔的内容标签,我们需要设置间隔的宽度,这里可以选择多少PX,或者多少VH或者多少EM。
然后切换到高级设置,在外距处,通过设置左右两边的百分比距离来控制间隔中间的宽度,例如我们左右均设置为47%
然后在高级设置里面找到背景,设置一个颜色,垂直分割线效果就出来了。
最后依然是切换到移动端编辑这个间隔的显示效果。
以上就是两种给Elementor网页添加垂直分割线的方法了,更多Elementor教程,欢迎继续关注我们。