Post Slider Element

04/03/2019

Avada's Post Slider Element can be set to automatically pull your blog posts, titles and excerpts into a sleek and modern slideshow. It includes configuration options such as layout, categories, etc. The example below is displaying the latest posts from our blog.

View more examples!

How To Use The Post Slider Element

The Post Slider Element allows you to add a Post Sliders to your content, in a variety of layouts.

Step 1 – Create a new page or post, or edit an existing one.

Step 2 - Select the container and column you would like to place the post slider into.

Step 3 - Click on the + Element button at the bottom of the column. Select Post Slider.

Step 4 - The Layout option is the first option, and here you control the appearance of the post slider. There are three layouts to choose from, including Posts with Title, Posts with Title and Excerpt, and Attachment Layout, Only Images Attached to Post/Page.

Step 5 - With the first two layouts, the next thing to do is choose the categories and number of slides you want to display, and the number of words for the excerpt if you choose that layout,  but with the third layout option, you add individual images to your page to show in the slider.

Step 6 - Once you have set your styling options, click Save. You will be returned to the edit page. You can preview the page to view your content, and you can always edit the element again to make changes..

There are 3 different Post Slider layouts to choose from:

    • Post With Titles - Displays your post's title over a featured image.
    • Post With Excerpt & Titles - Displays post's title and excerpt over a featured image.
    • Attachments (Images Only) - Displays images uploaded to page or post.

    Element Options

    Location: The edit screen within each Element.

    You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

    • Layout - Select a layout style for Post Slider. Choose from Posts with Title, Posts with Title and Excerpt, and Attachment Layout, Only Images Attached to Post/Page.
    • Attach Images to Post/Page Gallery - To add images to this post or page for attachments layout, navigate to "Upload Files" tab in media manager and upload new images.
    • Excerpt Number of Words - Insert the number of words you want to show in the excerpt.
    • Category - Select a category of posts to display.
    • Number of Slides - Select the number of slides to display.
    • Image Lightbox - Only works on attachment layout. Lightbox must be enabled in Theme Options or the image will open up by in the same tab by itself.
    • Element Visibility - Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Fusion Builder Elements tab in the Theme Options.
    • CSS Class - Add a custom class to the wrapping HTML element for further css customization. Learn more here.
    • CSS ID - Add a custom id to the wrapping HTML element for further css customization. Learn more here.
    View The Options Screen

    Global Options

    There are no Global Options for this Element.

    Post Slider Element Parameters

    Copy to Clipboard
      • layout - Choose from posts, posts-with-excerpt, or attachments. Choose posts to pulls blog posts. Choose attachments to pulls images attached to the post. Choose posts-with-excerpt to pulls blog posts with excerpts.
      • excerpt - Accepts a numerical value. For example, 15. Sets how many words or characters the excerpt will be for post-with-excerpt layout.
      • category - The blog category to display.
      • limit - Accepts a numerical value. For example, 3. Sets the number of slides to display on the slider.
      • lightbox - Choose from yes, or no. Enable or disable the lightbox for the attachments layout.
      • hide_on_mobile - Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
      • class - Add a custom class to the wrapping HTML element for further css customization.
      • id - Add a custom id to the wrapping HTML element for further css customization.