WordPress站点调整Elementor标题位置及添加图片切换过渡效果咨询

1. 标签标题位置调整 #

首先需要给存放图片+标签的父容器添加相对定位，再修改原有标签的定位规则，代码如下：

/* 此处为父容器自定义类名，你可以在Elementor编辑界面给对应列/section添加自定义类tab-image-container */
.tab-image-container {
  position: relative;
  overflow: hidden;
}

/* 覆写原有标签包裹器样式 */
.elementor-tabs-wrapper {
  position: absolute;
  bottom: 1em;
  left: 5%;
  width: 90%;
  z-index: 4;
  display: flex;
  justify-content: space-between;
}

/* 如flex布局不生效，可单独给两个标签设置定位 */
.elementor-tab-title:nth-of-type(1) {
  /* 对应Seil标题 */
  position: absolute;
  left: 0;
}
.elementor-tab-title:nth-of-type(2) {
  /* 对应Solseil标题 */
  position: absolute;
  right: 0;
}

2. 图片切换过渡效果 #

给标签内容区添加淡入淡出过渡，代码如下：

/* 标签内容区（图片所在区块）基础样式 */
.elementor-tab-content {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* 激活状态的内容区显示 */
.elementor-tab-content.elementor-active {
  opacity: 1;
  visibility: visible;
  position: relative;
}

注意事项 #

• 如果你给两个标签单独设置了自定义类/ID，可以替换上面的.elementor-tab-title:nth-of-type()选择器，定位精度更高
• 动画速度可自行调整transition属性中的0.3s参数，数值越大过渡越慢
• 修改代码后请清空WordPress缓存和浏览器缓存，再预览效果验证

内容的提问来源于stack exchange，提问作者Jurgen