Neve Blog/Archive Options
Neve offers a comprehensive set of options for the blog and posts archive pages, including layout, elements ordering, custom metadata, and three styles for the Read More button. Please note that some of these options are available only in Neve Pro as part of the Blog Booster module.
The options presented in this guide are available in Dashboard > Appearance > Customize > Layout > Blog/Archive.
📝Note: PRO - You may see green notices like this one in the following chapters, highlighting the options available in Neve Pro.
📝Note: (responsive control) - You may see blue notices like this one in the following chapters, highlighting that the current options can have different values for each device.
Table of content
- Blog layout
- Featured Posts
- Ordering and Content
- Post Meta
- Read More
- Image Styles for the Thumbnails
- Video - Creating a Blog Header using the Custom Layouts
Blog layout
In this chapter, we'll explore the three different layouts available in the theme and the contextual options for each.
1. List
The list layout shows the posts one below each other, with the possibility to have alternative images, by enabling the Alternating Layout.
Alternating Layout
💳 PRO - Check out the other options that come with this layout.
List Spacing (responsive control) - adjust the space between the posts(above/below).
Content Padding (responsive control) - adjust the amount of space around the post content. This is different than the list spacing property.
Content Padding
Image width - change the width of the post thumbnail.
Add Separator between posts - add a thin line between the posts, which can be styled.
Add Separator between posts
Enable Card Style - this will bring in more design and layout options, such as card content background color, text color, and card shadow.
2. Covers
The Covers layout places the whole content above the post featured image. We recommend using this layout when all the blog posts have a featured image set.
The basic options in this scenario are:
Columns (responsive control) - the number of items in a row.
Text color - can be used to change the color of the post title, metadata, and excerpt.
Disable Title - make the title not be visible anymore using this option.
Enable masonry - make the posts on the next row to start where empty space is available instead of aligning the posts on each row.
💳 PRO - Check out the other options that come with this layout.
Grid Spacing (responsive control) - Change the space between the cards - this applies to both horizontal and vertical axes.
Grid Spacing
Card Min Height (responsive control) - Set a minimum height for the posts.
Card Min Height
Border Radius - When it's 0 the posts will look like rectangles, increase the value to make the corners rounded.
Overlay Color - The dark overlay between the image and the text.
Content Padding (responsive control) - The amount of space inside the card, between the content and the border.
Content Padding
Enable Card Style - this will bring in more design and layout options, such as card content background color, text color, and card shadow.
Show content only on hover - Display the featured image only with the overlay color. The content will appear when hovering on posts.
Show Content Only On Hover
3. Grid
The grid layout is very similar to the above one(Covers) in terms of options, just that content is below the featured image.
The basic option here are:
Columns (responsive control) - the number of items in a row.
Disable Title - make the title not be visible anymore using this option.
Enable masonry - make the posts on the next row to start where empty space is available instead of aligning the posts on each row.
💳 PRO - Check out the other options that come with this layout.
Grid Spacing (responsive control) - Change the space between the cards - this applies to both horizontal and vertical axes.
Border Radius - When it's 0, the posts will look like rectangles; increase the value to make the corners rounded.
Content Padding (responsive control) - The amount of space inside the card between the content and the border.
Add Separator between posts - set the separator weight and color.
Enable card style - Customize text and background color for the cards and box-shadow.
Custom cards style, Post Separator enabled, Masonry layout
Featured posts
This section helps you highlight the latest posts on the website or the sticky ones. To enable it, navigate to the Customizer at Layout > Blog/Archive > Featured Posts, and use the toggle available there, as in the following example.
After enabling the option, you can select which should be the featured post - latest post or sticky post.
💳 PRO - With the premium version of the theme with the Blog Booster module, the following options are also available for the current section.
Image position and alignment - for the featured posts, you can choose where to display the featured image, left, center, or right.
Content alignment (click for image) - if you use a different blog layout, such as covers, this option may come in handy for aligning the content as you wish inside the postcard.
click for imageBackground color (click for image) - set a different background color for the featured posts to emphasize them more.
click for imageContent padding (click for image) - it helps with any post layout; it can be a list, cover, or grid.
click for imagePost height (click for image) - in case you are showing the featured image above the text in the card layout, which will make it a full-width card above the regular posts, this helps with controlling the image height.
click for imageOrdering and Content
After choosing a layout for the blog page, let's dig into the content by customizing how the posts listed on the blog look and on which criteria they are shown.
💳 PRO - Order posts by - date updated | Date posted descending | Date posted ascending.
Posts pagination - Number for having multiple pages inside the blog after displaying 10 posts; for example; Number & Search Field - adds an input field next to the pagination with numbers that allow entering the number of the page to be visited (click to see image); Infinite Scroll for having a one-page layout.
click to see imagePost content order - Thumbnail | Title & Meta | Excerpt - Reorder those items and show/hide the desired ones.
Content Alignment - Left | Center | Right.
Excerpt length - set number of words. If you use the maximum value allowed in the control which is currently 300 words, the whole post content will be shown on the blog/archive page. With a lower value than 300, the excerpt will have this exact number of words on blog/archive pages.
Thumbnail Shadow - add a box-shadow behind the featured image.
Ordering and content
Post Meta
The post meta options are about displaying the desired items and changing their order.
- Author name
- Author avatar - choose its size (💳 PRO - responsive control)
- Comments
- Date
- Category
- (💳 PRO) Estimated reading time
For these fields, you can enable the option to Hide on mobile, so that the meta item will no longer be visible on mobile devices.
The option to show the last updated date instead of the publishing one - is also possible to edit the text before the date - details here.
Separator - the character is used as a separator for the post metadata.
The PRO version of Neve offers extra options, like changing the Format of the meta item and adding a new one, with the following customizations:
- Type - pick the desired item type from the dropdown. This one depends on the installed plugins because it offers integration with ACF , Meta Box, Toolset. Once you have installed and created custom fields using these plugins, their names will be added in the Type dropdown.
- Field - insert the name of the new item.
- If you have installed the ACF plugin, this field will become a dropdown list with the names of the ACF fields - check this doc for further details about creating a custom field.
📝 Note: It works the same, for any of the three plugins that have this integration.
- You have the possibility to use Raw meta here, by adding the meta key of a certain field. This is the name of the previously created custom field.
- Format - this field offers you the possibility of customizing the text that appears. The default format is {meta}, which represents a magic tag. You can add text before and after this default format, to create the desired aspect.
- Fallback - establish a standard value of the item so that if there is no value added yet, it will inherit this one.
📝 Note: These customizations are available only if you add a new item, which implies having the PRO version of Neve.
Read More
📝 Note: This panel is available only if you have the PRO version of Neve.
- Text - customize the label of the Read More option.
- Style - select a style of the Read More option - text, Primary button, Secondary button.
Style 1 - Text
Style 2 - Primary button with custom label
Style 3 - Secondary button with custom label
Image Styles for the Thumbnails
📝 Note: This option is available only if you have the PRO version of Neve.
To make your blog page more appealing, use the image styles that Neve offers. Here are some of the effects available for the blogs' thumbnails:
If you choose the Swipe Next Image/Next Image style, click on the Publish button, then go to the Dashboard > Posts, open the posts' editor, and insert a second featured image for them:
