How to create popups with Jupiter X

In this article, we’re going to see how we can create and manage popups in a website built with Jupiter X. There are two methods that we will discuss: 

Using the Jet Popup Plugin

The JetPopup plugin is the addon for the Elementor page builder. It allows users to create and add popups to pages built with Elementor. Popups can be added to widgets, buttons, and different parts of the page. You can also set specific popup triggers and customize the location and appearance of popups.

The JetPopup plugin provides a templates library (please note that the plugin license should be activated to install a ready-made popup template). To use a template from the JetPopup Library when creating a new popup, go to WP Dashboard > JetPopup > JetPopup Library. Here, you can filter the templates by category and find you preferred one and then click the Install button to install the popup template.

After selecting and installing the template, you’ll be redirected to the Elementor editor to edit the content of the popup or customize it to your needs. Once editing is finished, you can set the display conditions in the JetPopup Settings > Settings > Display Settings and select to display the popup either on a specific post/page or the whole site.

JetPopup settings also allow users to set the event when the popup should be displayed.

In addition using a template from the library, you can create a popup from scratch to make your own unique popup. If you go to WP Dashboard > JetPopup > All Popups, you’ll find several default presets which can be used to create a new popup with a specific layout.

For more detailed information about JetPopup and its settings, please read the plugin documentation.

Using Growmatik 

Growmatik is a marketing automation plugin that has powerful tools including the Popup Builder, where you can create popups. After installing and integrating your website with Growmatik you can access the Popups section in Growmatik dashboard > Workshop > Popups.

To create a new popup, click the Create Popup button and then select the template from the Default Templates library, set the new template name and click the Customize button.

After that, the Popup Builder environment will be opened so you can edit the popup content and layout settings. Here you can modify, remove or add new elements to your popup. For example, to change the text click on the Text element, then open the element setting by clicking the appropriate icon in the upper right corner, type a new text, change the font properties, alignment or add a link if needed.

The new elements to the popup can be added by hovering over the popup area and then clicking on the “+” icon. Here are the list of elements: Image, Text, Social, Button, Video, Coupon, Form, Spacer.

Apart from changing the popup content, we can customize the popup container area. Click the settings icon on the top left side of the popup to open Box Options.

If you click outside the popup container area, the Overlay settings box will appear, where you can change the background overlay color and transparency.

In the top left corner of the Popup Builder environment, you’ll find the option box, where you can set the Format (Center, Bottom Left, Bottom Right) and Layout (None, Side Image right/left) for your popup.

Once all customizations are done, you can preview the result by clicking the Preview button, and if everything is to your liking, you can click the Save and Exit button to save your popup template.

To show the created popup on a website it should be assigned to a rule. You can do this in Workshop > Popups, hover over the popup and click on the icon with three dots. Then, go to Automate and select the audience type.

Add a condition and click the Create Rule button.

To get more detailed information about the Popup Builder features, visit the Growmatik documentation page.

Displaying posts from specific categories in Posts Carousel


How to display posts from specific categories as a carousel in Elementor?

Jupiter X allows you to display your posts from Blog or Portfolio post types in a carousel with Post Carousel element.

Post Carousel widget has different features and options which you can customize based on your needs. 

Posts carousel

Beware! The Posts Carousel 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.


By default, the Post Carousel element shows all the posts from Blog or Portfolio post type. But you can configure it to display them from selective categories.


In order to display posts from specific categories by using Post Carousel in Elementor:

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 Carousel.

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

5. A new dashboard on the left will open with the element’s settings.

6. From the Content tab and in the Content section, set the Source to the post type from which you want to display the posts. (i.e Portfolio).

7. From the Category option, select the categories which you want to display posts from.

8. Edit the settings and Update the page.

Posts carousel


Changing the Pagination Behavior for Displaying the Posts


How to make an Infinite scroll posts or add a Load More Posts Button to my Elementor’s layout?

The Posts element allows you to display posts from Blog or Portfolio post type. It also offers many features like different Pagination behaviors.

Elementor Posts

Beware! The Posts 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.


You can also enable the Pagination option and set its behavior. For example you can show the extra posts on the next pages by choosing the Page Based mode or load rest of the posts by clicking on the Load More button. You can also enable the infinite scroll feature for the posts by choosing the Infinite Load.

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

2. Click on Edit with Elementor button.

3. From the Elementor’s left dashboard, drag and drop the Posts widget into your layout so that a new panel will open on the left side of the Elementor with the element’s specific settings.

4. From the Content tab and within the Settings section, enable the Paginationoption. 

5. By enabling the Pagination option, you can set its behavior from View Pagination As option. For example you can set it to Load More, in order to display the other posts by clicking on the Load More button.

6. Update the page.

Elementor Posts

Note: You can also set the number of posts which you want to display in Posts Per Page option. You can learn more about it by referring to this article.

Using different templates for your single blog/portfolio pages in Jupiter X


Can I use different template for my single blog and portfolio pages?

Jupiter X customizer allows you to have a highly customized blog and portfolio for your website which includes choosing a different layout.

Can I personalize the content of blog and portfolio pages based on my visitor’s behaviour?

Yes, use Growmatik to personalize your single pages based on your visitor’s behavior and without touching the Jupiter X settings.

To select a different layout for your single blog page:

1. From WordPress left menu, go to Jupiter X > Customize.

Template SIngle Blog


2. Choose Blog > Blog Single so that a new panel will open with the Blog Singleoptions.


3. Choose your desired template, for example by choosing the second layout, you will have a full-width featured image and titles and other meta content positioned over the image.

Single Blog Template

4. Close the options panel and Publish the settings.



Note: Templates are only available for Blog Singlepost type and PortfolioSingledoesn’t have such layouts. Because Portfolios posts can be created with Elementor and don’t require prebuilt templates.

Adding Social Share buttons to your Blog or Portfolio page in Jupiter X


How to add Social Share buttons to my Blog or Portfolio pages?

Jupiter X customizer allows you to have a highly customized Blog or Portfolio for your website which includes Adding/Removing social buttons.

socials

In Jupiter X you can add your desired social buttons like Facebook, Twitter, Pinterest, Linkedin and etc. to your single blog or portfolio pages.


To add social share buttons to your website:

 1. From the WordPress left menu, go to Jupiter X > Customize

social share

2. Click on Blog > Blog Single or Portfolio > Portfolio Single if you want to add social share button to Portfolio Single pages.


3. A new panel will show up so that you can Enable/Disable the Social Share option from it.

social share

4. To customize the social buttons, simply select the Styles tab and Customize the Social Share buttons. 

social share

5. Select your preferable Social Share buttons and customize them.

social share

6.Close the customize options panel and Publish the changes.


Displaying the Next/Previous posts links in Jupiter X


Can I add next/previous posts links to my single blog pages in Jupiter X?

In Jupiter X, you can easily enable/disable the Next/Previous posts links from your single blog posts. It’s highly customizable and you can change its style as well.

Jupiter X Blogs

To Enable/Disable the Next/Previous navigation links in single blog posts:

1. From WordPress left menu, go to Jupiter X > Customize

customizer Jupiter X

2. Select the Blog option.

3. Choose Blog Single, a new window will show up with the Single Blog settings.


4. Enable/Disable the Navigation option in order to show/hide it in the single blog posts.

Navigation single

5. You can change the Navigation styles by selecting the Styles tab and Customizethe Navigation.

Customize Single Blog

4. Close the Blog Single settings panel and Publish the changes.


Choosing a different layout for a single blog page


Can I choose a different layout for my single blog page?

In Jupiter X you can change the layout of your single blog with predefined templates. You can choose whether the Featured image to be on top of your page or Title and Meta tags.
You can also add overlay Title, Author and other meta description of display elements to featured image.


To choose a different layout for a single blog page

1. From the WordPress left dashboard, go to Appearance > Customize or click on Customizer from WordPress Admin bar.

2. From the Customizer left dashboard, go to Blog menu and choose Blog Single.

3. From Settings Tab and Template section, choose your desired layout.

4. You can also set which elements need to be visible in single blog page in Display Elements.

5. Click on Close and Publish the changes.

Creating a post carousel in Elementor


How to display my posts in a carousel in Elementor?

In Jupiter X you have different ways to add your posts from Blog or Portfolio post type to your website’s layout.
You can display posts via a Posts widget or in a carousel with Post Carousel element.

Posts Carousel

Beware! The Posts Carousel 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.

In order to add the Blog/Portfolio posts in carousel to your layout in Elementor:

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 Carousel.

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

5. A new dashboard on the left will open with the element’s settings.

6. From the Content tab and in the Content section, set the source to the post type from which you want to display the posts. (i.e Blog).

7. Edit the settings and Update the page.

Note: You can refer to this article, if you want to add the posts as a regular Posts element and without carousel.

Changing the number of Textarea rows in Elementor


How to change the number of rows in the textarea in Elementor?

There are different type of inputs in a HTML form. Textarea is one of the important input which defines a multi-line text input to your form. You can set the number of rows for a textarea input by using Raven Form element.

Jupiter X Forms

Beware!Form 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 change the number of rows for a textarea input:

  1. In Elementor, drag and drop a Form widget into your layout. A new panel will open on the left side of the Elementor with the element specific settings.

2. Go to Content tab and select or add a textarea type field for which you want to change the number of rows.

3. Set the number of rows from the Rows option.

4. Update the page.

What is JetElements?

JetElements is an add ons for Elementor page builder which provides a set of +50new useful widgets for the Elementor such as:

  • Advanced Carousel  
  • Brands
  • Circle Progress
  • Pricing Table
  • Posts
  • Post Carousel
  • Post Slider
  • Advanced Map
  • Countdown Timer
  • Banner
  • Animated Box
  • Animated Tex
  • Contact Form 7
  • Product
  • Recent Products
  • Featured Products
  • Sale Products
  • Best Sellers
  • Top Rated Products
  • Slider
  • Image Grid Layout
  • Images Masonry Layout
  • Images Justify Layout
  • Download Button
  • Team Members
  • Services
  • Testimonials
  • Button
  • Image Comparison
  • Instagram
  • Headline
  • Scroll Navigation
  • Parallax
  • Subscribe Form
  • Progress Bar
  • Portfolio
  • Inline SVG
  • Vertical Timeline
  • Price List
  • Table
  • Weather
  • Audio Player
  • Video Player
  • Dropbar
  • Horizontal Timeline

The JetElements plugin is bundled and recommended for Jupiter X. It can be installed via Jupiter X control panel as described here.

Downloading PSD files for templates in Jupiter X

How to get PSD files for Jupiter X templates

If you want to edit the design of any templates, you will find the PSD file very useful.
PSD is the file created in Adobe Photoshop during the design process of each template. This file is similar to an ordinary JPEG or PNG image, but it’s editable

To download a PSD file from Jupiter X templates and start editing a theme template on PSD, you first need to have your Jupiter X theme registered. You can learn how to register your theme in this article.

After that, you can simply go to the WordPress left menu, then go to Jupiter X > Control Panel > Templates and download the desired PSD file.

Export and Import the site data in Jupiter X (Deprecated)

How can I take a backup in Jupiter X?

To be able to export your site data in Jupiter X, you have to use some 3rd-party plugin, for example, Customizer Export/Import, which allows you to export the settings from Appearance > Customizer directly, or this plugin to export WordPress data to XML/CSV file, and this one to import the file.
All-in-One WP Migration plugin will create a backup of the whole site and you’ll be able to restore it.
It is always recommended to have a backup of your website data as things may go wrong in the future.

Also in Jupiter X you are able to export and import your selected website data via Jupiter X Control Panel which includes your Site ContentWidgets and the Settings.
This option is also handy when you want to move your website to another server or domain. 

By default this setting is disabled and to activate it, you have to edit wp-config.phpfile via FTP and add this line of code:

define( 'JUPITERX_CONTROL_PANEL_EXPORT_IMPORT', true );

Or it can be added in the child theme in functions.php file.


Once you added the code and saved the file, you’ll see Export/Import setting in Jupiter X > Control Panel.

To Export your data in Jupiter X:

1. From WordPress left menu go to Jupiter X > Control Panel > Export/Import

2. Name your file and select which data you wish to export and click on the Exportbutton.

3. After the export is done, you can Download it as a zip file.


Note:
 The downloaded .zip file can now be used to import data on your websites.


To Import your data in Jupiter X:

1. From WordPress left menu go to Jupiter X > Control Panel > Export/Import

2. Click on the Upload button and select an exported .zip file.

3. Click on the Import button and wait for the process to be completed.


Note: This only accepts an exported .zip file from the section above. Site Content and Widgets are merged in current data. Theme Options and Customizers data are replaced.


Note:
 The importing process will erase your current data.

Adding Google Analytics code into Jupiter X

How to integrate with google analytics?

Google Analytics gives you the free tools you need to analyze data for your business, it can be integrated in Jupiter X by following the steps below:

1. From the WordPress left menu, go to Jupiter X > Control Panel 

2. Select the Settings option, here you can enter your Google Analytics ID or the Google Tracking code. Only one them should be entered, not both.

Note: To find how to get an Analytics tracking code please refer to this article. You will find where is the best place to paste the tracking code from it.


Also,
we suggest you read our post about Google Analytics. We hope it will be interesting for you.

Note: Tracking Codes sections should be used only for tracking code like Google Analytics. If you want to add some custom JS code, you need to follow the instruction from this article.

Use Growmatik to measure the performance of your Jupiter X website and get actionable insights to promote growth.

Fix Thumbnail Sizes

Thumbnails appear ugly and distorted after theme migration

It may happen that all of the new images that are uploaded after activating the new theme look good, but the old thumbnails appear ugly and distorted.

When you upload an image to WordPress, it creates duplicate images of the original in different sizes and saves them in the uploads folder. WordPress gets the thumbnail image size information from your theme. Your theme defines the thumbnail sizes, which are really useful in order to load the best image size when needed. These new image sizes are only applied to the images that you upload after activating the new theme.

To solve this problem you’ll need to generate new sizes for all the previously uploaded images. This process is often referred to regenerating thumbnails and there is a plugin to help: Force Regenerate Thumbnails.

Disabling Lightbox image popup window for a specific image element

How can I disable the Lightbox popup window for a specific image element in Elementor?

Lightbox popup window is a built-in feature of image elements in Elementor that allow the users to see an image popup window if they click on the image elements in your website.

This feature is automatically enabled for all image elements by default, but you can disable this feature for an Image element in your layout by following the steps below:

1. In Elementor, select the Image element you want to disable the Lightbox image popup window for it, so that a new dashboard on the left will emerge with the element’s settings.

2. In Content tab, make sure the Link to option is set to Media File so that the Lightbox option will appear on the bottom.

3. Set it to No, in order to disable Lightbox for the Image element. If it is set to Default, the image element will follow the global settings for displaying the Image Lightbox



Note:
 In order to change the default Image Lightbox settings globally for all the image elements in Elementor, you can refer to this article.

Adding infinite-loop animation effect to an image widget in Elementor

How to add an infinitely looping animation effect to an Image widget in Elementor?

Adding an Infinite loop animation can attract a lot of attention to a content in your web page.


In Jupiter X, you can easily add different types of infinite loop effects to an Image widget such as BouncePulse and Shake effects. 


Beware!
Image element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. To get more information about Raven Image element, we suggest you read this article.



To add an infinitely looping animation effect to an Image element, follow the steps below:

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

2. Click on Edit with Elementor button.

3. From the left dashboard, search for the Image element.

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

5. A new dashboard on the left will open with the element’s settings. 

6. From the Content tab and under Settings section, select your preferable Loop Animation effect.

6. Update the page.

Note: If you’re willing to add a hover effect to a button, I suggest you refer to this article.


Note:
 You can also add a scroll-to-animate effect to every widget in Elementor, in order to learn more about it, you can refer to this article.

Disabling Lightbox popup window for images globally

How can I globally disable Lightbox popup window for image URL?

If you have an image element in your layout, a Lightbox image will show up if a user click on that image. By default This feature is automatically enabled for all image elements in Elementor. But you can disable it entirely for all the image elements.

Note: In order to disable the Lightbox popup window for a specific image element and not for all, you can refer to this article.

To disable the Lightbox popup window globally from all the image elements in Elementor

  1. Go to WordPress left dashboard menu and Elementor > Settings 
  2. In Style tab, go to bottom and make sure the last option, Image Lightbox is unchecked.
  3. Save changes.

Adding Custom CSS to an Element

Is there anyway to add custom css to an element

Elementor has various options for customize the widgets. However, you may need to add additional custom css to your element.

In order to add a custom css to your website you have four options:

Adding custom CSS from Jupiter Customizer

You can add your custom CSS from Jupiter Customizerby following the steps below:

1. From the WordPress left dashboard menu, click on Appearance > Customizer.

2. Select the Additional CSS, so that you can add your custom CSS into it.

3. Update the settings.

Adding custom CSS from Elementor


Beware!
 Custom CSS is part of Elementor Pro. Make sure you’ve activated it before you add any custom CSS to Elementor.

1. Select the element you want to add a custom CSS to, so that a new dashboard on the left will emerge with the element’s settings.

2. In Advanced tab go to Custom CSS and write your custom css,

Adding Custom CSS from Jupiter child theme

If you plan to add your code directly into the theme files, you can also add your custom css into jupiterx-child/assets/less/style.less file in Jupiter Child Theme.

Adding Custom CSS via Page Settings in Elementor

1. Open a page to which you want to add custom css code (it will be applied only to that page).

2. Click on Edit with Elementor button.

3. On the left side click on a gear icon to open Page Settings and go to Advanced tab.

4. Open Custom CSS/JS section and add your code into Custom CSS box.

Why my Custom CSS doesn’t work?

Describing the most common mistakes that cause your custom CSS doesn’t work

Sometimes you find yourself needing to add custom CSS codes to add or override some stylings. 

If you found your custom css code isn’t working, you can follow these solutions.

Here are the most common mistakes causing the custom CSS doesn’t work:

Inspect the element!

First of all, make sure you have added the correct CSS. You can check it by inspecting the element on your test page.

Validate your code!

After that, make sure there is no wrong character in the custom CSS. Sometimes, a simple “/” character will cause many issues on the website. 
Forgetting the  “}” character (closing tag) is one of the common issue. 
You may also want to check and validate your CSS using a CSS beautifier tool such as cleancss.com.

The Importance of Priority!

You should also make sure your CSS has the right priority to apply to the element. Here is an example of when the browser would decide to apply the second CSS to the page, rather than the first one:

Lower priority:

body {background: white;}

Higher priority: 

body {background: black !important;}

So, you may want to add !important at the end of the rule to fix the issue.

For more information about CSS priority please visit https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Clear the Browsing Cache

Sometimes your browser will show you a cached copy of your website instead of showing the new one. Each browser has a different process to follow when clearing the cache. Detailed information on each browser is mentioned below:

Child theme’s problems

It’s possible that you have added the CSS code into your child theme. Here are some common mistakes related to the placing the codes into the Jupiter X child theme:

  • You added the CSS into jupiterx-child/style.css file. This file is not going to be enqueued on your pages. So if you added the CSS codes on this file, you should not see any effect on your pages. Move your codes to jupiterx-child/assets/less/style.less instead.
  • Make sure the jupiterx-child/assets/less/style.less is being called in the child theme’s functions.php. Just make sure this line exist and not commented out:
jupiterx_add_smart_action( 'wp_enqueue_scripts', 'jupiterx_child_enqueue_scripts', 8 );

function jupiterx_child_enqueue_scripts() {

	// Add the theme style as a fragment to have access to all the variables.
	jupiterx_compiler_add_fragment( 'jupiterx', get_stylesheet_directory_uri() . '/assets/less/style.less', 'less' );

	// Add the theme script.
	wp_enqueue_script('jupiterx-child', get_stylesheet_directory_uri() . 'https://d34b8fs2z18t5a.cloudfront.net/assets/js/script.js', [ 'jquery' ], '', true );
}
  • Flush the assets in Jupiter X -> Control Panel -> Settings once to see the effect. It’s possible that your changes are not getting compiled by the Jupiter X less compiler. So, try recompiling them by flushing the assets in Jupiter X -> Control Panel -> Settings.
  • The CSS snippet might be invalid and by that, it is skipped due the compilation. The Less compiler will skip the invalid CSS properties so make sure they are valid before you place them in the style.less file otherwise you won’t see them compiled.

Adding HTML codes directly in page using Elementor

How to use piece of my HTML code directly in Elementor?

HTML widget lets you add any HTML codes directly into your Elementor’s layout. 

This widget enables you to see output of your code directly into Elementor and while you’re editing a page. 
You can also add a custom JS to your layout by using the HTML element and wrapping the code into <script> tag.


In order to add your HTML codes as an HTML widget in Elementor:

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

2. Click on Edit with Elementor button.

3. From the left dashboard, search for the HTML widget.

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

5. A new dashboard on the left will open.

6. Insert your HTML code or custom javascript code directly into HTML Code box. 

7. Edit the settings and Update the page.

If you wish to Inject your data with a visual tool instead of coding, use Growmatik Personalizer.

Creating responsive columns in Elementor

How can I create responsive columns in Elementor?

In Elementor you can control the width of each column for different screen sizes.
For instance if you need two columns to be displayed next to each other in Desktopsize and then in 1 column layout in Mobile, follow the steps below:

1. First, create a two-column section in Elementor. To learn how to create a section as well as adding columns to one, you can read this article.

2. Click on the column settings icon in upper-left corner of the column in your layout so that a new dashboard on the left will open with the column’s settings.

3. In the Layout tab and Column Width section, you can type the column width percentage for a specific device size. (Desktop by default)

4. Click on Desktop icon in the Column Width section and two more device sizes mode will appear where you can set a column width for each of them individually. For example you can set 100% width for Mobile mode and 50% for Desktop mode.

5. Repeat the above instructions for the other column and update your layout.

How to hide an element in specific resolution in Jupiter X?

Is there any way to hide an element in specific resolution in Elementor?

Sometimes we want to hide an element or widget in specific resolution like smaller devices in Elementor.
It can be done in Elementor in three screen sizes: Desktop & LaptopTablet and Mobile.


To Hide an Element in specific resolution in Elementor

1. Choose the element you want to hide in Elementor by clicking on itor select it via Navigator panel.

2. From the Elementor left menu, go to Advanced tab.

3. From the Advanced tab open Responsive menu.

4. In Visibility section, you can hide the element in any screen devices you want.

5. Update the page.

Note: Changes take effect only on the preview or live page and not visible in editing mode in Elementor.

Changing Padding and Margin values based on different screen sizes in Elementor

How to change the Padding and Margin values based on screen sizes in Elementor?

Elementor has responsive options for adding spaces such as margin and padding to your widgets. For instance if you set a padding for an element, it might look fantastic on the desktop, but it will get too big in smaller devices. You can set a different padding and margin value for each of your widgets in Elementor.


In order to change the padding and margin values based on different screen sizes follow the steps below:

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

2. Click on Edit with Elementor button.

3. From the left dashboard, drag and drop any widget you want to change its padding and margin based on different screen sizes.

4. A new dashboard on the left will open with the element’s settings. 

5. From the Advanced tab, set the Margin or Padding values.

6. Click on Desktop icon and two more device sizes mode will appear where you can set a different values for each of them individually.

7. Update the page.

Reverse columns of a Section in Elementor for smaller screen sizes

How to change the order of columns in different screen sizes?

This is a great feature to create a full responsive layout. When seeing your page in a mobile, you may have noticed that the order of the columns might be undesirable. You can use reverse column switch if you want to change the order of the columns for a section in different screen sizes.


In order to change the order of columns in a Section in Elementor:

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

2. Click on Edit with Elementor button.

3. From the left dashboard, select the Section whose columns order you want to change.

4. A new dashboard on the left will open with the element’s settings. 

5. From the Advanced tab and under the Responsive section you can enable the Reverse Columns option for each of Tablet or Mobile devices. That option will reverse the order of the columns in smaller screen sizes.

6. Update the page.

Changing the visibility of an element in different screen sizes

How to hide an element in different screen sizes?

One of the Elementor’s responsive options is Hiding an element for a certain device size and making it Visible for the others. This is really a striking feature if you want to make your site more responsive.


In order to change the visibility of an element in different screen sizes:

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

2. Click on Edit with Elementor button.

3. From the left dashboard, select a widget which visibility you want to change.

4. A new dashboard on the left will open with the element’s settings. 

5. From the Advanced tab and under the Responsive section you can force that widget to hide on a specific screen size by enabling Hide On [Specific Screen Size]option.

6. Update the page.

Changing alignment of an Element in different resolutions

Can I change the alignment of an Element in different resolutions?

You can change the alignment of your content based on screen sizes in Elementor. For instance you can set your title to be left-aligned in Desktop screen sizes and center-aligned in Mobile screen sizes.

In order to change the alignment of an element like Heading in Elementor:

1. In Elementor, select the element which alignment you want to change, like Heading. so that a new dashboard on the left will open with the element’s settings.

2. From Content tab, set an Alignment for it.

3. Click on Desktop icon in front of Alignment option which results in appearing two more device sizes modes alongside. Then you can set an alignment for each of them individually. For example you can center align the content in Mobile screen sizes.

4. Publish the changes.

Elementor’s Mobile Editing Tools

How to create a responsive layout in Elementor

It is of a great importance to have a website that gives a perfect impression among all devices. You may create a good-looking website for desktop sizes and be ugly on smaller devices.
Fortunately, Elementor has various responsive options to create a better layout for different screen sizes.

In Elementor, there are five types of responsive tools which you can use to create a better website in all devices:

  • Mobile Font Size
  • Reverse Columns
  • Responsive Column Width
  • Padding and Margin
  • Hide and Show Elements


Mobile Font Size
You can set a different font-size for different mobile devices. You can change the Line-Height and Letter Spacing for smaller devices as well.
I suggest you to refer to this article in order to learn more about it.


Reverse Columns
This is a great feature to create a full responsive layout. You may have been noticed when you see your page in mobile, the order of the columns maybe undesirable. You can use reverse column switch if you want to change the order of the columns in different screen sizes.
Please refer to this article to learn more about this option.


Responsive Column Width
In Elementor, you can customize your columns layout among all devices. In other words you can set a width for a column in Desktop and change its size for smaller devices. Further information can be achieved by referring to this article


Padding and Margin
Elementor has responsive options for adding spaces such as margin and padding to your widgets. For instance if you set a padding for an element, it might look fantastic on the desktop, but it will get too big in smaller devices. You can set a different padding and margin value for each of your widgets in Elementor. Please read this article in order to find how it can be done.


Hide and Show elements
One of the Elementor’s responsive options is Hiding an element for a certain device size and Visible for the others. This is really a cool feature if want to make your site more responsive. I suggest you to read this article to know more about it.
You can also read this article if you want to create a responsive header and footer for your website.

Adding a Shortcode in Jupiter X


How to use any shortcode in Elementor

WordPress Shortcodes are macros in square brackets [] which you can use in a WordPress page to add a dynamic content to your page.
For instance you can insert a Revolution Slider Shortcode into your page to show a slider or by adding the Contact Form7 Shortcode to be able to add your created form into your page instantly.

Here is a sample of revolution slider shortcode:
[rev_slider alias=”sample-slider”] 


Shortcodes can be added with Text Editor widget, and it works fine. But the problem is you’re not able to see the output of Shortcode in Elementor and it will be visible only in preview mode. In other words you will see the shortcode’s output only when you preview the page.


With Shortcode widget, the Shortcodes will render automatically in Elementor editor. It enables you to view the Shortcode when you’re editing the page in Elementor.

Elementor Shortcode

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

2. Click on Edit with Elementor button.

3. From the left dashboard, search for the Shortcode.

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

5. A new dashboard on the left will open with the element’s settings. 

6. Enter your Shortcode in the Shortcode box. 

shortcode box elementor

7. APPLY to update the changes.

The Shortcode will be automatically added and visible while you are editing the page in Elementor.

Use Growmatik Personalizer tool, to show personalized content to your current viewer based on their behavior in your website.

Duplicated Elements, which one to chose?


What is the difference between same name widgets in Elementor

Elementor is an advanced Page Builder plugin comes with a set of default widgets. Although you can add more customizable widgets to Elementor as an Add-on.
For instance, Raven is a custom add-on for Elementor developed by Artbees which represents new useful elements to Elementor.

After you add a new Add-on to Elementor, you may see multiple widgets with the same name in Widgets Panel in Elementor. But they’re not the same. These widgets are actually developed by different developers which may represent different customizations and features. 
You can check those out and choose most suitable widgets for your need.

Transition duration for hover state

How to change transition duration for hover state of an Element in Elementor?

In Elementor you can set a transition duration for background of an element on hover state.


In order to do that:

1. Select the element you want to set transition duration to its background on hover state, so that a new dashboard on the left will emerge with the element’s settings.

2. In Advanced tab and Background section, click on HOVER.

3. Change the Transition Duration value.

4. Update the page.

Transition Duration

Setting site width in Jupiter X

How can I set container width in Jupiter X?

In Jupiter X, if you’re using Full Width layout or a Boxed width layout, you have a 1140px container width.

But those are the default values and you can change them to any desired values.


In order to change the container width of your website:

1. From the WordPress left dashboard menu, go to Appearance > Customize so that a new panel will open on the left side of the page.

2. Click on Site Settings and from the Settings tab you can set a Container Width for your layout.

3. Also, you can determine the site width to be Full Width or Boxed.

4. Close the options panel and Publish the settings.

Choosing the best CSS units in Jupiter X

How to choose the best CSS units for styling elements in my template?

CSS units are one of the most fundaments aspects of web design. It’s crucial to know how to use them in order to define your website’s font-sizes, measuring spaces, setting width of your images and etc.

Jupiter X represents multiple units of measurement you can use in your theme like PXREM, EM and Percentage.

In this article we will introduce and describe each of them and show which CSS units recommended to use in your design.

Pixel (px)

The most commonly used unit in designing website. It’s an absolute unit which means it depends on certain absolute value and is not affected by any other units. It also considered the base of measurement for many other units. Despite of its simplicity, the pixel unit is a bad practice for your end users because of its accessibility. Let me show you an example. In most browsers users can set their own default font-size for websites. If you explicitly set the font-size of any element of your website in pixel (For example 24px), the choice of your users doesn’t affect on the size of that element. What if you could consider the choice of your end users in your website. That’s why the relative units matter. 

EM

Em is a relative length and a way of setting font-sizes which depends on the size of the parent font-size element or the document. For example if a parent element has font-size: 16px, then 1em will be measured 16px for all its child. But we don’t suggest you to use this unit. because the font-size of each element depends on its immediate parent’s font-size. If you have multiple nested element, by using the EM unit you quickly lose track of maths and you don’t know what size is what. This is what REM solves.

REM

REM is very similar to EM. It’s a relative unit but size of each element with REM unit always refers back to the root and not its immediate parent. So if you set the font-size of your root element to 18px, a nested element with 2 rem has font-size: 36px. No matter what’s the size of its parent. It always refers to main root element size. therefore REM is very manageable unit and recommended to use it especially in the font-sizes.

Percentage (%)

Percentage is one of the relative and also useful units especially for creating a responsive of fluid layout. 
Percentage is relative to the element’s parent (Just like the EM unit). For instance if you set the width of an element to 50%, that would be 1/2 width of its parent.

Conclusion

Actually there is no best CSS unit for web design, but here is a tip:
Pixel
 is not very suitable for your end users, but it’s a simple and easy to use for you to create your template without any extra math. REMs is one of the best relative units especially in font-sizes so that we recommend you to use this unit most of the time. Percentage is a good and simple option to create your layout responsive. 

For further information about CSS units we suggest you to read this and this articles. 

Enabling Maintenance Mode in Jupiter X

How to put my website in Maintenance Mode?

Maintenance mode allows you to display a custom template to your users instead of a broken site during website maintenance. It can be easily done in Jupiter X.

To put your website to the maintenance mode, first you have to create a Maintenance template and second, enable it for your users.

Creating a Maintenance Template

Creating a maintenance template is just like creating other pages in WordPress. All you need to do is:

1. Create a new page from WordPress left menu > Pages > Add New


2. 
Give your page a name, for instance I name it Maintenance, but you can choose whatever name you like. That’s the name of your template which you have to choose it later for the Maintenance mode.


3. You can edit you page with default WordPress editor or to have a highly customized maintenance page, edit it with Elementor.

4. Publish (Update) your page after customize it. Now it’s time to enable the maintenance mode and assign your template to it.

Enabling the maintenance mode for your website

1. From WordPress left menu, go to Jupiter X > Customize


2. 
Select the Pages option.


3. Choose Maintenance, a new window will show up with the Maintenance settings. Enable the Maintenance option and select the template you’ve created to display it in the maintenance mode.

Note: By enabling the Maintenance mode, the Maintenance template will not be displayed to the Admin and it’s only visible for the guest users of your website.


4. Close the Maintenance settings panel and Publish the changes.

Displaying Search Results from specific Post Types

How to search a specific post type like Pages, Posts, Portfolios and Products in Jupiter X?

By default when users search something in your website, your website displays the results from all of the post types such as posts, pages, portfolios and products. But you may want to filter the search results in your website and show the results from just a specific post type like posts or pages.
In Jupiter X, you can easily customize the search settings. You can also specify how many posts should be shown per page in search results.

To customize the Search Results in Jupiter X:

1. From WordPress left menu, go to Jupiter X > Customize


2.
 Select the Pages option.


3. 
Choose Search, a new window will show up with the Search settings. 
By Disabling/Enabling the post types from Display Section you can customize the search results. You can change the number of posts per page for the search results page as well.

4. Close the Search settings panel and Publish the changes.

Displaying default Post Meta in Jupiter X

How to display/hide Jupiter X default post meta in Posts, Portfolios, Products and Archive pages.

Post meta is additional information about posts or pages like Portfolio single pages, products pages or archive which you can show/hide them for the users.

There is some default post meta which exists in Jupiter X such as:

  • Featured Image
  • Title
  • Date
  • Author
  • Categories
  • Tags 
  • etc.

Which you can simply customize them.

Enabling/Disabling Post Meta for the Single Blog Posts:

1. From the WordPress left menu go to Jupiter X > Customize


2. 
Click on Blog > Blog Single

3. A new window will show up with the Blog Single settings.

4. In the Display Elements you can show/hide any post meta which you want from the every single blogs posts.

5. In order to change the styles of post meta, go to Styles tab and customize each post meta you want.

6. Close the settings and Publish the changes.

Enabling/Disabling Post Meta for the Single Portfolio posts:

1. From the WordPress left menu go to Jupiter X > Customize

2. Click on Portfolio > Portfolio Single

3. A new window will show up with the Portfolio Single settings.

4. In the Display Elements you can show/hide any post meta which you want from the every single portfolio posts.

5. In order to change the styles of post meta, go to Styles tab and customize each post meta you want.

6. Close the settings and Publish the changes.

Enabling/Disabling Post Meta for the Single Product pages:

1. From the WordPress left menu go to Jupiter X > Customize


2.
 Click on Shop > Product Page

3. A new window will show up with the Product Page settings.

4. In the Display Elements you can show/hide any post meta which you want from the every single product page.

5. In order to change the styles of post meta, go to Styles tab and customize each post meta you want.

6. Close the settings and Publish the changes. 

Enabling/Disabling Post Meta for the Product Archive page:

1. From the WordPress left menu go to Jupiter X > Customize

2. Click on Shop > Product List

3. A new window will show up with the Product List settings.

4. In the Display Elements you can show/hide any post meta which you want from the Product Archive page.

5. In order to change the styles of post meta, go to Styles tab and customize each post meta you want.

6. Close the settings and Publish the changes. 

Changing CSS units in Customizer

I want to change the px unit to %/EM/Rem for styling an Element in Customizer. How can I do that?

CSS has various units like px, %, EM or REM for expressing a length and each of them is suitable for its conditions.
In Jupiter you can change the CSS units for the CSS properties that takes length values for Customizer.

In order to change the CSS length unit in Customizer follow the steps below:

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

2. Select an element you want to change the styles for like Title Bar.

3. In Style tab, select the Customize for which element you want to change its styles.

4. Any CSS properties that takes length values such as margin, padding, font-size, etc. has an option for changing the units. If you click on the default unit, you can see the other options.

5. Select your preferable unit and type in the value.


Note:
 If you want to learn about changing the units for CSS properties in Elementor, you can refer to this article.

Setting custom template for 404 page

How can I set custom template for 404 page?

There is always a chance that your users follow a broken link or type a specific address of your website that doesn’t exist. In these cases users will redirect to a famous page called 404 page. 
It tells the users that the page they’re looking for doesn’t exist. 

In Jupiter X, you can create a custom template for 404 page, so that when a 404 error occurs, you can redirect the users to your custom page.

To set a custom template for 404 page, first you have to create a template and second, assign it for the 404 page.

Use Growmatik to redirect users from 404 pages to a page that give them a better experience and prevent a hard bounce!

Creating a 404 Template

Creating a 404 template is just like creating other pages in WordPress. All you need to do is:

1. Create a new page from WordPress left menu > Pages > Add New


2. 
Give your page a name, for instance I name it 404, but you can choose whatever name you like. That’s the name of your template which you have to choose it later for the 404 page.


3.
 You can edit your page with default WordPress editor or to have a highly customized maintenance page, edit it with Elementor.

4. Publish (Update) your page after customize it. Now it’s time to assign your template to the 404 page.

Assigning a template to 404 page

1. From WordPress left menu, go to Jupiter X > Customize

2. Select the Pages option.

3. Choose 404, a new window will show up with the 404 page settings. Select the template you’ve created to assign it to 404 page.

4. Close the 404 settings panel and Publish the changes.

Adding a background to the whole website

How can I add a background image/color to the whole website?

You can add a background to your website globally in Jupiter X.

To add a background image/color to the whole website:

1. From the WordPress left dashboard, go to Appearance > Customize.

2. From the Customizer left dashboard, go to Site Settings menu.

3. In the Styles tab, click on Customize for Main.

4. Now you can set a color or upload an image for background.

5. Click on x, close the Site Settings window and then Publish the settings.

Adding multiple markers to google map in Elementor

How to add multiple pin into google map in Elementor?

Advanced Map widget is one of the best choice for you if you want to add a map to your website due to its significant features and multiple customizations it provides for you.


Advanced Map widget also allows you to pin multiple places you want to mark on the map.

Beware!Advanced Map widget is a part of the Jet Elements in Elementor. Jet Elements is an plugin which represents new useful elements to Elementor.


Note
: Before being able to use Advanced Map widget in Elementor, you need to add a Google Map API Key to your website. For further information please refer to this article.


To add multiple marker to the map with Advanced Map widget:

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

2. Click on Edit with Elementor button.

3. From the Elementor’s left dashboard, drag and drop the Advanced Map widget into your layout so that a new panel will open on the left side of the Elementor with the element’s specific settings.

4. From the Content tab, open the Pins section.

5. Here are the list of pins which you want to add to your map. To add a new marker click on + ADD ITEM and set its Address and the Description as well. You can also set a pin icon for each marker.

6. Customize the widget and Update the settings.

Adding API Key for Google Map in JupiterX

How can I add API key for google map in Elementor?

Before being able to use Advanced Google Map widget in Elementor, you need to add a Google Map API Key to your website. To learn how to get an API Key from google website you can refer to this link.

Beware: Advanced Map widget is a part of the Jet Elements in Elementor. Jet Elements is a plugin which represents new useful elements to Elementor.


To add an API Key for google map in Elemenor:

1. From the WordPress left dashboard menu, go to Elementor > Jet Elements settings.

2. Click on Google Map Options and paste the API Key you’ve received from Google API Console.

3. Save the settings. Now you can use Advanced Google Maps widget in your Elementor layout.

Adding the Scroll to Top button to your website

How to enable the Scroll to Top button in Jupiter X?

Adding a scroll-to-top button to your website facilitates navigation to your website and allows users to scroll to the top of a page with the click of a button.



In Jupiter X, you can enable the Scroll to Top button so that this option will appear on the bottom-right corner of your website after some scrolling.

This option is enabled by default in Jupiter X, but if it’s disabled somehow or you can’t see it after some scrolling of your webpage, you can enable it by following the steps below:

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

2. Click on Site Settings and enable the Scroll Top Button option.

3. Close the Site settings and Publish the customization.





Related Article(s): 

Adding hover effect to a button in Elementor

Animating widgets in Elementor

Hover effects are more than changing a background color. They allow us to apply pretty cool effects to a button.


In Elementor you can easily add different types of Hover effects to a button such as GrowPop and Pulse effects. 

Beware! Button element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. To get more information about Raven Button element, we suggest you read this article.

To add a hover effect to a button in Elementor follow the steps below:

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

2. Click on Edit with Elementor button.

3. From the left dashboard, search for the Button element.

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

5. A new dashboard on the left will open with the element’s settings. 

6. From the Content tab and under Settings section, select your preferable Hover effect.

7. Update the page.

Note: If you’re willing to add an infinite-loop effect to an Image, I suggest you refer to this article.


Note: You can also add a scroll-to-animate effect to every widget in Elementor, in order to learn more about it, you can refer to this article.

Setting an Icon for a Button in Jupiter X

How to set an Icon for Button widget in Elementor?

The Button element allows you to display buttons in various styles, sizes, and colors. It also offers many features like a setting Icon for it.


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 Button, you need to look for it in the Elementor knowledgebase.


To add an Icon to Button element:

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 “Button”.

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

5. A new dashboard on the left will open with the element’s settings. 

6. From the Content tab, choose an Icon for the button.


7. By adding an Icon to your button, you can customize it and change its style from Style tab and Icon section.

8. Edit the settings and Update the page.

Opening Heading/Button widgets’ URL in a new window in Jupiter X

I have added a URL to a Heading/Button element. Is it possible to open the URL in a new window?

As you know, you can add a link to To a Heading or a Button widget in the Elementor. 


Beware!Heading and Buttonelement 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 Heading and Button, you need to look for it in the Elementor knowledgebase.



To open added URL in a new window follow the steps below:

1. Search for Heading or Button widget in Elementor dashboard. 

Note: To learn how to add a Heading widget in Elementor, you can refer to this article

2. A new dashboard on the left will open with the element’s settings.

3. In the Content tab and from Link section, add your link and click on Gear icon to open Link options.

4. Make sure Open in new window is checked.

5. Update the Page.

Customizing the WooCommerce Checkout and Cart pages

How to modify the WooCommerce Cart and Checkout pages

Jupiter X Shop Customizer introduces a new way of customizing anything in your shop, the easiest way possible without any line of code. It has premade templates, a set of options to customize the paddings, margins, backgrounds, alignments, colors, typography settings, pagination and anything else you can imagine. The good thing about the Shop Customizer is that you can see what you are editing because all the edits are live and available through Shop Customizer.

Note: In order for the Shop Customizer to work, WooCommerce plugin must be installed and activated. To learn how to activate it, check out this article.
You should install the WooCommerce default pages as well. You can install them via
WooCommerce Setup Wizard or from WooCommerce > Status > Create pages

To customize the WooCommerce Checkout and Cart pages in Jupiter X:

1. From WordPress left menu go to Jupiter X > Customize.

2. In Customizer, click on Shop > Checkout & Cart.

3. A new window will open with all the available options to customize and style the Checkout and Cart pages. Now you can change the styles of these pages.

4. Click on Close button after you’ve customized the settings.

5. Publish the changes.

Enabling/Disabling Image Lightbox for single product page in Jupiter X

A  Modal or Lightbox image is an image which will show up if a user click on Magnifying-Glass icon on the upper-right corner of product’s image.


This feature is enabled by default in Jupiter X, but you can disable it if you want.


In order to Enable/Disable the Image Lightbox for the single product image in Jupiter X:

1. From WordPress left menu go to Jupiter X > Customize.

2. In Customizer, click on Shop > Product Page

3. Enable/Disable the Image Lightbox option.

4. Publish the changes.

Related Article(s): 

Customizing a Single Product Page in Jupiter X

How to Customize a Product page in Jupiter X?

Jupiter X Shop Customizer introduces a new way of customizing anything in your shop, the easiest way possible without any line of code. It has premade templates, a set of options to customize the paddings, margins, backgrounds, alignments, colors, typography settings, pagination and anything else you can imagine. The good thing about the Shop Customizer is that you can see what you are editing because all the edits are live and available through Shop Customizer.

Note: In order for the Shop Customizer to work, WooCommerce plugin must be installed and activated. To learn how to activate it, check out this article. You should install the WooCommerce default pages as well. You can install them viaWooCommerce Setup Wizard or from WooCommerce > Status > Create pages.


To customize a WooCommerce Single Product page in Jupiter X:

1. From WordPress left menu go to Jupiter X > Customize.

2. In Customizer, click on Shop > Product Page.

3. A new window will open on with all the available options to customize and style a Single Product page.

4. Click on Close button after you’ve customized the settings.

5. Publish the changes.

Use Growmatik to show the personalized products based on your audience behavior in your website.

Adding pagination to the Product Archive page

How to Enable/Disable pagination in Product Archive page?

Jupiter X Shop Customizer introduces a new way of customizing anything in your shop, the easiest way possible without any line of code. It has premade templates, a set of options to customize the paddings, margins, backgrounds, alignments, colors, typography settings, pagination and anything else you can imagine. The good thing about the Shop Customizer is that you can see what you are editing because all the edits are live and available through Shop Customizer.

Note: In order for the Shop Customizer to work, WooCommerce plugin must be installed and activated. To learn how to activate it, check out this article. You should install the WooCommerce default pages as well. You can install them via WooCommerce Setup Wizard or from WooCommerce > Status > Create pages.


To enable/disable the Pagination option on WooCommerce Product Archive page in Jupiter X:

1. From WordPress left menu go to Jupiter X > Customize.

2. In Customizer, click on Shop > Product List.

3. A new window will open up with all the available options to customize and style a Product Archive page.

4. In Settings tab, you can Enable/Disable the Pagination option.

5. Go to Styles tab to style the pagination and click on Customize button beside the Pagination option.

6. Set the settings you need. You can change the alignment on different devices, set the distance in pixels between pagination button, change font size, color, set borders, etc.

7. Click on Close button after you’ve customized the settings.

8. Publish the changes.


Beware:
 Changes take affect only on WooCommerce default Product Archive page. If you create a custom Product Archive page in Elementor, you can customize it inside the Elementor.

Related Article(s): 

Customizing Product Archive Page in Jupiter X

How can I style Products Archive page in Jupiter X

Jupiter X Shop Customizer introduces a new way of customizing anything in your shop, the easiest way possible without any line of code. It has premade templates, a set of options to customize the paddings, margins, backgrounds, alignments, colors, typography settings, pagination and anything else you can imagine. The good thing about the Shop Customizer is that you can see what you are editing because all the edits are live and available through Shop Customizer.

Note: In order for the Shop Customizer to work, WooCommerce plugin must be installed and activated. To learn how to activate it, check out this article. You should install the WooCommerce default pages as well. You can install them via WooCommerce Setup Wizard or from WooCommerce > Status > Create pages.


To customize the WooCommerce Product Archive page in Jupiter X:

1. From WordPress left menu go to Jupiter X > Customize.

2. In Customizer, click on Shop > Product List.

3. A new window will open on with all the available options to customize and style a Product Archive page.

4. Click on Close button after you’ve customized the settings.

5. Publish the changes.


Note: You can also set a padding or margin for the Product Archive page from Jupiter X > Customize > Shop > Product List.

Changing the number of products in Products Archive page

How to change number of products in Product Archive page?

Jupiter X Shop Customizer introduces a new way of customizing anything in your shop, the easiest way possible without any line of code. It has premade templates, a set of options to customize the paddings, margins, backgrounds, alignments, colors, typography settings, pagination and anything else you can imagine. The good thing about the Shop Customizer is that you can see what you are editing because all the edits are live and available through Shop Customizer.

Note: In order for the Shop Customizer to work, WooCommerce plugin must be installed and activated. To learn how to activate it, check out this article. You should install the WooCommerce default pages as well. You can install them via WooCommerce Setup Wizard or from WooCommerce > Status > Create pages.



Changing the number of products in Products Archive page can be done by setting the number of rows and columns of Products. For example if you want to show 12products in your page, you can arrange it by setting rows and columns to 3×4,  4×3, or 2×6 and …


In order to do that:

1. From WordPress left menu go to Jupiter X > Customize.

2. In Customizer, click on Shop > Product List.

3. A new window will open up with all the available options to customize and style a Product Archive page.

4. In Settings tab and Grid Settings section, set the number of rows and columns. Number of products would be the multiplication of rows by columns.

5. Click on Close button after you’ve customized the settings.

6. Publish the changes.


Beware:
 Changes take affect only on WooCommerce default Product Archive page. If you create a custom Product Archive page in Elementor, you can customize it inside the Elementor.

Related Article(s):