September 22, 2023

A Unique Elementor Loop Grid Design using the Text Path Widget

Play Video

Wouldn’t it be fascinating if you could design a loop grid in Elementor where the post title gracefully curves around the post’s image? The Text Path widget in Elementor makes this possible, and it’s a feature that’s often overlooked. Let’s see how you can achieve this captivating design.

Setting Up the Loop Grid

  1. Initiate the Loop Grid
    Begin by adding a loop grid in Elementor Pro.
  2. Template Creation
    Create a new template. Click on 'create template' and save.
  3. Add a Featured Image
    This will be the primary image around which your text will curve.
  4. Control Image Size
    • Set the container width and height to 300 each.
    • Zero out the margin and padding for the container.
    • Adjust the featured image’s margin and padding to zero.
    • In the style settings, set the width and height of the image to 300 by 300.
    • Adjust the object width to 'Cover'.
  5. Adjust the Image Curve
    • Zero out the Border radius.
    • Set a curvature of 1000 on the right, bottom, and left to achieve a gentle curve.
  6. Add the Text Path Widget
    • This widget is the magic behind the curving text.
    • For the path type, you have various options. However, for our design, the ‘circle’ option is ideal.
    • If you’re unsure about the path type, enable the ‘show path’ option to visualize it.

Customizing the Text Path

  1. Modify the Text
    Replace the default text with the post title by selecting the dynamic tag and choosing ‘post title’.
  2. Adjust the Starting Point
    • The text might start at the wrong end. To fix this, go to the style settings.
    • Under ‘text path’, adjust the starting point to position the text correctly around the image.
  3. Overlap the Text with the Image
    • Navigate to the Advanced tab.
    • Adjust the values to push the text up to overlap with the featured image.

Mobile Adjustments

  1. Resize for Mobile
    • Adjust the featured image size to 280 for mobile.
    • Set the container size to 280 for mobile.
    • Adjust the text path size to -280 for mobile.
  2. Final Touches
    • Hide the path in the content settings of the text path.
    • Ensure that the entire container is clickable by setting it as a link. This ensures that users can click anywhere on the container to navigate to the post.

Elementor Text Path Widget Conclusion

The Text Path widget in Elementor offers a unique way to present post titles in a loop grid. By curving the text around the featured image, you can create a visually appealing design that stands out. With a bit of creativity and the steps outlined above, you can easily implement this design on 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.
A Unique Elementor Loop Grid Design using the Text Path Widget
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.