前提:
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中调整垂直间距上下排布。)