Recent Posts Element

23/01/2019

As well as the Blog Element, Avada also comes with a Recent Posts Element. This element is unique in that it offers more compact design options than the Blog element, which may work better on pages with a lot of varied content. This element enables you to display your posts on any page, select various layouts, assign custom categories to display and so much more. You can use the Recent Posts Element as many times as you'd like, and on any page or post. Before you can display blog posts, you must first create them.

  • Avada 500K Celebratory Sale

The Avada 500K Celebratory Sale

April 2nd, 2019|Comments Off on The Avada 500K Celebratory Sale

Each milestone is a celebration. However, this one is particularly special and a special thank [...]

Avada 5.9 Feature Fantastic

March 26th, 2019|Comments Off on Avada 5.9 Feature Fantastic

Avada 5.9 is a design focused feature update paving the way for some truly innovative [...]

How To Use The Recent Posts Element

The Recent Posts Element is a very quick and easy way to add the most recent blog posts anywhere on your site.

Step 1 - Create a new page or edit an existing one.

Step 2 - Add a container then select your desired column layout.

Step 3 - Click the '+ Element' button to bring up the Elements window. Locate the 'Recent Posts' element and click it to bring up its options window.

Step 4 - Configure the Recent Posts Element to your liking. The Recent Posts Element comes with 3 different layouts for you to choose from. They can then all be customized to your liking. To view the possibilities of this element, make sure you visit the Recent Posts Element Demo page. Once you have chosen your preferred layout, go slowly down the options list, customizing its appearance to suit your wishes.

Step 5 - Once you have finished configuring the options, click 'Save' to insert the element into the page. Preview the page to view the Recent Posts element output, and remember you can comes back into the element to fine tune it.

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.

Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada's Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General Tab

  • Layout - Controls the posts layout. Choose between Standard, Thumbnails on Side, or Date on Side.
  • Picture Size - Choose whether the Recent Post image should be fixed (width and height will be fixed) or auto (width and height will adjust to the image).
  • Hover Type - Controls the hover effect type for the featured images. Choose between None, Zoom In, Zoom Out, or Lift Up.
  • Columns - Controls the number of columns to display. Choose from 1-6.
  • Posts Per Page - Controls the number of posts to display per page. Set this option to -1 to display all posts. Choose from -1-25.
  • Post Offset - Controls the number of posts to skip. Choose from 1-25.
  • Pull Posts By - Allows you to choose to show posts by category or tag. Choose between Category or Tag.
  • Categories - Allows you to select which post categories to display. Leave blank to show all categories.
  • Exclude Categories - Allows you to select which categories to exclude. You can exclude multiple categories, or leave blank to exclude none.
  • Show Thumbnail - Allows you to show or hide the featured images. Choose between Yes or No.
  • Show Title - Allows you to show or hide the post title below featured images. Choose between Yes or No.
  • Show Meta - Allows you to show or hide all meta data. Choose between Yes or No.
  • Show Author Name - Allows you to show or hide the author's name. Choose between Yes or No.
  • Show Categories - Allows you to show or hide the categories. Choose between Yes or No.
  • Show Date - Allows you to show or hide the date. Choose between Yes or No.
  • Show Comment Count - Allows you to show or hide the comment count. Choose between Yes or No.
  • Show Tags - Allows you to show or hide the tags. Choose between Yes or No.
  • Content Alignment - Controls the alignment of content. Choose between Text Flow, Left, Center, or Right.
  • Text display - Allows you to display or hide the post excerpt. Choose between Excerpt, Full Content, or None.
  • Excerpt Length - Controls the number of words/characters to display in the post excerpt.
  • Strip HTML - Allows you to strip HTML from the post excerpt. Choose betweenYes or No.
  • Pagination Type - Controls the type of pagination. Choose between No Pagination, Pagination, Infinite Scrolling, or Load More Button.
  • Element Visibility - Allows you to select the screen sizes to show or hide the element in. You can choose one or more settings. Choose from Small Screen, Medium Screen, or Large Screen.
  • CSS Class - Allows you to add a class to the wrapping HTML element.
  • CSS ID - Allows you to add an ID to the wrapping HTML element.
View The Options Screen

Animation Tab

  • Animation Type - Allows you to select what type of animation to use. Choose between None, Bounce, Fade, Flash, Rubberband, Shade, Slide, or Zoom.
  • Direction of Animation - Allows you to select the animation's incoming direction. Choose between Top, Right, Bottom, Left, or Static.
  • Speed of Animation - Allows you to set the speed of the animation.
  • Offset of Animation - Allows you to set at what point the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
View The Options Screen

Global Options

There are no Global Options for the Recent Posts Element.

Recent Posts Element Parameters

Copy to Clipboard
  • layout - Choose from default, thumbnails-on-side, or date-on-side. Sets the blog's post layout.
  • picture_size - Choose from auto or fixed.
  • hover_type - Choose from none, zoomin, zoomout, or liftup. Sets the picture's hover effect type.
  • columns - Choose from 1 - 6. Sets the number of displayed columns.
  • number_posts - Accepts a numerical value. For example, 7. Sets how many posts are displayed. Use -1 to display all.
  • offset - Accepts a numerical value. For example, 1. Sets how many posts to skip.
  • pull_by - Define how posts should be loaded. Accepts: category or tag as the value here.
  • cat_slug - The slug name of the blog category you'd like to display. Use a comma for multiple categories.
  • exclude_cats - The slug name of the blog category to exclude. Use a comma for multiple categories.
  • tag_slug - The slug name of the blog post tag to display. Use a comma for multiple

    tags.

  • exclude_tags - The slug name of the blog post tag to exclude. Use a comma for multiple

    tags.

  • thumbnail - Choose from yes, or no. Show or hide the featured image.
  • title - Choose from yes, or no. Show or hide the title.
  • meta - Choose from yes, or no. Show or hide the meta data.
  • meta_author - Choose from yes or no. Set to yes to show the author name.
    • meta_categories - Choose from yes or no. Set to yes to show the categories.
    • meta_date - Choose from yes or no. Set to yes to show the date.
    • meta_comments - Choose from yes or no. Set to yes to show the comment count.
    • meta_tags - Choose from yes or no. Set to yes to show the

      tags.

    • excerpt - Choose from yes, or no. Show or hide the excerpt.
    • excerpt_length - Accepts a numerical value. For example, 15. Sets how many words or characters the excerpt will be.
    • strip_html - Choose from yes, or no. Show or hide HTML content in the excerpt.
    • 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.
    • animation_type - Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
    • animation_direction - Choose from down, right, left, up, or static. Sets the animation's incoming direction.
    • animation_speed - Accepts a numerical value from .1 (fastest), to 1, (slowest).
    • animation_offset - Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
    • class - Add a custom class to the wrapping HTML element for further css customization. Learn more here.
    • id - Add a custom id to the wrapping HTML element for further css customization. Learn more here.