V4 Elements Loop Grid Slider Estimated reading: 5 minutes 5 views Show your posts as a slider. Each slide is a post, with its picture and title. Visitors move through them with arrows or dots, and you can let it play by itself. No code needed. WIDGET Loop Grid Slider EFFECTS Slide, Perspective, Coverflow 3D, Card 3D, Marquee PLAN Free A QUICK LOOK What You Will Build A travel blog slider. It shows three posts at a time and moves along by itself. Click the arrow to go to the next posts. The slider plays by itself, then the arrow moves it on BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons first. That is all you need. Note: Slides show your posts. Give each post a featured image and the slider looks its best. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: the Loop Grid Slider is already on. If you ever need to turn it on again, it only takes a moment. In your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Find Loop Grid Slider under Dynamic Widgets and switch it on. Click Save Settings. The widgets list in your dashboard (click to zoom) Note: Looking for a grid and not a slider? Use the Loop Grid widget. STEP 2 Add It to Your Page Open a page in the Elementor Editor and drop the slider in. Click the + button at the top left to open the Elements panel. Type Loop Grid in the search box. Drag the Loop Grid Slider onto your page. The Loop Grid Slider in the Elements panel (click to zoom) Note: A new slider comes with a slide (picture and title), arrows, dots and a Load More button. STEP 3 Choose Which Posts to Show Open the Query section in the General tab. Keep Source on Posts. Set Posts Per Page. This is the number of slides. The default is 6. Set an Offset to skip the first posts. Choose Order By (Date by default) and Order (Descending, newest first). Source (1), Posts Per Page and Offset (2), Order By and Order (3) (click to zoom) Tip: Open Query Filters to show only some categories, tags or authors, or to hide some posts. STEP 4 Design the Slide Open the Structure panel. The slider is built from small parts. You design one Loop Slide Item, and it is repeated for every post. The Slider Track (1), the Loop Slide Item (2), the arrows (3) and the dots and pagination (4) (click to zoom) Click the Loop Slide Item. Inside are a Post Image and a Post Title. Click the Post Image to set its size and its rounded corners. Click the Post Title to change the font size, the weight and the color. Click Prev Nav or Next Nav to style the arrows. Tip: The pictures on this page use a corner radius of 18 on the image, and a bold 20px title. STEP 5 Choose How It Moves Open Slider Settings. It is the same panel as in the Nested Slider. Choose the Slider Effect: Slide (default), Perspective, Coverflow 3D, Card 3D or Marquee. Set Slides Per View, the number of slides you see at once. The default is 3. Set Slide Gap (px) for the space between slides. Switch Infinite Loop on to go round and round. Switch Autoplay on to move by itself. Then set the Autoplay Speed (ms). Effect (1), Slides Per View (2), Gap (3), Infinite Loop (4) and Autoplay (5) (click to zoom) Tip: Set Slides Per View to 1 for a big, one-at-a-time slider. STEP 6 Fine Tune (Optional) Open the Advanced tab inside Slider Settings. Peek %: shows a little of the next slide at the edge. Slider Easing: how the move starts and stops. Power 2 is the default. Transition Speed (ms): how long one move takes. The default is 680. Peek (1), Easing (2) and Transition Speed (3) (click to zoom) RESULT Final Result Six travel posts. The slider shows three at a time, plays by itself every few seconds, and the arrows let visitors move on at their own speed. The finished slider SETTINGS Options Source Default: PostsWhere the posts come from. Posts Per Page Default: 6How many slides. Offset Default: 0Skips the first posts. Order By / Order Default: Date / DescendingHow posts are sorted. Slider Effect Default: SlideSlide, Perspective, Coverflow 3D, Card 3D or Marquee. Slides Per View Default: 3Slides you see at once. Slide Gap (px) Default: 0Space between slides. Infinite Loop Default: OffGoes round again after the last slide. Autoplay Default: OffMoves by itself. Peek % Default: 0Shows a bit of the next slide. Transition Speed (ms) Default: 680How long one move takes. ID Optional CSS ID. GOOD TO KNOW More Details One slide, many posts You design one Loop Slide Item. The slider repeats it for every post. Same panel as Nested Slider The slider options work the same way. If you know one, you know both. The editor is a preview In the editor you see a sample slide. Check your live page for the real posts. HELP Troubleshooting I do not see the Loop Grid Slider in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Loop Grid Slider. Click Save Settings, then reload the editor. Type Loop Grid in the search box. I see only one slide in the editor That is the sample slide. Open your live page to see all posts. The slider does not move by itself Switch Autoplay on in Slider Settings. I see big text under each picture Click the Post Title in the Structure panel and set a smaller size in the Style tab. Your theme may set its own title size. A slide has no picture That post has no featured image. Add one to the post. You Did It Your page now shows your posts in a smooth slider. If you face any problem, please contact our support team. We are happy to help.
