Blog Element

Last Update: November 13, 2024

Blogging is core WordPress functionality, and with Avada, we have added many ways to get the most out of this core custom post type. For a full rundown on how to blog, in conjunction with Avada, please see the full series of Blog Post type documentation here.

A great way to add blog posts to a page however, 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.

Read on to find out about all the options for this Element, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Blog Element

The Blog Element is a versatile way to add blog posts anywhere on your site. Simply add the Element to your desired Column.

Once you have added the element it’s time to 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 go through 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 a very versatile way to add blogs to a page.

Element Options

Note: The Default setting will use the global settings assigned for this element at Options > Avada Builder Elements > Blog. Also, 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

HeadingDescription
Posts Per PageSelect number of posts per page. Set to -1 to display all. Set to 0 to use number of posts from Settings > Reading.
Post StatusSelect the status(es) of the posts that should be included or leave blank for published only posts.
Post OffsetThe number of posts to skip. ex: 1.
Pull Posts ByChoose to show posts by category or tag.
CategoriesSelect categories or leave blank for all.
Exclude CategoriesSelect categories to exclude.
TagsSelect a tag or leave blank for all.
Exclude TagsSelect a tag to exclude.
Order ByDefines how posts should be ordered.
OrderDefines the sorting order of posts.
Show ThumbnailDisplay the post featured image.
Show TitleDisplay the post title below the featured image.
Content DisplayControls if the blog post content is displayed as excerpt, full content or is completely disabled.
Excerpt LengthInsert the number of words/characters you want to show in the excerpt.
Strip HTML from Posts ContentChoose to strip HTML from the post content.
Show Meta InfoChoose to show all meta data.
Show Author NameChoose to show the author.
Show CategoriesChoose to show the categories.
Show Comment CountChoose to show the comments.
Show DateChoose to show the date.
Show Read More LinkChoose to show the Read More link.
Show TagsChoose to show the tags.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
Blog LayoutSelect the layout for the element
Number of ColumnsSet the number of columns per row. IMPORTANT: Masonry layout does not work with 1 column.
Column SpacingControls the column spacing for blog posts.
Masonry Image Aspect RatioSet the ratio to decide when an image should become landscape (ratio being width : height) and portrait (ratio being height : width). IMPORTANT: 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 WidthThis option decides when a square 1x1 image should become 2x2. This will not apply to images that highly favor landscape or portrait layouts. IMPORTANT: 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. In pixels.
Equal HeightsSet to yes to display grid boxes with equal heights per row.
Title SizeChoose HTML tag of the title heading, either div or the heading tag, h1-h6.
Post Title TypographyControls the title typography
Timeline Title SizeChoose HTML tag of the timeline title heading, either div or the heading tag, h1-h6.
Timeline Title TypographyControls the timeline title typography
Link Title To PostChoose if the title should be a link to the single post page.
Content AlignmentControls the alignment of contents.
Pagination TypeChoose the type of pagination.
Grid Box ColorControls the background color for the grid boxes.
Grid Element ColorControls the color of borders/date box/timeline dots and arrows for the grid boxes.
Grid Separator StyleControls the line style of grid separators. NOTE: Separators will display, when excerpt/content or meta data below the separators is displayed.
Grid Separator ColorControls the line style color of grid separators.
Blog Grid Text Padding Controls the padding for the blog text when using grid / masonry or timeline layout. Enter values including any valid CSS unit, ex: 30px, 25px, 0px, 25px.
MarginIn pixels or percentage, ex: 10px or 10%.

In this article