How to Customize your Blog with the Blog Customizer in Jupiter X

How to customize your blog featured image

Knowing how to customize a blog in WordPress has always been a big challenge, particularly for those who don’t want to deal with coding. Want to do something like creating a custom single post simply to remove a page title? Or something more complicated like changing the entire layout of single blog posts? Of course, the latter is much more involved.

The Blog Customizer is one of Jupiter X’s best features as it allows users to create custom single blog pages quickly and easily. It’s highly customizable, and you can change the layout of your blog pages without a single line of code.

By using the single Blog Customizer, you can:

  • Change the whole template of single blog posts.
  • Display/hide every element of the blog posts such as featured image, title, author box, etc.
  • Customize and change the styles of the blog post elements.

In this article, by using a practical example, we’re going to show you how easily you can customize your blog single page using the Jupiter X Blog Customizer feature. Let’s first create the single blog page before customizing it.

Adding a New Post

1. You are probably familiar with creating blog posts in WordPress. All you have to do is click on Posts > Add New from the WordPress sidebar menu.

How to customize your blog add a new post

2. Now you’re in the post editor. You can add a title and content to your post. Also from the right sidebar in the editor, you can add categories, tags and a featured image to your post. These things are optional but as we want to show how we can customize them, let’s add categories, some tags and a featured image to our post.

3. To be able to customize your posts with the Jupiter X Blog Customizer, your posts must have a Default Template. So from the right sidebar menu, find Post Attribute and select the Default Template.

4. Publish (Update) the page.

how to customize your blog publish

Important: To customize your posts with Jupiter X Blog Customizer, you must create at least one post and set its Post Attribute to the Default Template.

How to Customize your Blog Posts via Blog Customizer

To customize your posts:

1. From the left menu in WordPress, go to JupiterX > Customize > Blog > Single Blog

How to customize your blog gif step 1

2. A new window will open with all the available options to customize and style the blog post. The Single Blog Customizer has two tabs: Settings and Styles. The first tab (Settings) allows you to choose a default template for your blog posts and enable or disable the feature image, title, date, author, categories, etc for them. In the second tab (Styles), you can change the styles of each element of the blog post.

Settings

Here are the available options for customizing the blog posts that you can find in the Settings tab.

Template

Choose a default template from the sample templates.

Display Elements

Enable/disable the below elements in the blog posts. The available elements include the following:

  • Featured Image: Displaying a representative image for our posts
  • Title: Displaying the title of the post
  • Date: Showing the publish date for each post
  • Author: Displaying the author of the post
  • Categories: Showing the post categories
  • Tags: Showing the post tags
  • Social Share: Adding a social share button for our blog posts
  • Navigation: Navigating through the next and previously published posts
  • Author Box: Displaying all the author’s information, such as the author’s name, bio, avatar, etc.
  • Related Posts: Displaying the related posts at the bottom of each blog post.
  • Comments: Enabling/disabling the comment feature for blog posts.

Styles

Here, you can change the styles of every enabled element in the blog post. All the available options for styling elements can be accessed by clicking on Customize for each element.

Here are some sample options for element customization:

how to customize your blog typography

Margins and Paddings

You can set margin and padding for every available element for the blog post.

how to customize your blog margin and padding

Units

Units are crucial to set font sizes, measuring spaces, setting the width, etc. Because of that, you can set different units for all the properties that have units. There are four types of units in the Jupiter X Customizer: PX, REM, EM, and %. By clicking on the chosen unit, other possible units will be shown, and you can choose another unit for the property.

Responsive Option

An important and useful feature in Jupiter X Customizer is the responsive option. This option allows you to set different values for different screen sizes for some of the properties of a particular element. For example, you can choose different font sizes for tablet and mobile screen sizes. For every property that has the responsive option, you will see the Monitor icon next to it. By hovering over the monitor icon, three devices will be displayed, and you can choose another value for them.

how to customize your blog responsive option

Case Study

Let’s assume that we want to customize a single blog page by using the Jupiter X Blog Customizer.

Here is what we do:

  1. Create blog posts.
  2. Customize global options.
  3. Enable/disable elements in your blog posts.
  4. Change the styles of existing elements.

Creating blog posts

We’ve described this section earlier. To customize your blog posts, you must create at least one blog post, but we recommend that you have multiple blog posts as we want to show the related posts below each blog post. Also, we suggest you add some tags and set a featured image to your posts to be able to display them for all single pages.

To emphasize what was mentioned before, the Page Attribute option for all of your posts must be set to the Default template.

Customizing global options

Before customizing blog posts, you might want to change the style of the body text or remove/add a sidebar from/to your pages. Also, you can decide whether the Title Bar must be visible for your pages or not. These options can be set globally and not only for the blog posts.

To change the style of body content:
Go to WordPress left menu > Jupiter X > Customize > Fonts and Typography to customize it.

Let’s add the popping font named popping. From Typography, click on Customize for Body. Set the font family to Poppins and the font size to 16px.

To remove the sidebar from your pages:
Go to WordPress left menu > Jupiter X > Customize > Sidebar and set its layout to No Sidebar.

And finally, let’s remove the title bar from our pages by going to Jupiter X > Customize > Title Bar and disable the Title, Subtitle, and Breadcrumb from it.

how to customize your blog title bar gif

Finally, Publish the changes.

Enabling/disabling elements in your posts

You must decide which elements that must exist and which elements must be removed from your blog posts.

We have multiple pre-made templates for our blog posts that we can select and then customize to our preferences. Let’s choose the first template.

Also, we want to remove Comments and Navigation elements from our blog posts and keep all the other options enabled:

All the changes happen instantly.

Change the styles of existing elements

So now that you’ve decided which elements should remain on your blog posts, it’s time to change the styles of enabled elements. Keep the Blog Customizer’s panel open, and go to the Styles tab.

Featured Image

Let’s start from the first element. Click on Customize for Featured Image. Set the max-height to 500px, border-radius to 0 and margin-bottom to 3rem. Here is our final customization for the Featured Image:

Title

Let’s go for the second element, which is Title. We won’t touch any settings for color and the font family so it inherits these styles from its parent which is body, But we will center align it, and change its font size to 2rem. 2rem means it’s two times bigger than its parent’s font size (body: 16px), so it equals 2x16px = 32px. Here is the result:

Meta

Let’s change the color for Meta, and the available links to #ff6334. We will center align it as well.

Social Links

You can add your desired social links icon to the bottom of your blog posts. They could either have names or simply keep the icons visible.

Author Box

We have plenty of options for customizing the author box. Let’s add a border-radius: 50% to our avatar to have a circular profile image in the author box. And change the font-size for the name, description and the social icons. Note that WordPress collects this information from your profile. To modify it, from the left menu in WordPress, go to Users > Your Profile and add the required information there. Here is the result:

Related Posts

Finally, let’s customize the Related Posts element. Changing the font size and adding a little bit of margin to the top and bottom of this element is enough.

This is the result after customizing single blog posts with the Blog Customizer:

how to customize your blog final result

After you’re done with all the customizations, simply close the Single Blog settings panel and Publish the changes.

Summary

In this article, we’ve explained how to customize your blog posts with the Jupiter X Blog Customizer. We showed how you can add your desired elements to blog posts, remove any unwanted ones and easily and quickly change the styles of all the available elements.

We’d love to hear from you. Let us know your experiences with Jupiter X Blog Customizer in the comment section below!

How to Create a Custom Product List with Jupiter X Shop Customizer

WooCommerce is the world’s most popular eCommerce platform. And yes, it’s highly customizable. But adding a bunch of snippet codes to your theme or coding a custom product list to have a unique products page is really difficult.

On the other hand, what if you want to change the styles of every element in the product list? you must overwrite its CSS and check if the new styles are the one that you prefer or not. Man, It’s really time-consuming! Isn’t there any better solution to customize products list on your website?

Well, the answer is positive! Jupiter X solved that problem by introducing Shop Customizer. Jupiter X Shop Customizer allows you to customize almost every untouchable part of your WooCommerce shop including product list, product single, shopping cart, and checkout pages without writing any single line of code. Also, you can see your changes live and do trial-and-error testing easily and quickly.

When you create a custom product list with Jupiter X, you are able to:

  • Show/Hide product elements such as Image, Name, Price, etc.
  • Define the number of columns and rows of products in the list
  • Define the space between rows and columns.
  • Enable/disable pagination option.
  • Change the style of every element in the product list page.

In this article, we will guide you, step by step, through learning how you can create a custom product list with Jupiter X by a practical example. But before customizing the Product List page, you must create it.

Creating a Product List page

Once you have WooCommerce plugin installed and activated, you can use Jupiter X Shop Customizer to modify your product list. WooCommerce usually creates necessary default shop pages for you by including Products List. To make sure whether they’ve already been created, you can check it from WordPress left menu > Pages > All Pages. The one labeled as Shop Page is your default Product List page which can be modified via Jupiter X shop customizer.

In case you didn’t find that page, you can create a new page in WordPress, then navigate to WooCommerce > Settings > Products and make sure Product Archive/ Shop Page is assigned to it.

Note: Before any customizations, make sure that your shop page is set to the Default template.

There are two methods to create Shop page or Product List for your website in Jupiter X. The one by Shop Customizer and the other, by Elementor. In this tutorial, we focus on creating Product List via Shop Customizer.

If you plan to create your products page with Elementor, you can use raven Products element instead of Shop Customizer. That Elementor widget allows you to create your custom product list page with Elementor. In case you’ve created your products page with Elementor, you can’t use Shop Customizer and you must only edit it via Elementor.

Also, be aware that all the WooCommerce default shop pages, including Shop Page, should not be edited with Elementor. Once you modified them with Elementor, you won’t be able to edit them even anymore, even through Elementor. If you accidentally edit WooCommerce default product page with Elementor for any reason, you have two option to restore it:

1. You can simply delete that page and create a new page. Then, navigate to WooCommerce > Settings > Products and assign Product Archive/ Shop Page to it as we explained before. Make sure the new page is set to a default template.

2. Switch to text editor mode and remove every existing code inside it. WooCommerce default shop page must be empty, according to WooCommerce documentation.   

Customizing Product List with Shop Customizer

After creating Shop Page, you will be able to modify it with Jupiter X Shop Customizer.  To customize the product list you’ve created:

1. From the WordPress left dashboard, go to Jupiter X > Customize > Shop > Product List

2. A new window will open with all the available options to customize and style the Product List. Product List Customizer has two tabs: Settings and Styles tab. The first tab (Settings) allows you to enable pagination option, show/hide elements, define the number of rows and columns for your products page and more. In the second tab (Styles), you can change the styles of each element of the product list.

Settings

Here are the all available options in the Product List Settings tab:

Styles

Here is the description of all available options for styling elements which can be found in the Styles tab by clicking on Customize for a specific element.

Margins and Paddings

You can set margin and padding for every available element in Product List.

Units

Units are crucial to set font-sizes, measuring spaces, setting the width, etc. Because of that, you can set different units for all the properties which have units. There are four types of units in Jupiter X customizer: PX, REM, EM, and %. By clicking on the chosen unit, other possible units will be shown, and you can choose another unit for the property.

Responsive Option

The responsive option is one of the important and useful features in Jupiter X Customizer. This option allows you to set different values for different screen sizes for some of the properties of a particular element. For example, you can choose different font-sizes for Tablet and Mobile screen sizes. For every property which has the responsive option, you will see the Monitor icon next to it. By hovering over the monitor icon, three devices will be shown and you can choose another value for them.

Case Study

Let’s pretend that we want to create a Product List page with 2 columns and 6 products per page (demo is shown below). Pagination should be enabled so that users can navigate through pages.

Here’s what you can do:

1. Create a Product List page as described before.

2. Go to WordPress left Menu > Jupiter X > Customize > Shop > Product List

For this example, we want to enable the pagination and have 6 products per page in two columns. So, we set the number of columns to 2 and the number of rows to 3, so that we have 6 (2×3) products per page. In this example, we set Title HTML Tag to h2. You can also set the spaces between columns and rows.

Let’s now set the spaces between columns to 30px and rows to 70px. Finally, we want to display all the available elements in the Product List page, except rating. So, all you need to do is disable Rating option and enable all other elements. Final settings should look like this:

3. It’s time to style the elements you’ve enabled for products in the product list. So, navigate to the Styles tab. You can see all the available items you can customize theirs. By clicking on Customize on each item, you will be lead to the customization panel of that element.

Let’s start with customizing Name element:

  • Text Color: #333
  • Font Size: 20px
  • Font Weight: 700

Regular Price

  • Font Size: 25px
  • Font Weight: 500
  • Text Decoration: none
  • Text Style: Normal

Sale Price

  • Text Color: #e63b6b
  • Font Size: 25px
  • Font Weight: 700
  • Text Decoration: none
  • Text Style: Normal

Category

  • Text Color: #333
  • Font Size: 15px
  • Font Weight: 500
  • Text Style: Normal

Add to Cart Button

  • Text Color: #fff
  • Background color: #e63b6b, Background color (Hover): #6b6f78
  • Border width: 0, border radius: 0
  • Letter spacing: 1px
  • Font Size: 15px
  • Font Weight: 700
  • Text Style: Normal

Sale Badge

  • Text Color: #e63b6b
  • Background color: Transparent
  • Border width: 3, border radius: 5, Border color: #6b6f78
  • Font Size: 15px
  • Font Weight: 700
  • Text Style: Normal

Out of Stock Badge

  • Text Color: #888
  • Background color: #fff
  • Border width: 2, border radius: 0
  • Font Size: 15px
  • Text Style: Normal

Item Container

  • Text Align: center
  • Background color: #fff
  • Border width: 10, border radius: 0, Border color: #c4c4c4;

Pagination

  • Text align: left
  • Font size: 15px
  • Background color: #fff
  • Border width: 1, border radius: 0

After you’re done with all the customizations, simply close the Product List settings panel and Publish the changes.

Summary

In this article, we’ve explained how you can create a custom Product List with Jupiter X for your e-commerce website and how you can modify it via the Jupiter X Shop Customizer.