Blog Element

03/12/2018

A great way to add blog posts to a page is to use the Blog Element. This is a fantastic method to use, because it allows you to place your blog posts on any page, select any of our layouts, assign custom categories to display, and so much more. Using the Blog Element gives you the flexibility to add a blog feed on any page, and indeed, anywhere on the page. Each Blog element can have a different set of categories, layouts and other unique blog settings. It's also great to use if you want to only display a few posts on a page along with other content. Before you can display blog posts, you must, of course, first create them.

Blog

How To Use The Blog Element

The Blog Element is the most versatile way to add 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 'Blog' element and click it to bring up its options window.

Step 4 - Configure the Blog element to your liking. This is where the action happens. The Blog Element comes with 7 different blog 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 Blog Element Demo page. There are way too many options to list for this element, but if you start with your preferred layout, and then slowly go down the options list, customizing its appearance to suit your wishes, you will soon get the blog page you are looking for! There is almost nothing that cannot be customized, and it is truly the most versatile way to add blogs to a page.

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

Blog Element Options

When using the Blog element, the general Fusion Theme Options on the Blog tab will not take effect. This is because each Blog element has its own set of options built directly into the element. This allows you to set all the options per instance of the element. The single post Page Options in Fusion Theme Options will still apply.

Blog Layout - Illustrated as A. Controls the blog posts layout. Choose between Large, Medium, Large Alternate, Medium Alternate, Grid, Timeline, or Masonry.

Number of Columns - Illustrated as B. Controls the number of columns per row. Note: Masonry layout does not work with 1 column. Default currently set to 2.

Column Spacing - Illustrated as C. Controls the column spacing for blog posts.

Masonry Image Aspect Ratio - Illustrated as D. Allows you to set the ratio to decide when an image should become landscape (ratio being width : height) and portrait (ratio being height : width). Note: The value of "1.0" represents a special case, which will use the auto calculated ratios like in versions prior to Avada 5.5.

Masonry 2x2 Width - Illustrated as E. This option decides when a square 1x1 image should become 2x2. This will not apply to images that highly favor landscape or portrait layouts. Note: There is a “Masonry Image Layout” setting for every image in the WP media library that allows you to manually set how an image will appear (1x1, landscape, portrait or 2x2), regardless of the original ratio.

Equal Heights - Illustrated as F. Allows you to display grid boxes with equal heights per row.

Posts Per Page - Illustrated as G. Accepts a numerical value that sets how many posts to display per page. Choose from -1 - 25. Choose -1 to display all and 0 to use number of posts from Settings > Reading.

Post Offset - Illustrated as H. Accepts a numerical value that sets how many posts to skip. Choose from 0 - 25.

Pull Posts By - Illustrated as I. Allows you to load posts by category or tag.

Categories - Illustrated as J. Controls which post categories to display. Leave blank to show all categories.

Exclude Categories - Illustrated as K. Controls which post categories to exclude. You can exclude multiple categories, or leave blank to exclude none.

Tags - Illustrated as L. Controls which post tags to display. Leave blank to show all tags.

Exclude Tags - Illustrated as M. Controls which post tags to exclude. You can exclude multiple tags, or leave blank to exclude none.

Order By - Illustrated as N. Controls how to order the posts. Choose from Date, Post Title, Post Slug, Author, Number Of Comments, Last Modified, or Random.

Order - Illustrated as O. Controls the sorting order of the posts. Choose from Descending or Ascending.

Show Thumbnail - Illustrated as P. Allows you to show or hide the post's featured images. Choose from Yes or No.

Show Title - Illustrated as Q. Allow you to show or hide the title below the featured image. Choose from Yes or No.

Link Title To Post - Illustrated as R. Controls the title as a link to the single post page. Choose from Yes to set the title as a link, or No to keep it as plain text.

Text Display - Illustrated as S. Controls if the blog post content is displayed as excerpt, full content or is completely disabled. Choose between Default, Excerpt, Full Content, or No Text.

Excerpt Length - Illustrated as T. Accepts a numerical value that sets the excerpt's length. Choose from 0 - 500.

Strip HTML from Posts Content - Illustrated as U. Allows you to strip HTML from the excerpt. Choose Yes to strip HTML, or No to keep it.

Show Meta Info - Illustrated as V. Allows you to show or hide all meta data. Choose Yes or No.

Show Author Name - Illustrated as W. Allows you to show or hide the author. Choose Yes or No.

Show Categories - Illustrated as X. Allows you to show or hide blog post categories. Choose Yes or No.

Show Comment Count - Illustrated as Y. Allows you to show or hide all comments. Choose Yes or No.

Show Date - Illustrated as Z. Allows you to show or hide the date. Choose Yes or No.

Show Read More Link - Illustrated as AA. Allows you to show or hide the read more link. Choose Yes or No.

Show Tags - Illustrated as AB. Allows you to show or hide tags. Choose Yes or No.

Pagination Type - Illustrated as AC. Allows you to set the pagination type. Choose from No Pagination, Pagination, Infinite Scrolling or Load More Button.

Grid Box Color - Illustrated as AD. Controls the background color for the grid boxes.

Grid Element Color - Illustrated as AE. Controls the color of borders/date box/timeline dots and arrows for the grid boxes.

Grid Separator Style - Illustrated as AF. Controls the line style of grid separators. Note: At least one meta data field must be enabled and excerpt or full content must be shown in order that the separator will be displayed.

Grid Separator Color - Illustrated as AG. Controls the line style color of grid separators.

Blog Grid Text Padding - Illustrated as AH. Controls the padding for the blog text when using grid / masonry or timeline layout.

Element Visibility - Illustrated as AI. 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 - Illustrated as AJ. Allows you to add a class to the wrapping HTML.

CSS ID - Illustrated as AK. Allows you to add an ID to the wrapping HTML.

Global Options

There are a number of Global Options for the Blog Element, which can be found at Avada > Theme Options > Fusion Builder Elements > Blog Element. These can be overridden in the actual element on a case by case basis.

Blog Element Global Options

Blog Element Parameters

Copy to Clipboard
    • layout - Choose from large, medium, large alternate, medium alternate, grid, timeline, or masonry. Sets the layout.
    • blog_grid_columns - Choose from 2, 3, 4, 5, or 6. Sets the number of grid columns.
    • blog_grid_column_spacing - Accepts a numerical value. For example, 30. Sets the column spacing between blog grid posts.
    • equal_heights - Choose from yes, or no. Sets to yes to display grid boxes with equal heights per row.
    • number_posts - Choose from 1 - 25. Set to -1 to display all posts. Sets how many blog posts are displayed.
    • 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 post category to display. Use a comma for multiple categories.
    • exclude_cats - The slug name of the blog post 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.

    • orderby - Choose from date, title, name, author, comment_count, modified, or rand. Sets the blog posts' order.
    • order - Choose between DESC or ASC. Sets the blog posts' sorting order.
    • thumbnail - Choose from yes, or no. Show or hide the featured image.
    • title - Choose from yes, or no. Show or hide the title.
    • title_link - Choose from yes, or no. Link the title to the single post page.
    • excerpt - Choose from yes, or no. Select yes to show excerpt, or choose no to show full content.
    • excerpt_length - Accepts a numerical value. For example, 15. Sets how many characters/words to display on excerpt.
    • strip_html - Choose from yes, or no. Show or hide HTML in excerpts.
    • meta_all - Choose from yes, or no. Show or hide all meta information.
    • meta_author - Choose from yes, or no. Show or hide author.
    • meta_categories - Choose from yes, or no. Show or hide categories.
    • meta_comments - Choose from yes, or no. Show or hide comments.
    • meta_date - Choose from yes, or no. Show or hide date.
    • meta_link - Choose from yes, or no. Show or hide 'Read More' link.
    • meta_tags - Choose from yes, or no. Show or hide

      tags.

    • scrolling - Choose from pagination, infinite, or load_more_button. Sets the type of pagination.
    • grid_box_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the background color for the grid boxes.
    • grid_element_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the color of borders/date box/timeline dots and arrows for the grid boxes.
    • grid_separator_style_type - Choose from Default, No Style, Single Border Solid, Double Border Solid, Single Border Dashed, Double Border Dashed, Single Border Dotted, Double Border Dotted, and Shadow. Sets the line style color of grid separators.
    • grid_separator_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the line style color of grid separators.
    • padding_top - Accepts a pixel value. For example, 5px. Sets the top padding for the blog text when using grid / masonry or timeline layout.
    • padding_right - Accepts a pixel value. For example, 5px. Sets the right padding for the blog text when using grid / masonry or timeline layout.
    • padding_bottom - Accepts a pixel value. For example, 5px. Sets the bottom padding for the blog text when using grid / masonry or timeline layout.
    • padding_left - Accepts a pixel value. For example, 5px. Sets the left padding for the blog text when using grid / masonry or timeline 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.

    Recent Posts

    Recent Tweets

    For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
    I Accept