Blog & Posts
Customize the blog and posts layout of your WordPress website.
YOOtheme Pro adds several layout settings for the WordPress blog. When configuring the settings, it's recommended to browse to the blog and preview the changes immediately.
The following settings can be found in the Layout → Blog and Layout → Posts panels of YOOtheme Pro.
Blog Settings
The blog layout settings define how the blog overview and its teaser posts are displayed.
General Settings
There are some general settings to configure the blog overview page.
| Setting | Description |
|---|---|
| Width | Set the blog width. |
| Padding | Set the vertical padding. |
| Columns | Set the number of columns. |
| Breakpoint | Set the breakpoint from which the grid cells will stack. |
| Masonry | Enable masonry effect and create a layout free of gaps even if grid cells have different heights. |
| Parallax | Enable parallax effect and move single grid columns at different speeds while scrolling. Define the vertical parallax offset in pixels. |
Image Settings
Configure images on the blog overview page.
| Setting | Description |
|---|---|
| Image Alignment | Align the image to the top or place it between the title and the content. |
| 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. |
Content Settings
There are some settings to configure the content on the blog overview page.
| Setting | Description |
|---|---|
| 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 Margin | Set the top content margin. |
| Content Alignment | Center the content on the blog overview page only. |
| Content Length | Limit the content length to a number of characters and add the "Continue Reading" button. |
| Button | Set the style for the "Continue Reading" button. |
| Button Margin | Set the top button margin. |
Navigation
Use a numeric pagination or "previous/next" links to move between blog pages.
Display
Show or hide system fields like date, author, categories, tags and archive category title among others. This option does not apply to single posts.
Post Settings
The post layout settings define how a single post is displayed.
General Settings
There are some general settings to configure the blog detail page.
| Setting | Description |
|---|---|
| Width | Set the post width. |
| Content Width | Set an explicit content width which doesn't affect the image or inherit the post width. |
Image Settings
Configure images on the blog detail page.
| Setting | Description |
|---|---|
| Image Alignment | Align the image to the top or place it between the title and the content. |
| 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. |
Content Settings
There are some settings to configure the content on the blog detail page.
| Setting | Description |
|---|---|
| Alignment | Center the title and meta text. |
| Title Margin | Set the top title margin. |
| Meta Alignment | Position the meta text above or below the title. |
| Meta Margin | Set the top meta margin. |
| Meta Style | Display the meta text in a sentence or a horizontal list. |
| Content Margin | Set the top content margin. |
| Drop Cap | Set a large initial letter that drops below the first line of the first paragraph. |
Navigation
Enable a navigation to move to the previous or next post.
Display
Show or hide system fields like date, author, categories, tags and archive category title among others. This option does not apply to the blog overview page.
