Blog Element

11/08/2020

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 documentation here.

One of the best ways 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.

For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept
View Element Demo Page!

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.

Element Options

IMPORTANT NOTE: When using the Blog element, the general Avada Global 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 Avada Global Options will still apply.

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: The Default setting will use the global settings assigned for this element in your Theme Options > Avada Builder Elements > Blog Element section. 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.

  • Blog Layout – Controls the blog posts layout. Choose between Large, Medium, Large Alternate, Medium Alternate, Grid, Timeline, or Masonry.

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

  • Column Spacing – Controls the column spacing for blog posts.

  • Masonry Image Aspect Ratio – 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 2×2 Width – This option decides when a square 1×1 image should become 2×2. 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 (1×1, landscape, portrait or 2×2), regardless of the original ratio.

  • Equal Heights – Allows you to display grid boxes with equal heights per row.

  • Posts Per Page – 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 Status –Select the status(es) of the posts that should be included or leave blank for published only posts. You can select from Published, Drafted, Scheduled, Private, or Pending.

  • Post Offset – Accepts a numerical value that sets how many posts to skip. Choose from 0 – 25.

  • Pull Posts By – Allows you to load posts by category or tag.

  • Categories – Controls which post categories to display. Leave blank to show all categories.

  • Exclude Categories – Controls which post categories to exclude. You can exclude multiple categories, or leave blank to exclude none.

  • Tags – Controls which post tags to display. Leave blank to show all tags.

  • Exclude Tags – Controls which post tags to exclude. You can exclude multiple tags, or leave blank to exclude none.

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

  • Order – Controls the sorting order of the posts. Choose from Descending or Ascending.

  • Show Thumbnail – Allows you to show or hide the post’s featured images. Choose from Yes or No.

  • Show Title – Allow you to show or hide the title below the featured image. Choose from Yes or No.

  • Link Title To Post – 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 – 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 – Accepts a numerical value that sets the excerpt’s length. Choose from 0 – 500.

  • Strip HTML from Posts Content – Allows you to strip HTML from the excerpt. Choose Yes to strip HTML, or No to keep it.

  • Show Meta Info – Allows you to show or hide all meta data. Choose Yes or No.

  • Show Author Name – Allows you to show or hide the author. Choose Yes or No.

  • Show Categories – Allows you to show or hide blog post categories. Choose Yes or No.

  • Show Comment Count – Allows you to show or hide all comments. Choose Yes or No.

  • Show Date – Allows you to show or hide the date. Choose Yes or No.

  • Show Read More Link – Allows you to show or hide the read more link. Choose Yes or No.

  • Show Tags – Allows you to show or hide tags. Choose Yes or No.

  • Pagination Type – Allows you to set the pagination type. Choose from No Pagination, Pagination, Infinite Scrolling or Load More Button.

  • Grid Box Color – Controls the background color for the grid boxes.

  • Grid Element Color – Controls the color of borders/date box/timeline dots and arrows for the grid boxes.

  • Grid Separator Style – 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 – Controls 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.

  • 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.

  • CSS ID – Allows you to add an ID to the wrapping HTML.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Options > Avada Builder Elements > Blog

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Number of Columns – Set the number of columns per row for grid and masonry layout. IMPORTANT: Masonry layout does not work with 1 column.

  • Column Spacing – Controls the column spacing for blog posts for grid and masonry layout. In pixels.

  • Blog Grid Text Padding – Controls the top/right/bottom/left padding of the blog text when using grid / masonry or timeline layout. Enter values including any valid CSS unit, ex: 30px, 20px, 25px, 25px.

  • Content Display – Controls if the post content displays an excerpt, full content or is completely disabled for blog elements. Choose between No Text, Excerpt, or Full Content.

  • Excerpt Length – Controls the number of words in the excerpts for blog elements.

  • Blog Date Box Color – Controls the color of the date box in blog alternate and recent posts layouts.

View The Options Screen

Recent Posts

Recent Tweets

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