How to customize your portfolio list with Jupiter X

customize your Portfolio List with Jupiter X Featured Image

A portfolio is an essential section in your website for building your professional brand and getting more business to come in. A good-looking portfolio can open a lot of doors to meeting (and impressing) potential clients. Often, you can make a great first impression with your site visitors after viewing your online portfolio, so creating a powerful portfolio page can be extremely crucial to the future of your business.

A decent portfolio must cover a lot of bases. Apart from actually showcasing your work, the text alongside each piece must give the right level of context. Not only that, but it must also be designed well enough to catch people’s attention without shifting focus away from the work itself.

Making a portfolio attractive, organized, and easy to maintain can be challenging, and Jupiter X does just that. Jupiter X helps you create a unique and beautiful portfolio that looks stunning on all devices and screen sizes, in a matter of minutes.

Jupiter X uses the Raven Posts element for creating and displaying Portfolios with Elementor. The Posts element allows you to display posts from Portfolio post type. It also offers many features such as layout, filter by categories, pagination styles, and more. You can also change the featured image size, set excerpt length and change “Read More” button text and other settings.

When you create and customize your portfolio list with Jupiter X, you can:

  • Show/Hide portfolio meta elements such as Featured Image, Title, Category, Excerpt, etc.
  • Show/Hide Portfolios based on Portfolio Name, Category, or Tags.
  • Define the number of columns and rows of portfolios in the list and the space between rows and columns.
  • Enable/Disable pagination option.
  • Enable/Disable portfolio Sorting.
  • Show Portfolios in two layouts — Grid and Masonry.

In this article, we will guide you step by step through learning how you can customize your portfolio list with Jupiter X by a practical example. But before customizing the Portfolio List page, you must create it.

Creating a single Portfolio Post

  • From your WordPress left menu, go to Portfolios and click on Add New.
  • Enter a title and click on Edit with Elementor button or use default WordPress editor to add your content to a post.
customize your Portfolio List with Jupiter X 1
  • Add the needed content to your post.
  • Publish the post and check the result.

Note: If you don’t see Edit with Elementor button in the Portfolio Post editor, you need activate it in Elementor > Settings as described in this article.

After adding portfolio posts, the next step is to add a Portfolio list page by Creating a custom Portfolio page. In order to display the content of the Portfolio post type in your Elementor’s layout:

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

2. Click on Edit with Elementor button.

customize your Portfolio List with Jupiter X 2

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

customize your Portfolio List with Jupiter X 3

4. From the Content tab and within the Content section, set the Source of the posts to Portfolio

customize your Portfolio List with Jupiter X 4

5. Update the page.

Customizing Portfolio List with Posts widget

After creating Portfolio Page, you will be able to customize your portfolio list with Jupiter X Raven Posts widget. To modify the portfolio list you’ve created:

1. From the WordPress left dashboard, go to Pages > Portfolio Page > Edit with Elementor. A new dashboard on the left will open with the element’s settings.


Here are the all available options in Raven Posts Widget Content tab:

You can show/hide the element parts in the settings. Here is the list of things you can show or hide on the Posts element:

  • Feature Image
  • Post Title
  • Categories
  • Author
  • Date
  • Comments
  • Excerpt
  • CTA Button
  • Pagination
  • Sortable

When you show/hide these options in settings, they will automatically show/hide in the Style tab.


Here is the description of all available options for styling elements which can be found in the Styles tab by clicking on Customize for a specific element.

There are also general settings for the options that you enabled in the “Content” tab in the Settings section:

  • Feature Image
  • Post Title
  • Meta
  • Excerpt
  • CTA Button
  • Pagination
  • Sortable

Case Study

Let’s pretend that we want to create a Portfolio List page with 2 columns and 6 posts per page (demo is shown below). Your Sortable option should be enabled as well to sort the portfolios based on Portfolio Categories.

Here’s what you can do:

1. Create a Portfolio List page as described before.

2. Go to WordPress left Menu > Pages > Portfolio Page > Edit with Elementor.

It would look like this:

customize your Portfolio List with Jupiter X 6

3. Edit the Raven Posts Element, and in the Content tab set the Skin to Outer Content, while in the Settings Tab, let’s customize the following Settings:

  • Layout: Grid
  • Image Size: Full
  • Title HTML Tag: H3
  • Hover Effect: None

We also enable the Featured Image, Post Title, Category, Excerpt, Category, and All Title Options.

customize your Portfolio List with Jupiter X 7

4. It’s time to style the elements you’ve enabled for portfolio posts. So, navigate to the Styles tab. You can see all the available items you can customize there.

Let’s start with customizing the Container:

  • Column Spacing: 20px
  • Row Spacing: 20px
  • Font Weight: 700
  • Border: Solid
  • Border Width: 1px
  • Color: #eaeaea

Leave the Padding, Alignment and Background color, Border Radius and Box Shadow as they are.

customize your Portfolio List with Jupiter X 8

Featured Image

  • Image Ratio: 0.63
  • Image Width: 100%
  • Image Position: top
  • Opacity: 1
  • Hover:
  • Overlay Color: rgba(27,188,155,0.63)

Leave other Featured Image Style options as it is.

Post Title

  • Typography:
  • Font Family: Roboto; Size: 14px; Weight: 700;
  • Spacing: 0 0 0 15px
  • Color: #00bc9600bc96

Leave other Post Title Style options as it is.


  • Typography:
  • Font Family: Roboto; Size: 14px; Weight: 700;
  • Spacing: 15px 0 0 0
  • Links Color: #d6d6d6

Leave other Meta Style options as it is.


  • Excerpt Length: 30
  • Typography:
  • Font Family: Roboto; Size: 14px;
  • Spacing: 0 30px 18px 15px
  • Color: #888888

Leave other Excerpt Style options as it is.


  • Container Spacing: 50px 0px 50px 0px
  • Spacing: 10px
  • Padding: 14px 16px 14px 16px
  • Alignment: Left
  • Color:
    • Normal: #323232, Active: #323232, Hover: #1bbc9b
  • Background Color:
  • Normal:None, Active: rgba(0,0,0,0.08), Hover: None
  • Typography:
  • Font Family: Roboto; Size: 14px; Weight: 700;

Leave other Sortable Style options as it is.

5. After you’re done with all the customizations, simply publish or update the page. The page should now look like this:


In this article, we’ve explained how you can create and customize your  Portfolio List with Jupiter X. Are you ready to wow your site visitors with your own portfolio page?


Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

How to Add Amazing Visual Effects to Your Content with Jupiter X

Add Amazing Visual Effects to Your Content with Jupiter X Featured Image

Visual effects such as parallax, sticky elements, unfolding contents, hotspots, web particle animation, and more. are helpful in almost every kind of website. E-commerce websites, for instance, can present their products better with hotspots on product images.

Landing pages can tell better and shorter stories – which translates to less bounce rate – with sticky elements or unfolding content. Parallax effect is also quite handy when creating eye-catching content. Normally, you would spend extra for different plugins. But with Jupiter X, they are all included for free in one plugin called JetTricks.

Add Amazing Visual Effects to Your Content with Jupiter X 1

Different Ways to Add Amazing Visual Effects to Your Content with Jupiter X

To make your content more useful and interesting to read, the rich library of visual effects available in JetTricks plugin is at your disposal. There are numerous cases where you can use these effects, but here are some of them:

1. Parallax effect is everywhere and it can be used to add a 3D depth to your content. Use it to create your static pages more dynamic and captivating! Parallax Effect Demo

2. Sticky elements are great in creating a custom scrolling experience. Make an important part of your content fixed while the rest scrolls down. Sticky Elements Demo

3. Unfolding columns and view more content effects are what you see in most introductory landing pages. Offering a long description does no good to your page bounce rate. By hiding a chunk of it and make a section optional to read, you can make your pages more effective. Unfolding column demo and View more content demo

4. Hotspot on images is a great addition to your online shop. You can also use it for more descriptive and interactive images across your website. Hotspot on Images Demo

5. Your pages don’t have to be boring. Add some smooth loop animations to your page backgrounds or banners to grab the attention of your site visitors and keep them interested. Loop Animations Demo

6. Use tooltips to create more informative yet less crowded pages. Perfect for eCommerce and product landing pages. Tooltips Demo

Easy Customisation

Working with visual effects in JetTricks is as easy as using Elementor editor! Every change you make is instantly available for preview and deeply customizable. There are also limitless possibilities and combinations you can try when you add amazing visual effects to your content with Jupiter X.

Add Amazing Visual Effects to Your Content with Jupiter X 2
You can use any JSON code to create particles with unlimited characteristics.

How it works

Jupiter X comes bundled with the JetTricks plugin for free. It’s deactivated by default, but you can activate it via the plugin manager in your Jupiter X control panel. When activated it, adds its settings to the existing Elementor elements such as columns, heading, an image, or completely new elements such as view more element and unfolding element.

So, what are you waiting for? You can now add amazing visual effects to your content with Jupiter X, so start vamping up your site today.



Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Meet Jet Engine! Your New Super Power To Create Custom Post Types With Jupiter X

One of the key factors when assessing a WordPress theme’s customizability is the number of post types it offers to its users. Post types enable you to build different types of content on your website. Literally, everything you build into your website should be hosted by a post type.

Posts, pages, and attachments are some WordPress native post types that are readily available upon WordPress installation. Based on the WordPress theme you use, you may have custom post types to create a wider range of content on your website. Some of the usual custom post types themes offer are portfolio, employees, testimonials, client, products, and sliders.

The Problem with Pre-built Custom Post Types

Custom post types are usually built into a theme’s core. It can increase the theme’s size and affect its speed and performance. You may have come across themes that offer custom post types you never use. You may have noticed that they just occupy some space in your WordPress dashboard navigation and reduce your websites admin’s speed. And this is one of the reasons the most customizable themes are the slowest ones, too!

So, is it possible to think about ultimate customizability with an infinite number of post types without affecting the theme’s speed and performance?

YES! Jupiter X, for the first time, turned many of the features that are commonly offered as post types to elements to save users a lot of time and effort. So, instead of creating posts in the WordPress dashboard, you can visually create elements such as employees, clients, and testimonials within Elementor and see the results in real-time.

Your WordPress dashboard sidebar is now free of post type items. You can activate the plugins like Raven and JetElements to access these elements only if you need them. If you don’t need them, you won’t have to import them and you can enjoy your theme at its highest performance.

Is that all?! Are we bound to elements and post types that Jupiter X offers?!

I’m happy to say ‘NO’ this time! 😀 Jupiter X recently added another member from the great Jet plugins family to the arsenal of plugins it offers to its users for free: JetEngine!

What is JetEngine?

JetEngine enables you to create new post types, taxonomies, and custom fields without any programming experience. You are no longer limited to post types built into your theme. You can simply build your own post type, add custom meta fields, customize its appearance and layout, and use them wherever you want.

Imagine: You don’t like the Team Member element in Jupiter X elements library to showcase your team member or you have a wide range of services with special meta fields and design needs. Or let’s say you want to build a website for a client with a wide range of products and you don’t want to add all of the content by yourself. You can simply create custom post types with Jupiter X and use them in your or your client’s website.

What’s more is that there is no coding involved and you will create the custom post types using Elementor page builder, for which you formerly needed to have good PHP skills!

What does JetEngine offer?

JetEngine offers special widgets for pulling dynamic content from the posts and displaying them in your custom post types.

Dynamic field

Display the meta content from a defined source and customize its appearance however you want.

Dynamic image

Display dynamic featured images in your custom post type and customize its appearance.

Dynamic repeater

Display dynamic repeaters in your custom post types using a defined source and enjoy infinite customizability.

Dynamic link

Add dynamic links to any custom post type.

Dynamic terms

The best way for showcasing dynamic taxonomies added to any posts or pages when creating a template with Elementor is using Dynamic Terms widget, that’s specifically cut for these purposes.

Dynamic meta

Display the publication date, information about the author, and/or the number of comments by adding Dynamic Meta widget to the template.

Listing grid

Use eye-catching Grid, Masonry and Justify layouts to display custom posts types and customize its appearance the way you want.

How to create custom post types with Jupiter X?

Let me quickly summarize how to create custom post types with Jupiter X. For a custom post type you need to create:

Post type

From the WordPress navigation bar, try:

JetEngine > Post Types > Add New

In the upcoming page, set the general settings about the custom post type first. For example, if you want to set this post type to public or private, change its appearance in WordPress navigation, or choose the sections you want to be available in the single page, and so on.

Then, you should define the meta fields you want in your custom post type. This can be a custom text, date, time, media, selector, or many other things.

A listing that uses that post type

Second, you need to create a listing in which your post type will be used. For that, try:

JetEngine > Listings > Add New

You can choose the post type you just created and then give its listing a name. Then, click on ‘Create Listing Item’

You will then be taken to the Elementor editor mode where you can create the layout of the listing for your post type however you want, just like your usual building experience with Elementor.

And that’s it! You just created a custom post type with the meta options you wanted and then created a listing where that custom post type can be used. You can now call your custom post inside your page using Listing Grid element:

You can define up to 6 columns for your listing grid within the Listing Grid element.

How to create custom post types with Jupiter X?

In this short post, we introduced the JetEngine plugin and showed you how to create custom post types with Jupiter X. If you want a more thorough explanation of the plugin, you can check the official documentation as well as the video tutorial below. Have fun and let me know if you have any questions regarding this new Jupiter X power ball!


Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

How to create custom 404 pages with Jupiter X

how to create custom 404 pages with Jupiter X featured image

Sometimes, when we surf the internet, we encounter a 404 page (Page Not Found). But, what exactly does it mean? A 404 page is displayed when we want to see a page that does not exist. We may follow a broken link or type an incorrect link so the server responds to the browser request with an HTTP 404 code, hence, we see a 404 page.

For all Content Management Systems (CMS) and websites, there’s a default 404 page that’s displayed on appropriate situations. In this article, we’ll show you how to create custom 404 pages with Jupiter X, and how to improve and customize them the best way.

Key points to have a better 404 page

We can add some helpful sections in a 404 page to improve the usability of the page. In this article, we’ll show you how to optimize sections of your 404 page. Here are some of the things you can do:

  • Display recent posts/portfolios
  • Add a call to action button
  • Add a search form

How to customize default 404 page

Jupiter X is backed by an extremely powerful API for customizations. For developers, it offers lots of opportunities to customize the look and feel of different sections of Jupiter X. Let’s explore some ideas on how to customize Jupiter X’s default 404 pages in a child theme.

We must add our codes in the functions.php file of the child theme. All the codes need to be added inside the following function so that it will only affect the 404 pages.

 * Modify the 404 page.
add_action( 'wp', function() {
    if ( ! is_404() ) {

    // Add codes here.
} );

By default, the 404 page looks like the one below. Later, at the end of the section, you can see the customized one, after some tweaking.

how to create custom 404 pages with Jupiter X 1

Remove sections from page

Because not all 404 pages require a header, footer and title bar. We can clean the page by removing them.


// Remove header.
jupiterx_remove_action( 'jupiterx_header_partial_template' );

// Remove title bar.
jupiterx_remove_action( 'jupiterx_main_header' );

// Remove footer.
jupiterx_remove_action( 'jupiterx_footer_partial_template' );


Change the title and description

Almost all of Jupiter X’s texts are changeable via the API. For this page, let’s change the title and description.


// Change title.
add_action( 'jupiterx_no_post_article_title_text_output', function() {
    return 'Ooops! page not found.';
} );

// Change description.
add_action( 'jupiterx_no_post_article_content_text_output', function() {
    return "We can't seem to find the page you're looking for.";
} );


Change layout

There are also different layouts in Jupiter X. In this case, let’s set the page to full width.


// Remove the sidebar.
add_filter( 'jupiterx_layout', function() {
return 'c';
} );


Add a graphic

Graphics play an important role to get the site visitor’s attention, so why not use a nice 404 graphic in our custom 404 page? This graphic is downloaded from the Drawkit website.

But first, we need to add the graphic to the child theme, so we can add it under the assets/img folder. If the img folder is missing, you can easily create it yourself. 

how to create custom 404 pages with Jupiter X 2

Now, we can add the graphic to the 404 page.


// Add the graphic before the title.
add_action( 'jupiterx_post_title_before_markup', function() {
        echo '<img class="jupiterx-child-custom-404-graphic" src="' . 
get_stylesheet_directory_uri() . "/assets/img/error-404-colour.svg" . '"
 alt="Custom 404 graphic" />';
    } );


Add some styles

The styles and scripts can easily be added in the child theme. To improve the design, we can add some CSS codes in assets/less/style.css

.error404 {
   text-align: center;

   .jupiterx-main {
       background-color: #f3f2f2;

   .jupiterx-main-content .row {
       height: 100vh;
       align-items: center;

   .jupiterx-content {
       max-width: 700px;
       margin: 0 auto;

   .jupiterx-child-custom-404-graphic {
       max-width: 500px;

   .jupiterx-post-title {
       margin-top: 2rem;

How to create a 404 page in Elementor

Elementor allows us to build any layout so let’s use it to create a custom full width 404 page. The final page will look like the following image.

how to create custom 404 pages with Jupiter X 3

Create a new page

1. Create a new page from Pages > Add New menu in WordPress left sidebar then publish the page

how to create custom 404 pages with Jupiter X 4

2. In the page, set the Template to Elementor Canvas from Page Attributes. Update the page and click on Edit with Elementor button.

how to create custom 404 pages with Jupiter X 5

Add a new section in Elementor

1. Add a new Section and select the first structure.

how to create custom 404 pages with Jupiter X 6

2. Edit the section. On the Layout tab, set the following settings.

how to create custom 404 pages with Jupiter X 7

3. On the Style tab in the Background section set the following settings. You can download the image from Unsplash site for free.

how to create custom 404 pages with Jupiter X 8

Add headings in Elementor

1. Add a Heading element. On the Content tab, set the following settings.

how to create custom 404 pages with Jupiter X 9

2. On the Style tab, set Color to rgba(255,255,255,0.58).

3. On the Style tab, set Typography settings as follow.

how to create custom 404 pages with Jupiter X 10

4. Add other new Heading elements. Add the following text to in the Content setting:

Oops, we can not find the page you are looking for

5. On the Style tab, set Text Color to #ffffff.

6. On Advanced tab, set the following settings.

how to create custom 404 pages with Jupiter X 11

7. Add other new Heading elements. Add the following text to in Content setting:

– You may have mistyped the address or the page may have moved.

8. On Style tab,set Text Color to #ffffff.

9. On the Style tab, set Typography as follow.

how to create custom 404 pages with Jupiter X 12

10. On the Advanced tab, set the following setting.

how to create custom 404 pages with Jupiter X 13

Add a call to action button in Elementor

1. Add a Button element to page.

2. Edit the Button. On the Content tab in the Button section set the following settings.

3. On Style tab in Button section, set Text Color to #ffffff, set Background Color to rgba(153,76,0,0.53) and set Border Color to #e2574d then set the following settings.

Add recent posts/portfolios in Elementor

1. Add a Posts element from Raven elements to page.

2. Edit the Posts. On Content tab set the following settings.

3. On the Style tab in Post Title section, set the Color to #ffffff then set the following setting.

4. On Style tab in Excerpt, CTA Button sections, set Color to #ffffff.

Update the page

We are done with the custom 404 page, let’s update the page to save our changes.

How to assign custom 404 page in the customizer

To assign our page in customizer goes to Appearance > Customize in the left sidebar of the WordPress admin page.

1. In Customizer click on Pages.

In a new section click on 404 menus to open a popup, in the popup on Setting tab choose your page on Template dropdown.

3. Click on Publish button on top of Customize page.

NOTE: If you can’t see your page in Template dropdown perhaps you have not published your page. Go back to your page and hit the Publish button.

Common Issue

There are some common issues in WordPress 404 pages. In this section, we explain an issue and its solution.

Posts/pages returning 404 error

The problem may be related to permalinks cache. To fix the issue go to Permalinks settings (WordPress Admin > Settings > Permalinks) then click on the Save Changes button. In most cases, it solves the issue.


In this tutorial, we explained how to create custom 404 pages with Jupiter X in Elementor. In customizing default 404, you learned how to use Jupiter X actions and filters to modify HTML, attributes, and texts. In creating a custom 404 page via Elementor, we learned some features of Elementor and assigning the page in Jupiter X. If you have any questions please let me know in the comment section below😉


Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Meet JetTabs! The Best Way to Organize Your Content

Jupiter X comes with a great page builder named Elementor and it has powerful features that let you create advanced layouts and designs. But unfortunately, it lacks one hell of a feature: Nested elements inside the tabs and accordions.

If you’re not using Jupiter X, you will have to design the complex layouts inside your tabs and accordions using HTML and CSS, and put the code directly inside the tab or accordion content.

Fortunately, we came up with the best way to organize content with Jupiter X. You can now benefit from a bundled plugin called Jet Tabs, which adds the following features to your website — totally free of charge!

  • Accordion ( Advanced Accordion lets you add complex layouts inside its content)
  • Image Accordion
  • Switcher (Toggle between two complex contents)
  • Tabs

All of these elements are capable of showing and/or hiding part of your content. Indeed, it’s the best way to organize content for seamless user experience. Now, let’s take a closer look.

JetTabs is a premium plugin that’s free to use for Jupiter X users. It’s good to know that all of the elements added to your website when you install this plugin (except the Image Accordion) will use the Elementor Block Templates, which is also free in the standard version. You don’t need to pay for the Elementor Pro to benefit from it.


Not to be confused with Elementor’s Accordion, this element is Classic Accordion. Classic Accordion widget is the perfect tool for adding content templates built with Elementor or adding your text to every accordion item. You can use this widget in your FAQ page or show the long text content in a more appropriate way.

After adding the classic Accordion element, you can add your items, titles, and icons then set the active element.
For adding the accordion items content, you can add simple text or tabs. It’s also possible to set a section template as accordion content.

In General, the process involves creating your complex content in a block template using Elementor, then assigning the template to the accordion items in the Classic Accordion Settings.

Check out the JetTabs documentation to get more information about the best way to organize content with Jupiter X.

Image Accordion

Image Accordion is a fancy element that lets you showcase your content or categories in a stylish way. You can also use this element to highlight your gallery categories, and so on.

You just need to add the Image Accordion element your page. After that, you can simply add your images with title and description. And in case you would like to add a call-to-action button, it’s possible as well.

There’s a cool option that allows you to change the open and close animation:

Content tab >  Settings > Show Effects

You can see more examples in the JetTabs documentation.


Switcher can be considered as a Toggle element, too. The Switcher widget is the perfect asset for you if you need to display two different content blocks and show them under different circumstances. It’s quite practical to use, and it helps you show your site content in a creative way.

Now, there are two items that you can assign your section templates to and set the switch items effect as well.

Check this page out for more information about the Switcher element.


And finally, the Tabs! It’s a very useful element, indeed. Tabs is a powerful element that allows you to add your section templates to each tab section. It’s customizable and very easy to use.

First, define your tab contents as a section template in Elementor Templates.

After adding your sections and content, you can assign them into your Tabs element.

Also, in case you would like to add simple text as your tab content, you can change the “content-type” drop-down field to “Editor”.

Feel free to play with the style and design options to get your awesome tab to work exactly the way you imagined.

Now that you and Jet Tabs introduced to each other, it’s time to install it for free on your website, so you can take advantage of the best way to organize content with Jupiter X.

Just follow up these steps:

  1. From WordPress left menu, go to Jupiter X.
  2. From the control panel left menu, go to Plugins.
  3. Next to JetTabs, click on Activate button.
  4. A new pop-up window will appear. click on the Continue button.
  5. After a couple of seconds, a new pop-up window will appear. Click on OK button.
  6. JetTabs plugin is now installed and activated on your website. It will be displayed above in the Active Plugins section.

In case you’re concerned about the compatibility of this plugin with your website features, you should know that:

JetTabs is Multilingual-ready.

Like any other Elementor plugins, you can freely use it on your multi-language website.

Easy-to-use, No Coding Skills Needed.

You can personalize everything without adding any codes. It’s fully customizable.

Compatible with RTL websites

It’s optimized for right-to-left websites.

Responsive layout

You can create vertical and horizontal layouts without having to worry about responsive challenges.

You can also check out our official bundled plugin overview page to access the plugin author website and community, in case you experience any issues with it.

Watch this video to learn how you can easily organize your content using Jupiter X and JetTabs:


Subscribe to Artbees Themes Blog for the best WordPress tips and insights.