V4 Elements Post Pagination Estimated reading: 6 minutes 3 views Add Previous Post and Next Post buttons to your blog posts, so readers can keep reading with one click. Show a small preview card when someone points at a button. No code needed. WIDGET Post Pagination PARTS Previous Post, Next Post, Hover Preview Card PLAN Free A QUICK LOOK What You Will Build Two buttons at the end of a post. Point at one, and a small card shows the picture, category, title, date and summary of that post. Point at a button to see a preview of the post BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons first. That is all you need. Note: The buttons work on a single post page, because they need to know which post comes before and after. Use the widget inside a post, or in a single post template. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: Post Pagination 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. Under Blog Widgets, find Post Pagination and switch it on. Click Save Settings. The Post Pagination card in your dashboard (click to zoom) STEP 2 Add It to Your Post Open a post in the Elementor Editor and drop the buttons in. Click the + button at the top left to open the Elements panel. Type Post Pagination in the search box. Drag it to the end of your post. The Post Pagination (1) with its Previous Post and Next Post buttons (click to zoom) Note: You get two buttons, Previous Post and Next Post. Each one is a part you can style on its own. STEP 3 Choose Which Posts Come Next Open the Query section in the General tab. Constrain To: keep None (All Posts), or stay inside the same category or tag. Posts Filter Mode: choose Exclude to skip some posts, or Include to use only some posts. Then pick them in the box below. Order By: Date (default), Title, Menu Order or Custom Field. Order: Ascending (default, Next goes forward) or Descending. Switch Loop Around on, so the last post links back to the first. Constrain To (1), Posts Filter (2), Order By (3), Order and Loop Around (4) (click to zoom) Tip: Want readers to stay in the same topic? Set Constrain To to the category. STEP 4 Choose How It Shows Open the Display section. Choose the Display Mode: Inline (default), Sticky Bottom Bar or Floating Navigation (Side Arrows). For the last two, set Reveal After Scrolling (px). The buttons show up only after the reader scrolls this far. The default is 300. Display Mode (1) (click to zoom) Inline DefaultThe buttons sit where you put them, in the normal flow of the page. Sticky Bottom Bar The buttons stay at the bottom of the screen. Floating Navigation (Side Arrows) Two arrows float at the sides of the screen. Tip: Open Interactions and switch on Keyboard Arrow Navigation to let readers use the left and right arrow keys. STEP 5 Hide Buttons You Do Not Need Open the Visibility section. These four switches hide a button when it has nowhere to go. Hide If No Previous Post Hide If No Next Post Hide If First Post Hide If Last Post The four visibility switches (1) (click to zoom) STEP 6 Show a Preview Card on Hover A small card that shows what the next or the previous post is about. Open Hover Preview Card. Switch Enable Hover Preview on. Open the Structure panel. Inside each button you will find a Hover Preview Card. Click the pieces in it to restyle them, or delete the ones you do not want. Enable Hover Preview (1) (click to zoom) Tip: The card can hold a thumbnail, a category, a title, a date, an author and an excerpt. Delete any piece in the Structure panel to hide it. RESULT Final Result The two buttons, with the preview card open on Next Post. Pointing at Next Post shows the next post SETTINGS Options Constrain To Default: None (All Posts)Stay inside one category or tag. Posts Filter Mode Default: ExcludeExclude or include chosen posts. Order By Default: DateDate, Title, Menu Order or Custom Field. Order Default: AscendingAscending or Descending. Loop Around Default: OffLast post links back to the first. Display Mode Default: InlineInline, Sticky Bottom Bar or Side Arrows. Reveal After Scrolling (px) Default: 300When the sticky or floating buttons appear. Keyboard Arrow Navigation Left and right arrow keys. Visibility switches Default: OffHide a button that has nowhere to go. Enable Hover Preview Default: OffShows the preview card. GOOD TO KNOW More Details Oldest first by default With Order set to Ascending, Next Post goes to a newer post when posts are ordered by date. Works in templates Use it once in a single post template and it works on every post. Parts you can style The two buttons and the preview card are normal parts. Click one in the Structure panel and use the Style tab. HELP Troubleshooting I do not see Post Pagination in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and switch on Post Pagination under Blog Widgets. Click Save Settings, then reload the editor. A button is missing It may be the first or the last post, and one of the Visibility switches is on. Check Visibility. Also check Constrain To and your filters. The preview card does not show Switch Enable Hover Preview on. It shows when a visitor points at a button with a mouse. The buttons look plain Click each button in the Structure panel and style it in the Style tab: add a border, a radius, spacing and a color. Next goes to an older post Set Order to Descending. You Did It Your posts now lead readers to the next story with one click. If you face any problem, please contact our support team. We are happy to help.
