Sliders in Jupiter X


How to use slideshow in Jupiter X?

Sliders are one of the most important sections of almost every website. 

There are two types of sliders which you can use in Jupiter X:

  • Slider Plugins
  • Elementor Slider Widgets

What’s the difference between Slider plugins and Slider widgets?

Slider plugins are 3rd party plugins that are bundled into Jupiter X. You can add them into your regular WordPress pages and without using Elementor. However, they can be added as a widget in Elementor. The 3rd party Slider plugins also are very high customizable.
On the other hand, Slider widgets in Elementor are built only for the Elementor and they cannot be used in non-Elementor templates. You can customize them in Elementor. They are very simple and easy to use but compared to 3rd party Slider plugins, the Slider widgets are much less customizable.

Slider Plugins

There are many WordPress Slider plugins available which allow you to create your own sliders.

Currently, there are 3 premium slider plugins which are included in Jupiter X: 

  • Layer Slider – A multi-purpose premium slider plugin.
  • Slider Revolution – An innovative premium slider plugin.
  • Master Slider – A powerful premium slider plugin.

Activating the Slider plugins in Jupiter X

Activating the slider plugins are optional in Jupiter X and you can do it by following the steps below:

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

Jupiter X Slider

2. Go to Plugins 

Jupiter X Sliders

3. Scroll down to find the slider plugins and Activate your preferable slider plugin.

Jupiter X Slider

4. Click on Continue. Then OK.

Jupiter X Slider

5. You will find the slider plugins settings in WordPress left menu and after reloading the page.

Jupiter X Slider

6. Create and customize your desired slider and give it a name. 

Jupiter X Slider

Using your Slider into Elementor’s template

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 Slider.
Here you can find the Elementor widget of the slider plugins. For example, if you created your slider in Revolution Slider plugin, drag and drop the Revolution Slider widget into your layout.

Jupiter X Slider


4.
 A new dashboard on the left will open with the element’s settings. Select the slider which you want to display. There are also other options that you can customize, but they are optional.

Jupiter X Slider

5. Edit the settings and APPLY the changes.



Note: You can also add your slider using Shortcode widget in Elementor. Please refer to this article in order to learn more about it.

Elementor Slider Widgets

There are different types of Slider widgets in Elementor. 

  • Image Carousel
image carousel

This is a simple carousel widget in Elementor. It also can be used as a Slider in your layout. This widget included in Elementor and you can use it for free.

  • Slides
Jupiter X Slider

The Slides widget allows you to quickly create simple slides for your template. It has a lot of customization options which you can use to have a great customized Slider.


Note:
 The Slides widget is part of the Elementor Pro. To use this widget you must activate the Elementor Pro plugin.

  • Slider
Jupiter X Slider

This is another widget slider with which you can create attractive sliders.


Note: Slider element is a part of the JetElements. The JetElements plugin is bundled and recommended for Jupiter X. It can be installed via Jupiter X control panel as described here.

Using Elementor Slider widget 

In order to use an Elementor Slider on your web page:

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

2. Click on Edit with Elementor button.

3. From the Elementor’s left dashboard, search for the Slider and drag and drop your preferable slider widget into your template. So that a new panel will open on the left side of the Elementor with the element’s specific settings.

4. Now you can upload your images for the slider and customize it.

5. Update the page after customize the widget.

Adding a slider to Elementor


How to add a slider in Elementor?

If adding a slider need to be considered in your template, instead of using a third-party slider plugin,  you can use a built-in Slider widget in Elementor.



Beware!
 This element is a part of the JetElements. JetElements is a plugin which represents new useful elements to Elementor. To install it, please read this article.



To add a Slider element to a page

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

2. Click on Edit with Elementor button.

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

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

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

6. Edit the settings and Update the page.

Employee Profiles


An alternative way of adding Employee post type to your page in Jupiter X

In Jupiter old version, we had different post types including Employees. By using Employees post type, employee profiles would be displayed in the web page.
In Jupiter X the Employees post type and the other ones (except Portfolio) don’t exist anymore. Because the same effects can be simply achieved with the Elementor widgets.

In Jupiter X, there is an alternative and also a better solution for adding employee profiles to your web page. You can use the Team Member widget to add your employee profiles as well as their information.

Elementor Jet Elements

Beware!Team Member element is a part of the JetElements. The JetElements plugin is bundled and recommended for Jupiter X. It can be installed via Jupiter X control panel as described here.


In order to add Team Member element to your web page:

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 Team Member 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. You can add a Member image as well as fill the member’s information.

5. Customize the widget and Update the settings.

Adding tooltip


Can I create some sorts of tooltips in Elementor?

Beware! Dropbar element is a part of the JetElements. The JetElements plugin is bundled and recommended for Jupiter X. It can be installed via Jupiter X control panel as described here.

To add a Dropbar 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 Dropbar.

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

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

6. Edit the settings and Update the page.


The dropbar can be positioned any way you need and can be opened on click or on hover, allowing the visitor to see the content. For more information please refer to the element’s page.



Note: The Dropbar widget is a standalone widget with a tooltip option. To add the tooltip option to the default Elementor widgets your can use ElementsPlus! plugin. This plugin adds a tooltip to the HeadingButtonIcon, and Icon Box default Elementor widgets.

Display Instagram feed

DEPRECATED.

Please refer to this article in order to see the updated method of getting the Instagram widget to work.


Can I display my Instagram posts within Elementor?

In Elementor you can showcase your Instagram feed using different layouts, display the tagged photos or the ones from the profile and style your Instagram feed with a powerful Instagram widget.

Jet Elements Elementor

Beware! Instagram element is a part of the JetElements. The JetElements plugin is bundled and recommended for Jupiter X. It can be installed via Jupiter X control panel as described here.



Note: Before adding Instagram widget to your layout, add the Instagram Access Token to the WordPress left menu > Elementor > Jet Elements Settings > Instagram Options > Access Token
You can read more about how to get Instagram Access Tokenhere.

In order to add Instagram element to your web page:

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 Instagram 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. Customize the widget and Update the settings.

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.

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.

Anchored sections, Scrollable Links


How scroll to a section after clicking on a button in Elementor?

The Menu Anchor widget allows you to create a page with an internal smooth scrolling navigation. 

Menu Anchor Elementor

To add a Menu Anchor to your layout and scroll to a specific section of widget after clicking on a button in Elementor you have to:

  • Add the Menu Anchor link widget to the top of the widget or section which you want to scroll to it.
  • Insert the Menu Anchor’s name to your preferable link field like a button, navigation menu item and etc. 

Adding a Menu Anchor widget in Elementor:

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 Menu Anchor widget into your layout and at the top of a widget or section which you want to scroll to. A new panel will open on the left side of the Elementor with the element’s specific settings.

4. Insert the anchor’s name in the “The ID of Menu Anchor” field. That is the ID of your Menu Anchor which you have to reference the link field to. For instance we name it menu-anchor-id.

Menu Anchor Elementor

Note:Anchor’s Name should be only in English.

4.  Update the settings.

Inserting the Menu Anchor’s name to a widget with a link:

You can insert the anchor’s name to an Elementor widget with a link field such as Button or Heading or in the WordPress menu.



To add the anchor’s name to an Elementor widget like Button:

1. Select the Button widget which you want to insert the anchor’s name in, so that a new panel will show up with the element’s settings.

2. Find the Link option and insert the anchor’s name to it.

Menu Anchor Elementor


3.Update
 the page.

Viewport Animations


How to add scroll-to-animate effect to my widget in Elementor?

Scroll-to-animate effect is one of the coolest feature in Elementor to attract users to your website.
The elements reveals once the user scrolls into view. Also you can add some sorts of cool animated effects to your widget based scroll.


In order to make a scroll-to-animate element in Elementor

1. Add an element you want to scroll to your page in Elementor.

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

3. Go to Advanced Tab > Advanced > Entrance Animation.

4. Choose any scroll-animation you want to add to your element when the element shows up into a user’s viewport.

5. You can set Animation duration and Animation Delay for your element after selecting Entrance Animation for it (Optional).

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.

Sections and Inner Sections


What’s the difference between Section and Inner Section?

In Elementor to add your desired elements into template you must put them into a wrapper box called Section, each section is divided by one or multiple columns. 
To add columns to a section, read this article

Inner section

If you want to create more complex layouts in Elementor, you may need a section into a column of another section. Normally you can’t put a section into another section. In this case, you should use an Inner Section. The Inner Section allows you to create a nested section within a section.

Note: To learn more about Inner Section, please refer to this article


To be able to set equal height for columns in the section, this article will help you.



Blend mode filter


How to blend a Heading element with background in Elementor

With CSS blend modes you can add some fairly stylish design effects to your template by mixing heading widget’s color with its background.
Hopefully you can use this feature by adding basic Heading element to your layout in Elementor.


Note:
 To see how blend modes affect on the look of the Heading widget, you should use them in a layout or section with a background image. To learn more aboutHeading widget you can refer to this article.


In order to use CSS blend modes 

1. Add a Heading widget to your layout in Elementor so that a new dashboard on the left with element’s settings will pop up.

2. Go to Style tab and from Blend Mode section select one of the blend mode filters (For example: Multiply).

3. Update the page.

Copy or duplicate an element


How can I duplicate my widget in Elementor?

To being more effective, you can duplicate a created widget in Elementor.

To add a copy of a widget next to it:

1. Right click on the widget you want to duplicate in Elementor.

2. Click on Duplicate.

You can also duplicate a column or a section in Elementor by following the guideline described above.



Columns inside a section


How can I add a column to a section in the Elementor?

To add your preferable elements to a template you must put them into a wrapper box called Section.
When adding a new section to a template, you can select how many columns it needs as well as choosing their structure.


You can also add a new column to a section after you created it and choose a structure for it.

 To add a column to an existing section

1. Right click on the Edit button that appears on the upper-left corner of each column of the section.

2. Choose + Add New Column. A new column will add in right of the selected column.

Reset the styles of an element


I have ruined the styles of an element. Can I reset them?

If you notice that the style of an element does not look good, you can reset it in the Elementor.

In order to reset the style of an element in Elementor:

1. Right click on the element whose style you want to reset.

2. Click on Reset Style.

There are also Hot Keys in Elementor you can use to redo or undo the styles. 


Color or image overlay on a section


How can I add an overlay to a section?

To add a color or image overlay to the background of a section in Elementor, you should create a section with a background and follow the steps below:

1. Select the section to which you want to add an overlay in Elementor. By doing so, a new dashboard on the left with element’s settings will pop up.

2. Then, in the Style tab, open the Background Overlay accordion panel and select a color or an image for it.

3. Publish the changes.

Note: You can also add a background overlay to a column by following the guidelines described above.

Elementor Background Overlay

Adding a background to an Element


How to add a background to an Element?

In Elementor, you can set an image or color as a background for your content. 

To add a background to your Element:

1. In Elementor, select the element for which you want to add a background so that a new dashboard on the left will emerge with the element’s settings.

2. From the Advanced tab, go to Background section. Now you have full access to customization options of element’s background.

3. Change the settings and Update your layout.

Background Element in Elementor


Copy styles in Jupiter X


How to copy styles from one element to another in Elementor

Creating a page with Elementor, you may want to keep the same style for each element like background, space, font size. There is good news: you don’t have to re-create settings for every element as now you have an option to copy styles and paste them to any element you need.

Copy/Paste Element Style
 – With Paste Style, you can paste the style of any element you copy (Widget, Column or Section), then apply it on any other WidgetColumn or Section.

In order to copy and paste styles:

1. In Elementor, right click on a widget (section or column) you want to copy styles from.

2. Click on Copy.

3. Go to a widget (column or section) where you want to paste styles to, right click on it and select Paste Style. Repeat the actions for other elements where you want to use the same styles.

4. Update the page.

Border on elements


How to add a border to an element in Elementor?

In Elementor, you can set a border for your element. 

To add a border to your Element:

1. In Elementor, select the element for which you want to add a border so that a new dashboard on the left will emerge with the element’s settings.

2. From the Advanced tab, go to Border section. Now you have full access to customization options of element’s border. For instance you can set a border-type or add a border-radius to your element.

3. Change the settings and Update your layout.


Box shadow on elements


How to add box shadow to an element in Elementor?

In Elementor, you can add a box shadow for your element. 

To add a box shadow to your Element:

1. In Elementor, select an element for which you want to add a box shadow so that a new dashboard on the left will emerge with the element’s settings.

2. From the Advanced tab, go to Border section and from Box Shadow you have full access to customization options of element’s box-shadow properties.

3. Change the settings and Update your layout.

Text shadow on elements


How to add text-shadow to an element in Elementor?

In Elementor, you can set a text shadow for your element. 

To add a text shadow to your Element:

1. In Elementor, select an element for which you want to add a text shadow so that a new dashboard on the left will emerge with the element’s settings.

2. From the Style tab, go to Text Shadow section. Now you have full access to customization options of the element’s text shadow. 

3. Change the settings and Update your layout.

Enabling Elementor for a Custom Post Type

How to enable Elementor for a custom post type like Portfolio or Products pages?

Elementor works properly with all posts and custom post types, including Portfolioand WooCommerce Products pages.

You can edit your page with Elementor by clicking on the Edit with Elementor button in the page you want to edit. 

elementor Custom post type Jupiter x

If you can’t see this button for any reason, you can enable it by following the steps below:

Note: Before enabling the Elementor editor button, make sure you have activated Elementor plugin from WordPress dashboard >Plugins.

Activating Elementor

1. From the WordPress left menu go to Elementor > Settings.

2. In General tab, enable the Post types which you need the ability of editing in Elementor.
3. Save 
the Changes.

Enabling Elementor

Full-height sections

How to make a section in full-height?

By default the height of a Section in Elementor is equal to the height of its content which is called Default Height.
But you can set the height of a section to a Minimum Height as well as making a section in Full-Height.

In order to create a Full-Height section:

1. In Elementor, select the section you want to set it to full-height so that a new dashboard on the left will emerge with the element’s settings.

2. In Layout tab, change the Height setting to Fit To Screen.

3. Update the page.

CSS filter on an Image

How to change Brightness, Contrast, Saturation etc of an Image in Jupiter X?

The CSS filter property adds visual effects to your image just like Photoshop filter effects.
For example you can saturate you image or change its brightness. You can also apply a Gaussian blur to the image or adjust its contrast.
Hopefully you can add these CSS filter properties to an Image widget in Elementor.


Note:Image
 widget is one of the Elementor default widgets which can be used without any add-ons.

Jupiter X Css Filters

In order to add a CSS filter to an Image element:

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 Image 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 Style tab > CSS Filters , you can customize your preferable filter functions for your image element, such as Blur or Brightness.

5. Update the settings.

Default colors for a section

How to set default colors for a Section in Elementor?

When adding a new section to your Elementor’s layout, you can add as many elements as you want. 

The color of each content you add to the section falls under the influence of your section default’s colors. Giving an example, if you add a Heading element to your section, the color of that Heading element will be defined by the default colors of the its section. As a result, if the color of Headings is green by default, then each Heading will turn into green after adding it to an Elementor’s section. 

You have two ways to set default colors for your element in Elementor’s layout:

  • Setting Default Colors Globally
  • Setting Default Colors for a Specific Section.


Setting Default Colors Globally
You can set default colors globally for your entire layout which means that for each section the color of added elements would be defined based on Layout Global Default Colors. In order to set default colors globally for your layout in Elementor you can refer to this article.


Setting Default Colors for a Specific Section
If you set default colors for a specific section, the color of added elements would be defined by colors which you set for that section which results in having different default colors for every section of your layout.

Section Default Colors

To set default colors for a Specific Section:

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

2. Click on Edit with Elementor button.

3. Select the section you want to add default colors to.

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

5. From the Style tab, open Typography section and set default color for each element type. You can set a default alignment for the section’s content as well. 

6. Edit the settings and Update the page.

Setting default colors for Elementor’s layout

How to set default colors for entire layout in Elementor?

The color of each content you add to the page you create with Elementor falls under the influence of your layout Default Colors. Giving an example, if you add a Headingelement to your layout, the color of that Heading element will be defined by the default colors of the Elementor’s Layout. As a result, if the color of Headings is green by default, then each Heading will turn into green after adding it to your Elementor layout. 

You have two ways to set default colors for your element in Elementor’s layout:

  • Setting Default Colors Globally
  • Setting Default Colors for a Specific Section.


Setting Default Colors Globally

You can set default colors globally for your entire layout which means that for each section the color of added elements would be defined based on Layout Global Default Colors. In order to set default colors globally for your layout in Elementor follow the steps below.

To set default colors for the entire layout:

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

2. Click on Edit with Elementor button.

3. Click on the burger icon which exists on upper-left corner of Elementor’s dashboard.

4. Click on the Default Colors button and choose your desired Color Palette. You can also select a predefined palette for your website so that every element you add to your layout will fall under the influence of the color palette which you defined. 

5. APPLY the changes.

Color Pallete

Setting Default Colors for a Specific Section
If you set default colors for a specific section, the color of added elements would be defined by colors which you set for that section which results in having different default colors for every section of your layout.
For further information you can refer to this article.

Adjusting the column gap

How to remove/change the gap between columns in a section?

You might’ve seen that there is a gap between columns in a section in Elementor

Column Gap

You can remove or change these gaps from columns of a section in Elementor.

In order to adjust the columns gap in Elementor:

1. Select the section you want to change/remove the gap from columns of it, so that a dashboard on the left will emerge with the section’s settings.

2. In Layout tab, look for Columns Gap option.

3. If you want to remove the gap entirely from all columns of the section, select No Gap.

4. In order to change the size of the gap, you can try other options.

5. Update the page.



If you want to remove default space between widgets in Elementor, read this article.

Minimum height on a section

How to add a minimum height to a section in Elementor?

By default the height of a Section in Elementor is equal to the height of its content which is called Default Height.
But you can set the height of a section to a Full-Height as well as making a section in Minimum Height.

In order to add a minimum-height to a section:

1. In Elementor, select the section for which you want to set a min-height so that a new dashboard on the left will emerge with the element’s settings

2. In Layout tab, change the Height setting to Min Height.

3. Set the Height to the Min Height, a slider and an input will appear at the bottom by which you can set a minimum height value for the section.

4. Update the page.

Hover and active state backgrounds

How to change the background of an element in hover in Elementor?

In Elementor you can change the background of an element on hover state. 


Note: In order to learn how to add a background to an Element you can refer to this article.

To change the background of an element on hover state:

1. In Elementor, select the element for which you want to change the background on hover state, so that a new dashboard on the left will emerge with the element’s settings.

2. From the Advanced tab, go to Background section and select the Hover state. Now you have full access to customization options of element’s background to change on hover state.

3. Change the settings and Update your layout.

CSS units in Elementor

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

As you know, CSS has several units like px, %, EM or REM for expressing a length and each of them is suitable for its conditions.
While you’re creating your layout in Elementor, you may need to change the CSS units for the CSS properties that take length values.


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

1. In Elementor, select the element for which you want to change the CSS length unit, so that a new dashboard on the left will emerge with the element’s settings.

2. In Style tab, any CSS properties that takes length values such as margin, padding, font-size , etc. has an option for changing the units. Select your preferable unit and type in the length value.

3. Change the settings and Update the page.

Units Elementor

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

Grid, Masonry, Justify and List layouts

What’s the differences between Elementor’s widgets layouts?

You can assign different layouts to the Elementor’s widgets which can display multiple items with image like Images LayoutPosts or Photo Album.

Layout Elements Jupiter X

Beware! 
Posts 
and Photo Album are part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor.
Images layout is part of the JetElementsJetElements is an add ons for Elementor page builder which provides a set of +50 new useful widgets for the Elementor.


There are four types of layouts you can use for your widgets. GridMasonryJustifyand List.

Layout Settings Jupiter X

Some of the Elementor’s widgets like Images Layout have all four types of layouts, but some of them have fewer layouts (i.e: Posts and Photo Album)

In the following article we will shed light on the features of every layout:

Grid layout

By choosing this layout, all of the items will have the same width and the same height as well. If the items are not the same size, they will be cropped. You can also define the number of columns for this layout.

Screenshot Grid Layout

Masonry
In this layout all of the items have the same width but height of each, will be different. you can define the number of columns for this layout.

Screenshot Masonry Layout

Justify
This layout is the opposite of Masonry layout. In other words all of the items with Justify layout will have the same height but different width. You can set a height for the items in Justify layout. 
Justify layout consider the aspect ratio for each item, so that by changing the height of items, you may experience a different look for this layout.
Here are some example of Justify layout. All of the examples have similar items but in different heights:

Justify 2
justify 3

List
This layout just lists all of the items vertically with the same width. The width and height of the items will be automatically defined in List layout and users have no control of them.

List Layout

SoundCloud widget

How to work with SoundCloud widget in Elementor?

The SoundCloud element allows you to embed audio clips from SoundCloud to your site. 

Soundcloud

To add a SoundCloud element to a page:

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

2. Click on Edit with Elementor button.

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

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

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

Soundcloud options

Here are the most important options of SoundCloud Widget:

  • Link – Enter the SoundCloud URL you wish to add to the page.
  • Visual player – Choose whether the visual player is displayed, or just the audio player.
  • Autoplay – Choose if the audio is automatically played when the user loads the page.
  • Buy button – Show or hide the button to buy the track.
  • Like button – Show or hide the like button.
  • Download button – Show or hide the download button.
  • Share button – Show or hide the share button.
  • Comments – Show or hide comments.
  • Play counts – Show or hide the number of play counts.
  • Username – Show or hide the username that uploaded the track.
  • Controls color – Customize the color of the controls.

6. Edit the settings and Update the page.

RTL layout and Elementor

Note:Elementor is a visual page builder plugin for WordPress enabling the creation of web pages in a live, visual way. It has a lot of features and the free version of the Elementor is bundled and required for Jupiter X


For those who wants to use Elementor in RTL languages, there is a concern about using this plugin. 
Fortunately Elementor is multilingual and offers full support for both LTR and RTLlanguages. So Elementor allows to build RTL pages as well as other translated pages in any language. 
Also Elementor has been translated into over 50 languages so you can use it in different languages.

Note: If you’re looking for translating the theme to one language, refer to this article. And this article will help you to create multilingual site.

Removing the space between elements

Why is there a space between my elements when I add a new widget to my layout?

You might’ve noticed that in Elementor there are some extra spaces between widgets by default. It’s not about the paddings or margins you may have set before, this is a default space that Elementor will add automatically between widgets. By default there is a minimum 20px space between widgets in your layout. But don’t worry! You can remove this extra space or change it.


Removing/Changing the space between elements

There are two methods you can remove/change the space between elements in Elementor:


Method 1:
 From the WordPress dashboard menu

1. In WordPress left dashboard menu, go to Elementor > Settings.

2. In Style tab, find the Space Between Widgets option and set your preferable value to the space between elements (unit: px). For instance if you want to remove the default space between widgets completely, just set the value to 0

3. Save changes.



Method 2:
 From the Elementor dashboard menu

If you are editing a page in Elementor, you can globally change the space between elements and without having to leave Elementor.

1. From the Elementor left dashboard menu, click on the Burger icon in upper-left corner of the dashboard.

2. In Settings section click on Global Settings.

3. Set your preferable space value in the Widgets Space option.

4. Update the page.

Assigning an ID or class to an Element

How to assign an ID or class to an Element

ou may need to add a custom CSS or script to an element or create a one-page scroll menu. In such cases assigning an ID or a class to an element is crucial. Hopefully you can assign both an ID or class to an element.


In order to do that:

1. In Elementor, select the element which you want to assign an ID or class to, so that a new dashboard on the left will emerge with the element’s settings.

2. In Advanced tab, and in the Advanced section, look for CSS ID option and CSS Classes and write your ID or class name for the element.

3. Update the page.

css id class

To add the custom css code for your custom class, refer to this article.

Z-index in Elementor

How to change z-index of an element in Elementor

In Elementor, you can specify the stack order of an element which is called z-index.
As you know, an element with greater z-index will be above an element with a lower z-index.


z-index

In order to assign z-index number to an element in Elementor:

1. In Elementor, select the element to which you want to assign z-index, so that a new dashboard on the left will emerge with the element’s settings.

2. In Advanced tab, and from the Advanced section, type in the z-index number in the Z-index field.

3. Update the page.

Do I need to buy Elementor Pro?

Elementor is a visual page builder plugin for WordPress enabling the creation of web pages in a live, visual way. It replaces the basic WordPress editor with a live frontend editor, so you can create complex layouts visually, and design your website live, without having to switch between the editor and the preview mode.

free version of the Elementor is bundled and required for Jupiter X
If you want to use the Elementor Pro, it needs to be purchased separately. But it’s not necessary as Jupiter X provides exclusive Raven plugin that has great capabilities extending Elementor power even more. It has additional widgets that will be helpful when building a website. Read more about Raven plugin in this article.

Also there is other premium plugin bundled in the theme exclusively built to enrich the Elementor plugin – JetElements plugin.

Jupiter X offers some features that do not exist in Elementor Pro and the opposite is also true meaning that Elementor Pro may have some features that are not available in Jupiter X.

Importing Block templates to a page

How to insert block templates to a page with Elementor page builder

With Elementor you’re capable of importing a page template or part of your template (Section). So you just insert a template into a page and don’t need to create all sections one by one from scratch. 

Inserting a Block template into your layout

You can insert a block template (section) by following the steps below:

1. In Elementor widget area, click on folder icon.

2. In Blocks tab, select a section template that you want to insert to your layout. As you can see there are different types of templates and you are allowed to insert whichever you want. 
By clicking on Insert button the template will be added into your layout.

To preview a template before inserting, click the magnifying glass icon.

If you click on a heart icon, a template will be saved to “My Favorites” and you’ll be able to find them quickly in My Favorites tab.

3. Once inserted, you’ll see this section template on your page and can edit its elements to your needs.


Note: There is no difference between inserting a section and the whole layout template in Elementor. If you click on Pages tab, you’ll be able to insert a page template with many sections inside. Just make sure your page is blank and no other content is added there if you want to import a whole page template, not just a block.


If you want to save your page as a template, refer to this article.

Note: The templates are loaded from JetElements, Elementor plugins, and Jupiter X. Some of them require the Pro version of Elementor, but you don’t have to buy it as there are a lot of free templates you can choose from.

What is the difference between Elementor and Elementor Pro?


Do I need Elementor Pro for Jupiter X?

Elementor is a visual page builder plugin for WordPress enabling the creation of web pages in a live, visual way. It replaces the basic WordPress editor with a live frontend editor, so you can create complex layouts visually, and design your website live, without having to switch between the editor and the preview mode.

The free version of Elementor is bundled and required for Jupiter X but purchasing the Elementor Pro is optional and Jupiter X works perfectly fine without the Elementor Pro. There are multiple plugins bundled with Jupiter X that add a lot of features to your website and it makes you needles of buying Elementor Pro. However, if you wish to have Elementor Pro it’s ok and the theme is compatible with it. Just consider that at some points, the Elementor Pro display conditions may override the Jupiter X templates. More information


 

Creating the pages


How to create pages with Elementor plugin

Assuming that you already checked the Elementor tutorials from here or you are familiar with it, we will review some points that will speed up your page creation using Elementor.

  • If you wish to create a full-width page, you MUST choose the Full-Width template from the Page Attributes. Otherwise, removing the sidebars and make every section Full width, will add some space on the top and bottom of your content.
  • We developed Raven plugin to extend the functionality of Elementor by adding elements that were available in Jupiter and were not in Elementor by default. For more information please check here. It will be easier for you if you know what element you must use in order to have the most similar look to Jupiter.
  • Here are some examples:
    • Portfolio Shortcode > Post element and choose the post type to Portfolio
    • Page Section > Section
    • Inner Row > Inner Section
    • Blog Shortcode > Post Element and choose the post type to Blog
    • Product Loop > Products (Raven)
    • Flip Box > Animated Box
    • Padding Shortcode > Spacer Element
    • Clients Shortcode > Brands element
    • Contact Form Shortcode > Form element

The rest of the Raven elements are having the same name as Jupiter shortcodes. Also, some other elements are available in Jet Elements which are needless to say. For example, Advanced Google Maps is now Advanced Map and etc. You can find more info about Jet Elements here.

  • You can use Block templates in Elementor. It means that you can save a section and use it in multiple places. This will help you rapidly build up your website. Here you can find more info about it.

You can use Growmatik Personalizer tool to personalize the content of your pages for specific viewers based on their behaviour in your website.


It is highly recommended to use Elementor as your page builder because:

  • It is built based on Frontend editor UX in mind.
  • It requires much less learning curve.
  • It is freaking fast both editor and rendering the site.
  • Your WordPress site speed won’t be affected by Elementor’s presence (can’t say the same for WPBakery page Builder)
  • It does not use Shortcode API to store the content and render it, excess usage of Shortcode cause slower sites.
  • It has customizable built-in elements
  • Its element controls have better UX and arrangements
  • It has much better extendibility codebase
  • Header, Footer, Single page builders and many more unlimited functionalities are included.

What is Elementor

Elementor is a visual page builder plugin for WordPress enabling the creation of web pages in a live, visual way. It replaces the basic WordPress editor with a live frontend editor, so you can create complex layouts visually, and design your website live, without having to switch between the editor and the preview mode. The page builder enables you to reach a top-notch quality of design without needing to use code or CSS, and without relying on developers for help. For more information, please check this tutorial.