我刚开始使用 Elementor for WordPress，我想知道如何为标题创建淡入/淡出下划线效果

Posted 2023-03-06

【中文标题】我刚开始使用 Elementor for WordPress，我想知道如何为标题创建淡入/淡出下划线效果

【英文标题】：I just started using Elementor for WordPress and I want to know how I can create a fade in/fade out underline effect for a heading

【发布时间】：2021-01-03 08:02:06

【问题描述】：

这里有一个网站，有我要找的效果：https://wehaulmo.com/

每个部分中的“今天伸出援手”链接是我在这里特别提到的。

我不确定这是使用的自定义 css，还是实际上有一个小部件可以帮助在 Elementor 中创建这种效果。我可以使用 index.html 和 style.css 毫无问题地创建此效果，但我再次尝试了解如何在 Elementor 中为 WordPress 网站完成此操作。

我一定是在这里遗漏了一些东西，因为这种效果非常标准，我终生无法在 Elementor 中找到可以创建这种下划线效果的小部件/元素。

如果有人有 Elementor 大师，我们将不胜感激。

谢谢。

【参考方案1】：

当您需要在 Elementor 页面中做一些小部件无法完成的前端操作时，您可以使用几种方法在其中实际投入一些 css（甚至 JS）。

---

1 - HTML 小部件（无需 Elementor Pro 即可使用）

在您需要元素的位置插入 HTML 小部件。 HTML 小部件在“内容”选项卡中提供了一个文本区域。在此文本区域中，您可以编写 HTML 代码，但也可以使用 <style></style> 标签添加 CSS。比如这样：

<p class="demo">Hello!</p>

<style>
.demo
    color: blue;

</style>

如果您需要一些 javascript，您甚至可以添加 <script></script> 标签。

此外，每个 Elementor 前端小部件都有一个“高级”选项卡，您可以在其中找到“高级”部分（“高级”选项卡的第一部分）。在该部分中有两个标记为“CSS ID”和“CSS Class”的字段，允许您向该元素添加 ID 和/或类。然后，您可以使用 DOM 在 CSS 和 Javascript 中引用该类或 ID。

---

2 - 自定义 CSS（仅限专业版）

Elementor 中的每个（几乎每个）小部件在其“高级”选项卡下都有一个“自定义 CSS”部分。请记住，您需要 Elementor Pro 才能访问此部分。您可以在该部分编写您需要的所有 CSS。

此外，在该文本区域中，您可以引用您正在编辑的元素，而无需其类名或 id，只需使用“选择器”即可：

selector
    margin: 0 auto;

使用“选择器”来定位包装元素

---

3 - 插件

有多种插件专门用于向 Elementor 和其他编辑器添加代码，使用短代码或通过其他方法。

---

---

你的情况

在你的情况下，使用我描述的第一种方式（HTML WIDGET），你需要在你的 HTML Widget 的 textarea 中写一些类似的东西：

<a href="#" class="demo">REACH OUT TODAY</a>
<style>
.demo 
  color: #f89c27;
  font-size: 24px;
  letter-spacing: 0.20em;
  position: relative;
  display: inline-block;


.demo:hover
    color: #f89c27;


.demo:after     
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
position: absolute;
  display: block;
  height: 2px;
  left: 50%;
  background: #f89c27;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;


.demo:hover:after 
  left: 0;
  width: 100%; 


</style>

【讨论】：

我看到有一个 html 小部件并正在考虑这一点，但是当我检查网站上的元素时，它显示该链接正在使用 Elementor 标题。无论如何，我会试一试。感谢您的帮助。

是的，我也检查过了。但是，正如我所提到的，您可以在其高级选项卡下为元素提供类或 id。我猜这就是所做的，然后从自定义 CSS（仅限专业版）部分添加了 css。如果您没有专业人士，您可能可以给标题一个类，然后有一个仅包含 CSS 的 html 小部件具有相同的效果。希望你能找到适合自己的方法。

我暂时有亲。再次感谢您的帮助。

甜蜜！我照顾好了！再次感谢伙计。我只需要制作一个 Elementor 标题，给它一个“下划线”的 CSS 类 ID，然后像你说的那样简单地将自定义 CSS 添加到“高级”选项卡中，这很容易。

很高兴我能帮到人！如果您有专业人士，我发现自定义 CSS 选项卡非常有用。太糟糕了，没有等效的javascript。无论如何，既然您提到您刚刚开始使用 Elmentor，请不要犹豫发布任何其他 Elementor 相关问题，我几乎每天都会浏览 elementor 标签。 ;-)

【参考方案2】：

感谢 Shiverz 为我指明了正确的方向，这对我帮助很大。再次感谢大佬。

这是对我有用的 HTML 和 CSS 代码：

/*** Styling Underline Hyperlink ***/

/* Creating Underline */
.underline.elementor-widget-heading .elementor-heading-title>a 
    position: relative;


.underline.elementor-widget-heading .elementor-heading-title>a:after 
    content: '';
    width: 0%;
    height: 2px;
    background-color: #FAC074;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translatex(-50%);
    -webkit-transition: width .4s;
    transition: width .4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;


.underline.elementor-widget-heading .elementor-heading-title>a:hover:after 
    width: 90%;
    -webkit-transition: width .4s;
    transition: width .4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;


/** Creating Arrow **/
.underline.elementor-widget-heading .elementor-heading-title>a:before 
    content: url(http://ronratzlaff.wpengine.com/wp-content/uploads/2020/09/icon-arrow-right.svg);
    width: 1px;
    height: 1px;
    position: absolute;
    bottom: 15px;
    right: -12px;

<div class="elementor-element elementor-element-c3ae88a underline elementor-widget elementor-widget-heading" data-id="c3ae88a" data-element_type="widget" data-widget_type="heading.default">
    <div class="elementor-widget-container">
        <div class="elementor-heading-title elementor-size-default"><a href="#request">Reach Out Today</a></div>
    </div>
</div>