Image Stack Info Widget

Present your content beautifully with stacked image, title, and text elements. Choose between vertical or horizontal styles for maximum visual impact using the Image Stack Info Widget.

Follow the step-by-step instructions:

1. Go to Menu RTMKit Pro.

2. Then, you’ll see the Image Stack Info Widget appear.

3. Click Add New Container.

4. Select your layout : Flexbox or Grid.

5. On the canvas select your structure.

6. Drag the widget from the Elementor 

7. Drop it on the selected area.

8. Setting Stack Content :

• Click Content → Info Stack.

9. Click on the Repeater section, you can choose to display an with image, icon, or text.

• Then, select the image you’d like to showcase.
• You can also add custom icons or text to match your design style when using the With Image or With Text option.
• Need more items? Just click Duplicate or Add Item to expand your repeater list.

10. Text Content :

• Click Content → Text Content.
• In the Text Content section, enable or disable features like Show Content, Show Text, Show Rating, and Show Count Rating, whichever fits your layout.
• Add Counter Text and Text Content to provide additional details.

11. If you enable Show Rating, a rating icon will appear as shown in the image below.

12. Rating Content :

• Click Content → Rating.
• Adjust the Rating and Rating Scale to suit your content feedback style.

13. Wrapper Style (used to customize the wrapper style) :

• Next, go to the Style tab to refine the look and feel of your image stack info widget.
• Click Style → Wrapper.
• Set the layout direction to horizontal or vertical based on your visual needs.
• Configure the container’s alignment, gap, and padding inside your section wrapper.

14. Image Stack Style (used to customize the image stack style) :

• Click Style → Image Stack.
• Next, adjust the width, gap image, and margin left to shape your image stack layout.

15. Here, you can select from three tabs to customize the design according to your needs.

• To style the image, go to the “With Image” tab. Customize the background color, border color, object fit, border style, border width, and border radius.
• To style the icon, go to the “With Icon” tab. Set the icon size, text color, background color, border color, border style, border width, and border radius.
• To style the text, go to the “With Text” tab. Set the text color, background color, typography, border color, border style, border width, and border radius.

16. Content Style (used to customize the content style) :

• Click Style → Content.
• Change the text color and typography for both the counter and the text content.
• Want to change the rating position? Just enable the Reverse Position toggle.
• And adjust spacing by setting the gap content, gap count rating, and padding.

17. Rating Style (used to customize the rating style) :

• Click Style → Rating.
• Customize the appearance of your rating icons.
• Adjust the alignment, enable the custom rating icon, and define the rated and unrated color, icon size, spacing, and the typography of the rating label.

18. Now, just click Publish and let your design shine on your page.