Creating Post Slider/Carousel using AnyWhere Elementor Pro
You can use Post Blocks widget to create Post Slider.
Note: You will need "AnyWhere Elementor Pro" ver 2.8 or greater for this.
The process of creating Post Slider using Post Block widget includes 2 stages.
- Preparing design of the individual slide (using Block Layout)
- Using Block layout created in step above to create Post Slider or even carousel.
Preparing layout of single Slide
Here is a sample slide layout for reference. It includes Post Title, Post Excerpt, and a Read More button.
Follow the steps below to design a block layout (layout for a Slide)
- Go to AE Template -> Add New
- Add a suitable title and do configuration as mentioned below.
- Render Mode: Block Layout
- Preview Post: Select a post which you want to see as a preview while designing the layout in the Editor.
- Also, select Template as "Elementor Canvas" so that you will get the plain canvas to design the layout.
- Now click on "Edit with Elementor" to design this layout in Elementor editor.
- In Elementor drag widgets Title, Post Excerpt and Post Readmore. Place them and design as per your layout.
- You can add featured images to section background.
- Give proper height, padding to the main section of the slider. Make sure to design it all in one main section and used child section or columns as required.
Once it is complete then just save and you can now exit this editor.
It's half done. You have completed designing layout of a slide for your Post Slider.
Adding Post Slider to your Page/Post
- Open the page on which you want to add Post Slider in Elementor editor mode.
- Drag AE - Post Blocks widget at the desired location in your layout.
- Now you will see the Block layout you have created under Templates dropdown.
- Under "Query" section set all options to define the source of the Posts to be used in Slider.
Under "Layout" section define the way you want to display your posts.
There are multiple options available like Grid, List & Carousel. For Slider you will have to select Carousel and set the number of slides below to 1.
Once you have selected Carousel as layout, you will see another section below "Carousel". There you will get a lot of other option to configure the carousel (like speed, navigation controls, effects etc. )
Configure these options as per your requirement. You will also get lot of styling options under Style tab to change color and size of slider controls.