Customize the blog layout of your Joomla website.
YOOtheme Pro provides a default template for the blog view which comes with several layout settings. It also provides a default template for the single post view which has its own post settings.
The following settings can be found in the Layout → Blog panel of YOOtheme Pro. Make sure to browse to the blog in the preview on the right to see the changes immediately.
Use the following options to style the blog layout.
|Width||Set the blog width.|
|Padding||Set the vertical padding.|
|Column Gap||Set the size of the gap between the grid columns.|
|Row Gap||Set the size of the gap between the grid rows.|
|Breakpoint||Set the breakpoint from which the grid items will stack.|
|Masonry||Enable masonry effect and create a layout free of gaps even if grid items have different heights.|
|Parallax||Enable parallax effect and move single grid columns at different speeds while scrolling. Define the vertical parallax offset in pixels.|
Note The number of columns displayed on the blog overview page can be defined in the Article Manager Options in Joomla under Blog/Featured Layout. Mind that setting the number of columns in the Menu Item will override the option from the Article Manager.
Use the following options to configure the post images in the blog overview.
|Image Margin||Set the top margin if the image is aligned between the title and the content.|
|Image Width||Set the width of the image.|
|Image Height||Set the height of the image.|
Note The image position can be defined in the Article Manager Options in Joomla under Editing Layout.
Learn more about images in the files and images documentation.
Use the following options to style the post title, meta text, content and link in the blog overview.
|Alignment||Center the title, meta text and button.|
|Title Style||Set the title style.|
|Title Margin||Set the top title margin.|
|Meta Margin||Set the top meta margin.|
|Content Length||Limit the content length to a number of characters and add the "Continue Reading" button.|
|Content Margin||Set the top content margin.|
|Content Alignment||Center the content on the blog overview page only.|
|Button||Set the style for the "Continue Reading" button.|
|Button Margin||Set the top button margin.|
Use a numeric pagination or previous/next links to browse between blog pages.
Additionally, you can show or hide Start/End links.
Joomla offers many additional blog options. To layout the blog overview, edit your blog menu item and open the Blog Layout tab. Here is a list of the most important options.
|Leading Articles||Set a number of leading articles to display full-width at the beginning of the page.|
|Columns||Set the number of columns.|
|Multi Column Order||Order posts down or across columns.|
To layout posts in the blog overview, edit your blog menu item and open the Options tab. Here is a list of the most important options.
|Show Title||Show or hide article title.|
|Show Intro Text||Show the intro text of the article. If set to Hide, only the part after the "Read More" break will show.|
|Show Category||Show or hide article category.|
|Show Author||Show or hide article author.|
|Show Publish Date||Show or hide publish date of the article.|
|Show Navigation||Show or hide a navigation link between articles.|
|Show "Read More"||Show or hide the "Read more" link.|
|Show Tags||Show or hide the tags for each article.|
For more information and full list of article options, refer to the Joomla documentation.
To show an excerpt text instead of the post content in the blog overview, create a custom field with the name excerpt. Use a Text Area field type and make sure to set the Automatic Display option to Do not automatically display in the Options tab. Now if you edit a post, you can add an excerpt text in the Fields tab. YOOtheme Pro will automatically show the except in the blog overview.