Breadcrumb Element

Breadcrumb element is one of the frequently requested elements that is being added to Raven since version 1.6. It allows you to add a Breadcrumbs element to your pages or title bar templates. In fact, you can use it in any template you want, but the best place you can use it is in the Title Bar section.

Breadcrumbs are being used to show your users where they are on your website. It shows an inline hierarchy with the page links up to your homepage so your viewers understand where they are. Although you could use the default BreadCrumb in the Page Title settings in the Customizer in Jupiter X lately (please refer to this article), introducing the Page Title templates required the breadcrumbs element for the sake of customizability. In this article, we will overview the BreadCrumbs element and see how we can use it in a Custom Page Title template.


Note: You need the latest version of the Raven plugin to be able to use the BreadCrumbs element.

Adding a Custom Page Title Template

1 – From the WordPress side dashboard click on the Jupiter X -> Customize.

2 – In the customizer, navigate to Title Bar and then choose the Custom type. Then click on New or chose from one of the old title bar templates if you have any. You can also add a Section template in Elementor -> Templates -> Saved Templates and then choose it from the Customizer -> Title Bar -> Custom type.

3 – In the Elementor editor, drag a BreadCrumb element into the template.

4 – Configure the BreadCrumb as you like, style it and then save your template.

5 – You can also add or edit any other content as you wish. As an example, we will add a Heading element and set it’s content to be fetched dynamically on each page.

Note: If you wish to have a different page title template for the pages, archive pages or post types, you should use the Jupiter X Customizer Conditions. So, if you wish to create a page title bar template and have different page titles for archive or individual pages, simply chose a condition and then create the template based on your selection.


6 – Save the customizer and refresh your website to see the bread crumb is taking effect on the new page title template.

Configuring the BreadCrumb

Breadcrumb element has 3 content options:

Alignment

You can set different alignment for different devices. Just choose from the right, left or center options and if you wish to set a different alignment for the mobile or tablets, chose the device icon and then set the alignment.

HTML Tag

You can wrap the breadcrumb in different HTML tags. Choose wisely based on your SEO requirements. Default is “div” but you can select the “nav” if it’s your main navigation element.

Breadcrumbs Type

This is the most important configuration for the breadcrumbs element. It gives you enough flexibility to customize the way you would like to show your breadcrumb hierarchy. By default, it is using a breadcrumbs hierarchy which is provided exclusively by Jupiter X, but if you wish to use other methods and configure them in a way you wish, you can choose different types such as YOAST SEO breadcrumbs or BreadCrumb NavXT. These are the two most popular breadcrumb plugins and have their own configurations. You would need to install them to be able to use this feature.

As soon as you choose a different breadcrumb type, you will be able to configure it in the plugin setting. For YOAST breadcrumb settings, please refer to this and for the NavXT breadcrumb, check this article.

Styling the BreadCrumb

There are a couple of styling options you can set for the breadcrumbs element, no matter what type of breadcrumbs you are using.

Text Color

The text color for the simple texts in your breadcrumbs. Usually, it will be your last item in the hierarchy and it is not a link.

Typography

The font and typography settings for your breadcrumbs. Some of the options are possible to have different values on different devices.

Separator Color

It is all about the separator color. Usually, the separator is the > character, but if you changed it in the YOAST or NavXT options, you will have a different sign as the separator. You can change the color of it anyway.

Background Color

You can set a background color for your breadcrumb element using this option.

Link Color

The link color can be changed from here. You can set the different colors for the Normal state or Hover state.

Some other styling options such as margins, paddings, borders, and even custom positioning are available in the Advanced tab, however, the advance tab is actually available for all of the other elements as well.

Adding phone number to a form widget in Elementor


How to add phone number type field to form widget in Elementor?

In Elementor you can add a form to your layout with different type of inputs like phone number.

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. 

Jupiter X Forms

In order to add a phone number input to a form widget:

1. In Elementor, drag and drop the Raven Form element to your page, so that a new dashboard on the left will emerge with the element’s settings.

2. In Content tab and Forms Fields section click on + ADD ITEM.

3. Set the type of the element to Tel.

4. Update the page.

Adding reCAPTCHA to a Form widget in Elementor


How to secure my form with reCAPTCHA in Elementor?

One of the greatest feature of Raven Form element is reCAPTCHA.

Jupiter X re-captcha elementor

You can secure your form with reCAPTCHA and easily customize it in the raven Formelement.

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. 


Note:
 Before adding reCAPTCHA as an action to your form, you must addreCAPTCHA Site and Secret keys to your website from WordPress left menu > Elementor > Raven > reCAPTCHA > Site and Secret keys.
You can learn more about reCAPTCHA by referring to 
this article.

In order to add reCAPTCHA to your form:

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 add a reCAPTCHA type field to your form.

3. If you added reCAPTCHA site and secret keys to your website before, you can easily customize and modify the reCPATCHA options.

4. Update the page.

Adding custom feedback messages to the Form element


How to add custom feedback messages to a form after a user submitted it?

One of the features of Form element is CustomFeedback Messages
After adding a Form widget to your web page, you can add a custom message to it so that it can give you a feedback based on its situations.

Elementor 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 add custom messages to a Form widget: 

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 open Feedback Messages options panel.

3. Enable the Custom Messages option. Now you can write your desired messages based on each situation. 

4. Update the settings.

Making the form fields required in Elementor


How to make the form fields required in Elementor?

required input specifies that an input field must be filled out before submitting the form.

It can be easily done with 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 make a form field required:

  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 a field which you want to make required.
  3. By clicking on the filed, its options will show up as an accordion panel.
  4. Enable the Required option.
  5. Update the page.


Redirecting to a page when the form is submitted in Elementor


How to redirect the page after users submitted a form?

By adding the Raven Form element to your layout, you may want to redirect to a page after the form is submitted by a user. This could be easily done by adding a redirect action to the form.

Jupiter X Form


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

2. Go to Content tab and in the Settings section add a Redirect action.

3. A new Redirect options panel will emerge at the bottom of the Settings section. So you can define the page you want to redirect to.

4. Update the page.

Note: You can integrate the MailChimp with Form element. To learn more about it, I suggest you to refer to this article. You can also add an email action to the form, so that you will be notified after the users submitted the form. You can learn more about it by referring to this article.

Use Growmatik to show highly targeted forms and popups to your website visitors based on their behavior and interests.

Adding required mark to the form fields in Elementor


How to add asterisk (*) to required fields in Elementor?

required input specifies that an input field must be filled out before submitting a form.

You can mark those fields which are required to expose the required field in a more clear way.

Jupiter X Email Form

It can be easily done with Raven Form element.

Jupiter X Email Form

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 add the required mark to the form fields:

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

2. Before adding an asterisk to the required fields, first you have to make them required. You can learn more about making the form fields required by referring to this article.

3. From the Content tab and in the Settings section, make sure you’ve enabled both the Label and Required Mark options.

4. Update the settings.

Jupiter X Email Form

Removing field labels in the Form element


How to remove field labels of a form in Elementor?

Some users prefer not to reveal field labels of a form which they added to their webpage.

If you’re using Raven Form element, you can remove the entire form labels from the Form widget settings or remove form label for a specific field.

Jupiter X Form

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. 


To remove the entire form labels from a Form widget in Elementor:

1. Drag and drop a Form widget into your layout so that a new panel will open on the left side of the Elementor with the element specific settings.

2. Go to Content tab and from the Settings section disable the Label option which results in hiding all labels from the added form.

3. Update the page.

Jupiter X Form

To remove a label from a specific form’s field:

1. Drag and drop a Form widget into your layout so that a new panel will open on the left side of the Elementor with the element specific settings.

2. Go to Content tab and from the Form Fields section click on the field which label you want to remove.

3. Delete any text from Label option.

4. Update the page.

Jupiter X Email Form

Adding a contact form/subscribe form in Jupiter X


How to add a contact form or newsletter to my web page in Elementor?

Most of the time you need to add a newsletter subscription form to your website or have a Contact form to be in touch with your customers.

Raven Form element is the best choice for you due to its significant features and multiple customizations it provides for you.

Elementor Email Form

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.

Creating both a Contact Form and a Newsletter can be done by Form widget and you can use similar input types for both of them (for example an Email input type). To make it crystal clear, we will describe creating of Contact Form and also Newsletterstep by step:

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

2. The most important fields of a Contact form are NameEmail and Message fields. For having a more secure form, you are capable of using the reCaptcha field as well. Adding these fields to your form can be done from Content tab and under the Form Fields section. You can customize the pre-added fields or add your own fields to the Form by clicking on + ADD ITEM.

Elementor Email Form

3. By clicking on each added field, you can change the name, label and also type of the field. In order to learn more about adding an Email field and reCaptcha to your form you can refer to this and this article respectively.

4. After adding the necessary fields to your form, you can set an action for it. The action will occur after a user submitted your form. There are different types of actions in Form element such as EmailMailChimp and Redirect. If you’d like to create a contact form you can set an Email action for it. If you want to add a newsletter to your web page you can integrate it with MailChimp. Adding an action can be done from the Content tab and under the Settings section. You are also allowed to add your preferable action to your form from Add Action option.

Jupiter X Contact Form

5. Customize your form based on your needs. You can learn more about other customizations in Form element by referring to this article

6. Update the settings

Adding Mailchimp to the Form element


How to integrate my Form element with Mailchimp in Elementor?

In Elementor you can define an action for a Raven Form element which can send an email or redirect to a page, after a user submitted the form.
You can also integrate the MailChimp with raven Form element.


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. 

Elementor Email Form

Note: Before adding the MailChimp as an action to your form, you must add Mailchimp API key to your website from WordPress left menu > Elementor > Raven >MailChimp > APIKey
You can learn more about how to get Mailchimp API key by referring to this article.

In order to add MailChimp action to the raven Form element:

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

2. Go to Content tab and in the Settings section add a MailChimp action.

3. A new MailChimp options panel will emerge at the bottom of the Settings section. If you added Mailchimp API Key before, you can configure the MailChimp options.

4. Update the page.



Note: You can add a simple Email action to the form, so that you will be notified after a user submitted the form in your website. To learn more about it, I suggest you to refer to this article. You can also add a Redirect action to the form. In order to learn more about it, you can refer to this article.

Adding Email field to a Form widget in Elementor


How to add email field to my form in Elementor?

HTML form has various input fields like text, textarea or email. An Email input defines a field for an e-mail address.

You can add an Email input to your form with Raven Form element.

Elementor Email

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 add an Email input type to a form:

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 add a field to your form by clicking on + ADD ITEM

3. Set the field’s type to Email.

4. Update the page.

Use Growmatik to display personalized forms and popups based on your users’ behavior (Free for up to 10,000 site visits per month).

I don’t receive any email, what should I do?

By default, WordPress uses the PHP Mail function to send emails. However, it is not the best method and may decrease email deliverability. Emails may often arrive in the spam/junk folder. As an alternative, you can use SMTP to send emails.

In order to send emails via SMTP follow the steps below:

Choose an SMTP server

There is a wide range of free SMTP servers that can be set up on a mail client to deliver your emails. For further information about SMTP servers please refer to this article.

Register for the SMTP server

After choosing an SMTP service, you need to register for it. To learn more about registering for an SMTP service please refer to this article.

Integrate the SMTP service with your WordPress website

There are many WordPress plugins that help you to integrate an SMTP service into your WordPress website. We suggest you to read this article to learn more about configuring an SMTP plugin.

Use Gromwatik to send highly personalized emails to your users with no need to third-party tools or email delivery services (Free for up to 10,000 emails per month).

Sending an email via form in Elementor


How my website visitors can send an email to me via form in Elementor?

In Elementor you can define an action for a Raven Form element which can send an email or redirect to the page, after a user submitted the form.

Elementor Jet Elements


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 send an email via Form element:

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

2. Go to Content tab and in the Settings section add an Email action.

3. A new Email options panel will emerge at the bottom of Settings section. So you can define the subject of the Email and other settings into it.

Elementor Email Form

Here are the settings you need to configure in the Email section:

To – enter an email address to which the message should be delivered after the contact form submitted.
Email Subject – 
add a subject that will be shown in your mailbox.
From Email – 
enter an email address from which the message is sent.
From Name – 
add a name from whom the email is sent.
Reply-To – 
enter an email address to which you can send a reply when the message is received. By default, if this field is empty, the reply will be sent to a sender. You can change it and add other email addresses in Cc and Bcc fields.

4. Update
 the page.

So by enabling the Email action, you will be notified after a user submitted the form in your website.

Note: You can integrate the MailChimp with Form element. To learn more about it, I suggest you to refer to this article. You can also add a redirect action to the form, so that a user will be redirected to the desired url after submitting the form. To learn more about it please refer to this article.

Use Gromwatik to automate sending highly personalized emails to your users based on their behavior (Free for up to 10,000 emails per month).

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.

Divider and Spacer


What’s the difference between divider and spacer in Elementor and when we can use them?

Divider and Spacer are two useful widgets in Elementor which help you to create more structured template for your website.

Difference between Divider and Spacer in Elementor

The Divider element allows you to add styled, horizontal line to add a divider between other elements. You can change the line type, its width and color, and other settings.

On the other hand, Spacer element allows you to add spacing between elements in Elementor without adding any visual element.

Which should we use?

It really depends on the situation you want to use them. If you want to add a horizontal line before or after your content, you can use Divider element. But if you just want to have more control on spacing between elements, you should use Spacer.

If you want to learn more about Divider element, please refer to this article.


Also, there is a Flex Spacer element which you can use to add space between items in flex column. Read more about it here.


Adding a Youtube video with a laptop mockup frame

To add the video, follow the steps below:

1. Follow the steps in the Video Element article to add a video to your page.

2. Configure the settings like shown below:

Content

Video Type – Set this to Youtube.
Link – Add the link of Youtube video.
Frame this video in Device Mockup – Enable this option in the 
Device Mockup Frame tab.
Device Type – Set it to Laptop.

3. Configure the rest of the settings as you desire and publish or update the page.

Adding a self-hosted video with an image overlay and a Play icon

To create the video, follow the steps below:


1.
  the steps in the Video Element article to add a video to your page.

2. Configure the settings like shown below:

Content

Video Type – Self hosted.
Upload Video – MP4 – Upload a video that has an MP4 extension.
Upload Video – WebM – Upload a video that has a WebM extension.
Image Overlay – Enable to add image overlay to the video.
Image – Set the image for the overlay.
Play Icon – Enable to add a play icon over the image overlay.
Icon – Set the desired icon for the Play Icon.

Note: Please upload both MP4 and WebM extension of the video so that the video plays on vast variety of browsers and devices.

Style

Color – #4054b2
Size – 88px

3. Configure the rest of the settings as you desire and publish or update the page.

Video Element

How to add video on a page

The Video element allows you to display a video on your site. It allows adding videos which are either social hosted or self-hosted. For social hosted videos, it offers to add videos hosted on Youtube and Vimeo. It also offers 2 cool features that are adding an image overlay to the video and adding video in a mockup frame which has desktop and laptop shape.

Common Uses:

  • Showing videos from Youtube and Vimeo.
  • Showing videos hosted on own site.

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

Beware! Google products do not allow a video to autoplay if it’s not mute. To autoplay a video, you can either enable the Mute option for the video or upload a video without any sound.


To add a Video 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 a “Video”.

4. Drag and drop the Video 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.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Video element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Tabs Element

How to create tabs with Elementor

The Tabs element allows you to add responsive tabbed content to your page.

Common Uses:

  • Content Organizer
  • Add Visual Consistency
  • Make Navigation Self-Evident

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

To add a Tabs 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 a “Tabs”.

4. Drag and drop the Tabs 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.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Tabs element options. Whenever you see this icon, it means that you can choose the different screen size and freely change that options for your specific resolution.

At first, you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Shopping Cart Element

How to add a shopping cart to a page

The Shopping Cart element allows you to add a WooCommerce shopping cart anywhere on your website. This element comes really handy when you are building a custom header, footer, sidebar or shop page using Elementor.

Common Uses:

  • Header, footer, and sidebars.
  • Shop pages
  • Creating Header and Footer and block templates.
  • Use anywhere you want to show a shopping cart


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.


To add a Shopping Cart 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 a “Shopping Cart”.

4. Drag and drop the Shopping Cart 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.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Shopping Cart element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Site Logo Element

How to add logo on a page

A logo is a visual representation of your business. It reflects your company’s name, message and values. Over time, your logo should be immediately recognizable to your customers, which is why Jupiter X offers a Site Logo element. The Site Logoelement allows you to add a logo anywhere on your website. This element comes really handy when you are building a custom header or footer using Elementor.

Common Uses:

  • Header
  • Footer
  • Sidebar


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.

To add a Site Logo 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 a “Site Logo”.

4. Drag and drop the Site Logo 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.

How to upload logo image to Site Logo element, please refer to this article.

How to assign a different logo to mobile screens?

Using Logo Element you can easily assign a different version of the logo to your mobile and tablet screens. In order to do that, you would need:

1 – Add a different version of the logo from Customizer -> Site Identity.

2 – Save the customizer settings. Then in the Site Logo element, look for the Choose Logo option and click on the responsive option icon.

3 – Simply chose a different version of your logo for different devices and save the template or page.

Responsive Layout Options

You can choose to have different settings on different screen sizes for some of the elements. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first, you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Search Form Element

How to add a search form to a page

The Search Form element allows you to add a search form anywhere on your website. This element comes really handy when you are building a custom header or footer using Elementor.

Common Uses:

  • Mostly uses in header, footer, and sidebars.
  • Creating Header and Footer and block templates.
  • Use in Page templates such as 404, maintenance and search page.
  • Use anywhere you want to show a search form (full screen or inline)

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


To add a Search Form 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 a “Search Form”.

4. Drag and drop the Search Form 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.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Search Form element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Posts Carousel Element

How to show posts in carousel

The Posts Carousel element is just like the Posts element, except it is displayed in a carousel. The Posts Carousel element allows you to display posts from Blog or Portfolio post type. It also offers many features like filter by categories, pagination styles, etc. You can change the featured image size, set excerpt length and change “Read More” button text and other settings.

Common uses:

  • Blog Carousel
  • Portfolio Carousel
  • Projects showcase
  • Image gallery
  • Art Gallery
  • Products Showcase (without shopping cart)

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

To add a Posts Carousel 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 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. Edit the settings and Update the page.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Posts Carousel element options. Whenever you see this icon, it means that you can choose the different screen size and freely change that options for your specific resolution.

At first, you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Posts Element

How to show posts from Blog or Portfolio post types

The Posts element allows you to display posts from Blog or Portfolio post type. It also offers many features like a layout, filter by categories, pagination styles, etc. You can change the featured image size, set excerpt length and change “Read More” button text and other settings.

Common uses:

  • Blog Grid
  • Masonry Blog
  • Portfolio Grid
  • Masonry Portfolio
  • Projects showcase
  • Image gallery
  • Art Gallery
  • Products Showcase (without shopping cart)

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

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

To add a Posts 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 a “Posts”.

4. Drag and drop the Posts 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.

Responsive Options


You can choose to have different settings on different screen sizes for some of the Posts element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

Products Element

How to show products on a page

The Product element is a WooCommerce based element that displays a loop of your shop products in a page. Please note that the Products element is not considered as a shop archive. For this, you need to use the Shop Customizer.

Common Uses:

  • Custom shop page
  • Product loop inside pages
  • Showcasing products
  • Product grid

Note: In order for this element to work, WooCommerce plugin needs to be installed and activated. You can do it from Jupiter X control panel > Plugins.


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. Also, the Jet Elements for Elementor has some WooCommerce elements which you can use them too. You may check its WooCommerce related elements here

To add a Products 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 a “Products”.

4. Drag and drop the Products 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.


Note:
 To style the items (product title, price, image) in the Products Element you need to use Shop Customizer via Appearance > Customize > Shop > Product List as described in the article.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Products element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Photo Roller Element

How to show an image with the infinite rolling effect

The Photo Roller element lets you add a single image which will then have an infinite rolling effect. This element is pretty straightforward and has only a few options.

Common Uses:

  • “First section” image
  • Slider image
  • Super Wide images that don’t fit inside the viewport.

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. Elementor itself doesn’t have such plugin and in order to use it, you need to install the Raven plugin.

To add a Photo Roller 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 a “Photo Roller”.

4. Drag and drop the Photo Roller 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.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Photo Roller element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Creating a Masonry Photo Album

How to create masonry photo album

To create a Masonry Photo Album, follow the steps below:

1. Follow the steps in the Photo Album Element article to add the Photo Album to your page.

2. Configure the settings like shown below:

Item – Add your items and images to them.
Settings > Layout – Masonry
Settings > Columns – Choose your desired number of columns
Style > Column Spacing – 0
Style > Row Spacing – 0

3. Configure the rest of settings as you desire and publish or update the page.

Note: In order to have the best Masonry view, it is recommended to use the “Full” size image in the settings.

Photo Album Element

How to show images in image gallery

The Photo Album element allows you to show a series of images in the image gallery in a unique way. It also works well on all devices, making it easy to display your images for desktop, tablet, and mobile screens. 

Common Uses:

  • Image Gallery
  • Masonry Layout Images
  • Lightbox Image


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


To add a Photo Album 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 a “Photo Album”.

4. Drag and drop the Photo Album 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.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Photo Album element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.


Note: We recommend using image files of small file sizes for best results, though the limit for individual image upload is set in WordPress config files. When it comes to image size, bigger isn’t always better, as uploading larger images can affect site performance. Your images should be optimized as explained in this article.

Navigation Menu Element

How to add navigation menu on a page

The Navigation Menu element allows you to add a navigation menu anywhere on your website. This element comes really handy when you are building a custom header or footer using Elementor.

Common Uses:

  • Header and Footer Navigations
  • Sticky Header Navigation
  • Secondary Header Navigation inside a page
  • Hamburger Menu

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. Also, Elementor Pro (Paid version), has another Navigation Menu shortcode, but in order to see the default Elementor Navigation Menu, you need to look for it in the Elementor knowledgebase. 

To add a Navigation Menu 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 a “Navigation Menu”.

4. Drag and drop the Navigation Menu 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.

Exceptions and logical conditions

Since Raven 1.3 there is an option in the Navigation Menu element which let you add logic to your navigation menu. This feature mainly developed to let users show different menus for different conditions such as Logged In and Logged Out users, different access levels and etc.

The good thing about this feature is that you can add multiple conditions to one menu. It will help you customize your navigation even more. For example, using multiple exception rules you can chose to have completely different menu for all of your 10 (I.E) user roles.

However, using multiple exceptions for a menu could be a little bit tricky. You should avoid covering multiple exception rules for your menu. What will happen to your menu, when you select two different menus for one user role? This logical issue is something that you should avoid as much as you can otherwise you will think that the menu is not working properly. In such cases when multiple rules are covering each other, the first rule will only get executed and others will be ignored.

More examples of possible cases which can cause logical problems:

– If a user adds 2 different menus with the same exception (For example “Everyone”)
– If a user adds an exception for all the Logged In users and a different exception for Everyone.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Navigation Menu element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

If you want to change the breakpoint for a burger menu, refer to this article.


Note: If you want to create a custom header and add Navigation Menu to it, refer to this article how to create a custom header in Elementor.


Note: If you want to create a custom footer and add Navigation Menu to it, refer to this article how to create a custom footer in Elementor.

Note: There are some basic Mega Menu features in Jupiter X theme, but you can use JetMenu (bundled) or UberMenu plugin to create a menu you wish. The plugin is fully compatible with the theme.


Note: There is a possibility to create a side navigation menu (vertical menu) using the Navigation Menu element. Read the Creating Side Navigation article to find more.

Creating an icon with a background container

How to show an icon in the container with some background

To create the icon, follow the steps below:


1.
 Follow the steps in the Icon Element article to add the icon to your page.

2. Configure the settings like shown below:

Content

Icon – Pick your desired icon.
Container – Enable this option.
Shape – Set the shape of the container to either a circle or a square.

Style

Color Type – Set this option to the solid.
Color – #f5875b
Size – 90px
Alignment – Center
Container Background Type – Classic
Container Color – #f4f4f4
Border Type – Dotter
Border Color – #f5875b

3. Configure the rest of the settings as you desire and publish or update the page.

Creating a Solid color Icon

How to create an icon with a solid color

To create a solid icon, follow the steps below:

1. Follow the steps in the Icon Element article to add the icon to your page.

2. Configure the settings like shown below:

Content

Pick your desired icon.

Style

Color – #de4192
Size – 60px
Alignment – Center

3. Configure the rest of the settings as you desire and publish or update the page.

Icon Element

How to add an icon in Elementor

The Icon element allows you to display a variety of available icons in various shapes and effects. The source of the icons is Font Awesome and some custom Jupiter X icons. It also offers many features like a custom link, hover effect, etc. There are multiple shapes and effects that allow you to create different icons. You can change the size, color, border, container background and much more.

Common Uses:

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

To add an Icon 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 an “Icon”.

4. Drag and drop the Icon 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.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Icon element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Image Element

The Image element allows you to display images in various styles, sizes, and use more other settings. It also offers many features like a caption, switch image on hover, add URL to the image, etc. You can change the image size, set parallax effect and opacity, add border around the image and other settings.

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

To add an Image 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 an “Image”.

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. Edit the settings and Update the page.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Image element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first, you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Heading Element

How to add a title in Elementor

The Heading element is one of the most frequently used elements in Jupiter X. It allows you to display an extremely impressive title with many beautiful styles to attract your viewers at first click.

Common Uses:

  • Big Titles
  • Former Fancy Title in Jupiter theme
  • Gradient Text
  • Advanced Text with custom typography
  • Beautiful Typography
  • Heading tags


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

To add a Heading 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 a “Heading”.

4. Drag and drop the Header 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.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Heading element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Creating a MailChimp Form

How to add MailChimp form

To create a MailChimp form, follow the steps below:

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

2. Generate an API key by following this article and add it in the above path.

3. Follow the steps in the Form Element article to add the form to your page.

4. Configure the settings like shown below:

Settings > Add Action – MailChimp


5. Configure the rest of the settings as you desire and publish or update the page.

Use Growmatik to show highly targeted lead popups and send personalized emails to your website visitors based on their behavior and interests.

Creating an Outline Contact Form

To create the following contact form, follow the steps below:

1. Follow the steps in Form Element article to add a form to your page.

2. Configure the settings like shown below:

Settings > Label – Disabled
Row Spacing – 0
Column Spacing- 0
Field Border Type – Solid
Field Border Width – 2px
Field Typography Transform – Uppercase
Button Background Color – Transparent
Button Typography Transform – Uppercase

3. Configure the rest of the settings as you desire and publish or update the page.

By default, there is a reCaptcha option if you want to add captcha to your contact form.
At first, you need to add Site Key and Secret Key in Elementor > Settings > Raven:

Then edit your page and configure Form element settings:

1. Add a new item.

2. Select reCAPTCHA in Type field and configure the styling.

3. Update the page.

Form Element

How to create a contact form

Allow your website audience to communicate with you via the Form element. Raven’s Form element lets you create a:

  • Contact Form
  • MailChimp Form
  • Redirect Form


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. Forms element is only available in the Raven Plugin.

Having such elements on your website is extremely important to your visitors. Adding one is simple and there are a lot of styles and settings to choose from.

To add a Form 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 a “Form”.

4. Drag and drop the Form 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.

By default, there is a reCaptcha option if you want to add captcha to your contact form.
At first, you need to add Site Key and Secret Key in Elementor > Settings > Raven:

Then edit your page and configure Form element settings:

1. Add a new item.

2. Select reCAPTCHA in Type field and configure the styling.

3. Update the page.

Use Growmatik to show highly targeted forms and popups to your website visitors based on their behavior and interests.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Form element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.


Note: With the Form element you can create a Mailchimp form as well as the outline contact form

Flex Spacer Element

How to add space between columns in Flex display

The Flex Spacer element allows you to add automatic horizontal/vertical spacing between elements for Flex column.

Common uses:

  • Between the items to push them away

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.


To add a Flex Spacer element to a page:

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

2. Click on Edit with Elementor button.

3. Click on the Column icon to edit the column settings.

4. Open “Layout” section and set Display option to Flex.


5.
 Go back to Elements list.

6. From the left dashboard, search for a “Flex Spacer”.

7. Drag and drop the Flex Spacer element to your column.

8. A space will appear between the elements.

Spacer vs Flex Spacer

You may notice there is a basic element Spacer you can use.

The difference between them is basic Spacer adds some space only below the elements.

But if you use Flex column and want to push one element to the left and another to the right, the best choice is to use Flex Spacer as it adds horizontal/vertical space between the items to push them to different sides of the column.

Flex Spacer is mostly used for headers when you want to put the logo on the left and navigation on the right.

Flex Display


The Flex Display Layout makes it easier to design flexible responsive layout structure without using float or positioning. The flex property sets the flexible length on flexible items.

It gives you the modern style of laying out content.

And Flex Spacer element will help you to position the items in Flex column properly.

To find out more about the Flex display, please check out this article.

Divider Element


How to add a divider between elements

The Divider element allows you to add a divider between other elements.  You can change the line type, its width and color, and other settings.

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


To add a Divider 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 a “Divider”.

4. Drag and drop the Divider 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.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Divider element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Counter Element

How to create counter in Elementor

The Counter element allows you to show some statistic data with animation. There are a lot of settings you can use to style and configure the element to your needs.

Common Uses:

  • Show customer count
  • Show the project completed
  • Happy Clients
  • Total Number of team
  • Downloads count
  • Members count


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

To add a Counter 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 a “Counter”.

4. Drag and drop the Counter 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.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Counter element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Countdown Element

How to create a countdown

The Countdown element allows you to display a countdown tool that you can use for events such as an opening, marriage, etc. This element basically counts down from a given date and time to the current time.

Common Uses:

  • Opening Countdowns
  • Coming Soon Page
  • Marriage Countdowns
  • Any Event Countdown Timer

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. Also, Elementor Pro (Paid version), has another Countdown element, but in order to see the default Elementor Countdown, you need to look for it in the Elementor knowledgebase. 

To add a Countdown 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 a “Countdown”.

4. Drag and drop the Countdown 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.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Countdown element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Categories Element


How to show categories loop on a page

The Categories element allows you to display categories loop from Blog, Shop or Portfolio post type. It also offers many features like a layout, filter, skin styles, etc. You can change the featured image size, set hover effect and other settings.

Common uses:

  • Showing Blog Categories
  • Showing Portfolio Categories
  • Showing WooCommerce Categories

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. 


To add a Categories 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 a “Categories”.

4. Drag and drop the Categories 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.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Categories element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Button Element

How to add Raven Button element

The Button element allows you to display buttons in various styles, sizes, and colors. It also offers many features like a custom link, icon, animated hover effect, etc. There are many styles and effects that allow you to create different buttons. You can change the typography of the text, change the background, border radius, hover colors and other settings.

Common Uses:

  • Simple Links
  • Block links
  • Animated hover links
  • Download Button links
  • Sign up button links
  • Redirection links
  • Call to action links


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 a Button 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 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. Edit the settings and Update the page.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Button element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Shopping Cart Button

A very useful feature in the Button settings when you want to create a custom Add to Cart button on a page, so there is no need to show a product itself. To achieve this:

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 Raven “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. Enable the option Show as Add to cart button and select the product in the Product option which needs to be added to the cart.

7. Edit the settings and Update the page.

Creating a Gradient Button

To create the following button, follow the steps below:

1. Follow the steps from the first section in this article to add the Button to your page.

2. Configure the settings like shown below:

Style

Width – 200px
Height – 50px
Background Color Type – Gradient
Background Color – #3edbd9
Location – 0
Second Color – #5841b8
Location – 100
Type – Linear
Angle – 15
Border Type – None
Border Radius – 50px All
Text Color – #ffffff

3. Configure the rest of settings as you desire and publish or update the page.

Creating an Animated Button With Icon

To create an animated button, follow the steps below:

1. Follow the steps from the first section in this article to add the Button to your page.

2. Configure the settings like shown below:

Content

Choose Icon – Pick your desired icon.
Hover Effects – Pick your desired hover effect.

Style

Click on Hover.

Background Color – Set a background color that will be displayed upon hover.


3.
 Configure the rest of settings as you desire and publish or update the page.

Creating a “Download PDF” Button

To create a button which will download PDF document on click, follow the steps below:

1. Add a Text Editor element to your page.

2. Upload your PDF through the Text Editor element.

3. Publish the page.

4. Go to the live page and get the URL link pointing to the PDF.

5. Now, in another page, add a Raven Button element and set the Link option to the URL you got in step 4.

Alert Element

How to show an alert box

The Alert Element allows you to display a colored alert box with many styles to draw the attention of your viewers for different purposes.

You can use this element to display dismissable special offers, GDPR and Privacy notifications like the ones you see on this page. It is appearing each time the user opens the page.

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. Right now the default Elementor Alert widget doesn’t have any documents, but you may drag and drop it into your page in order to see the differences between Raven and Elementor Alert widgets.

To add an Alert 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 an “Alert”.

4. Drag and drop the Alert 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.

Responsive Options


You can choose to have different settings on different screen sizes for some of the Alert element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

What is Raven

Raven is a custom developed add-on for Elementor which is adding new useful elements and features to it. So far, we have added 21 custom elements to Raven, and each one can be checked here:

The Raven elements are:

Also, it will add the Custom Header and Footer template features to your Elementor (basic edition). So by enabling Raven plugin, you won’t need to provide an Elementor Pro license to be able to use Custom Header and Footer templates. 

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