tips
教程需要,本站采用的国外服务器,国内访问较慢,感谢耐心等待。

怎么在Elementor里面添加竖着的分割线

使用Elementor建网站的时候,想要做一些垂直的分割线需要怎么做呢?有两种方法,通过边框或者使用Spacer Widget,本文Elementor教程网会给大家介绍下这两种方式的具体操作步骤。

使用栏边框

通过给栏添加边框的方式,我们可以设计出来一个垂直的分割线,如下图:

elementor栏边框

我们给段设置2个或者多个栏,然后选择其中一个栏,例如教程中我们选择的第一个栏。

切换到样式标签,边框选项处,边框类型选择实线。

宽度右侧设置为2,其他位置的为0

设置边框颜色为红色。

设置完毕就可以看到在两个栏之间多了一根竖着的直线划分开了。

最后我们还需要切换到手机端样式上,把这个右侧的边栏宽度改为0,避免手机端出现垂直分割线。

使用间隔元素

使用间隔元素(Spacer Widget)添加垂直分割线的话,我们需要单独给Spacer Widget分配一个栏,比如正常我们是2栏,中间想要插入一个垂直分割线,使用Spacer Widget来做的话就需要变成3栏。

elementor栏宽度设置

首先我们个间隔小部件分配一个中间的栏,正常的栏加起来总宽度是100%,我们可以设置左右两边的栏宽度分别为48%,中间的栏宽度就变成了4%。

我们把间隔元素拖动到中间的栏之后进行设置。

elementor间隔元素

首先,在间隔的内容标签,我们需要设置间隔的宽度,这里可以选择多少PX,或者多少VH或者多少EM。

然后切换到高级设置,在外距处,通过设置左右两边的百分比距离来控制间隔中间的宽度,例如我们左右均设置为47%

然后在高级设置里面找到背景,设置一个颜色,垂直分割线效果就出来了。

最后依然是切换到移动端编辑这个间隔的显示效果。

以上就是两种给Elementor网页添加垂直分割线的方法了,更多Elementor教程,欢迎继续关注我们。

随便看看

#!trpst#trp-gettext data-trpgettextoriginal=578#!trpen#發佈留言#!trpst#/trp-gettext#!trpen#

#!trpst#trp-gettext data-trpgettextoriginal=577#!trpen#發佈留言必須填寫的電子郵件地址不會公開。#!trpst#/trp-gettext#!trpen# #!trpst#trp-gettext data-trpgettextoriginal=572#!trpen#必填欄位標示為 *#!trpst#/trp-gettext#!trpen#