How to Create a Custom Post Type in WordPress with JetEngine

Want to create a custom post type in WordPress but have no coding skills? No worries. You can do so with JetEngine. What is JetEngine?

JetEngine is an Elementor add-on that allows you to work with dynamic content. It allows you to create a custom post type in WordPress for a certain need. Before getting started, you might be wondering, what is a custom post type and why you need it?

There are several different content types in WordPress and they are normally described as Post Types. Each Post Type is displayed by a different template file. By default, there are 5 Post Types in WordPress:

  • Post (Post Type: ‘post’)
  • Page (Post Type: ‘page’)
  • Attachment (Post Type: ‘attachment’)
  • Revision (Post Type: ‘revision’)
  • Navigation menu (Post Type: ‘nav_menu_item)

You can visit this page to learn more about Post Type in WordPress.

You can create a custom Post Type if you want to display a certain content type with a custom template. For instance, you can create a Trip Post Type to display the trip plans on a travel agency website. With JetEngine, you can then further process the custom post types such as displaying them on a listing page or anything according to what you want to accomplish.

How to create a custom Post Type with JetEngine

After installing and activating the JetEngine plugin (you can download JetEngine on its official website) you will see a new menu item on the sidebar of the WordPress dashboard called JetEngine. Hover your mouse over it and select Post Types.

Click the Add New button on the top side. On the next page, give your new Post Type a name on the General Settings block. You can also set the slug.

Next, open the Labels block. From this block, you can set the labels for your new Post Type. A label is a text you will see on the WordPress dashboard for a certain action. For instance, if you type “New Trip” on the Add New label, you will see a New Trip text every time you want to add a new custom post.

By default, each label is set to your custom Post Type name and you can change it to your liking.

Once done filling in the fields on the Labels block, open the Advanced Settings block. In this block, you can set things like a Dashicon, display the post types using hierarchy, make an archive, and so on.

Next, open the Meta fields block. In this block, you can add custom meta fields according to what you want to accomplish. For instance, if the custom Post Type you are creating is intended for trip posts, you can add custom meta fields like Title, Date, Price, Image, Gallery, and Number of Persons. The meta fields you will be displayed beneath the WordPress editor.

Meta fields are crucial if you want to create a listing page with Elementor+JetEngine or other page types that deal with dynamic content. There are 16 meta fields you can add. To add one, click the New Meta Field button.

Once done, you can click the Add Post Type button.

If there are meta fields or settings you missed during the custom Post Type creation, you can edit the custom Post Type you created. To do so, go to JetEngine -> Post Types. Click the Edit link on the Post Type you want to edit.

Once you have done with all of the steps above, you should see a new menu item on your WordPress dashboard. You can go to this menu to add a new item/custom post under the custom Post Type you have just created.

Error possibility

After adding a new post on the new custom Post Type you have just created, chances are you will find the page (the page of the post you have just added) doesn’t exist (you will be directed to the 404 page). If this error happens, you can change the permalink setting (Settings -> Permalinks). No, you don’t need to change the current permalink setting. You can temporarily change the permalink setting and revert it back to the previous permalink setting.

This error usually happens because although you have registered your new post type WordPress doesn’t know how to handle it yet.

How to Customize the Single Post Layout in Jupiter X Theme

In the Jupiter X theme, you have nearly limitless possibilities to customize the single post layout. You can change the typography settings, text color, featured image size, and so on. This post will show you how to customize the single post layout in the Jupiter X theme. Before getting started, there is one thing you need to know. There are two single post layout types you can use in Jupiter X: default and custom.

If you use the default single post layout, you can use the Jupiter theme part customizer to customize it. If you use the custom single post layout, you can use Elementor to customize it. We have covered how to create a custom single post layout in Jupiter X in the previous post so, in this article, we will cover how to customize the default single post layout.

First off, go to the WordPress theme customizer page (Appearance -> Customize). Open the Layout section and select your preferred layout.

Next, open Blog -> Blog Single. Make sure the single post layout is set to Default, select the layout you like, disable/enable the elements, and click the Styles tab to start the styling process.

Here are some of the key styling options you might want to set.

  • Featured image

To style up the featured image, click the Customize button on the Featured Image element. On the appearing window, you can set the minimum image height, maximum image height, image radius, and margins. If you want, you can also set the featured image to Full Width.

  • Post title

To style up the post title, click the Customize button on the Title element. On the appearing window, you can set the font style, font size, alignment, bold level, space between fonts, and the margins.

  • Post meta

To style up the post meta, you can click the Customize button on the Meta element. On the appearing window, you can set the font style, font size, bold level, space between fonts, link color, and the margins.

  • Post content

To style up the post content, you can click the Customize button on the Post Content element. On the appearing window, you can set the alignment, font style, font size, font color, bold level, space between lines, space between fonts, and the margins.

Don’t forget to click the Publish button to save the changes you made.

If you use a post layout that contains a sidebar, you can go to Appearance -> Widgets to add the widgets to the sidebar.

How to Create a Custom Single Post Layout in Jupiter X

Jupiter X is one of the most popular premium WordPress themes. This theme is now Elementor-based. All of the key parts of this theme can be created with Elementor, including the single post layout. Artbees, the developer of the Jupiter X theme, develops an exclusive Elementor add-on for the theme. The add-on — called Raven — comes with a number of widgets that you can use to create a custom single post layout.

  • Post Content
  • Post Meta
  • Post Comment
  • Breadcrumbs

Of course, you can also add the featured image as well as the post title thanks to the dynamic content feature offered by Jupiter X.

To get started, go to Templates -> Saved Templates. Open the Single tab and click the Add New button on the top side to create a new template.

Give your template a name and click the CREATE TEMPLATE button.

You can close the templates library window to open the Elementor editor since Jupiter X offers no premade single post templates to choose from.

Start by adding a section by clicking the pink plus icon on the canvas area. Select a structure according to the layout concept you want to create. If you want to create a custom single post layout with a right sidebar, for instance, you can select the two-column structure and set the width of each column.

  • Adding the post title

To add the post title, drag the Heading widget to the canvas area and set the dynamic content to Post Title. You can either use the Elementor’s native Heading widget or Raven’s Heading widget.

Go to the Style tab to style up the widget. You can set the text color and the typography (font size, font style, font family, and so on) from the Style tab.

  • Adding the featured image

To add the featured image, drag the Image widget to the canvas area and set the dynamic content to Featured Image. You can either use the Elementor’s native Image widget or Raven’s Image widget.

Go to the Style tab to style up your image. You can set things like image width, opacity, border radius, and so on.

Note: This is might is a bug or there are some settings you need to make. The image preview doesn’t show on the canvas area, but it appears on the articles.

  • Adding post meta

You can use the Post Meta widget to display the post meta. The items you can display on the post meta are the author, date, time, comments, and terms.

Drag the Post Meta widget to the canvas area and set the layout (vertical or horizontal). You can remove an existing item by clicking the X icon on each icon. To add a new item, simply click the ADD ITEM button.

Go to the Style tab to style up the widget. You can set things like the icon size, space between list, text color, and typography.

  • Adding the post content

To add the post content, simply drag and the Post Content widget to the canvas area.

Unfortunately, there are no styling options offered by the Post Content widget so, like it or not, you have to use the default styling settings of Jupiter X.

Apart from the widgets above, you can also add other widgets to your liking, including the post comments and breadcrumbs. To set the margins and paddings of each widget, you can go to the Advanced tab when styling up a widget.

Click the PUBLISH button once you are done.

To use the custom single post template you have just created, open to the WordPress theme customizer page (Appearance -> Customize). Go to Blog -> Blog Single and set the blog single type to Custom and select the single post template you have just created above. Don’t forget to click the Publish button to apply the new changes.

How to Customize Footer in Jupiter X Theme

Just like other WordPress themes, every part of the Jupiter X theme is also customizable. Footer is no exception. You can customize the footer of the Jupiter X theme to match it with the whole design of your website. Such as the base color, font style, and so on. One crucial thing you need to know before getting started to customize your Jupiter X footer. There are two footer types you can use in the Jupiter X theme: Default and Custom.

  • Default: If you set the footer to Default, you can use the Jupiter X theme part customizer to customize your footer.
  • Custom: If you set the footer to Custom, you can use Elementor to customize your footer.

Jupiter X itself is an Elementor-based WordPress theme that comes with over 200 website templates. A website template is a set of Elementor templates designed specifically for a certain website site. You can import them in a single click. One of the Elementor templates contained on a website template is the footer template.

How to customize the Jupiter X theme footer

Using the default footer

To start customizing the Jupiter X theme footer, you can go to the WordPress theme customizer (Appearance -> Customize). Open the Footer section and set the footer to Default.

Enable the Widget Area option and select the layout you like. On the bottom side, there is also an option to enable the sub footer. You can also enable it if you want.

To style the footer, you can open the Style tab on the Jupiter X theme part customizer window. There are 7 main elements you can style up as you can see on the screenshot below. Click the Customize button on each element to start styling it up.

If you want to change the background color of the footer, you can customize the Widget Area Container element. In addition to changing the color, you can also add a background image if you want.

To add content to the footer, you can go to Appearance -> Widgets. Add the widgets by dragging them to the columns according to the layout you have set or simply click the arrow icon and select your preferred column you want to add the widget to.

Using the custom footer

As mentioned above, Jupiter X comes with over 200 website templates. A website template is a set of Elementor templates. Footer template is one of the templates contained on a website template. To customize a custom Jupiter X footer, first, set the footer type to Custom on the Jupiter X theme part customizer window. Select the footer template you want to edit and click the Edit button.

The Elementor editor will be open once you clicked the Edit button above. To customize an existing widget, click the widget handle to turn the widget into an editing mode and go to the left panel.

You can add new widgets or remove existing ones according to your needs. Click the UPDATE button once you are done customizing.

You can create a new footer template in case you want to use a different footer from the one offered by the website template you use. Jupiter X offers 18 footer templates to save you time in creating a new footer template.

To create a new footer template, you can click the New button on the Jupiter X theme part customizer window. Alternatively, you can go to Templates -> Saved Templates. Click the Footer tab and click Add New button on the top side.

Give your template a name and click the CREATE TEMPLATE button.

Select a footer template you like and click the INSERT button to load to the Elementor canvas.

Same as before, to customize an existing widget, you can click the widget handle to turn the widget into an editing mode. Of course, you can also remove the existing widgets that you don’t need and add new widgets you need. Once you are done, click the PUBLISH button.

To use the new footer template you have just created above, select it on the Jupiter X customizer window when you select the footer type to Custom.

Don’t forget to click the Publish button on the top side apply the new changes.

How to Add a Sticky Video in WordPress with Essential Addons

Sometimes, when writing an article on your WordPress site, you want to add a video as supporting material to insist on what you want to convey. The problem is, if you place the video in the middle of the article or even in the beginning section, it will be invisible as your readers scroll down the page to read on your article. To fix this issue, you can add a sticky effect to the video. By doing so, your video will be pinned to a certain position (usually to the top) to keep it visible as your readers continue reading your lengthy article. Sticky elements on WordPress sites have been around for quite some time and it’s fairly simple to make a sticky menu, sticky header, video widget, or basically any other element of your site. Furthermore, there are a few tools ideal for doing the job, with WP Sticky being one of the most simple and efficient ones.

How to embed a video in WordPress and make it sticky? You can do so using Essential Addons.

Essential Addons is a freemium Elementor add-on developed by WPDeveloper. This add-on has a widget (EA Sticky Video) that you can use to add a video to a page and make it sticky. The widget is available on the free version of Essential Addons so you don’t need to spend a dime if you just need to embed a sticky video. The premium version of Essential Addons itself comes with more advanced widgets like Image Comparison, Instagram, Testimonial Slider, Protected Content, and so on.

How to Add a Sticky Video in WordPress with Essential Addons

Before getting started, you can try to play the video below and scroll the page. You should see the video plays on the top-right corner of the screen.

Both the free version of Essential Addons and Elementor Free are available in the WordPress plugin directory so you can find them on the search box on the WordPress plugin installer (Plugins -> Add New).

There are two ways to add a sticky video with Essential Addons. First, you can add it to an Elemementr-powered page. Second, you can also add it to a regular article you create with Gutenberg.

1. Add a sticky video to an Elementor page

Create a new page (Pages -> Add New) or a new post (Posts -> Add New) and edit it with Elementor.

Add a new section by clicking the pink button to place the video and drag the EA Sticky Video widget to the canvas area.

Go to the left panel. Under the Content tab, set the sticky position and make sure the Sticky option is enabled.

Still under the Content tab, open the Video option and set the video source. You can embed a YouTube video, a video from Vimeo or other sources (Self-hosted). Enable the video controls you want to add.

If you want to create a custom thumbnail for your video, you can open the Image Overlay option and enable the Image Overlay option.

Next, go to the Style tab to style up the appearance of the video player. From here, you set the width of the sticky video interface, scroll height to display the sticky, the color of the close button, and so on. Just play around until you get satisfied with the look.

Click the PUBLISH button on the bottom side on the left panel to publish your page.

2. Add a sticky video to Gutenberg

You can embed the sticky video you created above to Gutenberg with the help of Elementor Blocks for Gutenberg plugin. This plugin helps you to convert an Elementor template into a Gutenberg block.

On the first method above (Add a sticky video to an Elementor page), you can right-click the section handle (section that hosts the EA Sticky Video widget) and select Save as Template.

Give your template a name and click the SAVE button.

Now create a new post or page. Add a new block on Gutenberg and select Elementor Library and select the template you have just created (make sure you have installed the Elementor Blocks for Gutenberg plugin).

Note: the sticky effect works only when the video is being played.

How to Use JetWooBuilder

When creating an online store with WooCommerce, you can use any WordPress theme, but the look of your store might don’t like the one you expected. If you use a free theme, you typically have not many options to customize your store. JetWooBuilder is a plugin that allows you to customize your store, no matter the theme you use. It is especially a great plugin if you are the sort of WordPress user who has no coding skills. With JetWooBuilder, you can customize every single part of your store without touching a single line of code.

JetWooBuilder is an Elementor add-on so all of the customization processes are done via the visual editor of Elementor where everything is drag and drop. In this post, we will show you how to use JetWooBuilder to customize your WooCoomerce-based online store.

How to use JetWooBuilder to customize your WooCommerce-based store

A short intro before we get started. JetWooBuilder is a premium Elementor add-on designed specifically for WooCommerce. It is a member of the JetPlugins, a set of Elementor add-ons developed by Crocoblock.

JetWooBuilder allows you to customize the following parts of your WooCommerce store:

  • Single product page
  • Shop page
  • Product archive pages (categories and tags)
  • Checkout page
  • Cart page
  • Success page
  • Customer account page

You can create a custom template for your store parts above. You can then use the custom template you have created to replace the default parts above. JetWooBuilder comes with several premade templates to save you time in creating a custom template. You can add any element (widget) you want to the custom template you create. After installing and activating JetWooBuilder, you will have a section (JET WOO BUILDER) on the left panel of the Elementor editor that consists of the following widgets.

Single TabsTags (Archive)Cart Empty Message
Single TitleStock Status (Archive)Cart Table
Categories GridSale Badge (Archive)Cart Cross Sells
Product GridRating (Archive)Checkout Payment
Product ListPrice (Archive)Checkout Coupon Form
Taxonomy TilesExcerpt (Archive)Checkout Order Review
Single SharingCategories (Archive)Checkout Billing
Single Add to CartAdd to Cart (Archive)Checkout Shipping Form
Single AttributesTitle (Archive Category)Checkout Login Form
Single ContentThumbnail (Archive Category)Checkout Additional Form
Single ExcerptDescription (Archive Category)Thank You Order
Single ImagesCount (Archive Category)Thank Order Details
Single MetaProducts Result Count (Shop)Thank You Customer Address Details
Single PriceProducts Pagination (Shop)My Account Logout
Single RatingPage Title (Shop)My Account Dashboard
Single Related ProductsProduct Ordering (Shop)My Account Registration Form
Single Review FormProducts Notices (Shop)My Account Login Form
Single Sale BadgeProducts Navigation (Shop)My Account Address
Single UpsellsProducts Loop (Shop)My Account Order
Title (Archive)Cart Return to ShopMy Account Downloads
Thumbnail (Archive)Cart TotalsMy Account Details

Apart from the widgets above, you can add other Elementor widgets to the custom template you are working on according to your needs.

JetWooBuilder is a flexible enough add-on. You can disable the widgets you don’t need via the JetWooBuilder Settings page (JetPlugins -> JetWooBuilder Settings)

1. How to create a custom single product page in WooCommerce with JetWooBuilder

As we mentioned earlier, there are four main parts you can customize with JetWooBuilder: single product page, shop page, product category page, and product archive page. You can customize them by creating a template for each part and apply it via the WooCommerce Settings page.

There are two ways to create a template for a store part. First, you can create a template from scratch. Second, you can create a template from a premade template. In this article, we will demonstrate how to create a template for each store part from a premade template.

Let’s start from the single product page. Assuming you have installed JetWooBuilder and Elementor, go to Crocoblock -> Woo Page Builder.

Click the Add New Template button on the top side, give your template a name, select a premade template (layout), and click the Create Template button.

Once the template is loaded to the Elemetor canvas, you can customize each widget on the Style tab on the left panel. But first, you need to click the widget handle to turn the widget into an editing mode.

If you want to add a new widget, simply drag the widget you want to add from the left panel to the canvas area. To remove a widget, right-click the widget you want to remove and select Delete.

Once you are done creating the template, click the PUBLISH button on the left panel to publish your template.

To use the custom product template you have just created, first, go to WooCommerce -> Settings. Open the JetWooBuilder tab and tick the Enable custom single product page option on the Single Product section and select the template from the dropdown menu. Click the Save changes button on the bottom.

By now, you will have an option to select a custom product template every time you are adding a new product. You can find it on the lower side on the left panel.

You can create another custom product template if you want to use a different product template for certain products.

2. How to create a custom shop product page in WooCommerce with JetWooBuilder

After installing WooCommerce on your WordPress site, you will have a new shop page (yourdomain.com/shop). You can also create a custom template with JetWooBuilder to replace the default shop page offered by your theme.

Go to Crocoblock -> Woo Page Builder. Click the Add New Template button on the top side, select Shop on the This template for section, give your template a name, select a premade template, and click the Create Template button.

Once the template is loaded to the Elementor canvas, you can go to the Style tab on the left panel to customize each widget. Click the widget handle to turn the widget you want to customize into an editing mode. You can add new widgets or remove the existing ones to your liking. Click the PUBLISH button once you are done customizing the widgets.

To use the custom shop page template you have just created above, go to WooCommerce -> Settings. Open the JetWooBuilder tab, tick the Enable custom shop page option on the Shop Page section, and select the template you have just created from the dropdown menu. Click the Save changes button on the bottom.

3. How to create a custom product category page in WooCommerce with JetWooBuilder

To create a custom product category page template, go to Crocoblock -> Woo Page Builder. Click the Add New Template button on the top side, select Category on the This template for section, give your template a name, select a premade template, and click the Create Template button.

Again, you can go to the Style tab on the left panel to customize each widget once the template is loaded to the canvas. Add the widgets you want and remove the unneeded widgets. Once done, click the PUBLISH button to publish your template.

To use the custom product category page template you have just created above, go WooCommerce -> Settings. Open the JetWooBuilder tab and scroll down to the Archive Category section. Tick the Enable custom archive category option, select the custom product category page template you have just created from the dropdown menu and click the Save changes button on the bottom.

4. How to create a custom product archive page in WooCommerce with JetWooBuilder

Same as other parts above, you can go to Crocoblock -> Woo Page Builder to create a custom product archive page. Click the Add New Template button, set to Archive on the This template for section, give your template a name, select a premade template you like, and click the Create Template button.

Again, you can go to the left panel to customize each widget. You can add more elements if you want. Before clicking the PUBLISH button to publish your template, you can set the template columns. To do so, click the gear icon on the bottom-left corner on the left panel, open the Template Settings option and enable the Use custom columns count option and then set the template columns.

To use the custom product archive template you have just created above, go to WooCommerce -> Settings. Open the JetWooBuilder tab, scroll down to the Archive Product section, tick the Enable custom archive product option, and select the template from the dropdown menu. Click the Save changes button.

That’s it. See, you can customize your WooCommerce store without coding. You can play around to explore more about JetWooBuilder.

A little note when working with JetWooBuilder, especially when creating a custom single product page template. Make sure you already have at least one product in order to be able to see the live preview of every change you make on the customizing/styling process. Also make sure to add the key attributes like price, product image, and stock to your products.

Where to Get JetWooBuilder?

We have explained at length about JetWooBuilder, but haven’t mentioned where you can get it. You can download this plugin on its official site.

How to Customize Header on Jupiter X Theme

Every part of the Jupiter X theme is customizable, including the header. In Jupiter X, you can customize the header whether using Elementor or Jupiter X’s default theme part customizer. You can customize the Jupiter X header using Elementor since Jupiter X is an Elementor-based WordPress. Most components of this website are built with Elementor. In Jupiter X, Elementor is one of the required plugins you need to install. Another required plugin is Jupiter X Core.

Jupiter X Core plays a role to provide an additional GUI to the WordPress theme customizer. This GUI can be used to customize the Jupiter X theme parts, including the header.

Customizing the Jupiter X Header Using the Default Theme Part Customizer

To customize the Jupiter X header using the default theme part customizer, you can open the WordPress theme customizer (Appearance -> Customize). The first thing you want to do might is to change the site logo. To do so, open Site Identity -> Site Logo.

There are 8 different logo types you can upload.

To start customizing the header, open the Header section and set the header type to Default.

As you can see, there is an option to set the alignment (left or right), to enable the overlap content option, and to enable the full-width option. On the Display Elements section, you can hide/show the elements you want. In the Behavior section, you can set the behavior of the header. Whether static, fixed, or sticky.

To customize the look of the header, you can open the Styles tab. There are five elements you can customize their look: logo, menu, submenu, search, container. Click the Customize button on the element you want to customize.

Let’s take an example.

To customize the menu, you can click the Customize button on the Menu element. From the appearing window, you can set things like the color of the background, font style, font size, font color, hover color, and so on.

Don’t forget to click the Publish button to apply the changes you have made.

Customizing the Jupiter X Header Using Elementor

To customize the Jupiter X header via Elementor, you also need to go to the WordPress theme customizer (Appearance -> Customize). Open the Header section, set the header type to Custom and select a header template you have. Click the Edit button to edit the header template you selected. This will open the Elementor editor.

You can use the Elementor editor to customize the header template. You can add any element you want to the header. To customize an existing element (widget), click the widget handle to turn it into an editing mode and go to the left panel to customize it.

If you want to create a new header template, you can click the New button on Jupiter X theme part customizer window.

Or you can also go to Templates -> Saved Templates. Open the Header tab and click the Add New button.

Give your header template a name and click the CREATE TEMPLATE button.

Jupiter X offers 20 header templates that you can use to save you time in creating a header template. Select a template you like and click the INSERT button to load it to the Elementor canvas.

Again, you can use the Elementor editor to customize the header template. You can add any widget you want. Once you are done, click the PUBLISH button to publish your header template. To use it, you can select it via the Jupiter X customizer window when you select the header to Custom.

How to Display Google Calendar Events in WordPress Using Essential Addons

Want to display Google Calendar events on your WordPress website? Essential Addons is one of the plugins that you can use to do so. This plugin allows you to display calendars on your Google Calendar account in an easy way. You just need to connect your Google Calendar to your WordPress using an API and get the calendar ID to retrieve the events calendar. You can then customize the look of the calendar using Elementor’s visual editor.

Wait, Elementor?

Yes. Essential Addons is an Elementor add-on. This add-on comes with a widget that you can use to display calendar events. The calendar can be created manually. Or — as we will cover on this article — you can also display your Google Calendar events. Essential Addons itself is a freemium add-on. You can use the free version to display your Google Calendar events. So is Elementor, you can also use the free version. You can click the button below to see the demo of the Google Calendar events we have.

While you can use Essential Addons for free, there are several advanced features offered by the premium version, including a widget to create a 360-degree visual tour.

How to Use Essential Addons to Display Google Calendar Events in WordPress

Step 1: Get the Google Calendar API Key and Calendar ID

  • Google Calendar API Key

To get the Google Calendar API key, visit Google API Console and login with your Google account. If you have no project yet, create a new one by clicking the dropdown menu on the top side. Click the NEW PROJECT button to create a new project.

Give your project a name and click the CREATE button.

Once your new project is created, select it via the dropdown menu on the top side. Next, click Library on the left panel.

Scroll down to the G Suite section and click Google Calendar API. Click the Enable button to enable the Google Calendar API.

Return to the Google API Console main dashboard (by clicking the Google API logo) and click Credentials on the left panel. Click the CREATE CREDENTIALS button and select API key.

Copy the API key from the appearing popup.

  • Calendar ID

To get the calendar ID, visit Google Calendar and login with your account. Hover your mouse over a calendar you want to display, click the three-dot icon, and select Settings and sharing.

Scroll down to the Integrate calendar section and copy the calendar ID.

Step 2: Start Displaying the Calendar

Before getting started, make sure you have installed both Elementor and Essential Addons. Once you are ready, create a new page (Pages -> Add New) or a new post (Posts -> Add New) and edit it with Elementor.

Before start creating the page, set the page layout first by clicking the gear icon in the bottom-left corner. Set the page layout from the dropdown menu on Page Layout.

Add a new section by clicking the pink plus button on the canvas area and add the EA Event Calendar widget.

Go to the left panel. On the Source section under the Content tab, set to Google.

Open the Google Calendar option and paste the API key and the calendar ID you have just created above.

That’s it. You should see your Google Calendar events. If the calendar is not loaded in the canvas area of Elementor, try to preview your page (by clicking the eye icon on the bottom side on the left panel).

To customize the look of your calendar, you can go to the Style tab. From here, you can set the background of the calendar, the typography (font size, font style, font family, and so on), text color, and so on. Just play around until you get satisfied with the result.

How to Manage Plugins in Jupiter X Theme

Jupiter X is an Elementor-based WordPress theme. It is bundled with a number of Elementor add-ons and other plugins. The total of plugins included in the Jupiter X theme bundle is 24. Not all plugins are required, though. Out of 24, there are only 4 required plugins. The rest are recommended plugins. To lighten your website, you are suggested to activate only the plugins you really need. The question, how to manage plugins in Jupiter X theme?

In WordPress, you can go to Plugins -> Installed Plugins to manage the plugins. From here, you can deactivate the active plugins, activate the inactive plugins, and delete the installed plugins, and so on. However, using the WordPress default plugins manager might is a bit hassle if you have too many plugins installed on your website. Jupiter X has its own plugin manager which you can access via theme panel.

How to install, activate, delete, and update a plugin in Jupiter X theme

To access the Jupiter X plugins manager, go to the Jupiter X theme panel and open the Plugins tab. As you can see, all of the plugins associated with Jupiter X are listed here. You can filter the list by the active plugins and inactive plugins.

All of the required plugins have a Required label, while the recommended plugins have an Optional label. To install a new plugin, you can filter the plugins by the inactive plugins by clicking the Inactive tabs. Click the Install button on the plugin you want to install to install it.

To activate the installed plugin (but not activated yet), you can simply click the Activate button on the plugin you want to activate. You can also go to the Inactive tab to make it easy for you to find the inactive plugins.

To delete a plugin, you can click the Delete button on the plugin you want to delete. Go to the Inactive tab to make it easier for you to find the plugins you want to delete.

To deactivate an active plugin, you can click the Deactivate button on the plugin you want to deactivate. You can go to the Active tab to make it easier for you to find the active plugins.

To check if there are newer versions of the plugins associated with Jupiter X, you can go to the Updates Available tab. Simply click the Update button to update a plugin.

If you have a WordPress site with several administrator-level users and want to prevent them from making administrative actions (such as installing, activating, or deleting a plugin), you can edit the wp-config.php file to change your WordPress configuration. You can add the following line.

define('DISALLOW_FILE_MODS', true);

You can read this article to learn more.

Jupiter X also allows you to hide the Plugins tab on the theme panel using the white label feature. Learn more here.

8 Best Add-ons Alternatives to Elementor Pro

Using the free version of Elementor, you only touch the surface area of the Elementor ocean, which is extremely deep. The premium version of Elementor comes with advanced features like theme builder, popup builder, global widget, dynamic content, form builder, and a number of extra widgets. One of the reasons why some users don’t want to upgrade to Pro is because Elementor accepts only a subscription-based payment option. The same case as Adobe’s products. Today, all of Adobe’s products, including Photoshop and Lightroom, are only available with a subscription-based payment option. Something that many users complain about.

Many WordPress users love Elementor because it has a very light interface that offers a pretty cool user experience. No need to click a button to save a change, live-preview, wide canvas area. You name it.

If you are the sort of person who hates a subscription-based payment model, there are lots of add-ons you can install to replace Elementor Pro features that you can get with a one-time purchase option. Here is the list we recommend.

Theme Builder Alternative: Raven

One of the key features offered by Elementor Pro is the theme builder. This feature allows you to create a WordPress theme without coding. You can create custom theme parts like the header, footer, single post layout, 404 page, archive page, and so on using Elementor visual editor. A custom theme part you created with Elementor will replace the default theme part of your active theme. Elementor Pro has the following widgets that you can use to create a custom theme part:

  • Nav Menu
  • Post Title
  • Post Content
  • Post Excerpt
  • Post Comment
  • Post Info
  • Author Box

Raven has widgets to replace the Elementor Pro widgets above to allow you to create a custom theme part. Here are the key widgets offered by Raven:

  • Navigation Menu
  • Post Content
  • Post Meta
  • Post Comments
  • Site Logo
  • Posts
  • Breadcrumbs

In addition to the widgets above, Raven also has other widgets that you can use to add creative elements to a page, including Form, Tabs, Post Carousel, Photo Roller, and so on. You can our article here to learn more about Raven.

Raven itself is developed by Artbees, the developer of Jupiter X theme.

Popup Builder Alternative: JetPopup

The popup builder of Elementor is pretty cool. You can use it to create a beautiful popup without dealing with CSS or HTML. There are pre-made templates you can choose from to save you time in creating a popup. You can use the popup builder of Elementor to create any sort of popup. From promotional popups, email subscription form popups, notification popups to a popup to create a full-screen menu. The popup builder of Elementor supports display conditions, allowing you to display a popup on a certain page within your website. You can also set how a popup appears.

JetPopup — developed by Crocoblock — is a great alternative to Elementor popup builder. The features offered by JetPopup are not much different from Elementor’s popup builder where you can also set where and how a popup appears. JetPopup supports the following trigger types:

  • On page load
  • Inactivity time after
  • Page scrolled
  • Try exit
  • On date
  • Custom selector click

There are 6 popup layouts that you can use to create a popup: classic, slide in, bar, bordering, full view, and full width. JetPopup also offers popup templates. There are about 64 popup templates you can choose from.

You can read this article to figure out the comparison between JetPopup and Elementor popup builder.

Form Builder Alternative: Raven

The pro version of Elementor has a Form widget that you can use to create a form. You can use it to create forms like a contact form, email subscription form, submission form, and so on. Some premium Elementor add-ons like Essential Addons and Happy Addons actually have widgets to create a form. However, they don’t really allow you to create a form. Instead, the form is created via a third-party plugin (such as WPForms, Contact Form 7, and Gravity Forms), while the widgets they offer can only be used to style the form.

The Raven’s Form widget is different. It allows you to create a form, not just styling a form. There are about 14 field types that you can use to create a form with Raven, including Email, Date, Time, and Checkbox.

The Raven’s Form widget can be integrated with Mailchimp and HubSpot. If you use a form backend service like Getform and Formcarry, you can also connect your form with it thanks to the webhook integration.

Global Widget Alternative: WunderWP

Elementor Pro has some features to ease your job in creating a page or website, including global widgets.

What is a global widget?

When adding a widget to the canvas area of Elementor, you can add some styling options to make it look appealing. Once you are done with the styling process, you can save the widget as a global widget. A global widget is a widget with the styling options you have added to it. A global widget is reusable. You can add it to every new page you create.

WunderWP is an add-on that adds similar functionality to Elementor Free. This add-on allows you to save a widget you have customized for recurring use. The difference, the customized widgets are stored in the cloud. This gives you an advantage since you can use the widgets on different websites (websites on different domains).

In addition to allowing you to store customized widgets to the cloud, WunderWP also offers pre-made page templates and section templates. You can read our article here to learn more about WunderWP.

Dynamic Content Alternative: JetEngine

The dynamic content feature of Elementor Pro allows you to add dynamic content to a web page. The easiest example of the implementation of dynamic content is the featured image on the single post layout. The image will dynamically change according to the featured image you set on a single article. Elementor itself supports several dynamic content types. From post meta, archive description, archive meta, site title, data, author info, post URL, and so on.

JetEngine is an add-on that adds similar functionality to Elementor’s dynamic content feature. With JetEngine, you will be able to add dynamic image, dynamic link, dynamic terms, and dynamic meta (date, author, number or comments). JetEngine can also be used to create a custom post type in WordPress.

WooCommerce Builder Alternative: JetWooBuilder

Elementor Pro has some widgets that you can use to create an e-commerce website with WooCommerce. JetWooBuilder is a great alternative that you can use to create an e-commerce website with WooCommerce. This add-on allows you to create a custom single product page, a custom archive product page, a custom product category page, and a custom shop page. There are several widgets you can use to create those custom pages.

JetWooBuilder also offers premade templates for single product page, product category page, and archive product to save you time.

Motion Effects Alternative: JetTricks

Elementor Pro allows you to create an attractive web page with several animation effects like parallax, flip box, scrolling effects, mouse effects, and 3D tilt effect. JetTricks is the add-on you need if you want to add animation effects to the page you are working on. This add-on allows you to add effects like parallax, sticky column, section particles, unfold, and hotpots.

Pro Widgets Alternative: JetElements

Elementor Free offers only about 30 widgets, while Elementor Pro offers more than 90 widgets (read: Elementor Free vs Elementor Pro).

In Elementor Pro, you have creative elements like Slides, Animated Headline, Price List, Price Table, Call to Action, Flip Box, and so on.

You can install JetElements to add extra widgets to your Elementor Free. This add-on comes with some creative widgets that are not available on Elementor, even Elementor Pro. Some key widgets offered by JetElements are:

  • Advanced Map
  • Instagram
  • Image Comparison
  • Pie Chart
  • Pricing Table
  • Team Member
  • Dropbar
  • Vertical and Horizontal Timeline

JetElements adds 34 extra widgets to your Elementor in total.

Where to Get Those Add-ons?

All of the Elementor add-ons we covered above are available on the Jupiter X theme bundle. You can get all of the add-ons above with a one-time purchase option for $59.

Wait a moment.

With only $59, you will get a theme with $204 worth add-ons. Jupiter X is an Elementor-based WordPress theme that is bundled with JetPlugins, a set of premium Elementor add-ons developed by Crocoblock. The JetPlugins members included on the Jupiter X theme bundle are:

  • JetBlog: $15 /year
  • JetElements: $19 /year
  • JetEngine: $19 /year
  • JetMenu: $19 /year
  • JetPopup: $19 /year
  • JetSmartFilters: $19 /year
  • JetTabs: $15 /year
  • JetTricks: $15 /year
  • JetWooBuilder: $19 /year

If you buy those add-ons individually, you need to spend a $159 yearly budget. Again, you can get those add-ons with a one-time purchase option with the Jupiter X theme bundle. Plus, you will also get over 250 website templates and over 100 Elementor block templates.

How to Create Interactive Image Hotspots in WordPress Using Essential Addons

Image is a great tool to convey a piece of information. Everyone knows that information conveyed via image — and visual form at large — is easier to understand and remember. In the context of the web, there are lots of image formats you can use. From an infographic, photo, comic, illustration, and so on. If you want to create web content like the anatomy of something, city landmarks, maps, or instructions, creating image hotspots might is a great idea.

The idea of this content type (image hotspots) is to provide an interactive image that makes it easy for your readers to understand the information you convey. You can add hotspots over an image that contains a tooltip on each hotspot. Here is an example.

If you have a WordPress-based site, creating an image with hotspots like the one above is not too hard to do. You can create one using Essential Addons.

What is Essential Addons?

Essential Addons is an Elementor add-on. It is one of the most popular Elementor add-ons with over 2 million downloads. This add-on adds about 60 extra widgets to your Elementor. One of the widgets offered by Essential Addons is EA Image Hotspots which you can use to create an interactive image like the one you can see above. Essential Addons itself is a freemium add-on, but you need to use the pro version to create image hotspots since the EA Image Hotspots widget is only available on the pro version.

How to use Essential Addons to create image hotspots

First, you need to install Essential Addons and Elementor on your WordPress. You can get the pro version of Essential Addons on its official website. While for Elementor, you can use the free version. The free version of Elementor is available on the WordPress plugin directory so you can install it by typing “elementor” on the search box of plugins installer (Plugins -> Add New).

Once Elementor and Essential Addons are installed, create a new page (Pages -> Add New) or a new post (Posts -> Add New) and edit it with Elementor. You will be taken to the Elementor editor after clicking the Edit with Elementor button.

Before creating the hotspot images, you might want to set the page layout first. To do so, open the page settings panel by clicking the gear icon on the bottom-left corner on the left panel. Set the page layout from the dropdown menu on Page Layout.

Add a new section by clicking the plus icon on the canvas area and add the EA Image Hotspots widget from the left panel.

Add your image by clicking the image selector on the left panel.

Open the Hotspots option on the left panel to add the hotspots. By default, the EA Image Hotspots widget contains a hotspot. You can click the default hotspot to edit its content. By default, the hotspot type is set to Icon. You can change it to Text or Blank if you want.

Click the POSITION tab to set the position of the hotspot. Set X and Y positions by sliding the sliders.

Click the TOOLTIP tab to add the content to the tooltip. Enable the tooltip and add your content via the editor. You can also set the position of the tooltip whether on the top, bottom, left or right.

To add more hotspots, simply click the ADD ITEM button on the Hotspots option and repeat the steps above to set the hotspot position, tooltip content and tooltip position.

Open the Tooltip Settings option to set the size of the tooltips and the animation effect.

Now go to the Style tab to style your hotspots as well the tooltips. First off, open the Image option to set the size of the image.

Open the Hotspot option to customize the hotpots. You can set the size, the icon color (or text based on the hotspot type you selected), the background color, border radius, and paddings.

Open the Tooltip option to customize the tooltips. You can set the background color, the text color, typography (font size, font family, font style), and the width.

Until here, you have successfully created the image hotspots. You can play around with the left panel to customize your image hotspots until you get satisfied with the result. Once you are done, you can click the PUBLISH button to publish your page.

Embedding the image hotspots to Gutenberg

If you want to make the image hotspots you have just created above as the supporting material for the article you are working on, you can embed it to Gutenberg (the default WordPress editor) using the Elementor Blocks for Gutenberg plugin. This plugin allows you to use an Elementor template as a Gutenberg block (read here to learn more).

To save the image hotspots above as an Elementor section template, right-click the section handle and select Save as Template. Give your template a name and click the SAVE button.

Open the article you want to add the image hotspots to. Add a new block, select Elementor Library and select the image hotspots template you have just created (make sure Elementor Blocks for Gutenberg has been installed).

Pin It on Pinterest

Creating with WordPress?‚Äč

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.