Image Sizes

How to resize images

Jupiter X uses Beans Framework in the backbone and it has a great image resizing tool powered with a caching feature to ensure your website gets the best performance results. It means that it is having an Adaptive Image Resizing technology which shows resized images, retina ready, based on the screen sizes. So, in the mobile devices, the image source would be a smaller size of the original image and it loads pretty much quicker than the original image.

Although there are still some options in Customizer where images get resized.

Blog Single Page/Portfolio Single Page



You can only change the height of the image viewport in Customizer > Blog > Blog Single > Styles > Featured Image for blog and in Customizer > Portfolio > Portfolio Single > Styles > Featured Image for portfolio accordingly.

Blog Loop Thumbnails/Portfolio Loop Thumbnails



You can set the custom size of the image in Elementor > add or edit Posts element > open Settings menu > Image Size.


Note: If you want to create custom sizes for images, refer to this article.



Note: When you set Image Size to Custom under the Settings menu in an element settings, you have to regenerate thumbnails with the plugin Force Regenerate Thumbnails. We recommend to create custom settings via Jupiter X control panel and use them in the element settings.

Woocommerce Archive/Wooommerce Single Page


You can set images width for Woocommerce pages in Customizer > WooCommerce > Product Images

Where are the image files stored?

As soon as you create an image size, it will generate a new image file resized by the dimensions you assigned to it in the wp-content/uploads/ folder. However, the Adaptive Image Size technology of Jupiter X (based on Beans Framework) stores the images in wp-content/uploads/jupiterx/images/ folder. These images will be generated on the fly, so before anyone request for an image to load, it is not generated. However, it will be generated once you remove that image from that folder. Here is more info on how this process works.

You are free to remove all the images stored in wp-content/uploads/jupiterx/images/ folder and let it regenerate on the fly, but there is also a button that let you flush everything there by one click. In order to remove that folder, you simply need to click on Flush Images in Appearance > Settings.

Borders

How to add borders in Customizer and Elementor.

Adding border to the whole page

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

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

3. Enable the Body Border option.

4. In the header popup, go to Styles tab > Body.

5. Add your custom border width (value is in pixels) and color.

6. Close the popup and Publish the changes.

Note: You can change the values with your mouse wheel, just scroll up/down to increase/decrease the value.

Borders for mobile devices only



Unfortunately it’s not available for all the options. In case you need to specify a border for a specific resolution, you need to do it using Custom CSS. Anyway, you can set responsive borders in Elementor, but not in the Theme Customizer. Feel free to search for similar examples in community forums or contact our support team in the chat for the further assistance.

Borders in Elementor



If you want to add borders to some elements in your content, you can do it this way:

1. Go to Pages and open a page to edit.

2. Click on Edit with Elementor button.

3. Click on the Edit icon in the column.

4. Go to Style tab and click on the Border menu to open the Border settings, then set the values.

5. Click on Update button.

Note: If you are looking for Element borders, you need to follow up the Elementor tutorial on how to set borders.



Note: To find information about padding and margin settings, refer to the articles Adding margins and Adding paddings.


Custom size for images

How to set a custom size for images

Note: Make sure to install Jupiter X Core plugin at first after theme activation in Appearance > Jupiter X > Plugins.

Jupiter X offers a way to create custom image sizes and use them anywhere you want. After creating the custom image size, you can use it in the Elementor or any other page builder you are using. In order to create an image size:

1. Navigate to Jupiter X > Control Panel > Image Sizes.

2. Click on Add new Size.

3. Enter the dimensions and hit Save.


Note: By default, Jupiter X has one Custom Image Size which has 500×500 pixels dimension.



To learn more about Image Sizes, refer to this article.

Margins

How to add margins in elements

Margin settings can be found in WordPress left menu, Appearance > Customize as well as in Elementor for some elements.

Margins for Logo


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

2. From the customizer left dashboard, go to Header.

3. In the header popup, go to Styles tab > Logo.

4. Add your custom margin (value is in pixels).

5. Close the popup and Publish the changes.

This way you can set margins for any other section: menu, footer, title bar, etc.


Note:
 You can change the values with your mouse wheel, just scroll up/down to increase/decrease the value.

Margins for mobile devices only


In Customizer, there is a tool which lets you set margins for mobile devices only:

Remember: The default value may not be 0 all the times and in case you want to have no margins, you may need to set 0 manually in the value box.


Note: If you are looking for Element margins, you need to follow up the Elementor tutorial on how to set margins. Also, pay attention to the Section’s margins.

Margins between elements


If you added elements to your content into columns, you can add margins between columns this way:

1. Go to Pages and open a page to edit.

2. Click on Edit with Elementor button.

3. Click on the Edit icon in the column.

4. Go to Advanced tab and click on the Link icon to unlink values together, then set margin values.

5. Click on Update button.

Note: To find information about padding settings, refer to this article and read Adding borders article to learn how to add borders around the elements.

Paddings

How to add paddings in elements.

Almost all of the elements in your website can have customized padding.

Paddings to the whole page

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

2. From the customizer left dashboard, go to Site Settings.

3. In the header popup, go to Styles tab > Body.

4. Add your custom padding (value is in pixels).

5. Close the popup and Publish the changes.

Note: You can change the values with your mouse wheel, just scroll up/down to increase/decrease the value.

Paddings on mobile devices only

Like Margins, Paddings also have responsive options. So you can simply set different paddings for different devices:

Paddings in Elementor

Note: If you are looking for Element paddings, you need to follow up the Elementor tutorial on how to set paddings.

If you want to add paddings between elements in the Section, please follow this instruction:

1. Go to Pages and open a page to edit.

2. Click on Edit with Elementor button.

3. Click on the Edit icon in the column.

4. Go to Advanced tab and click on the Link icon to unlink values together, then set padding values.

5. Click on the Update button.

No Gaps

If you want to remove the paddings at all, so there are no gaps between your columns, you need edit Section settings and set Columns Gap to No Gap:

Note: To find information about margin setting, refer to this article and read Adding borders article to learn how to add borders around the elements.

Adding background to a custom page

How to add background color/image for a specific page only.

1. From the WordPress left menu, go to Pages and open a page to edit.

2. Scroll down to Post Options section and click on the Main tab.

Note: If you don’t see Post Options section in the page editor, you need activate the plugin Advanced Custom Fields PRO via Jupiter X > Control Panel > Plugins.


3. Set the background settings in the Styles section.

4. Update the page to save the settings.

Adding Background to all pages

How to add background color/image to all pages in Customizer.

To add background color or image to a site which will be applied to all pages, you need do the following:

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

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

3. In the Site Settings popup, go to Styles tab > Main.

4. Add your custom background color or image.

5. Close the popup and Publish the changes.

Setting background for custom devices

Sometimes you need to set backgrounds differently on different devices. In Customizer, there is a tool that lets you do it. But it’s available only for the places where it needs different backgrounds.

Assigning a font

How to assign a font to an element in Customizer.

After adding a font family, you can assign it to any element on your website, for example, let’s change font family for menu items:

1. From the left menu in your WordPress Dashboard, go to Appearance > Customizer.

2. From the Customizer left dashboard, go to Header.

3. From the header popup, go to Styles tab > Menu.

4. Select one of the added font families, Close the popup and Publish the changes.

To assign a font to a specific HTML element on your pages:

1. From the Customizer left dashboard, go to Fonts & Typography.

2. Click on Typography tab.

3. Click on Customize next to an element that you wish to assign the font family to.

4. Select one of the added font families, Close the popup and Publish the changes.

Note: Elementor has another Typography settings which are all presented here.

Adding fonts in Customizer

How to add fonts in Customizer.

There are 840+ Google Fonts (which are free) and every Typekit font in your Typekit account can be used in Jupiter X. Please note that Elementor has another Typography settings which are all presented here.

Adding a Font

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

2. From the Customizer left dashboard, go to Fonts & Typography.

3. In the Fonts popup, click on Add a Font Family.

4. Select your font families and close the popup.


Note: After adding the font families, make sure to Publish the changes and Refresh the page.

Note:  How to assign a font to an element, you can find in this article.


You can also use Adobe (TypeKit) fonts. To add them, you need to choose a font and create a project

Then under My Adobe Fonts, copy the project ID:

Paste it in Jupiter X > Control Panel > Settings > Adobe Fonts Project ID.


Note: You need to Publish the changes and then refresh the page to make selected Adobe Fonts available in Font & Typography settings.

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.

Fonts won’t update on the website using Customizer settings

Fonts set in Typography Customizer section are not changed on front-end

When assigning a font to any item (body, headings, links, etc.) in Jupiter X > Customize > Fonts & Typography, you may notice an issue that the font isn’t updated on the front-end of your website. Mostly this happens to Elementor widgets only, not to default widgets, menu, etc. if they are not added in Elementor.

To fix this problem, you need set Elementor fonts to Default so the Typography settings take action.

1. Edit an existing page where the fonts are not applied.

2. Click on Edit with Elementor button.

3. From the Elementor’s left dashboard, click on the burger icon.

4. Open Default Fonts menu.

5. Change Family setting to Default for the needed items and click on Apply button to save the changes.

After that fonts from Typography Customizer section should be applied to your elements added via Elementor page builder.

Using Adobe Fonts (formerly Typekit) in Jupiter X

How can I use Adobe fonts (formerly Typekit) in the theme?

If you’re planning to use custom Adobe Fonts for your theme, you can integrate Adobe Fonts (formerly Typekit) into Jupiter X, for this, you need to create a project with your fonts in Adobe first. You can learn more about it in this article.

1. Copy the ID of project you created in Adobe Fonts.

2. From the WordPress left dashboard, go to Jupiter X > Control Panel.

3. From the Jupiter X control panel, go to Settings menu.

4. In Adobe Fonts Project ID field paste your Adobe Fonts Project ID.

5. Click on Save Settings button.

6. New Adobe fonts will be available in Fonts & Typography section under Appearance > Customizer.