Welcome to another Duda Tip! Today we will show you a simple and easy trick to add visual interest to your website's text by adding a custom underline. This technique can help you emphasize important sections of copy and increase the overall visual interest of your site. We used this tip in the recent redesign of  Taylor's Educational Enrichment Foundation and by following these step-by-step instructions or the video below, you will be able to as well, adding creative emphasis to headers or text on your website in no time. So, let's dive in and get started!

Step 1. Add a Text Widget.

Add text by dragging a text widget to your row.

Step 2. Upload your image.

On the media manager, upload the image you will use as the underline. Below is the scribble line we've used or you can find different line graphics here https://www.freepik.com/ using keywords like "Scribble line" or "Underline" etc.

Step 3. Get the URL of the image.

On the left side of the Media Manager Window, click the name of the image. It will open a New Tab.

On the New tab, you will see the image with the image's URL. Copy the image's URL.

Step 4. Add the "underline" class code snippet.

Head back to the builder and open Developers mode, which you can easily do with this shortcut: CTRL + ALT + C. Then navigate to site.css and paste the code below.

.underline span[style*="text-decoration: none"]{

    position: relative;

}

.underline span[style*="text-decoration: none"]:after{

  content:'';

  background: url(' INSERT_URL_HERE ');

  background-size: 95%;

  position: absolute;

  left: -5px;

  top:100%;

  width: 120%;

  height:105%;

  background-repeat: no-repeat;

}

Step 5. Replace the URL.

Remember the URL from Step 3? Use that URL to replace the INSERT_URL_HERE text in the code snippet. Click Save and Close.

Step 6. Enable the "underline" class in the desired text widget.

Now, let's make the text widget capable of showing the underline scribble. Right-click the text widget and click Edit HTML/CSS.

Navigate to the HTML tab and add the "underline" class to the first division container. Update and close.

Step 7. Add the "Underline" to the desired text.

Select the text widget and highlight the text you want to add the scribble to then click Underline twice.

You can remove or reset the widget by highlighting the text and selecting Clear Format. 

Note that if you change the text to a heading or vice versa, the emphasis will disappear. Just repeat step 7 to add it again

And there you have it! An easy solution to create emphasis on a section of copy or header increasing the overall visual interest of the page. Repeat as needed!