A Unique Elementor Loop Grid Design using the Text Path Widget

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.