Teach you to make a pop-up testimonial article rotation block in 3 minutes! Super nice sliding effect to get this way!

In a content-based website or blog, "recommended posts" are often an important module to increase the user's dwell time and browsing depth. For a more engaging way to display recommended content, you can use the Elementor Pro (used form a nominal expression) Loop Carousel The feature to make articles into a sliding display effect is visually good, interactive and perfect for the home page or the bottom of the article page. This article will teach you how to use the Loop Carousel Functional implementation of recommended article rotation.

I. Preparatory work

The following prerequisites must be met in order to use the Loop Carousel feature:

• Elementor Pro plug-in installed and enabled
• There are already a number of published articles available for the Featured Showcase
• Loop Item templates have been created in advance (refer to the official Elementor documentation, or reuse existing templates).

If you don't already have Elementor Pro, head over to the official website to purchase and activate it.

Adding a Loop Carousel to a Page

1. Open the article you need to add a recommendation toweb page(e.g. home page or article page)
2. Click [Edit with Elementor].
3. Search for "Loop Carousel" in the left component panel.
4. Drag the component to the appropriate place on the page.
5. Select an existing Loop Item template in the Settings panel.

III. Setting up article filters (displaying recommended content)

If you want this Carousel to show only posts under a certain category or tag, you can configure it in the query settings:

1. Click the [Query] tab
2. Select [Article Type] as Posts
3. Set to display articles in specific categories, tags or manually selected articles via [Include by Term].
4. It is also possible to limit the number of articles displayed, e.g. to show the last 6 articles.

This way you can precisely control the content of the "Recommended Articles" display.

Fourth, style and slide effect optimization

Loop Carousel supports a variety of interaction settings:

• Whether or not to enable Autoplay

• Sets the size and color of the left/right toggle icon and its position in the rotation.

• Adjusts the size, color, position, and spacing of the rotating navigation dots.

Just be flexible and adjust it to your page style.

V. Mobile Adaptation (responsive(Optimization)

Remember to check the mobile device display:

1. Elementor Click on the device icon in the lower left corner
2. Switch to phone/tablet mode
3. Adjust parameters such as the number of displays per line, text size, card margins, etc.

It is guaranteed to be a good display experience on cell phones as well.

VI. Summary

With Elementor Pro's Loop Carousel feature, you can easily create a beautiful and useful "Recommended Articles" rotating module to enhance the visual hierarchy of your website, increase user stickiness and page interaction. Showcase popular content, related articles, and enhanceconversion rate, it's all a very worthwhile layout to try.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off