Blog Element
The Blog Element lists your blog posts anywhere on the site. It pulls posts automatically, so a news section on the home page or a list of articles from one category stays up to date without editing the page each time you publish.
Seven layouts are available: Large, Medium, their alternate versions, Grid, Masonry and Timeline. You decide which posts appear, in which order, which parts of each post are shown and how visitors move to older posts: with page numbers, a Load More button or infinite scrolling.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Blog Element
Add the Blog Element to any column. On the General tab choose which posts to show: Posts Per Page, Pull Posts By category or tag, then select or exclude Categories or Tags. Order By and Order set the sorting, and Post Offset skips the first posts, for example the one already shown in a featured area above.
Next decide what each post shows: Show Thumbnail, Show Title, Content Display (excerpt, full content or no text) with its Excerpt Length, and the meta info such as author, date, categories, comment count, tags and the Read More link. Show Meta Info turns all meta data off at once.
On the Design tab choose the Blog Layout. Grid and Masonry use Number of Columns and Column Spacing; Masonry has its own image ratio settings, and Equal Heights evens out the grid boxes per row. The Timeline layout groups posts by month and has its own title size and typography. Finish with the Pagination Type, the grid box and separator colors and the text padding.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Blog. Change them there to style every Blog at once.
General
| Heading | Description |
|---|---|
| Posts Per Page | Select number of posts per page. Set to -1 to display all. Set to 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. Posts with the selected statuses are shown to all visitors (title, excerpt and image; drafts, pending and scheduled posts without a link). |
| Post Offset | The number of posts to skip. for example 1. |
| Pull Posts By | Choose to show posts by category or tag. |
| Categories | Select categories or leave blank for all. |
| Exclude Categories | Select categories to exclude. |
| Tags | Select a tag or leave blank for all. |
| Exclude Tags | Select a tag to exclude. |
| Order By | Defines how posts should be ordered. |
| Order | Defines the sorting order of posts. |
| Show Thumbnail | Display the post featured image. |
| Show Title | Display the post title below the featured image. |
| Content Display | Controls if the blog post content is displayed as excerpt, full content or is completely disabled. |
| Excerpt Length | Controls the number of words in the excerpts. |
| Strip HTML From Post Content | Choose to strip HTML from the post content. |
| Show Meta Info | Choose to show all meta data. |
| Show Author Name | Choose to show the author. |
| Show Categories | Choose to show the categories. |
| Show Comment Count | Choose to show the comments. |
| Show Date | Choose to show the date. |
| Show Read More Link | Choose to show the Read More link. |
| Show Tags | Choose to show the tags. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Blog Layout | Select the layout for the element. |
| Number of Columns | Set the number of columns per row. IMPORTANT: Masonry layout does not work with 1 column. |
| Column Spacing | Controls the column spacing for blog posts. |
| Masonry Image Aspect Ratio | Set 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 Tirenoa 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. 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 (1×1, landscape, portrait or 2×2), regardless of the original ratio. In pixels. |
| Equal Heights | Set to yes to display grid boxes with equal heights per row. |
| Title Size | Choose HTML tag of the title heading, either div or the heading tag, h1-h6. |
| Post Title Typography | Controls the title typography. |
| Timeline Title Size | Choose HTML tag of the timeline title heading, either div or the heading tag, h1-h6. |
| Timeline Title Typography | Controls the timeline title typography. |
| Link Title To Post | Choose if the title should be a link to the single post page. |
| Content Alignment | Controls the alignment of contents. |
| Pagination Type | Choose the type of pagination. |
| 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: Separators will display, when excerpt/content or meta data below the separators is 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. Enter values including any valid CSS unit, for example 30px, 25px, 0px, 25px. |
| Margin | In pixels or percentage, for example 10px or 10%. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Tips
- Setting Posts Per Page to -1 shows all posts and switches pagination off. On a site with many posts, use a limit and pagination instead to keep the page fast.
- Pick the Title Size to fit the page: if the element sits under an H2 section heading, H3 post titles keep the heading order correct.
- Leave Post Status empty on public pages. Posts with other statuses you select there are listed for every visitor, only without a working link.
- Masonry needs at least two columns. Each image in the media library has a Masonry Image Layout setting that overrides the automatic 1×1, landscape, portrait or 2×2 choice.
- Grid separators only appear when there is an excerpt, content or meta data below them.