5/5

How to Outline Text in Elementor

Outline text with a stroke often times gives your designs a really cool effect to make your designs come alive.

So we are going to go over just how easy it is to implement outline text in Elementor.

Let’s Begin

First thing we need to do is drag a heading widget on the page and choose a font that is big and fat.

I will be choosing Poppins with a font-weight of 800 and size at 71px.

Later we will need to change the color but for now we can leave it black.

Next we need to apply some CSS.

Go to the advanced tab and apply this in the custom css area.

selector {
     -webkit-text-stroke: 2px red;
}

You should now see a red stroke around your text.

Change the color of your text to white or what ever you like to match your site.

My Results

outline text

Browser compatibility

The only browser that does not support this CSS is …Explorer.

Every other browser has full support.

Browser compatibility

You can read more about it here.

😀.

By Aires Dagraca

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Related Articles

How To Add A Reading Progression Bar To Your Elementor Site

In todays article we will be going over 2 ways to add a reading progression bar to your Elementor Powered Site. The first requires a wordpress plugin with simple options for the average user and the second is going to…

How to Make Attention Grabbing Buttons

Often times a button with just an hover effect isn’t enough to grab your visitors attention. So in this brief article I am going to show you how easy it is to make attention grabbing buttons to help with conversions…

How To Trigger A Popup With a Menu Item

For this tutorial I will show you how to trigger a popup via a custom menu item. The process is pretty simple and won’t require to much of your time.…

Leave a Reply

Your email address will not be published. Required fields are marked *

Become a Premium Member and get full access to exclusive courses and templates.

Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
©2018 - 2020 Key Elements, All Rights Reserved
newsletter

Subscribe to get notified and receive a special invite.

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?