WordPress添加悬浮框 (Elementor插件中添加)

前提:

WordPress中使用Elementor插件

进入网站后台点击左侧菜单Templates-Footer模板编辑

步骤:

1.添加新的Section用于布局悬浮按钮,Section的margin和padding全部设置为0像素(Advance)

2.Section中Column的margin和padding全部设置为0像素(Advance)

3.添加悬浮按钮(可用Icon元素、按钮元素)设置悬浮按钮内容和样式

Content里面:

Text设置为空

Link设置

Size默认

Icon选择(添加邮箱图标)

Icon Space间距设置为0

Style里面:

调整字体大小(通过字体大小来控制图标大小)

调整文字颜色

调整按钮背景色

按钮Padding(调整按钮的大小比例)

4.设置按钮元素的参数-Advance

Positioning-width设置为Inline(Auto)

Positioning-Position设置为Fixed

水平方向设置为居右

水平方向的间距Offset设置为X像素(回到顶部按钮进行对齐)

Vertical Orientation垂直方向设置为下

垂直方向的间距Offset设置为X像素(按钮居于回到顶部的上方)

效果:

5.添加多个悬浮按钮,其它设置保持一致,调整垂直方向的间距以实现排列效果。

(右击制作好的悬浮按钮,点击Duplicate,即可得到一个新的悬浮按钮,Advance中调整垂直间距上下排布。)

0
分享到: