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
- Initiate the Loop Grid
Begin by adding a loop grid in Elementor Pro.
- Template Creation
Create a new template. Click on
'create template'and save.
- Add a Featured Image
This will be the primary image around which your text will curve.
- 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
- 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.
- 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
- Modify the Text
Replace the default text with the post title by selecting the dynamic tag and choosing ‘post title’.
- 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.
- 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.
- 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.
- 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.