在 Divi 主题中编辑 HTML答案

【问题标题】：Edit HTML in Divi Theme在 Divi 主题中编辑 HTML
【发布时间】：2017-12-09 10:39:26
【问题描述】：

这是我在这里的第一篇文章，如果有任何格式不正确，敬请见谅。请告诉我如何改进我的问题。

我正在使用 Wordpress 中的 Divi 主题为客户构建网站。我想创建一个自定义叠加层（显示视频的标题）以在悬停时显示。我需要它出现在视频前面，显示图像（也是叠加层）和播放按钮后面。目前，自定义叠加层在悬停时位于播放按钮的顶部，这显然是一个问题，因为该按钮需要可点击。

我尝试使用 z-index 属性（确保所有 div 都已定位），但无济于事。我目前怀疑 z-index 不起作用的原因是因为我的自定义覆盖 overlay-one 类被应用于父 div，因此没有包含在正确的堆叠上下文中。

为了移动课程，我需要编辑 HTML，但我不确定如何在 Divi 中进行操作。通常，我会直接通过 FTP 进行编辑，但我的客户是那些不希望 任何人 拥有 FTP 访问权限的稍微偏执的人之一……甚至是他网站的开发人员。因此，如果有一种解决方法不涉及我与我的客户通过 FTP 进行斗争，我将不胜感激。

链接到主页，我正在制作第一个视频“欢迎来到摩押”：http://finleyholidayproductions.com/home-finley-holiday-productions/

在最顶部的 div 中显示 overlay-one 的 HTML，我假设我需要将其移动到包含 et_pb_video_overlay 的 div 中。

代码如下：

.et_pb_video_box {
  position: relative;
  z-index: -1;
}

.et_pb_video_overlay {
  position: absolute;
  z-index: 1;
}

.et_pb_video_play {
  position: absolute;
  z-index: 100;
}

.overlay-one {
  position: absolute;
}

.overlay-one:after {
  position: absolute;
  z-index: 5;
  content: '';
  background: url('http://finleyholidayproductions.com/wp-content/uploads/2017/12/Video-Overlay-Template-Recovered.png');
  background-size: cover;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: .5s ease all;
}

.overlay-one:hover:after {
  opacity: 1;
}

<div class="et_pb_module et_pb_video overlay-one et_animated et_pb_video_0">
  <div class="et_pb_video_box">
    <iframe src="https://player.vimeo.com/video/230963151" width="1080" height="608" frameborder="0" title="Secrets of the Moab Desert" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
  <div class="et_pb_video_overlay" style="background-image: url(http://finleyholidayproductions.com/wp-content/uploads/2017/12/Thumbnails-1-Secrets-of-the-Moab-Desert.jpg);">
    <div class="et_pb_video_overlay_hover">
      <a href="#" class="et_pb_video_play"></a>
    </div>
  </div>

总之：

我的解决方案是正确的
如何在 Divi 中编辑 HTML 以实施此解决方案。

谢谢。

【问题讨论】：

标签： html wordpress z-index

【解决方案1】：

如果你坚持不访问 html：

我建议在class="et_pb_video_overlay_hover" 上添加一个:after 伪元素。我会将标题放在content: 中，如下所示：

et_pb_video_overlay_hover::after {
    content: "Title";
    ///other css properties to style your title etc.
}

【讨论】：