Display settings for Blog, Shop single pages

How to show/hide theme elements (title, featured image, tags, etc.)

In some places, you can globally show/hide the theme elements, such as titles, subtitles, images, metadata. These options can be found on Archive and Single page settings such as BlogPortfolioShop and in the HeaderFooterSearch template and Page Title bars.


For example, you can simply refuse to show the Featured Image on Blog single posts by deactivating its option in Customizer > Blog > Blog Single > Settings > Display Elements.

Display Options are not only show/hiding something. But it’s how you choose the layout of your content too. You can choose how your single content look. It also effects on other options if you choose a different template for your single pages.


For example, you can change the layout on a single product page in Customizer > Shop > Product Page > Settings > Template.

Creating a custom Blog page

How to create a Blog page with Elementor

Jupiter X has 2 main blog styles – Grid and Masonry. They can be created with Posts element in Elementor page builder. 


Beware! This element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. In order to see the default Elementor Posts, you need to look for it in the Elementor knowledgebase.

It’s worth to mention that before displaying blog posts, a post itself should be created and the element configured. 

Creating a single blog post

1. From WordPress left menu, go to Posts and click on Add New.

2. Enter a title and click on Edit with Elementor button or use the default WordPress editor to add your content to a post.

3. Add needed content to your post.

4. Publish the post and check the result.

Note: If you don’t see Edit with the Elementor button in the Post editor, you need to activate it in Elementor > Settings as described in this article.
A
lso, make sure this page is not set as a default blog page in the WordPress Dashboard > Settings > Reading

Configuring a Single Blog Post Layout

You can change the post layout to Default template (the one with a sidebar) or Full Width template (without a sidebar). Sidebar can be added to blog posts which will then allow adding widgets to blog posts. How to add a sidebar refer to this article.

If you don’t want to have a sidebar on a post page, you need set Template in Post Attributes drop down to Full Width:

In Appearance > Customize > Blog > Blog Single you have options to set different layout for your single post and also hide/show different elements like featured image, social icons, related posts, etc. and style them.

To see all of the blog styles, you may check out “Blog” section on our Jupiter X main demo under the Blog menu item.

Creating a custom Blog Page

Note: If you set a page with Posts element to be the default blog page from Settings > Reading, none of the styles and options related to the Posts element will be applied to that page. So Posts page option in Settings > Reading should be blank.



By default, WordPress displays latest blog posts in your front page with default Jupiter X layout. The default layout is very limited and you can not use the different blog layouts as shown in our demo pages.

To be able to use the flexibility of blog pages, you need to create and configure a custom page with Posts element and make WordPress aware of the page.

To create a custom blog page:

1. Add a new page or edit an existing one.

2. Click on Edit with Elementor button.

3. From the left dashboard, search for a “Posts” element.


Beware! This element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. In order to see the default Elementor Posts, you need to look for it in the Elementor knowledgebase.

4. Drag and drop the Posts element to your page.

5. A new dashboard on the left will open with the element’s settings. From the Content tab and within the Content section set the Source of the posts to Blog.

6. Edit the settings and Update the page.

Custom Blog page and Blog Archive pages are different. When creating a custom Blog page, you can add any widget in Elementor page builder, but Blog Archive page shows some posts by default. 
For example, a category page which was created in Posts > Categories and you assigned some posts to this category, so they are shown once the category page link is clicked. Such page can’t be modified in Elementor as it uses default archive template.
But there are some settings for Blog Archive pages, like categories and tags pages.

Go to Appearance > Customize > Blog > Blog Archive and there you’ll have options to set margins/paddings for blog archive pages in different devices. 



Note: If you want to show a sidebar on your Blog page and Blog Archive pages, refer to this article how to assign a sidebar globally, and read this one how to add a sidebar to a specific page.

Setting Layout for Blog Archive pages

When creating a page you have a possibility to set its layout to Full Width or Default (with sidebar). But what about archive pages, for example category pages to which you assign the posts? What if you want to set sidebar for one category, but have full width page for another? You’ve got such opportunity when creating a category or edit a category after its creation.

1. Go to Posts > Categories > Add New Category.

2. Fill in the fields and in Layout setting choose the layout for this new category. You can have a layout with sidebar or without sidebar. If you set it to Global, the setting will be applied from Appearance > Customize > Sidebar.

Note: If you forgot to select the layout while creating a category, you can change it in the category editor. Edit a category in Posts > Categories and set the Layout option to the needed setting.

Also you can set global layout for all category pages.

1. Go to Appearance > Customize > Sidebar.

2. Under the Settings tab, in Exceptions section click on Add New Exception.

3. Select Archive item and set Layout setting to the desired layout.

Note: Archive settings are applied to both Blog and Portfolio archive pages. Portfolio and Blog exceptions are related to single post pages in this setting.

Enabling Related Posts for Clear & Bold single post style

Recommended posts section is disabled for Clear and Bold style of a single blog post.
But you can activate them commenting out a line in your child theme. So, in order to do that:

1Enable your child theme.

2Copy jupiter/views/singular/wp-single.php to jupiter-child/views/singular/wp-single.php.

Directory structure should be the same as in the parent theme.

3Edit jupiter-child/views/singular/wp-single.php in lines 41-43:

if ( mk_get_blog_single_style() !== 'bold' ) {
  mk_get_view( 'blog/components', 'blog-similar-posts' ); 
 }


to:

//if ( mk_get_blog_single_style() !== 'bold' ) {
  mk_get_view( 'blog/components', 'blog-similar-posts' ); 
 //}

This will show the related posts in Clear & Bold style.

Configuring the Blog Archive

The blog archive is an accumulation of blog posts. It contains all your blog posts in one place.

In this article we will explain how to access the blog archive and it’s settings. Note that if you are looking to create a blog you should check out the creating a blog post and displaying blog posts articles.


Configuring the Blog Archive

Archives are special auto-generated pages in WordPress that show a list of blog posts. There are limited options in Ken to configure this auto-generated page. We instead recommend that you add a page and use the Blog Shortcode to generate a more configurable archive page for your blog loop.

To access the blog archive settings:

1From the WordPress left menu, go to Theme Settings > Blog.

blog archive

2Configure the settings and click on Save Settings.


Archive Layout

To change the layout of the blog archive:

1From the WordPress left menu, go to Theme Settings > Blog.

blog archive

SettingDescription
Archive layout Defines the layout of the archive page.
Archive loop featured image height Sets the height of the featured image.
Archive loop page title This option allows to enable/disable page title section (including breadcrumbs).
2Configure the settings and click on Save Settings.

Adding Widgets to the Sidebar

If your blog archive layout has a sidebar, you can add widgets to it:

1From the WordPress left menu, go to Appearance > Widgets.

blog archive

2From the widgets page, drag-and-drop one of the widgets into the Archive widget area.

blog archive

3Configure the widget and click on Save.


Archive Style

To change the style of the blog archive:

1From the WordPress left menu, go to Theme Settings > Blog.

[image]

SettingDescription

Archive loop style Defines the style of the blog loop. Available options are: Classic, Masonry, Thumb, Tile, List.

2Configure the setting and click on Save Settings.

If you have any questions regarding Blog archive configuration, feel free to contact our support team.

Displaying Blog Posts

The Ken has 9 main blog styles – classic, masonry, tile, list, thumbnail, scroller, slideshow, magazine and modern. Every style differs in looks, layout and functionality. In this article we will cover the necessary steps for displaying blog posts using the blog shortcode and these 9 styles.

It’s worth to mention that before displaying blog posts, blog post itself should be created and the shortcode configured. For more information, please read creating a blog post.

To see all of the blog styles, you may check out “blog” section on our Ken main demo.


Creating a Blog Page

By default, WordPress displays latest blog posts in your front page with default Ken layout. The default layout is very limited and you can not use the different blog layouts as shown in our demo pages.

To be able to use the flexibility of blog pages, you need to create and configure a custom page with Blog shortcode and make WordPress aware of the page.

Creating a Custom Page

To create a blog page:

1From WordPress left menu, go to Pages > Add New.

displaying blog posts

2Enter a title for your blog page.

3From the Visual Composer screen, click + button.

displaying blog posts

4In Add Element pop-up screen, search for Blog and click on it to be added to the page.

displaying blog posts

5When the shortcode is added, a new pop-up screen called Blog Settings opens. It allows you to configure the shortcode settings.

displaying blog posts

6Click on Publish button and check the result in front-end of your website.

Making WordPress Aware of the Custom Page

After creating a custom blog page, it’s time to let WordPress know about it.

1From WordPress left menu, go to Settings > Reading page.

displaying blog posts

2From Front page display, select A static page (select below) option then depending on your site, select the custom page you have created as a Front page or Posts page.

3Click on Save Changes button.


Creating a Classic Blog

Below, we are going to explain step by step how to create a full width classic blog. To see the end result, please check out modern blog demo.

Configuring the Shortcode

To achieve the full width classic blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Classic
Image Cropping On
Images height 350 px
How many posts in a page? 8
Content type Summary (excerpt)
Post excerpt length 200
Pagination? Enabled
Pagination style Classic pagination navigation
Post meta On

2Click on Save Changes.

3Publish the page and check out the result.


Creating a Modern Blog

Below, we are going to explain step by step how to create a full width modern blog. To see the end result, please check out modern blog demo.

Configuring the Shortcode

To achieve the full width classic blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Modern
Image Cropping On
Image height 350 px
How many posts in a page? 8
Orderby Comment count
Post meta On
Pagination? Enabled
Pagination style Load more button

2Click on Save Changes.

3Publish the page and check out the result.


Creating a Masonry Blog

Below, we are going to explain step by step how to create a three column masonry blog. To see the end result, please check out masonry blog demo.

Configuring the Shortcode

To achieve the three column masonry blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Masonry
Image cropping On
Images height 250 px
How many columns? 3
How many posts in a page? 15
Post meta On
Post excerpt length 80
Pagination? Enabled
Pagination style Load more button

2Click on Save Changes.

3Publish the page and check out the result.


Creating a Tile Blog

Below, we are going to explain step by step how to create a four column tile blog. To see the end result, please check out tile blog demo.

Configuring the Shortcode

To achieve the four column tile blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Tile
Image cropping On
Images height 200 px
How many columns? 4
How many posts in a page? 20
Author Thumbnail  On
Offset 1
Orderby Menu order
Post excerpt length 50
Pagination? Disabled
Post meta On

2Click on Save Changes.

3Publish the page and check out the result.


Creating a List Blog

Below, we are going to explain step by step how to create a list blog. To see the end result, please check out list blog demo.

Configuring the Shortcode

To achieve the list blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style List
Post Excerpt Length 180
How many posts in a page? 3
Pagination? Disabled
Orderby Date

2Click on Save Changes.

3Publish the page and check out the result.


Creating a Thumbnail Blog

Below, we are going to explain step by step how to create a thumbnail blog. To see the end result, please check out thumbnail blog demo.

Configuring the Shortcode

To achieve the thumbnail blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Thumbnail
Thumbnail align Left
How many posts in a page? 4
Post excerpt length 200
Pagination? Disabled
Orderby Comment Count

2Click on Save Changes.

3Publish the page and check out the result.


Creating a Magazine Blog

Below, we are going to explain step by step how to create a magazine blog. To see the end result, please check out magazine blog demo.

Configuring the Shortcode

To achieve the magazine blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Magazine
Image cropping On
Offset 2
Loop Structure Two columns (featured post on the left side)
How many posts in a page? 5
Post excerpt length 120
Orderby Date

2Click on Save Changes.

3Publish the page and check out the result.


Creating a Slideshow Blog

Below, we are going to explain step by step how to create a slideshow blog. To see the end result, please check out magazine blog demo.

Configuring the Shortcode

To achieve the slideshow blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Slideshow
Slideshow layout Default
Images Height 350 px
Post meta On
How many posts in a page? 10
Orderby Comment count

2Click on Save Changes.

3Publish the page and check out the result.


Creating a Scroller Blog

Below, we are going to explain step by step how to create a scroller blog. To see the end result, please check out scroller blog demo.

Configuring the Shortcode

To achieve the slideshow blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Scroller
Images Width 300 px
Images Height 300 px
Post meta Off
How many posts in a page? 12
Orderby Date

2Click on Save Changes.

3Publish the page and check out the result.

If you have any questions regarding these blog styles, please create a ticket to our helpdesk.

Creating a Blog Post

Creating a blog post is the first step in creating a blog on your website.

In this article we will cover how to use Visual Composer with blog posts, add sidebar and widgets and how to configure the blog posts.

To see many of The Ken blogs, you may check out the Ken main demo.


Creating a Blog Post

The Ken lets you create different types of blog posts, like image, video, audio, gallery, quote and link type. These types differ how they work both in blog archive and blog single post.

Creating Different Types of Posts

1From the WordPress left menu, go to Posts and click on Add New.

blog post

2Enter a title and scroll down to Format box on the right side of the page.

blog post

3From the Format box, select a post type.

Image Type

If the image type is selected, to upload the image:

1Click on Set featured image in the right sidebar.

blog post

2Upload the image or select one from the media library and click on Set featured image.

3Publish the post and check the result.

Video Type

If the video type is selected, some options will appear in Ken Posts Options to upload the video:

SettingDescription

Video URL Adds a video URL from famous video sharing services such as Youtube or Vimeo.

blog post

Configure the necessary settings and click on Publish.

Audio Type

If the audio type is selected, some options will appear in Ken Posts Options to upload the audio file:

SettingDescription

Upload MP3 file  Use this option to upload your audio file in MP3 format. You also need to provide an OGG format for cross-browser compatibility.
Upload OGG file Use this option to upload your audio file in OGG format. You also need to provide an MP3 format for cross-browser compatibility.
Soundcloud  Use this option to add an embed code for SoundCloud audio. You can go to share -> embed in SoundCloud and then copy/paste the code in this option. You also can use a WordPress shortcode for SoundCloud.

blog post

Configure the necessary settings and click on Publish.

Gallery Type

If the gallery type is selected, some options will appear in Ken Posts Options to upload the gallery images:

SettingDescription

Gallery Images  Use this option to add images you want to have in your post as an image gallery.

blog post

Configure the necessary settings and click on Publish.


Creating a Post with WPBakery Page Builder

In order to create a blog post with WPBakery Page Builder, it has to be enabled.

To enable WPBakery for blog posts:

1From WordPress left menu, go to WPBakery > Role Manager.

2Under Post Types option, select Custom and enable Post.

blog post

3Click on Save Changes.

Once the WPBakery is enabled for blog posts, you will notice that when creating a blog post you will be able to use WPBakery shortcodes just like on any other page.

Adding the Excerpt

When the posts content is added with WPBakery Page Builder, the excerpt of the post is not generated automatically by WordPress. Instead, in this case the excerpt needs to be added manually.

To add the excerpt:

1Enter a blog post where you wish to add your excerpt.

2Click on the Screen Options button and enable the Excerpt option.

blog post

3Scroll down to the excerpt input box and write your excerpt.

4Publish or update the post.


Configuring the Post Layout

The layout can be defined globally or page specifically. Sidebar can be added to blog posts which will then allow adding widgets to blog posts.

Adding Global Sidebar

1From WordPress left menu, go to Theme Settings > Blog.

blog settings-blog post

2From Blog Single Layout dropdown, select the desired option.

blog post

3Click on Save Settings.

Adding Page Specific Sidebar

1From WordPress left menu, go to Posts and enter a blog post.

2Find Ken Page Layout on the right side, from Page Layout dropdown, select the desired option.

3Publish or Update the post and check the changes.

Adding Widgets

To add widgets to a blog post sidebar:

1From WordPress left menu, go to Appearance > Widgets.

2In Widgets page, drag a widget and drop it in Blog Single widget area.

3Configure the widget and click on Save.


Configuring the Post Page

There are some settings which can be used to configure the blog post page.

To configure the post page:

1From WordPress left menu, go to Posts.

2Enter a specific blog post which you wish to configure.

Ken Posts Options

SettingDescription

Page Elements Changes this page’s general layout by making structural changes.
Stick template? Enabling this removes the padding after header and before footer.
Header Toolbar?  Enable this option if you want to have a Header Toolbar area for this post. To add information inside the Header Toolbar area you need to go to Theme Settings -> Header.
Featured Image?  Enable this option if you want to show a featured image in the post. A featured image can be uploaded to the post through the option available in the Featured Image metabox.
Show Meta?  Enable this option if you want to show details about the blog post on the front end including the category, publishing date, author, etc.

Ken Styling Options

In addition to single post type options explained above, there are some setting which let you configure the blog single post even more.

Use Ken Styling Options to override global settings for your blog post. Global settings are options in which you set Theme Settings. For more detailed information about options available in this section please click here.

Ken Widget Options

Use this set of options to organize Widgets you want to use for your blog post. For more detailed information about Ken Widget Options click here.


Further Configuration

To fine tune your blog post, you need to go to Theme Settings > Blog to set proper options for Feature Image Height and other information. To know more details about those options please read this article.

If there are any questions regarding the posts creation, feel free to contact our support team.

Blog/News Settings

Blog settings is the main section which allows you to choose global settings for your Jupiter posts in WordPress. You can access Blog Settings from Jupiter > Theme Options > Blog.

In this article we will describe the options available under the Blog section of Theme Options.


Blog Single Post Settings

1Single Layout

You can globally manage blog single layout using this option.

There are several options you can choose from to style the layout of your single post page:

Name Description

Right Layout Sets sidebar on the right side.
Left Layout Sets sidebar on the left side.
Full Layout Sets the full layout without sidebar.

2Post Style

Use this blog theme option to set the style of a single blog post page. Available options are:

  1. Traditional and Compact
  2. Clear and Bold

The Traditional and Compact option is the standard style of a single blog post in Jupiter. The Clear and Bold style has a big hero section at the top of the page including the blog title and the featured images as the background of the hero section.For more information about Clear and Bold style read this article.

3Featured Image

Use this option to enable or disable the featured image for the single blog post page. The video player for video post type and audio player for audio post type will be enabled or disabled using this option.

blog settings

4Featured Image Height

Use this option to set the featured image height.

5Image Cropping

Use this option to enable or disable the automatic image cropping for the single blog post page.

6Post Title

Use this option to enable or disable the single blog post title. This option will work for both styles of the single blog post.

7Previous & Next Arrows

Use this option to enable or disable navigation arrows in the single blog post page. The navigation arrows gives the visitor an option to go to the next or previous blog post directly from the single blog post page.

8Show Previous & Next for Same Categories?

This option limits the blog posts navigation to same categories of current post.

9Recommended Posts

Use this option to show or hide the recommended posts section in the single blog post page. The Recommended Posts section is a list of blog thumbnails with the link to their respective single blog pages. The blog thumbnails are selected automatically from the same category that the current blog post is in.

blog settings

10Comments on Blog Posts

Use this option toenable or disable the comments section for the single blog posts. This option is for the single blog posts only. If you are interested in having a comments section for WordPress pages, you need to go to Theme Options > Global Settings and enable the Comments on Pages options. For more information about that option click here.

11About Author Box

Use this option to enable or disable the author box section in the single blog post page. The author box is positioned at the bottom of the single blog post page and shows information about the author of that particular post. To change the author information you need to go to WordPress Admin Menu > Users > Your Profile and add your name and information there. If you add your Website URL, Email Address and Twitter Account, they will be shown as linked icons in the author box.

blog settings

12Social Share

Use this option to enable or disable the social share section for both the Single Blog Post and the Archive pages.


Blog Meta Settings

1Display Meta Options

Use this option to show or hide the extra information about the single blog post, such as author, date created, etc.

2Meta Tags

Use this option to show or hide meta tags that you added in the single blog post edit screen in the WordPress admin. The meta tag addition box is at the right section of the single blog post edit screen in the admin section.


Blog Archive Settings

1Archive Layout

Defines an archive loop layout. Available options are:

  1. Left Sidebar
  2. Right Sidebar
  3. Full Layout

2Blog Archive Style

Jupiter has different styles to show the blog list which is more configurable in the Blog shortcode. Use these blog theme options to set the style for the archive page blog thumbnails list. Available options are:

  1. Modern
  2. Classic
  3. Newspaper
  4. Spotlight
  5. Thumbnail
  6. Magazine
  7. Grid

3Page Title

Use this option to set the page title section text of the auto generated archive page.

4Page SubTitle

Use this option to enable or disable the subtitle for the page title section of the auto generated archive page.

5Featured Image Height

Use this option to set the height of the thumbnail images in the blog archive page.

6Blog Meta

Use this option to show or hide extra information for each blog item in the auto generated blog archive page including categories, date created, etc.

7Pagination Style

Use this blog theme option to set the pagination style of the blog archive page. Available options are:

  1. Pagination Nav
  2. Load More Button
  3. Load on Page Scroll

Blog Archive Full Sized Images

To show the full image sizes in the blog archive:

1Install and enable the child theme.

2Copy jupiter/views/templates/wp-archive.php to the same hierarchy in the child theme.

3Add the code below before the grid_image_height line:

image_size="full"


News Settings

In the Blog Theme Options there is also the News section where you can style the news archive page. Here are its settings:

1Featured Image

Use this option to enable or disable the featured image for news single page.

2Featured Image Height

Use this option to set the height of the thumbnail images in the news single page.

3Slug

News slug is the text that is displayed in the URL (e.g. www.domain.com/news-posts/morbi-et-diam-massa/). As shown in the example, it is set to ‘news-posts’ by default but you can change it to anything to suite your preference. However you should not have the same slug in any page or other post slug and if so, the pagination will return 404 error naturally due to the internal conflicts.

If you have any questions regarding the Blog set up, you can create a ticket and our support staff will help.

Displaying Blog Posts

Jupiter has 7 main blog styles – modern, classic, newspaper, grid, spotlight, thumbnail and magazine. Every style differ in looks, layout and functionality. In this article we cover how to display blog posts using the blog shortcode and these 7 styles.

It’s worth to mention that before displaying blog posts, blog post itself should be created and the shortcode configured. For more information, please read creating a blog post and blog shortcode articles.

To see all of the blog styles, you may check out “blog” section on our Jupiter main demo.


Creating a Blog Page

By default, WordPress displays latest blog posts in your front page with default Jupiter layout. The default layout is very limited and you can not use the different blog layouts as shown in our demo pages.

To be able to use the flexibility of blog pages, you need to create and configure a custom page with Blog shortcode and make WordPress aware of the page.

Creating a Custom Page

To create a blog page:

1From WordPress left menu, go to Pages > Add New.

Displaying blog posts - Add new page

2Enter a title for your blog page.

Displaying blog posts - enter a title

3From Visual Composer screen, click + button.

Displaying blog posts - Visual Composer screen

4In Add Element pop-up screen, search for Blog and click on it to be added to the page.

Displaying blog posts - add element

5When the shortcode is added, a new pop-up screen called Blog Settings opens. It allows you to configure the shortcode settings.

Displaying blog posts - Blog settings

6Click on Publish button and check the result in front-end of your website.

Making WordPress Aware of the Custom Page

After creating a custom blog page, it’s time to let WordPress know about it.

1From WordPress left menu, go to Settings > Reading page.

Displaying blog posts - Reading page

2From Front page display, select A static page (select below) option then depending on your site, select the custom page you have created as a Front page or Posts page.

Displaying blog posts - Reading settings

3Click on Save Changes button.


Creating a Modern Blog

Below, we are going to explain step by step how to create a full width modern blog. To see the end result, please check out modern blog demo.

Configuring the Shortcode

To achieve the full width modern blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Modern
Image size Resize & crop
Image height 550 px
How many posts? 6
Full content in blog loop? Disabled
Post excerpt length 200
Pagination? Enabled
Pagination style Load more button

2Click on Save Changes.

Displaying blog posts - Blog setting

3Publish the page and check out the result.


Creating a Classic Blog

Below, we are going to explain step by step how to create a full width classic blog. To see the end result, please check out classic blog demo.

Configuring the Shortcode

To achieve the full width classic blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Classic
Image size Resize & crop
Image height 550 px
How many posts? 6
Comment count & social share Enabled
Full content in blog loop? Disabled
Post excerpt length 200
Pagination? Enabled
Pagination style Load more button

2Click on Save Changes.

Displaying blog posts - Blog settings

3Publish the page and check out the result.


Creating a Newspaper Blog

Below, we are going to explain step by step how to create a two column newspaper blog. To see the end result, please check out newspaper blog demo.

Configuring the Shortcode

To achieve the two column newspaper blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Newspaper
Image size Resize & crop
Image height 300 px
How many columns? 2
How many posts? 12
Comments count & social share Enabled
Full content in blog loop? Disabled
Post excerpt length 200
Pagination? Enabled
Pagination style Load more button

2Click on Save Changes.

Displaying blog posts - Blog settings

3Publish the page and check out the result.


Creating a Grid Blog

Below, we are going to explain step by step how to create a two column grid blog. To see the end result, please check out grid blog demo.

Configuring the Shortcode

To achieve the two column grid blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Grid
Image size Resize & crop
Image height 300 px
How many columns? 2
How many posts? 12
Transparent border Disabled
Show date? Enabled
Full content in blog loop? Disabled
Post excerpt length 200
Pagination? Enabled
Pagination style Classic pagination navigation

2Click on Save Changes.

Displaying blog posts - Blog settings

3Publish the page and check out the result.


Creating a Spotlight Blog

Below, we are going to explain step by step how to create a two column spotlight blog. To see the end result, please check out spotlight blog demo.

Configuring the Shortcode

To achieve the two column spotlight blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Spotlight
Image size Resize & crop
Image height 300 px
How many columns? 2
How many posts? 8
Pagination? Enabled
Pagination style Load more button

2Click on Save Changes.

Displaying blog posts - Blog settings

Configuring the Row

1In the row which contains the blog shortcode, click on Edit this row.

Displaying blog posts - edit row

2A new pop-up screen called Row Settings opens, configure the settings like shown below.

Setting Configuration

Full width row Enabled
Full width content Enabled

3Click on Save Changes.

Displaying blog posts - row settings

4Publish the page and check out the result.


Creating a Thumbnail Blog

Below, we are going to explain step by step how to create a thumbnail blog. To see the end result, please check out thumbnail blog demo.

Configuring the Shortcode

To achieve the thumbnail blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Thumbnail
Image size Resize & crop
Image height 350 px
Thumbnail align Left
How many posts? 9
Post excerpt length 200
Pagination? Enabled
Pagination style Classic pagination navigation

2Click on Save Changes.

Displaying blog posts - Blog settings

3Publish the page and check out the result.


Creating a Magazine Blog

Below, we are going to explain step by step how to create a magazine blog. To see the end result, please check out magazine blog demo.

Configuring the Shortcode

To achieve the magazine blog like shown in the demo:

1In Blog Settings pop-up, configure the settings like shown below.

Setting Configuration

Style Magazine
Image size Resize & crop
Image height 350 px
Magazine style align Two columns (featured post on the left side)
How many posts? 5
Post excerpt length 200
Pagination? Enabled
Pagination style Classic pagination navigation

2Click on Save Changes.

Displaying blog posts - Blog settings

3Publish the page and check out the result.

Configuring the Blog archive

The blog archive is an accumulation of blog posts. It contains all your blog posts in one place.

In this article we explain how to access the blog archive and it’s settings. Note that if you are looking to create a blog you should check out the creating a blog post and displaying blog posts articles.


Configuring the Archive

Archives are special auto-generated pages in WordPress that show a list of blog posts. There are limited options in Jupiter to configure this auto-generated page. We instead recommend that you add a page and use the Blog Shortcode to generate a more configurable archive page for your blog loop.

To access the blog archive settings:

1From the WordPress left menu, go to Theme Options > Blog > Blog Archive.

blog archive

2Configure the settings and click on Save Settings.


Archive Layout

To change the layout of the blog archive:

1From the WordPress left menu, go to Theme Options > Blog > Blog Archive.

blog archive

SettingDescription
Blog archive layout Defines the layout of the archive page. Available options are: Right Sidebar, Left Sidebar, Full Layout.
Featured image height Sets the height of featured image.
2Configure the settings and click on Save Settings.

Adding Widgets to the Sidebar

If your blog archive layout has a sidebar, you can add widgets to it:

1From the WordPress left menu, go to Appearance > Widgets.

Blog archive widgets

2From the widgets page, drag-and-drop one of the widgets into the Archive Widget Area.

Blog archive widget area

3Configure the widget and click on Save.


Archive Style

To change the style of the blog archive:

1From the WordPress left menu, go to Theme Options > Blog > Blog Archive.

blog archive

SettingDescription
Blog archive style Defines the style of the blog loop.
Pagination style Sets the style of the pagination.

2Configure the setting and click on Save Settings.

If you have any questions regarding blog archive configuration, feel free to contact our support team.

Creating a Blog Post

Creating a blog post is the first step in creating a blog on your website.

 

In this article we cover how to use visual composer with blog posts, add sidebar and widgets and how to configure the blog posts.

To see many of Jupiter blogs, you may check out the Jupiter main demo.


Creating a Blog Post

Jupiter let’s you create different styles and types of blog posts, like image, video, audio, portfolio, twitter, blockqoute and instagram type. These types differ how they work both in blog archive and blog single post.

[abb_heading tag=”h3″]Creating different styles of posts[/abb_heading]

1From WordPress left menu, go to Posts and click on Add New

Add a new post

2Enter a title and scroll down to Jupiter Posts Options.

Jupiter post options

3From the Single Post Style dropdown, select a style.

Single post style dropdown

4Publish the post and check the result.

[abb_heading tag=”h3″]Creating different types of posts[/abb_heading]

1From WordPress left menu, go to Posts and click on Add New.

Add a new post

2Enter a title and scroll down to Jupiter Posts Options.

Jupiter post options

3From the Post Format dropdown, select a post type.

Post format dropdown

[abb_heading tag=”h3″]Image type[/abb_heading]

If the image type is selected, to upload the image:

1Click on Set featured image in the right sidebar.

Set featured image

2Upload the image or select one from the media library and click on Set featured image.

3Publish the post and check the result.

[abb_heading tag=”h3″]Video type[/abb_heading]

If the video type is selected, some options will appear below to upload the video:

SettingDescription

Video site Select the website where your video is uploaded to.
Video ID Set the ID of the video.

Configure the necessary settings and click on Publish.

[abb_heading tag=”h3″]Audio type[/abb_heading]

If the audio type is selected, some options will appear below to upload the audio file:

SettingDescription
Upload MP3 file Upload a MP3 file or paste the full URL to the file.
Upload OGG file Upload a OGG file or paste the full URL to the file.
Sound track author Sets the author of an audio file.
Soundcloud & Spotify Paste the embed iframe or wordpress shortcode for your audio file.

Configure the necessary settings and click on Publish.

[abb_heading tag=”h3″]Portfolio type[/abb_heading]

If the portfolio type is selected, to upload the images to the gallery:

1Click on Add Images.

Portfolio type adding images

2Upload the image or select from the media library and click on Add to gallery.

3Publish the post and check the result.

[abb_heading tag=”h3″]Twitter type[/abb_heading]

If the twitter type is selected, some options will appear below to add the tweet:

SettingDescription
The URL of tweet Paste the full URL to the tweet you wish to display.

Configure the necessary settings and click on Publish.

[abb_heading tag=”h3″]Blockquote type[/abb_heading]

If the blockquote type is selected, some options will appear below to add the quote and author:

SettingDescription
Blockquote Sets the quote content.
Blockquote author Sets the quote author.

Configure the necessary settings and click on Publish.

[abb_heading tag=”h3″]Instagram type[/abb_heading]

If the instagram type is selected, some options will appear below to add the instagram media:

SettingDescription
Instagram media URL Paste the full URL to the instagram media you wish to display.

Configure the necessary settings and click on Publish.


Creating a Blog Post with Visual Composer

In order to create a blog post with Visual Composer, it has to be enabled.

To enable Visual Composer for blog posts:

1From WordPress left menu, go to WPBakery Page Builder > Role Manager.

2Under Post Types option, select Custom and enable Post.

3Click on Save Changes.

Once the Visual Composer is enabled for blog posts, you will notice that when creating a blog post you will be able to use Visual Composer shortcodes just like on any other page.

Adding the Excerpt

When the posts content is added with Visual Composer, the excerpt of the post is not generated automatically by WordPress. Instead, in this case the excerpt needs to be added manually.

To add the excerpt:

1Enter a blog post where you wish to add your excerpt.

2Click on the Screen Options button and enable the Excerpt option.

creating a blog post

3Scroll down to the excerpt input box and write your excerpt.

creating a blog post

4Publish or update the post.


Configuring the Post Layout

The layout can be defined globally or page specifically. Sidebar can be added to blog posts which will then allow adding widgets to blog posts.

[abb_heading tag=”h3″]Adding global sidebar[/abb_heading]

1From WordPress left menu, go to Theme Options > Blog > Blog Single Post.

creating a blog post

2From Single Layout dropdown, select the desired option.

creating a blog post

3Click on Save Settings.

[abb_heading tag=”h3″]Adding page specific sidebar[/abb_heading]

1From WordPress left menu, go to Posts and enter a blog post.

2Scroll down to Jupiter Page Options, from Layout dropdown, select the desired option.

Jupiter page options layout dropdown

3Publish or Update the post and check the changes.

[abb_heading tag=”h3″]Adding widgets[/abb_heading]

To add widgets to a blog post sidebar:

1From WordPress left menu, go to Appearance > Widgets.

Appearance widgets menu

2In Widgets page, drag a widget and drop it in Single Posts Widget Area.

Adding widget to blog post

3Configure the widget and click on Save.


Configuring the Post Page

There are some settings which can be used to configure the blog post page.

To configure the post page:

1From WordPress left menu, go to Posts.

2Enter a specific blog post which you wish to configure.

[abb_heading tag=”h3″]Jupiter page options[/abb_heading]

SettingDescription
Manage page elements Changes this page’s general layout by making structral changes.
Stick template Enabling this removes the padding after header and before footer.
Page preloader Enables the page preloader only for this post.
Page title align Changes the title and subtitle align.
Breadcrumb Enables or disables breadcrumbs for this post.

[abb_heading tag=”h3″]Jupiter Posts Options[/abb_heading]

In addition to single post style and post type options explained above, there are some setting which let you configure the blog single post even more.

SettingDescription
Show featured image Toggles between showing the featured image or hiding it in blog single post.
Meta section Displays the extra information about the blog post.
Tags Displays the tags in the post.
Related posts Displays the related posts in the blog single post page.
About author box Displays the information about the author.
Author email Adds an email in the about author box.
Comments Displays comments on this blog post.