When creating a certain page on your website using Brizy — say the homepage –, you might want to display the existing articles (blog posts) on your website. The pro version of Brizy comes with an element — the Posts element — that you can use to do so. In this post, we will show you how to use the Posts element of Brizy to display the articles on your website.
As we have mentioned above, you need to use Brizy Pro to be able to use the Posts element as the element is only available on the pro version. You can get the pro version of Brizy on its official website. If you are new to Brizy, you can read our previous article to learn how to use it. In this example, we will go straight to adding the Posts element to the canvas area.
How to Use the Posts Element of Brizy
By the time this article is written (April 8, 2021), the Brizy Posts element only displays article by category. There are no options to display articles by other parameters like tag and author. Also, you can only select one category on a Posts element.
To start using the Posts element, you can simply drag the Posts element from the left panel and drop it to the canvas area.
As you can see, the Posts element will automatically display the articles in three columns in which each column consists of four elements:
- Featured image
- Post title
- Post excerpt
- Read more button
If you want to add more columns, you can hover your mouse over the Posts element and click the grey arrow icon to display the Posts element settings bar. On the appearing settings bar, click the Posts tab. Simply replace the default number of columns (3 in this case) with the number of columns you prefer. You can also set the number of rows on the Rows option.
To filter the articles, you can click the Filter sub-tab under the Posts tab on the settings bar. Select a category from the Categories dropdown and filter parameter on the Filter By dropdown. You can also set the order and disable the tags filter if you want it.
Customizing the Post Elements
The Posts element displays your articles in columns. On each column, you have four post elements as we have mentioned earlier above. If you want it, you can also add more elements to the column like post date, custom fields, and so on. One key thing to note. The columns are connected each other. When you make a change on a certain element on one of the columns (or add a new element), the change will also be applied on other columns. Notice the screencast below.
Customizing the Featured Image
To customize the featured image element, first click the image holder on one of the columns to display to settings bar. Click the Image tab and make sure the image is set to Featured Image. If not, you can select Featured Image by clicking the dynamic icon.
If you want to apply CSS filters to the featured image, you can open the Filters sub-tab under the Image tab.
To set the size of the featured image, you can click the gear icon on the settings bar. Alternatively, you can click the image holder and drag the edge.
To set the image border, you can click the Colors tab on the settings bar. From this tab, you can also set the border size and border color.
You can set different border settings for each state (normal and hover) by clicking the finger icon on the left side of the settings bar.
If you want to set the border radius, you can click the gear icon on the settings bar and click More Settings to open the settings panel. You can set the border radius on the Corner option under the Styling tab.
By default, the featured image is not clickable. You might want to set link whereby when visitors click the featured image, the article the featured image belongs to opens. You can do so by setting the image link to Post URL. Click the chain icon on the settings bar and set to Post URL on the Link to option.
A little note. Brizy doesn’t display the actual featured image on the editor. The featured image is only displayed on the front-end when you preview the page or publish it.
Customizing the Post Title
To customize the post title, start by clicking the post tittle element on one of the columns to display settings bar. On the settings bar, you can click the Typography tab to set the typography (font size, font family, and so on). To set the text color, you can click the Colors tab. If you want to set the post title to be clickable, you can click the chain icon as you did on the featured image above. To set the alignment, you can simply click the Align icon.
A little note. Brizy doesn’t display the actual post title on the editor. Instead, you will only see text that says “Brizy #397” or “Post Title”. The actual post title will be displayed on the front-end when you preview or publish the page.
Customizing the Post Excerpt
To customize the post excerpt, you can click the post excerpt element on one of the columns to display the settings panel. On the appearing settings panel, you can click the Typography tab to set the typography, click the Colors tab to set the text color, click the chain icon to set the link and click the Align icon to set the alignment.
A little note. Same as the post title, Brizy also doesn’t display the actual excerpt on the editor. It is only displayed on the front-end when you preview or publish your page.
Setting the Excerpt Length
Brizy offers no setting option to set the excerpt length. To set the excerpt, you can go to the WordPress theme customizer (Appearance -> Customize). The setting location of excerpt length is different on each theme (some themes don’t offer setting option to set the excerpt length).
If your theme offers no setting option to set the excerpt length, you can do so by adding a new function. Go to Appearance -> Theme Editor on your WordPress dashboard. Select the functions.php file on the right panel and paste the following code right after the last line of the file content.
function custom_excerpt_length( $length ) {
return 20;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
You can replace the return value (20) according to the excerpt length you want to set.
Customizing the Read More Button
To customize the read more button, you can click the read more button on one of the columns to display the settings bar. On the appearing settings bar, you can click the finger icon to set the size, click the Typography tab to set the typography, click the Colors tab to set the button text color, and click the chain icon to set the link. If you want to remove the read more button instead, you can simply click the trash can icon on the settings bar.
Customizing the Pagination
Before customizing the pagination, make sure you have enabled the pagination. You can click the grey arrow icon of the Posts element and click the Navigation sub-tab under the Posts tab and toggle the Pagination switch on.
Next, you can click the pagination element on the canvas area to customize it. To set the typography, you can click the Typography tab. To set the colors, you can click the Colors tab. From the Colors tab, you can also set the border size.
If you want to set the border radius, you can click the gear icon on the settings bar to open the settings panel.
Adding More Elements
By default, the Posts element of Brizy only includes four post elements (featured image, post title, post excerpt, and read more button). If you want to add more elements (e.g., post date), you can add the Text element to one of the columns. You can place anywhere. Once the Text element is added, you can highlight the default text and press the hash key on your keyboard. Select an element you want to add from appearing list.
You can read our previous article to learn more about how to add dynamic content in Brizy.
The Bottom Line
The Posts element of Brizy is an element aimed at displaying articles on your website. So, if you want to display the articles of your website on a page, you can use this element. The element displays articles by category. Brizy itself has two elements to display articles of your website. In addition to the Posts element, you can also use the Archives element. While the Posts element displays article by category, the Archives element displays articles by the current archive. The Archives element can only be used on a theme builder template. Both the Posts element and the Archives element are only available on Brizy Pro.
