Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – 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

Here is a website that has the effect I am looking for: https://wehaulmo.com/

The "Reach Out Today" link in each section is what I am specifically referring to here.

I am not certain if this is custom css that was used or if there is actually a widget that helps create this effect in Elementor. I can create this effect just using an index.html and a style.css with no problem, but again, I am trying to understand how to get this done in Elementor for WordPress sites.

I must be missing something here because this effect is quite standard and I cannot for the life of me find the widget/element in Elementor that can create this underline effect.

If anyone out there is an Elementor guru, your help would be much appreciated.

Thank you.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to Shiverz for pointing me in the right direction here, it helped me out greatly. Thanks again man.

    Here is the HTML and CSS code that worked for me:

    /*** 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>


  2. 0

    Anytime you need to do something front-ended in an Elementor page that can’t be done with widgets, you can use a few ways to actually throw some css (and even JS) in there.

    1 – HTML WIDGET (Works without Elementor Pro)

    Insert the HTML widget where you would need your element to be. The HTML widget offers a textarea in the ‘content’ tab. In this text area, you can write HTML code, but you can also add CSS by using a <style></style> tag. Like this for example:

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

<style>
.demo{
    color: blue;
}
</style>

    You can even add a <script></script> tag if you need some Javascript.

    Also, every Elementor frontend widget has an ‘advanced’ tab in which you can find the ‘advanced’ section (First section of ‘advanced’ tab). In that section there are two fields labelled ‘CSS ID’ and ‘CSS Class’, which allow you to add an ID and/or a class to that element. You can then refer to that class or ID in your CSS and Javascript with a DOM.

    2 – Custom CSS (Pro Only)

    Every (almost every) widget in Elementor has a ‘custom CSS’ section under its ‘advanced’ tab. Keep in mind that you need Elementor Pro to access this section. You can write all the CSS you need in that section.

    Also, in that text area, you can refer to the element you are editing without needing its classname or id, simply by using ‘selector’ as such:

    selector{
    margin: 0 auto;
}

    Use "selector" to target wrapper element

    3 – Plugins

    There is a variety of plugins that are made specifically to add code to Elementor and other editors, with shortcodes or through other methods.

    In your case

    In your case, using the first way I described (HTML WIDGET), you would need to write something along the lines of this in your HTML Widget’s 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search