October 5, 2023

Create a Stroke Parallax Overlap Effect with Elementor

Play Video

Creating a Stroke Parallax Overlap Effect in Elementor can add a dynamic layer to your website’s design. This tutorial will guide you through the steps to achieve this effect.


Please make sure you have the following installed and activated:

Setting Up the Container

  1. Open your Elementor page and add a container widget.
  2. Go to the Layout settings of the container.
  3. Set the Height option to vh100 to make the container take up the full viewport height.

Adding and Styling the Heading

  1. Drag a Heading widget from the Elementor sidebar into the container you just created.
  2. Click on the heading to open its settings.
  3. Change the text to “Summertime” in the Content tab.
  4. Navigate to the Style tab.
  5. Adjust the Typography settings to set the font size and weight according to your preference.
  6. Under Advanced > Position select “Absolute” and place it to your liking.

Applying Motion Effects

  1. Navigate to the Advanced tab of the heading widget.
  2. Scroll down and click on Motion Effects.
  3. Enable Scrolling Effects by toggling the switch.
  4. Choose Horizontal Scroll from the dropdown menu.
  5. Set the direction to “Right”.
  6. Adjust the speed and range using the sliders to get the desired scrolling effect.

Creating the Stroke Effect

  1. Right-click on the original heading widget and choose Duplicate.
  2. Click on the duplicated heading to open its settings.
  3. Rename this new heading to “Outline Heading” for easier identification.
  4. Navigate to the Advanced tab.
  5. Scroll down to CSS Classes and add the class name “outline-heading”.
  6. Scroll down to Custom CSS and insert the following code:
    .outline-heading {
      -webkit-text-stroke: 2px #fff;

Note: Make sure to style your two headings differently so that it has a transition effect.

Layering Elements

  1. Drag an Image widget into the section, placing it below the heading.
  2. Set under Advanced > Positioning the Z-index like the following:
    • Original Heading
      Z-index: 1
    • Image
      Z-index: 2
    • Outline Heading
      Z-index: 3

Stroke Parallax Overlap Effect for Elementor – Conclusion

By following these detailed steps, you’ll successfully create a Stroke Parallax Overlap Effect in Elementor. This effect will add a visually engaging and dynamic layer to your website.

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Create a Stroke Parallax Overlap Effect with Elementor
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.