The first things you should do when creating a new post is enter a title for the post

and set a featured image

Then you can use the meta fields to configure your desired settings and layout.

In the following sections we will go through all the available meta fields for blog posts.

This section contains some general post settings

Here we will describe each of these settings and how it can be used:

• Page Background Color: Defines the body background color of the post

This setting can also be set in Qode Options -> General under Content Background Color. By setting it on a specific page or post you will override the color you set in the global options just for that specific page or post.

• Page Transition: If you have page transitions enabled in your global options, and would like a certain post to have a different loading effect from other pages or posts, or if you would like only a specific post to have a loading effect at all, you can set that here. Leaving this field empty means the page (or in this case post) will use the default setting from your global options.

• Hide Featured Image: If you don’t want to have the feature image displayed on a single post page then you should set this property to Yes value. Otherwise, leave it set to No like it is set by default

• Layer Slider or Qode Slider Shortcode: As you can see from our page structure, every post can also contain a Slider that is placed below the header, but before the page content. The slider is implemented through this field. This is the only proper way for setting a Qode Slider onto your page, while the LayerSlider can be also placed in the page (or post) content using its shortcode. In order to display a slider between the header and content using this field, all you have to do is paste the desired slider’s shortcode into the field.

• Dimensions of image for Blog Masonry – Date in Image: If you choose the Blog Masonry – Date in Image template for your blog page or as the default template for your archive pages, you can define the format the featured image will be displayed within the masonry layout using this field. You can choose one of four options

• Always put content below header: Our header is implemented so that if it has some transparency set, the Title (if enabled) or the Qode/Layer slider (if set) will be pulled underneath

If you don’t like this effect you can disable it using this setting which will place all post elements (title – slider – content) below the header.

Leaving this field empty, or setting it to No means the post will use the default setting, while setting this field to Yes will put all post elements below the header.

The Header has a lot of options as is explained in more detail in the Header Setup section of the documentation. However, some of those settings can be overridden on a page to page (or post to post) basis. All of these settings are located under the Qode Header section of the post’s meta fields

• Header skin: If you would like a particular post to have a different header skin from that set in your general header setting, you can define that in this field. Leaving the field empty means the header of this post will use the default setting, while setting the field to either light or dark will set that type of header skin for this post

• Enable header style on scroll: In our theme, the header style can also be applied to a specific row within the post. Similar to the Header skin setting which defines the default skin of the post header, this setting provides the possibility to change the header skin depending on the row it is currently covering

Leaving the field empty means the post header is using the default setting, while setting this field to Yes will change header style based on the row settings, and No will disable that behaviour

This setting is applied only if you are using the WPBakery page builder for creating content. If you set this field to Yes, you can then define which header skin will be displayed for each row on the page by going to edit that row and setting the desired skin in the Header Style field in the row options.

• Initial Header Background Color: This field changes the color of the header background for this specific post

This will affect both header areas: header top and header bottom.

• Initial Header Transparency: Defines the header transparency for this specific post. This field also affects the header top and header bottom area, and can take values from 0 to 1.

• Hide Sticky Header Initially: This setting will initially hide the header before the page is scrolled, after which the header will appear (depending on the value set in the Scroll amount for sticky header appearance field.

Empty field means post header is using default setting, while setting this field to Yes will hide header initially and No will disable that.

In this section you can override the default settings made in Qode Options -> Title.

• Don’t Show Title Area: In this field you can define whether the title area will be visible on this post.

You can set one of three values:

If you chose to display the title on your post, you will see some extra options enabled. We will now go through all of them:

• Animations – choose if you want your title to have an animation effect

You can choose one of the following options

• Don’t show title text – with this option you can hide the title text, leaving only the title image visible. You can choose one of three options

• Background color – Choose if you would like your title area to have a background color. This color will only be visible if there is no title image set, or the title image height is lower than the height of the title area

• Don’t Show Background Image – here you can disable the default title background image which has been set in the global options. You can choose between two values:

• Title Height (px) – Define the height of the title area.

the value should be entered without the unit at the end (only value, for example 500. Not 500px). This value will override the title height setting from Qode Options -> Title.

• Separator Under Title Text – Here you can choose whether you would like to have a separator displayed under the title text. You can chose one of three values: default (empty value), No to hide the separator, or Yes to display it.

• Separator color – Set a desired color for the separator if you have it enabled either in Qode Options -> Title, or on a specific post.

This color will override the one set in Qode Options -> Title.

• Enable Angled Title - With this option you can enable or disable an angled title, which is displayed as styled empty space at the bottom of title area. You can choose one of three options

• Enable Breadcrumbs – choose if you would like to have breadcrumbs enabled in the title area of this post. You can choose one of three values

• Breadcrumbs color – choose a color for the breadcrumbs text. If no color is chosen then the color set in Qode Options -> Title will be used

• Subtitle text – here you can input subtitle text which will be displayed below the title text in the title area.

• Subtitle text color – choose a color for the subtitle text

• Spacing After title - Additionally, regardless of whether you have set the title area to be visible or not, two more fields are available for defining the spacing after title. The first fields defines the margin after the title area (no need to input the unit, just the value: e.g. 50, not 50px) while the second field lets you choose if this same margin will be applied for the mobile header also.

In this section you can create custom animations for the entire title area, or just selected parts of the title area. Animations can be defined for:

• Whole Title Content - The defined animation will be applied to the entire title area.

• Page Title – Only the title text will be animated

• Page Separator – Only the separator will be animated

• Page Subtitle – Only the subtitle text will be animated

• Page Title Breadcrumbs – Only the breadcrumbs text will be animated

All these fields can take one of three values

• Empty value – the default value set in Qode Options -> Title will be used

• No – Animation won’t be set for this part of the title area. If some other value is set in Qode Options -> Title, this setting will override it and disable the animation.

• Yes – Animations will be enabled, and extra fields for defining the animation will appear

The options available for defining the animation are the following:

If you would like to set some content to appear between the post content area and the footer, then you can use Qode Content Bottom area.

This area grants extra space in the form of a widget area, and the content of this area is created through widgets. You can either define the content bottom area in the global theme options, making it visible on all pages on your website, or you can set it on a page to page basis.

Leaving this field empty will revert to the default settings defined in the global options. Setting the field to No will disable the content bottom area, while setting it to Yes will enable it and provide some extra options

• Background color – set a background color for the content bottom area

• Custom widget – Choose a widget area to be displayed in the content bottom area.

• Display in Grid – Choose whether the content bottom area should be displayed in Grid or in Full Width

In this section you can define if a sidebar will be visible on the post or not

You can choose one of five predefined sidebar layouts:

• Default – No Sidebar is used

• Sidebar 1/3 right – The sidebar is placed on the right side of the page taking 1/3 of its width

• Sidebar 1/4 right – The sidebar is placed on the right side of the page taking 1/4 of its width

• Sidebar 1/3 left – The sidebar is placed on the left side of the page taking 1/3 of its width

• Sidebar 1/4 left - The sidebar is placed on the left side of the page taking 1/4 of its width

After selecting a layout for the sidebar, the default sidebar widget area will be displayed. If you would like to use a different sidebar, you can create a custom widget area and select it as the sidebar for that page. This can be set in the Choose Widget Area in Sidebar field in the Sidebar section

This dropdown area is populated with all the custom widget areas created.

This section contains fields for the Search Engine Optimization of your page:

• SEO title – enter a custom SEO title for the page
• Meta keywords – enter a list of keywords you want to assign to your page. The keywords should be divided with commas
• Meta description – enter a meta description for your page

Here you can set up an excerpt for your post (an optional summary or description of a post). The post excerpt is the short text that will be displayed on your blog list page. If you don’t see the post excerpt field, please check the Screen Options in the upper right corner of your screen.

Now it’s time to add content to your post. There are two ways of creating content:

• Classic mode

• WPBakery Backend Editor

If you don’t see the classic mode/backend editor switcher

then post types are not enabled for visual composer editing, and you should navigate to WPBakery -> General Settings and enable Visual Composer for posts

It’s time to add content. First, select the post type you would like to create

• Standard
• Gallery
• Link
• Quote
• Video
• Audio

Standard – this is default blog format

Gallery – this format features an image gallery slider. In order for it to work, you need to add a gallery at the top of your page.

You can do this by following these steps:

If you prefer using the WordPress default editor, then you can add a gallery by navigating to Posts -> Add New Post where you should  click on the Add Media button and repeat steps from c) – e). Then you can add content to the post as you would regularly do for any page, post, portfolio etc.

Link – The link post format can be used to display links to other web pages.

If you choose this post format one more additional field called Link will appear. Here you can enter the full URL or the page you wish to link to.  This link will be accessible only when you open the post. Otherwise – on your Blog List page you will not be able to open the link directly, only the post itself. Also note that this post type doesn’t have an excerpt (it doesn’t matter if you add content to the excerpt field in the backend of the post).

Quote - The quote post format can be used to create a post that will display a quote on your blog list page:

When you select this type of post format, an extra field will appear in which you can place the quote you would like to have displayed

If any content is added in the content area, it will be displayed below the quote.

Underneath the quote text, the title of the quote post will be displayed.

Video – The video post format can be used to display YouTube, Vimeo, and self-hosted videos.

When you select this type of post format, an extra field will appear in which you can enter the video you would like to display

You can insert three types of videos

• Youtube
• Vimeo
• Self hosted

If you are inserting a YouTube video, you should only paste the video ID into the Video ID field, not the entire video URL. In order to get the YouTube video ID, open the desired YouTube video and copy the video ID like the one marked in the following screenshot:

and then paste the ID into the Video ID field

If you are inserting a video from Vimeo, you should also only paste the video ID, not the entire URL, in the Video ID field. In order to get the Vimeo video ID, open the desired Vimeo video and copy the video ID like the one marked in the following screenshot:

and then paste it into the Video ID field

If you want to insert a self-hosted video, you will first have to upload a video to your media library

and then use its link inside the Video field

To upload a video follow these steps:

• Go to Media Library -> Add New

• Select the desired files from your computer and upload them

• Go to your Media Library and select to display videos

• Click on your video and the video editor will open

(if you are using the list display, you can click on edit link or on the video title

• Copy the video url

• Go back to your post and paste the video URL into the appropriate video field

It is recommended to upload videos in all three formats (webm, mp4, ogv) to make sure your video will be displayed in all modern browsers.

You can use the Video Image field to upload a background image that will be displayed while the video is loading. In order to achieve this follow these steps:

• Click Upload file

• Select an image file from your computer or the media library

• Set your desired settings, click Insert into post and save all changes

At the end, your video fields should look like this

Audio – The audio post format can be used to display audio files.

When you select this type of post format, an extra field will appear in which you can enter a link to the audio file you would like to display

You should paste the link of an audio file you have previously uploaded to your media library into this field. To upload an audio file follow these steps:

In this section we will explain how to create categories for your blog posts and how to add your posts to specific categories.

In order to create a category, go from your WP Admin to Posts -> Categories.

Here, enter the desired category name, choose a parent for the category if needed, and optionally add a description.

You can also enter a slug for the category, but don’t worry, if you don’t enter a slug it will be generated automatically. After creating categories, they will be available for you to assign posts to them in the post editor.

All posts can be assigned to a category.

There are two ways to assign posts to categories:

To create a category directly from the post editor, click on +Add new category.

Add a category name, select a parent category if needed, and click Add New Category.

The new category will be displayed on the list, and selected as the category for the post you are editing.

• Title Style – Here you can define styles for post titles in the Large Image blog list

The following settings can be modified:

• Title Color
• Title Hover Color
• Date Color
• Font Size
• Line Height
• Text Transform
• Font Family
• Font Style
• Font Weight
• Letter Spacing

• Post Info Style – Here you can define styles for the post info text

The following settings can be modified:

• Text Color
• Link Color
• Link Hover Color
• Font Size
• Line Height
• Text Transform
• Font Family
• Font Style
• Font Weight
• Letter Spacing

• Title Style – Here you can define styles for post titles in the Small Image blog list

The following settings can be modified:

• Title Color
• Title Hover Color
• Date Color
• Font Size
• Line Height
• Text Transform
• Font Family
• Font Style
• Font Weight
• Letter Spacing

• Post Info Style – Here you can define styles for the post info text in the Small Image blog list

The following settings can be modified:

• Text Color
• Link Color
• Link Hover Color
• Font Size
• Line Height
• Text Transform
• Font Family
• Font Style
• Font Weight
• Letter Spacing

• Title Style – Here you can define styles for post titles in the Masonry blog list

The following settings can be modified:

• Title Color
• Title Hover Color
• Date Color
• Font Size
• Line Height
• Text Transform
• Font Family
• Font Style
• Font Weight
• Letter Spacing

• Post Info Style - Here you can define styles for the post info text in the Masonry blog list

The following settings can be modified:

• Text Color
• Link Color
• Link Hover Color
• Font Size
• Line Height
• Text Transform
• Font Family
• Font Style
• Font Weight
• Letter Spacing

• Title Style - Here you can define styles for post titles in the Large Image Simple blog list

The following settings can be modified:

• Title Color
• Title Hover Color
• Date Color
• Font Size
• Line Height
• Text Transform
• Font Family
• Font Style
• Font Weight
• Letter Spacing

• Date Style – Here you can define styles for the date displayed on posts in the Large Image Simple blog list.

The following settings can be modified:

• Text Color
• Font Size
• Line Height
• Text Transform
• Font Family
• Font Style
• Font Weight
• Letter Spacing

• Title Style - Here you can define styles for post titles in the Large Image with Dividers blog list

The following settings can be modified:

• Title Color
• Title Hover Color
• Font Size
• Line Height
• Text Transform
• Font Family
• Font Style
• Font Weight
• Letter Spacing

• Post Info Style - Here you can define styles for the post info text in the Large Image with Dividers blog list

The following settings can be modified:

• Text Color
• Link Color
• Link Hover Color
• Font Size
• Line Height
• Text Transform
• Font Family
• Font Style
• Font Weight
• Letter Spacing

In the Blog Slider panel of the global blog options you will find general settings for the blog slider shortcode. When setting the blog slider shortcode onto a page on your site you can choose between two types of blog sliders. There are separate sets of options in the Blog Slider panel of the global blog options for both slider types. Please note that default type of Blog Slider is Carousel.

Here you can define settings for the Carousel type of blog slider. The following options can be modified:

Here you can define settings for the Simple type of blog slider. The following options can be modified:

and you should enter only the values in these fields (no units required) like in this example

You can easily display posts on any page by adding the Latest Post shortcode to the page. There are 4 different layouts that you can create with this shortcode, each with its own set of options:

All types except Minimal will show the featured images of displayed posts. Therefore, it is recommended that you set featured image for all posts (and for all post types – including quote/link, gallery etc.). If the featured image is bigger than 539x303 pixels then it will be cropped to those dimensions. This only means that the maximum size for featured image is 539x303px, it doesn’t mean that the featured image will be displayed in those dimensions. The actual display size of featured images depends on the screen size, page layout (full width, in grid, with sidebar) and the type of Latest Post layout that you have chosen.

If you select either the Images in Left Box or Minimal type of Latest Post, you will have the following options available to modify:

With the Boxes type of Latest Post the following options are available:

With the Boxes with Dividers type of Latest Post the following options are available:

With the Image in Left Box and Minimal types of Latest Post, only the post title is a link that leads to the post itself. With the other two types - Boxes and Boxes with Dividers, the post featured image and title are both links that lead to the post.

This shortcode allows you to display your blog posts in masonry style. With this shortcode posts are listed the same way they are when using the Blog Masonry template. This means that for non-standard post types, instead of the featured image, a video (for the video post type), gallery (for the gallery post type), etc. will be displayed.

If this shortcode is used with the Default page template, then the maximum number of columns is 3, while maximum number of columns when using the Full Width page template is 5.

The Blog Masonry shortcode provides the following options:

The Blog Slider shortcode lets you display your blog posts within a slider on any page.

When using the Blog Slider, it is recommended that you upload all your posts’ featured images in the same size in order to achieve the best looking layout.

The Blog Slider provides two types of layouts: the default Carousel layout

and the Simple layout

Global styling options for the Blog Slider shortcode can be found in Qode Options -> Blog -> Blog Slider.

When setting a Blog Slider shortcode on a page on your website, the following options are available:

When you choose the Simple Blog Slider type, you receive a few additional options: