Category: JupiterX Features

December Crash Course – Freelancer’s Guide on How to Build a Dynamic Hotel Website with Jupiter X – Part 2 (Archive Listing)

Ok, the big bald rich man is waiting for me to deliver the website for his chain of hotels in one week – and there’s not much time left. In the first part of this series, we dove into creating a dynamic room listing with room attributes and a nice template that will include those custom attributes, both of which will be filled out by the receptionist. Picking up from where we left off, we’ll create a listing for an archive page in this part as part of building a dynamic hotel website.

As you’ll recall, we created a custom post type for our room called Rooms and then created a listing for it. A listing is an embodiment of the meta fields in a custom post type with a particular design. In the first part, we built the custom post for our rooms and a listing and beautiful design for a single page. The only thing is that the single page is not discoverable by visitors if it’s not inside a post feed. Someone should play with filters on your listing page and find the item they want, click on it and enter the single page for that item.

In order to understand and follow the instructions in this article, make sure to read the first part.

Before proceeding with the tutorial on how to build a dynamic hotel website, don’t forget to check if the following plugins are activated and have the minimum versions below:

JetEngine plugin v2.1.4
Jet Elements v2.1.2
Elementor v2.7.5
Raven v1.8
JetSmartFilters v1.5

As you noticed, in addition to what we used in the first part, we need the JetSmartFilters plugin in this part to create the filters we require for our archive listing.

In this tutorial, we’ll cover the following:

Creating a listing template for our custom post type
Creating filters for our listing
Creating a general listing template

1- Create a listing template for our custom post type

So first things first when it comes to building a dynamic hotel website. Just like the listing we built for the single page of our custom post type, we need to create a listing for the listing archive.

In the WordPress dashboard, go to:

JetEngine > Listings > Add New

In the upcoming dialogue, set Listing Source to Posts, Post Type to Rooms and give it a Name such as “rooms-archive” and proceed. You’ll be taken to the Elementor environment to create a design template for the new listing.

Clicking on the button will create a new listing for your custom post type. In the next step, you’ll be taken to the Elementor environment so you can create a design template for the Rooms archive page.

Add a box section with 374px width and add 15px bottom padding (0,0,15,0).

Right-click on the column. From Styles set the background color as white (#fff) and from Advanced tab set the bottom padding for the column as 25px (0,0,25,0)

Add an Image element inside the section (JX image element), set the image source as Dynamic/Custom Image and give it a custom size of 374 x 220 px

Set a dynamic Image source and choose Field as Post Thumbnail.

Add a Dynamic Field setting the Source to Post and the Object Field to Title.

Centralize it and format it as you like. I’ll go with 20px Muli Bold #1d3239.

Give some space to its top and bottom using 15, 0, 15, 0 padding from the Advanced tab

Add a Dynamic Field, set the Source to Meta Data and the Meta Field to Beds.

Centralize it and format it as you like. I’ll go with 16px Muli #636f74.

Add a Dynamic Field, set the Source to Meta Data and the Meta Field to Price.

In order to automatically add the $ sign before the price, in the Dynamic Field settings add $%s to the Field Format.

Style it as you want. I’ll put 20px Muli Bold #006b93.

Add a 20px Bottom Padding to the price.

Add a Dynamic Link element. Set the Source as Permalink. Label it as Book Now and centralize it.

Format it as 14px Muli #fff and weight 600.

In Normal state, set a #ff5374 colored background for it with #fff as text color. In Hover state, reverse color by giving #ff5374 as text color and #fff to background color.

You should define a solid 1px border colored #ff5374, 3px border-radius in all corners and 7, 15,7 ,15 paddings.

In the WordPress dashboard, go to:

Templates > Saved templates > Add New

Select Archive as template type and give it a name (Room Archive)

Add a Listing Grid element to your page. Set the rooms-archive as Listing Source and activate Use as Archive Template option.

In the WordPress dashboard, go to Jupiter X > Customize > Post Types > Rooms > Rooms Archive and select the page you just saved and then publish the changes.

Ok, what’s next? We just designed how a room custom post type will appear in the listing. Now we need to put this inside a general template for the listing – but before that, let’s create the filters we need for the listing sidebar.

2- Create filters for our listing

Let’s say we need a price range filter and some checkbox filters for our room facilities. With JetSmartFilters v1.5 installed:

In the WordPress dashboard, go to SmartFilters > Add New

We’ll give our filter a label and active filter label

Set the filter type as Range

Set Value Prefix as $

Set the Minimum and Maximum Value as you wish (the price range of your rooms)

Set a Step number. This is the amount added to the selected range everytime the visitor moves the indicator one step. For example, if set to 5, everytime you move the indicator to the right or left, an amount of 5 will be added or deducted to the range.

And finally give the filter a Query Variable. This query variable will help us connect the filter to its results in the other hand of the listing page.

Using the same process, we should create checkbox filters for our room facilities. The only part that will be different is:

Set the Filter Type as checkbox list and Data Source as manual input.

Activate the Is Checkbox Meta Field (Jet Engine) to filter data from checkbox meta fields type, created with JetEngine plugin.

In the Options List Box, add checkbox options for the filter. Each option should have a value and label.

Important: The value for a checkbox option should match with the checkbox value of the custom meta field it relates to. The query variable value should match with the Name/ID of the custom meta field it relates to.

3- Create a general listing template

With the filters created and the template designed for the individual listing, we can design a general template for the listing on our website where users can use the filters in the sidebar to define the room criteria they want and see the results on the other side.

In the WordPress dashboard, go to Pages > Add New

From the lower-left corner, click on Elementor settings (gear) icon and select Elementor Full Width as Page Layout.

Give the main section should have 55, 0, 90, 0 px paddings from the Advanced tab.

We need a 30%-70% column pair. The 30% column in the right will contain the filters and the 70% column on the left will carry the filter results.

Apply 0px Widget Space to the left column.

From the Style tab, add a white background color to the column.

From the Border section, add a 6px radius to all corners of the column.

From the Advanced tab, add margins 5, 0, 580, 25 px and paddings 30, 32, 30, 32 px

For the right column, from the Advanced tab, add 0, 0, 0, 25px paddings to it.

Add a JX Heading element to the left column and edit it to Filter Listing.

Format the heading as you like. We’ll input Muli Bold 24px colored with #006b93.

From the Advanced tab, give it a 35px bottom-padding to it.

Add another Heading element and edit it for the price and format as you like. We’ll go with Muli 20 Bold colored #1D3239.

Give the second heading a 25px bottom-padding

Add a Range Filter element to the left column.

Select Price Range as Filter and set JetEngine for This Filter For

Apply On should be set on Click on apply button.

Query ID should be set to Rooms.

On the Styling tab, set the color to #EBF7F7 and Border Radius to 2 in all corners.

Set the background color as Range Point. We’ll go with #006B93 and a Border Radius of 3px to all corners.

In the Value section, format the text for value. We’ll go ahead and put Muli 16 #1D3239 with the top top-padding of 25px.

From the Advanced tab, give the range filter a 20px bottom-padding.

What’s left in this section of filters is a Filter Results button. Drag an Apply Button element below the price indicator.

Set its query ID as Rooms and style it as you like.

In the Style tab, for the Normal state button, we’ll go with a Mul 14px weight 600 with #fff as the color and #006b93 as the background color, a solid border of 1px with #006b93 color, a border-radius of 3px and a padding of 11, 25, 11, 25 px. For its Hover state, we’ll swap the color and background colors.

Finally, in the Advanced tab, give the button a 30px bottom-padding.

This should be what you have built so far:

Ok, let’s move onto the next section of filter options: Facilities.

Drag the Checkbox Filters element below the Filter button.

Select the filters as needed.

This filter for should be set as JetEngine. Apply Type is Ajax. Apply On is Click on Apply Button.

Query ID should be set to hotels.

In the Style tab, set 10 for both Space Between and Children Offset.

Set the Checkbox size to 20px. Set the background color to any color such as #EBF7F7. Set #006B93 for its Hover background color. Give it a Solid border with 3px border-radius for all corners.

Set a #EBF7F7 background color for the Checkbox icon and set its size to 10.

Set #636F74 as background color for the Checkbox label.

Now let’s add an apply button to the checkboxes as well. Just duplicate the button we created above for price range and drag it down below the checkboxes.

Ok, what we’re going to do for the right column is to simply put a Listing Grid element.

Set Listing to Rooms-archive and the Column Number to 2.

In the Advanced tab, set the CSS ID to rooms. This will connect our listing grid to the filters on the left side.

And that’s it. We just created the listing page that holds the listing filters and the results. Give it a try and see how the filters set on the left side will result in the items on the right hand.

Dynamic Hotel Website Final Listing Page

In the following episodes of this Crash Course, we’ll cover how to add a price calculator and booking module to the lower right corner of this template – as well as everything else remaining before we can deliver the hotel website to the Wolf of Wall Street!

Do make sure to watch the tutorial video alongside this post to better understand the process and ask any questions below in the comment section. Keep an eye out for the upcoming episode on how to build a dynamic hotel website.

Archive Listing Build a Dynamic Hotel Website

Bon Appetite! Key Elements for Your Next Restaurant Website

Let’s say you’re running a pretty popular restaurant with delicious food and special recipes in town and you start thinking about moving things online to showcase your mouthwatering food, entice more hungry customers and even open up new branches all over the city. Smart move! But building a website for your restaurant is no easy feat unless you know the key elements for your restaurant website to make it both attractive and user-friendly at the same time.

In this article, by looking at 5 Jupiter X restaurant templates, we’re going to take you through the key elements that will help you build a mouthwatering restaurant website that’ll help you build a strong web presence and make your site visitors drool!

Images Layout

Go visual! You’ll hear this from just about every graphic designer you hire to design your website. And, yes, get ready to read about it once in a while in this post too! Images have a magical effect on promoting your restaurant. You don’t open a restaurant website to read the About page or to imagine what the food looks like from the menu, right?! A bunch of high quality and tempting images of the food hits visitors in the stomach every time! So folks, let’s admit that they’re essential elements for your restaurant website, and Images Layout is probably the best element to help you out showcasing them.

Images Layout lets you showcase as many images you want in up to 6 columns, choose between 4 different layout types (Masonry, Grid, Justify and List), add titles and description as well as different background overlay and lure visitors with appetizing pictures of your gourmet dishes!

You can find a beautiful live example of this element in the Jupiter X Danae template.

Elements for your restaurant website Images Layout Element — Images Layout Element

Posts Element

If you have a blog you are regularly updating to offer tasty recipes, writing about healthy diet trends or simply sharing the latest news with your restaurant, you might want to organize and show them on different pages of your website. And this is all possible with the Posts element. There are many features to play with and customize to your taste, skin type, layout and categories to name a few. And as mentioned before, you can set the source to be a blog or portfolio.

Or you can simply drag and drop the Posts element and start building it from scratch without linking it to the blog or portfolio. If you need to read more about its features and how to work with it, please head over here.

Here’s a nice example of the Posts element in action from the Jupiter X Restaurant template:

Elements for your restaurant website Posts Element 1 — Posts Element

Form Builder

Add as many delicious food pictures as you want and catch the attention of visitors to your stunning food art, but at one point you’ll need to turn those visitors into paying customers and increase the restaurant’s footfall. A functional and easy to use reservation form will do the job! Now that visitors are even more hungry by browsing through tempting food pictures, they should be directed toward booking a table.

Forms can be used either for reservations or as a means of online ordering if you happen to have that option. You can create a simple form in seconds with the Form Builder element. Just drag and drop the Form element to your page, edit the placeholders, add an action email to collect the information and that’s it! You now can receive orders and bookings!

Avoid too many fields and ask questions with short answers as much as possible in order to make the booking process easy and efficient. The form used in the Jupiter X Restaurant template serves as a good example.

Slider

A slideshow is always a great way to feature menu specials and give customers a sense of what’s in store for them. Imagine opening the homepage to a full page header slideshow of your delightful hamburgers! Just like this delectable slide reel in the Jupiter X Burger Restaurant template:

Slider Element

Adding slideshows is pretty easy in Jupiter X. All the steps you need to go through are explained in detail in this video. After watching the video in full, creating a stunning slideshow will only take seconds.

Testimonials

How many times have you booked a hotel room over another only because of a couple more positive reviews and ratings? How many times have you chosen a product online just by checking its stars and positive comments? Nearly always, right? The same thing goes with restaurants too! Testimonials are like social proof that will help potential customers choose you.

Using the Testimonials element, you can add an uncluttered and beautiful set of customer testimonials, customize its text, style and positioning, play with its animation settings and let the uniqueness of your restaurant stand out through the words of your satisfied customers. The Jupiter X Burger Restaurant template features a nice example of this element in action:

Price List

Restaurants and online businesses that are offering a product should have a functional price handling system for customers’ convenience. Using the Price List element, you can create your special menu and feature your dishes in an organized way. You can visually customize every detail of the list like the heading, image, price and even make items clickable by adding links.

The Jupiter X Italian Restaurant template features a beautiful sample of the Price List for its menu:

Elements for your next restaurant menu — Menu – Price List

Animated Box

We’ve emphasized the importance of images for a restaurant website enough, so no need to repeat ourselves! But there is always room for more fun! Using the practical Animated Box element, you can put your images inside a box with different animation effects; write some important content on the backside of the box; customize the layout, color, style; add icons and links and choose among many cute animation effects. That’s fun, right? Mark our words – adding a bit of taste to your image-dominant page guarantees customer satisfaction! Here’s a sample of the Animated Box element from the Jupiter X Restaurant template:

Counter

Another dynamic element for your restaurant website that will help you boost your restaurant’s reputation, increase the trust of the existing customers and create potential new visitors, is the Counter element. Just drag and drop the element to your page and brag about the number of satisfied customers, branches around the city, dishes served, any health certifications awarded, as well as any other interesting numbers while playing with its eye-catching styles and animations. Your achievements are definitely worth a mention!

Here is an example of the Counter in action from the Jupiter X Europa template:

Tabs Element

If you own a big restaurant that offers all kinds of food, from seafood to Mexican and from appetizers to desserts or from alcoholic to soft drinks, you might want to organize them into tabs to avoid your site visitors a headache! The Tabs element will help you make it happen in the neatest way possible. You can put each type of food in one tab, set a vertical or horizontal look on it, add icons next to titles, use images and customize every detail about tabs items such as background color, title, description and many more as you please.

Check out how it looks live in the Jupiter X Steakhouse template:

Elements for your restaurant website Tabs Element — Tabs element

Wrapping up elements for your restaurant website

In this post, we highlighted some essential elements for a stunning restaurant website in the hopes that it’ll encourage you to get started with your unique and tasty restaurant website. So now that you have the ingredients you shouldn’t be waiting any longer, hungry customers are waiting outside!

Let us know in the comments about your experience creating your restaurant website or if you have already created yours, drop us the website URL for as inspiration for your fellow restaurant owners.

November Crash Course: Freelancer’s Guide on How to Build a Dynamic Hotel Website with Jupiter X – Part 1 (Room Listing)

A hotel website consists of different parts such as the homepage, about and contact pages – but the most important part of a hotel website is filtering, room listing, and booking. In this November Crash Course, I’ll show you how to create a dynamic room listing with the custom post type and custom attributes. In the upcoming parts of this course, I’ll show you how to add booking compatibility as well as other filtering and listing features required to build a dynamic hotel website.

A hotel website is, in fact, a room listing website where each room type has a profile for itself and all the features and attributes for that page are included in that profile. Also, we need it to work like a template where a hotel receptionist or a Guest Relations Officer can easily fill in those attributes and the room profile is created.

When creating a regular blog post in WordPress, we’ll fill in some related information such as the title, category, tags, excerpt, author, featured image and body of the blog post so we need a custom post where custom attributes about the room is definable.

In technical terms, we should create a custom post type for hotel rooms with custom meta attributes about the room’s title, description, price, rating, amenities and so forth. We call this custom post type the “Hotel Room.”

Here is what we need to create a “Hotel Room” in action:

Define a custom post type with custom meta fields (as room attributes)
Create a listing for our custom post type single page (room profile page) and a template for it
Create a design template for your post type single page

It’s important to note that a custom post type has two sides:

Backend where the custom meta fields (room custom attributes) is filled
Frontend which is how the custom post type and its attributes appear visually. We call this a “listing”. A listing is a visual presentation of a custom post type.

1- Define a custom post type with custom meta fields:

After installing Jupiter X, you need to install the JetEngine plugin v2.1.4. JetEngine is a tool used to create custom post types in Jupiter X. Additionally the following plugins should be installed and activated:

Jet Elements v2.1.2
Elementor v2.7.5
Raven v1.8

In the WordPress dashboard sidebar, go to:

Plugin > Find JetEngine and click on Activate.

From the dashboard sidebar, go to:

JetEngine > Post Types > Add New
In the General Information section, give your custom post type a name and slug like Rooms
In the advanced settings section, define an icon for your post type in Menu Icon and for support, set the following:

Build a dynamic hotel Website with Jupiter X Support — These are the sections we want to be available in our custom post type backend.

The most important section here is Meta Fields where we define the room’s custom attributes so the receptionist can fill them in accordingly. We can set various options about meta fields but those that we need most in this tutorial is:
- Field Label (name)
- Field Type defines the type of field which can be text (for attributes such as the city), text area (for large text amount like description), gallery (for attributes that require the receptionist to upload images), checkbox (for amenities that differ from room to room) and more.
- Field Width defines the width you want the meta field to occupy in the backend. You can change this as you like to make it simple for the receptionist. In this tutorial, we’ll set it as 25% for all meta fields.

Build a dynamic hotel Website with Jupiter X Fields

Let’s say our room has the following custom attributes. We need to create a custom field for each of them. You can use the suggested values you see on the table.

Meta Field	Field Type
Beds	select
Rating	text
Price	text
Price Rate	text
Cleaning Rate	text
Restaurant Rate	text
About Hotel	textarea
Address	textarea
Room Images	gallery
WiFi	checkbox
Minibar	checkbox
Car Park	checkbox
Air Con	checkbox
Airport Shuttle	checkbox
Night Club	checkbox
Breakfast	checkbox

Note that for select and checkbox field types, we should define the options that the receptionist can choose from.

Build a dynamic hotel Website with Jupiter X Checkbox

Now that we have defined what custom attributes we want available for our receptionist, let’s find it in the dashboard sidebar and create an actual post from our Rooms post type. The new post page should look something like this:

Build a dynamic hotel Website with Jupiter X Attributes

As you can see, all the room custom attributes we wanted are located in the meta fields section lower on the page. Let’s imagine that our receptionist filled out these fields but could he or she just go ahead and publish the page? No! We should first make this data presentable or – in technical terms – assign it to a listing.

2- Create a listing for our custom post type single page

In the WordPress dashboard, go to:

JetEngine > Listings > Add New
Fill the upcoming dialogue as follows and proceed.

Build a dynamic hotel Website with Jupiter X Listing

Clicking on the button will create a new listing for your custom post type. In the next step, you’ll be taken to the Elementor environment so you can create a design template for your room profile page or, in technical form, a template for the single page of your new Rooms custom post type.

3- Create a design template for your post type single page

Just before we start, please note the resulting design of this tutorial so far should be similar to this template. This template is part of the Jupiter X Hotel Listing and is available for Jupiter X users to download from its control panel.

Alright, now we are going to design the template how we want and arrange the custom attributes based on their importance to the receptionist accordingly.

First, add a bit of top margin to your page to separate the page content from the header. Right-click on the main container section:

Edit Section > Advanced > Set Top Margin to 40px

Intro & Image Slider

For the title of our room, we’ll use a Dynamic Field:

Drag the Dynamic Field to your page from the element library.
Style your title as you like. We used Muli Bold 36px.
Set Source as Post/Term/User Data and Object Field as Title. This is where we specified the value for this field should be filled by the name of the post created by the receptionist.

Build a dynamic hotel Website with Jupiter X Dynamic Title

Next up is the room image gallery:

We need to first activate the slider and grid capabilities for dynamic fields in JetEngine. Save your work and go to the backend. Click on JetEngine in the sidebar and check the following two options:

Build a dynamic hotel Website with Jupiter X Slider

Go back to your single page template and drag the Dynamic Field to your page from your element library.
Set Source at Meta Data
Set Meta Fields as Room Images. We just set our dynamic element to load the images uploaded by the receptionist when creating the post in the Room Images section.
Turn on the Filter Field Output and set the callback as Image Gallery Slider. Also, turn on the Use Lightbox option.

Description and Ratings

Now we need to define the location for the other info about the room including its description and specifications.

Create an Inner Section inside your main section, set its Top Padding as 60px and divide it by three columns with these ratios: 50%, 15%, 35%
Unlike the main title, we don’t need a dynamic title for “About This Room.” Simply use a Heading element and style it however you want.
For the room description, we’ll use a Dynamic Field and set its Source as Meta Data and the Meta Field as About Hotel.

Build a dynamic hotel Website with Jupiter X About hotel

Right next to the description column is the room rating. For the rating, we’ll need a circle including the rating inside it. So here’s how we do it:

For the middle column (15% width), set a 10px left margin and 32 px Top Padding.
Drag a Button element inside the middle column.
In the content tab, set its Text as Dynamic > Custom Field > Rating. This will load the value added by the receptionist in the rating section in the backend.

But that’s not all. We need to make the button container circular now.

In the Style tab, apply the following settings:

Now Let’s add the skill meters to right column:

For the right column (35%), set a 35px Top Padding and 10 px Left Padding.
For the dynamic skill meters, we’ll actually add 3 Progress Bar elements (from the JetElements library), and we’ll set the percentages to:
- Dynamic > Custom Field > Cleaning rate
- Dynamic > Custom Field > Restaurant
- Dynamic > Custom Field > Pricing

The respective value for these parameters will be dynamically replaced by what the receptionist has entered in the backend.

You can style the meters as you wish. Below is the recommended styling:

What’s left of this section of the template is putting the circular and bar rating in a box. For this, we’ll add a three-side border without the right side to the left box (15%) and a three-side border without the left side to the right box (35%):

Amenities, Location & Booking

Ok, what’s left is the last section of the template, which includes room amenities, hotel location, and the pricing calculator. We’ll cover the pricing calculator in the following episodes together with the booking feature. If you remember in the first step, we created 7 meta fields for our Rooms post type that will appear as checkboxes in the post single backend. Those that are checked by the receptionist will appear in the front end.

So what we need to do is to put all of the amenities as Dynamic Fields in the page but set to display only to those that have a value (which means checked in the backend by the receptionist). So let’s do this.

Drag a Dynamic Field to your page. Set the Source to Meta Field and the Meta Field to one of your amenities like WiFi
Define an icon for your amenity
Enable the Hide if the value is empty (with this, the amenity will be displayed only if checked in the backend by the receptionist)
Activate the Filter field output and set the callback to Checkbox field values
Complete some further styling to your amenity item

Repeat the same process for the other 7 amenities that we have. You can divide your column by 4 columns to better organize the list of amenities. Ok so far this is what we have:

So we have one more item to add: The location map.

Drag a Google Map element to your page and set its Location to fetch from the dynamic custom field address:

Ok, we are done with creating the template. Now we need to tell Jupiter X that the template we created should be the template we want to use as the custom single template for the Rooms post type.

Save the content of the template by right-clicking on the bottom of the page and choosing Copy all content or using Elementor Save As Template option in the lower-left corner.

Publish/Save the template
In WordPress dashboard try Dashboard > Templates > Add new > Single. Give your template a title such as Room Single Template.

In the upcoming Elementor environment, either paste the content you copied in the last step or import the template you saved.
Publish/Save the template
Open a new browser tab and go to Dashboard > Jupiter X > Control Panel > Settings > lower on the page, check the Listing Items and Rooms (the name of your newly created custom post type). This will allow us to use Customizer for these two items.

Then go to Dashboard > Jupiter X > Customize
In Customizer > Post Type > Rooms > Room Single
Click on Custom and select the Room Single Template as the custom template for the single page:

Publish the changes.

And that’s it. We just built our custom post type Rooms a nice single page design template with dynamic components that will be fetched from what our receptionist will enter in the backend.

In the following episodes of this Crash Course, we’ll cover how to add a price calculator and booking module to the lower right corner of this template as well as other listings derived from our Rooms post type, such as the main rooms listing and archive listing.

Do make sure to watch the tutorial video along this post to better understand the process and ask any questions below in the comment section. And keep an eye out for the upcoming episodes on how to build a dynamic hotel website for our Wolf of Wall Street!

jetengine Dynamic Hotel Website with Jupiter X Hotel Website Room Listing November Crash Course

Creating a Fantastic Custom Login Page with Jupiter X

Custom Login Page with Jupiter X Featured

While the WordPress login page is its most recognizable page – keeping its default design is not ideal. You might be thinking “why not”? We’ve gone ahead and detailed why you should create a custom login page with Jupiter X.

Why would you need a custom WordPress login page in the first place?

Traffic. The more traffic you get on your site, the more problematic it becomes to manage spammers, malicious scripts and bots. A custom login page can filter all suspicious activities and make your site more secure.
Branding. There’s nothing wrong with the default styling of the WordPress login page in and of itself. But if you’re an established brand, you’ll definitely want to brand every inch of your website, including the login page. Displaying your logo to users or clients is surely something they will appreciate.
Multi-user site. This is fine if you have a small blog and you are the only one who uses the login page. But if you have a membership website where users can register and login, a custom login page offers a better user experience.

Choosing the right plugin to create a custom login page

There are 2 ways to create a custom login page:

Using third-party plugins
The manual way

Both have their pros and cons. For instance, it’s easier to use third-party plugins to create a custom login page as it can be done in a matter of minutes without writing a single line of code. However, going the manual route will give you more control of the appearance and features. It also requires good coding skills.

In this example, we’ll choose the easy way: a third-party plugin to create a fabulous custom login page for our project.

There are several plugins that can be used to create custom login pages in Jupiter X. From drag and drop to custom-made templates, from simple to complex, you can find plugins for all tastes and purposes these days.

For our example, we’ll use Clean Login, which is a plugin that offers shortcodes allowing you to embed your form anywhere on your site, including posts, pages, sidebar widgets or widgetized footer areas.

A few other benefits of this plugin include the following:

Add your login form in the frontend easily (page or post), as well as the registration and the lost password form.
If the user is logged in, they will see a custom profile and will be able to edit his/her data in another frontend form.
Only one shortcode per form, which means that you’ll only need to create a page or post and apply this shortcode to create each form you want.

Designing this page for the custom login page with Jupiter X

This is the most interesting part of the post as designing a page is always challenging. But if you have a good design taste, you won’t ever fail. For our login page, we’ll use a simple, clean design. This is how it’ll appear:

We are using 2 columns: one with 40% width and second with 60% width. In the first column we have:

Image widget – Logo with an absolute position at the top
Spacer widget – Adds space between the logo and login form
Shortcode widget – Clean login shortcode: [clean-login]
Jupiter X social network widget – Social networks at the bottom
HTML widget – We use this widget for custom CSS, and this CSS code to fix the styling of the form and page:

<style>
.cleanlogin-container * {font-family: "Playfair Display", Sans-serif;}
.cleanlogin-field-remember {float: left;text-align: left;}
</style>

While in the second column, we have only a spacer element and column that has a beautiful background image.

This is how the page looks from the backend:

Custom Login Page with Jupiter X Backend

There is a simpler way to speed up the page creation process. For example, instead of designing a page from scratch, you can use page templates or predesigned blocks from Elementor. This feature will speed up your design process, and all you’ll need to do is to place a login shortcode in the predesigned page:

Wrapping up

There are many ways to build a fantastic login page with Jupiter X using different tools and scenarios. However, the Clean Plugin is the simplest and does not require adding a heavy plugin to your project. Another benefit of this plugin and Jupiter X is that you can use a shortcode in the header builder in the popup window attached to the header or footer menu (The plugin offers the option to redirect the user after a successful login).

Another benefit of Jupiter X is that you can display various menus for different user roles. For example, after successfully logging in, you have access to different menus and options, while a user who has not logged in will see something else.

Please do let us know about your experiences and comment in the section below! 😉

October Crash Course: How to Build a Modern Agency Landing Page with Jupiter X

Homepages were once the most important part of a website – or even for any online presence for that matter. Looking at the rapid evolution of the web over the last decade, especially in the last few years, we see that the situation is the complete opposite. A local business’ homepage might be the least important aspect of an online presence, especially if they also have social media profiles, an Instagram page, a Yelp or Foursquare page – and of course landing pages.

Think of landing pages as a place where you actually do, grow and conduct your business whereas homepages are a mere ornamental, beautiful and purposeless representation of your company or business. A landing page is a web page that serves as the entry point for a website or a particular section of a website. Landing pages are your best (and maybe the last!) opportunity to grab a visitor’s attention and make them consider you.

A homepage is built from thin air regardless of any other factors out there. But a landing page is built as part of your global business funnel. In fact, this gives your landing page its most important and differentiating feature than any of your website’s other pages which is its purpose. That purpose is defined with regard to where your landing page stands in your business funnel. Is it the page you’re directing the traffic from your Google Ads? Is it where your social media followers will land on when visiting your website?

Today, I’ll show you how to build a modern Agency landing page with Jupiter X. The landing page I have chosen for this month’s crash course is inspired by one of the most recently released Jupiter X templates called Agency. It’s been tweaked a little to fit the purpose of this course. If you are a Jupiter X premium user, you can activate it for your website from your Jupiter X control panel.

The final Agency landing page with Jupiter X will include the following sections:

Header
Hero section
Intro
Services
Sub services
Customers
Testimonials
Blog
Footer

This blog post will cover the general instructions on how to build these sections but for more detailed coverage of the building process, settings adjustments and final tweaks do not forget to watch the video.

Header

First thing first! What exactly do I mean by a header? The header is the topmost structure in a website that usually includes a logo and a navigation bar (unless there is side navigation). There can be search, social and cart icons depending on the website type as well. Also, some websites might need a toolbar above the main structure (e.g. e-commerce and listing websites) which is also considered to be part of the header structure.

Layout

The header structure in Jupiter X is built and managed by the Header Builder. Once you are done installing Jupiter X in the WordPress dashboard go to:

Templates > Add new, and in the upcoming page find Template Type > Choose header as template type and give it a name.

You’ll be taken to the Elementor building environment. An Elementor library will load with three tabs: Block, Pages, My Templates. This window includes readymade or saved blocks and page templates. We’re going to create our own header template so we can close this window. We are in the Elementor building space with the element library bar on the left hand and authoring space on the other side.

Add New Structure (red circle with plus) > select the 16/66/16 structure

Agency Landing Page with Jupiter X Column Structure

We need to tweak this column structure a little by manually resizing the columns. Click on the divider between columns until the following ratio is achieved: 25%, 55%, %20%

Agency Landing Page with Jupiter X Column Resize

Edit Section (on the left side) > Layout settings > set the Vertical Align as Middle.

Agency Landing Page with Jupiter X Vertical Align

Edit Section (on the left side) > Advanced settings > set the padding as follows:

Agency Landing Page with Jupiter X Header Padding

Logo

Let’s start adding content to our page by adding a logo to our header.

Add the Site Logo element to the left column.

Edit Site Logo > Choose a logo from the menu. If you haven’t uploaded your logo yet, you should click on the Customizer link below the dropdown and upload different logo versions for your website. In Jupiter X, you can define different logos for primary, secondary, sticky and mobile usages. In this tutorial, we’ll use the primary logo for the light version and secondary for the dark version.

Once you’ve uploaded your logo, go to Edit site logo > Style > Set logo size to 200px.

Once the customizer is opened, select Menus from the left sidebar. In WordPress, menus are comprised of two concepts: The menu that includes the menu items and the Location to assign that menu to.
- Click on the Create new menu button give it a name
- Select a location for it which in this case is Primary Menu
- Now click on the Add items button and in the upcoming panel, select Custom links

As you might have guessed, this is going to be a menu for a single landing page so we will need a one-pager menu for it. Each of our 5 menu items should be a custom link with its title in the Link Text field and the URL set as #title. For example, the menu item ‘Mission’ will have ‘Mission’ in the link text and #mission in the URL.

The process of creating the menu is not over yet and later in the tutorial, we’ll assign each menu item to its respective section on the page.

Once you’ve created your menu items, assign its location and save it and go back to your header template. Click on the menu elements and from the sidebar, select the menu that you just created.

Edit Navigation Menu > Style > Main Menu Items > Typography > Set the font size to 16 and the weight to 400.

Let’s make our logo items gray. In the same setting, we’ll find a 3-tabbed structure for normal, hover and active states of the items. Set the color of menu items in the normal state as #c8c9cc

Our menu items should go white on hover. So from the same setting area we’ll set the hover color to #fff

Let’s give our menu items some margin: Top:0, Right:7, Bottom:0, Left:7

We should also not forget to think about how our menu looks like on a mobile screen. Set the background color for the mobile menu container as well as the mobile menu toggle icon to white and black.

Call to Action

The last item to go into our header in a nice-looking CTA button.

Drag a button element to the third column in the header structure.

Edit Button > Content > Align the button centrally
Edit Button > Style > Button Typography > Set the font size to 16 and the font-weight to 700
Edit Button > Style > Normal > Set the text color as black and the background color to white
Edit Button > Style > Hover > Set the hover text color as white and the background color to our accent color, which in this case is a lovely blue.

And finally, let’s add some radius and margin to our button to make it fit best within the header structure.

Edit Button > Style > Border radius: 3, 3, 3, 3 px Padding: 17, 30, 17. 30 px

So this is it. We’ve just built our header structure:

As you can see, the header structure is built in abstract and may look incomplete at first sight. But also as indicated above, it’ll look perfectly fine when it’s used along with the hero image, which we’ll create in the next step. But before that, there’s one more thing we should take care of! Our header will look as beautiful as above in the mobile version.

Jupiter X will automatically turn your menu into a burger icon, which will be left in between the logo and CTA. Mobile users are traditionally used to the burger icon in the corner of site navigations in mobile, so we better swap the placement of the menu and CTA. For that, we’ll need to add a header right below the current header with the mentioned changes applied:

Mobile Header

Right-click on Header Structure > Duplicate

In the second header structure, swap the menu and CTA columns. Hover over the CTA button column, click on the gray handle and drag it before the menu column. And you’re done!

You now have a two header structure below each other. The top structure will be used for desktop and tablet users, and the one below will be for mobile users. But how do we set those conditions?

Simply right-click on the top header structure:

Edit Section > Advanced > Responsive > Enable the ‘Hide on tablet’ and ‘Hide on Mobile’ (so it will be used only for desktop users)

Do the same thing for the below header structure but this time enable ‘Hide on Desktop’

Sticky header

There is one more header structure we need to decide about. The sticky header is the state of the header when you scroll down the page. In sticky mode, a header usually becomes narrower and includes only the information you want the audience to see along the way down the page. In Jupiter X, the header and sticky header can have two entirely different designs, so we should create them separately.

On our landing page, our sticky header will be exactly the same as the normal header. So what we need to do is to copy the header structure from the main header template.

Create a new template for the sticky header by using the same method we used to create the header template earlier in the article and then paste what we copied into the new template.

Activate your header

We have created three header structures so far: the main header, the mobile header and the sticky header. The mobile header is created right inside the same header but enabled only for mobile view, and the sticky header is created separately in another template (we don’t need to define the mobile version for the sticky header as it’s disabled on mobile by default). What’s left is to assign these templates to the right header slots in Jupiter X.

In the WordPress dashboard:

Appearance > Customize
Select Header from the sidebar
In the upcoming header dialogue box, select Custom as the header type and then select the main header template you created.
Also, choose Sticky as the behavior as the sticky template we just created from the drop down menu.
Enable the content overlap so our header overlaps the background image in the hero section.
And finally, make sure the Enable on Mobile is disabled as we don’t want a sticky menu in that view.

And that’s it! We’re officially done with our header structure. Now let’s move to the hero section.

Hero section

We created our header on a separate page as a template. Now we need to create an actual page that will be used as the landing page, set the template we just built as its header and then continue to build the hero section. In your WordPress dashboard, go:

Pages > Add New

In the ‘new page’ meta option section, there are settings about different sections of the page you are going to create including the header, main, title, and footer. In the header section, find the setting for ‘Overlap Content’ and set it as ‘No’. We do this so the header that we have created won’t disturb us while creating the section for the hero by overlapping it. Once we are done building the hero section, we’ll switch this option back to ‘Global’ so the header overlaps the hero.

In the new page authoring area, click on the Edit with the Elementor button and start creating the hero section in the Elementor environment.
Click on the Add new section red button and choose the single-column layout.
Edit Section > Layout setting > Set the content width as 700px.
Our hero section has a set height size, so we’ll set the min-height as ‘min height’ and the value to 615px.
The content in our hero section is vertically centered.
The hero section has a background image so here we go: Edit Section > Style setting > Set normal as background and choose the Classic style. Click on the plus button to choose an image from the library or to upload one.

So this is how our hero section looks like up to this point. As you can see, there are more details that should be added to the hero, and the header section should overlap the hero section. We’re going to apply this in the following steps:

Edit Section > style setting > Background
- Position: Top Center so the most important part of the image will be visible most of the time.
- Repeat: No Repeat to avoid unwanted repeating of the image
- Size: Cover so the image covers the entire hero section.
- Size: Cover to have the whole section filled with the background image

Edit Section > Style > Background Overlay:
- Color: #114cbd
- Opacity: 0.9
- Blend Mode: Multiply

Add a heading, a spacer and an icon to the section. Edit the elements’ content according to the model and set the heading to H1. To get the playback button to look the way it is on the main landing page, don’t forget to change the size of the icon to 15px and set the correct color for it from Edit Icon > Style> Icon. Also on the same tab, add a 45px padding in all directions. From Edit Icon > Style> Icon > Container, change the container color to match the target.

Intro section

Compared to the hero, there is not much work to do in this section – paying attention to some can do the trick. Just add a two 1⁄2 1⁄2 section and from Edit Section > Advanced, add 100px of padding to the top and bottom of the section.

As for the rest of this section, just add two headings and one paragraph and a button to the left column and an image to the right column. Here are some details to get the look right:

The first heading is H4.
The second heading is H2.
The button has a no-color background and an icon.
Move the icon to after the text from Edit Button > Icon by setting it to be right-aligned.
Set the image size to Large and also make it right-aligned.
Add paddings from Advanced tab on each elements’ settings to give the correct spacing.

Services

There is a trick to make this section really fast: add a ⅓ ⅓ ⅓ section. Make one of the columns exactly like the model and then remove the other two and just duplicate the first column twice to get the whole section done in under 5 minutes. But you need to do it as follows:

In the Edit Section > Layout, change the column gap to none.
Click to edit the first column on the left, from Edit Column > Advanced set all margins to 20 and padding to 0.
Add an Image Layout element from Edit Image Layout > Content > Settings. Adjust the settings as follows:

In the Edit Image Layout > Content > Item add one item and set the image size as full. Remove icon, title, and description. Set the link type as external.
Add a spacer, a heading, then a paragraph and edit the content, size and weight.
To add the hover effect, go to Edit Column > Style > Border set the Border Type to Solid then set the border width to 1px for bottom and zero for others. Change the color to #f1f1f1, click on hover and change the color to #2b71f6

Now you can remove the other two columns and duplicate the one you made twice and then simply change the content.

Note – You might wonder why we had to add a ⅓ ⅓ ⅓ structure as we could have added a single column, edit it and then duplicate. The issue is, in a real project you will not have the values for image height padding, etc. and therefore you would not be able to predict how your column will look unless it was within the proportions used in the design.

Subservices

Things get a tad bit more interesting in this section as we have an object that overflows this section. But before getting to that, let’s build the other parts of the section:

Add a 1⁄2 1⁄2 section and from Edit Section > Advanced set the top and bottom paddings to 100px.

On the left column:

From Edit Column > Layout, change the column width to 70%.
From Edit Column > Advanced, add a 25px padding in all directions.
Add a heading and an inner-section on the left column.
On the left Inner-Section column add an Image-Box set to the image to be on the left.
- From Edit Image Box > Style > Image set the image space and width to 30.
- Again From Edit Image Box > Style > Content set the spacing to 18 and also edit the typography and color.
- Duplicate this three times and move two to the right column in the inner-section.
On the left column of the inner-section, add 100px padding from the right
On the right column of the inner-section, add 100px padding from the left

Agency Landing Page with Jupiter X Padding

On the right column:

Duplicate the Work With Us button from the Intro section and bring it to this column and change the color to white.
Add a spacer under the button set it to 180px.

Here is the interesting bit: the smartphone mock-up screen. There are three things that we should get right here – the position, corner radius, and the box-shadow. Here it goes:

Add an image, change the image content to the smartphone mock-up.
From Edit Image > Style > Border
- Change the border radius to 45px
- Click on the box-shadow and give this value to the color rgba (71,72,133,0.16), and edit the rest of attributes as below

In Edit Image > Advanced > Custom Positioning
- Set Position to Absolute
- Set the offset values as below

Agency Landing Page with Jupiter X Custom Positioning

Customers

This part of the page is made up of two sections: the part with headings and text as well as the part with logos.

For the upper half, duplicate the intro section and carry it to after Subservices. Modify the paddings to copy the look and remove the button (Work With Us). Also remove the image for the right column.
For the lower half, add a ⅓ ⅔ section.
On the left column from Edit Column > Advanced, add a 100px padding from the right and then do the following:
- Add a Brands element and set the columns to 3.
- Remove all the items but one, click to edit it, leave all fields empty and only choose the logo.
- Duplicate the item and change the logo with another one.
- From Edit Brands > Style > Company Logo > Logo Wrapper, add a 100px padding from the right.

On the right column from Edit Column > Advanced, add 20px and 50px paddings to the top and left respectively, and then continue by
- Add a heading edit the content and typography
- Add a spacing of 50px
- Add the Google Ad badge
- Add a small spacer
- Add the Facebook MP Badge

Testimonials

Jupiter X has a Testimonials element, however having absolute design freedom while showing the reviews in the agency landing page with Jupiter X tabs element comes in handy. Like the one we used for the Restaurant Menu in the first crash course. These are the things we should do:

Duplicate the upper half of the Customer and carry it to the bottom of the page and change the section background color to #f9fcff and also edit the section paddings to 80px top and bottom.
Remove the text editor.
Add this tabs element (There are multiple tabs elements in Jupiter X. Make sure to use the one indicated below):

In Edit Tabs > Content remove two items and keep only one. Change the icon to user-o (short for User Outline) and for the label type Customer 1. Leave Choose Template on Select.
From Edit Tabs > Style change the looks of the element however you like. To remove the borders in each part, set the border type to Solid and then set the border width to 0.
Save your work and go to Dashboard > Templates > Saved Templates and click on Add New. In the windows that open, choose a title for the template, choose Section for template type and wait for the editor to open.

Create a ½ ½ section, add an Image to the left and a Text Editor along with it and Icon Box to the right column.
- Adjust the paddings and spaces as you wish.
- Change the typography and color to match the design.
- In Edit Icon Box > Style > Icon, enter 0 for the Icon Size and in Edit Icon Box > Style > Content, enter 0 for the Title Spacing.
- Publish and go back to the dashboard and add another section template
- In the editor, click on the folder icon (see the pictures below), add your template and edit the content to create more testimonials in a breeze.

Now go back to edit the page.
In Item, choose one template, duplicate it and choose the rest of the templates for duplicated items.

Blog

For the blog section, duplicate the Testimonials section and remove the Tabs. Add a Spacer on top of the section100 px. To get the Heading in two lines, use <br> where you want the line break. Add a Post element and do the following:

In the Edit Posts > Content > Settings make the settings as seen below:

Set the rest to inactive.
As for the look of the section, apply these settings in Edit Posts > Style

Set the Border Color to Normal: #e6e7ec and Hover: #4183ff and Border Width to 1px. Continue to Feature Image and make the following changes:

Do not forget to edit the typography and colors of the other parts of the element.

Contact Us

To make this section, add a two-column structure. Go to Edit Section > Layout, set the minimum height to 720px and column position as Middle.

To make the background look like the hero, apply the same settings to design. After doing this, set the left column to 35%.
Add a Heading to the left column, and a Form to the right column.
Apply padding from the left for the right column.
To get the look and function of the Form, go to Edit Form > Content> Form Fields.
Open each item and set them up according to the model.
From Edit Form > Content> Submit Button, change the text to “Let’s Talk”.

After that, go to Edit Form > Style and apply the settings below:

General: Column Spacing: 11 Row Spacing: 19
Field: Apply the following!

For field focus state, only change the Background Color to rgba (255,255,255,0.17)
Button: Border Type Solid – Border Width 2px (in every direction)

Footer

Hang in there – we’re almost done! There’s only one thing to do and believe me, it’s very straightforward. To get it done:

Go to Templates > Add New and choose the Section Type to Footer.
In the editor, add a ⅙ ⅔ ⅙ section.
Add a 100px from the top and 15px from right and left.
Add Logo to the left column and an Icon List (Set it to horizontal) to the middle column.
To remove the icon, set its color to Transparent.

Add and Social Icons in the right column.
Add a ⅓ ⅓ ⅓ section and set paddings to Top:50px, Bottom:30px and 15px from Right and Left.
Add a Heading, a Text Editor, and a Button to the left column.
Configure the typography, duplicate the Heading twice and drag the duplicates to the other two columns. Then edit the content.
Duplicate the Text Editor, drag it to the right column and then edit the content.
In the middle column, add an Icon List (Set it to Vertical), edit colors and typography and remove icons as mentioned previously.
In the Right Column, add a Form after the text editor and remove all fields other than email. To get the look, apply the settings below:

In Edit Form > Style > Button do the following:
- Set the Height and Width of the button to 45px
- Set the Color to Normal (#2b71f6) and Hover (#4183ff)
- For the Border do as seen below:

Now, all you need is a Divider and a Text Editor (for the copyright section) to finish the job. Add a section for each – and you’re done!

That’s a Wrap on our Agency Landing Page with Jupiter X

In our second installment of the JupiterX crash course, we made an Agency landing page with Jupiter X in less than two hours. By following these crash courses, you’ll be able to build expensive-looking webpages without breaking the bank.

Jupiter X is there to empower people who want to imagine and create, be it for a business or some good looking digital content. Do watch the video that comes with the post so you don’t miss any steps in making an Agency landing page with Jupiter X. Stay tuned for our next crash course!

jupiter x landing pages Agency Landing Page with Jupiter X

Here’s Everything You Need to Know About the New Generation of Jupiter X Templates

If you’ve been checking the Artbees weekly newsletters in recent weeks, then you may have noticed the recent new additions to the Jupiter X templates world! We not only added an advanced search module to the Jupiter X templates repository and to some of the landing pages but we also added about 60 brand new templates that are different in many ways.

In this article, I’m going to explore a little more about these additions. So let’s start with why we ideated and released this new generation of templates and which problem we tried to solve with them.

What are the problems with the usual website templates?

1- They are a dumb piece of generic design!

They are all generic so they can hunt a bigger chunk of users with one template. You can easily say when a website is built upon a template.

2- They look perfect until you touch them!

Just take a look at it on dumblatemobster.com, which is as charming as a McDonald’s Hamburger until you unbox it!

3- They are lifeless, not lifelike

Website templates basically do not reflect a real mission and purpose in their content. They are not really built to carry out a purpose.

Meet Jupiter X’s latest round of templates

In its update to the template repository over the past two months, Jupiter X has added about 60 new website templates for you that addresses all the downsides of the usual website templates! And they are from a vast category of niches and types. They encompass businesses and sectors such as agencies, leisure, online shops, creative portfolios, blogs, health, restaurants, listings, startups, events, community and much more. And even more stunning templates are on the way every month.

So what are these templates capable of in addition to being beautiful, customizable and responsive?

New Jupiter X templates carry a purpose

Long gone are the days of “design is beauty.” Design means more of purpose than aesthetics now so despite a usual template’s promise. Even when you add your copy and replace the dummy images with your own images. you are far from the actual website you were waiting to see. It’s because your template is just a presentation without a mission.

Purposeful Architecture

The new approach in template design at Artbees is not only in designing a visually appealing template. It’s a design that serves the mission of that template. The mission of a template consists of:

Mission of the website as a whole (based on its category and niche)
Mission of the homepage or landing page
Mission of the inner pages

The driving force and philosophy behind the new templates is to fulfill these missions.

Jupiter X Templates Purposeful Architecture

Targeted Design

Your template’s design boils down to your customer profile and what is appealing to your business audience. The category/niche belonging to a template plays a critical role in its design. The characteristics of the target audience for that business have been deeply thought about and the findings are made sure to get reflected in that niche’s template design.

Actionable Storytelling

Your Jupiter X template will convey your remarkable story tailored to a specific audience. It’s geared to generate leads and convert those leads into paying customers. Sometimes this is done with a mouth-watering food menu and a booking option right underneath. Or with a timeline and list of achievements to showcase a company’s credibility and trust with an option to call or email.

Content such as hero sections, headings, and call-to-action buttons are now in complete harmony with your website’s purpose and goal. Moreover, most of the templates now include nimble pop-up designs that support your site’s mission by drawing in subscribers or helping to boost sales.

Meet Jupiter X Advanced Template Finder

With the new 60 templates added to the repository, the Jupiter X template count now exceeds 220. While this might be an impressive figure for a WordPress website builder, it can also be worrisome for some users as they are left with several options and unsure about how to find the right template for themselves.

In order to better organize the growing number of Jupiter X templates, we built an advanced template finder module into the Jupiter X control panel as well as our demo websites. This is a powerful tool that locates the right template(s) based on the various factors that you set such as:

Keywords (manually entered)
Category
Style
Header Type
Menu Type
Components
Content-Type

Once you get your hands on it, it’ll prove a very effective way of filtering down the templates you are really after instead of wasting time opening and checking irrelevant templates.

What’s Next?

Jupiter X templates are a tool you can use to build authentic-looking websites with genuine content for businesses with a goal. And the best part? You don’t need to be a designer or a marketer. So the quick answer to the above question is: ‘A lot more new templates’! We will constantly build new templates based on this new approach and add them to the repository.

Stay current with the new added templates by checking the Artbees weekly newsletter and let us know if there is any niche or category you’d like to see as the next template released in Jupiter X. We transformed our template design approach based on Jupiter X community feedback and now look forward to your feedback about how we did it. Enjoy what’s left of the summer 😉

jupiter x jupiter x templates website templates

How to Customize your Blog with the Blog Customizer in Jupiter X

How to customize your blog featured image

Knowing how to customize a blog in WordPress has always been a big challenge, particularly for those who don’t want to deal with coding. Want to do something like creating a custom single post simply to remove a page title? Or something more complicated like changing the entire layout of single blog posts? Of course, the latter is much more involved.

The Blog Customizer is one of Jupiter X’s best features as it allows users to create custom single blog pages quickly and easily. It’s highly customizable, and you can change the layout of your blog pages without a single line of code.

By using the single Blog Customizer, you can:

Change the whole template of single blog posts.
Display/hide every element of the blog posts such as featured image, title, author box, etc.
Customize and change the styles of the blog post elements.

In this article, by using a practical example, we’re going to show you how easily you can customize your blog single page using the Jupiter X Blog Customizer feature. Let’s first create the single blog page before customizing it.

Adding a New Post

1. You are probably familiar with creating blog posts in WordPress. All you have to do is click on Posts > Add New from the WordPress sidebar menu.

How to customize your blog add a new post

2. Now you’re in the post editor. You can add a title and content to your post. Also from the right sidebar in the editor, you can add categories, tags and a featured image to your post. These things are optional but as we want to show how we can customize them, let’s add categories, some tags and a featured image to our post.

3. To be able to customize your posts with the Jupiter X Blog Customizer, your posts must have a Default Template. So from the right sidebar menu, find Post Attribute and select the Default Template.

4. Publish (Update) the page.

Important: To customize your posts with Jupiter X Blog Customizer, you must create at least one post and set its Post Attribute to the Default Template.

How to Customize your Blog Posts via Blog Customizer

To customize your posts:

1. From the left menu in WordPress, go to JupiterX > Customize > Blog > Single Blog

2. A new window will open with all the available options to customize and style the blog post. The Single Blog Customizer has two tabs: Settings and Styles. The first tab (Settings) allows you to choose a default template for your blog posts and enable or disable the feature image, title, date, author, categories, etc for them. In the second tab (Styles), you can change the styles of each element of the blog post.

Settings

Here are the available options for customizing the blog posts that you can find in the Settings tab.

Template

Choose a default template from the sample templates.

Display Elements

Enable/disable the below elements in the blog posts. The available elements include the following:

Featured Image: Displaying a representative image for our posts
Title: Displaying the title of the post
Date: Showing the publish date for each post
Author: Displaying the author of the post
Categories: Showing the post categories
Tags: Showing the post tags
Social Share: Adding a social share button for our blog posts
Navigation: Navigating through the next and previously published posts
Author Box: Displaying all the author’s information, such as the author’s name, bio, avatar, etc.
Related Posts: Displaying the related posts at the bottom of each blog post.
Comments: Enabling/disabling the comment feature for blog posts.

Styles

Here, you can change the styles of every enabled element in the blog post. All the available options for styling elements can be accessed by clicking on Customize for each element.

Here are some sample options for element customization:

Margins and Paddings

You can set margin and padding for every available element for the blog post.

how to customize your blog margin and padding

Units

Units are crucial to set font sizes, measuring spaces, setting the width, etc. Because of that, you can set different units for all the properties that have units. There are four types of units in the Jupiter X Customizer: PX, REM, EM, and %. By clicking on the chosen unit, other possible units will be shown, and you can choose another unit for the property.

Responsive Option

An important and useful feature in Jupiter X Customizer is the responsive option. This option allows you to set different values for different screen sizes for some of the properties of a particular element. For example, you can choose different font sizes for tablet and mobile screen sizes. For every property that has the responsive option, you will see the Monitor icon next to it. By hovering over the monitor icon, three devices will be displayed, and you can choose another value for them.

Case Study

Let’s assume that we want to customize a single blog page by using the Jupiter X Blog Customizer.

Here is what we do:

Create blog posts.
Customize global options.
Enable/disable elements in your blog posts.
Change the styles of existing elements.

Creating blog posts

We’ve described this section earlier. To customize your blog posts, you must create at least one blog post, but we recommend that you have multiple blog posts as we want to show the related posts below each blog post. Also, we suggest you add some tags and set a featured image to your posts to be able to display them for all single pages.

To emphasize what was mentioned before, the Page Attribute option for all of your posts must be set to the Default template.

Customizing global options

Before customizing blog posts, you might want to change the style of the body text or remove/add a sidebar from/to your pages. Also, you can decide whether the Title Bar must be visible for your pages or not. These options can be set globally and not only for the blog posts.

To change the style of body content:
Go to WordPress left menu > Jupiter X > Customize > Fonts and Typography to customize it.

Let’s add the popping font named popping. From Typography, click on Customize for Body. Set the font family to Poppins and the font size to 16px.

To remove the sidebar from your pages:
Go to WordPress left menu > Jupiter X > Customize > Sidebar and set its layout to No Sidebar.

And finally, let’s remove the title bar from our pages by going to Jupiter X > Customize > Title Bar and disable the Title, Subtitle, and Breadcrumb from it.

how to customize your blog title bar gif

Finally, Publish the changes.

Enabling/disabling elements in your posts

You must decide which elements that must exist and which elements must be removed from your blog posts.

We have multiple pre-made templates for our blog posts that we can select and then customize to our preferences. Let’s choose the first template.

Also, we want to remove Comments and Navigation elements from our blog posts and keep all the other options enabled:

All the changes happen instantly.

Change the styles of existing elements

So now that you’ve decided which elements should remain on your blog posts, it’s time to change the styles of enabled elements. Keep the Blog Customizer’s panel open, and go to the Styles tab.

Featured Image

Let’s start from the first element. Click on Customize for Featured Image. Set the max-height to 500px, border-radius to 0 and margin-bottom to 3rem. Here is our final customization for the Featured Image:

Title

Let’s go for the second element, which is Title. We won’t touch any settings for color and the font family so it inherits these styles from its parent which is body, But we will center align it, and change its font size to 2rem. 2rem means it’s two times bigger than its parent’s font size (body: 16px), so it equals 2x16px = 32px. Here is the result:

Social Links

You can add your desired social links icon to the bottom of your blog posts. They could either have names or simply keep the icons visible.

Author Box

We have plenty of options for customizing the author box. Let’s add a border-radius: 50% to our avatar to have a circular profile image in the author box. And change the font-size for the name, description and the social icons. Note that WordPress collects this information from your profile. To modify it, from the left menu in WordPress, go to Users > Your Profile and add the required information there. Here is the result:

Finally, let’s customize the Related Posts element. Changing the font size and adding a little bit of margin to the top and bottom of this element is enough.

This is the result after customizing single blog posts with the Blog Customizer:

After you’re done with all the customizations, simply close the Single Blog settings panel and Publish the changes.

Summary

In this article, we’ve explained how to customize your blog posts with the Jupiter X Blog Customizer. We showed how you can add your desired elements to blog posts, remove any unwanted ones and easily and quickly change the styles of all the available elements.

We’d love to hear from you. Let us know your experiences with Jupiter X Blog Customizer in the comment section below!

jupiter x how to customize your blog blog customizer

How to Create Custom Forms with Jupiter X Form Builder

Creating custom forms in WordPress has always been a hassle. Jupiter X has begun a new era in the form building experience. Now, you can create custom forms visually. Typically, site visitors come across forms such as signup, sign in, register, subscription, contact or any other custom forms.

Forms allow site visitors the ability to send information such as usernames, passwords, comments, emails, among other things to the server.

Forms contain fields such as dropdowns, checkboxes, text boxes, input, as well as submit and radio buttons. Nowadays forms play an integral role, particularly in digital marketing and social networks.

Form Builder in Depth

If you want to build a beautiful and secure form with Jupiter X, then you can use the Form Builder, which allows you to create custom forms in a few minutes with minimum effort.

Content Tab

This tab contains four sections such as Form Fields, Submit Button, Settings and Feedback Messages. Let’s go through each of them one by one.

Form Fields

In this section, we can create fields for our forms. Form Fields have two options:

Form: for setting the name of the form.
Items: each field in the form.

Furthermore, each item has its options like:

Type
Label
Placeholder
Required
Column Width
And more.

One of the important options of each field is the Type option, which defines the role of the field. The Jupiter X Form Builder has eleven types for fields:

Text: for creating the text input.
Email: for creating the email input.
Textarea: for creating the textarea input.
Tel: for creating only the phone number input.
Number: for creating only the number input.
Date: for creating the date picker.
Time: for creating the time picker.
Checkbox: for creating a checkbox element.
Radio: for creating a radio button element.
Acceptance: for creating an agreement for conditions or a term of use button.
reCAPTCHA: for creating the human testing Google service.

Submit Button

After clicking on the Submit Button, the information contained in the form is sent to the server. The Submit Button section has three options:

Text: for changing the bottom text.
Icon: for setting an icon for the Submit Button.
Column Width: for changing the Submit Button container.

Settings

The Settings section has three options:

Label: Show/Hide status for fields label.
Required Mark: Show/Hide * after fields label for required fields.
Add Action: Set the action in the form.

The Jupiter X Form Builder allows the user to choose from seven action fields. If you choose one of them, the options section of each action appears at the bottom of the setting section to where you can modify it.

1. Email: This action email form allows users to fill in their email address such as admin. We can set To, Email Subject, From Email, From Name, Reply-To, Cc, Bcc.

2. MailChimp: This is used for a subscription form. In order to use this, we must first have an API Key from MailChimp to manage our subscriber list. You can learn more about how to get a MailChimp API by clicking on this link.

In the MailChimp section, set the API Key, choose the Audience, and finally set the field mapping. In default, MailChimp has six fields including Email, Address, Birthday, First Name, Last Name, and Phone Number.

3. Redirect: With this, we can redirect our page to another URL.

4. Slack: this action allows us to send information from our form to Slack. In order to do this, we must first sign up for Slack, enable the incoming webhook, then set our information in the Slack setting section. For more info on how to do this, you can head over to this link.

5. HubSpot: One feature that Hubspot provides is allowing users to create a contact form and then to publish these forms on the internet. This allows us to directly submit our form data to the Hubspot form.

First, signup to HubSpot then go to Marketing > Forms and create a new form. After that, design a form and get a Portal ID and Form ID to enter in the HubSpot action settings in the form.

6. Download: This allows site visitors to download a file from your website.

7. Webhook: this enables us to integrate our form with Zapier webhooks. Zapier webhooks allows us to complete several tasks such as sending an email, connecting to Facebook, Twitter, and Slack, as well as accessing more than 1,500 apps.

To activate this action, go to Zapier, generate a zap, and copy the Webhook URL and paste it into the Webhook action setting. To find out more about how to do this, visit this link.

Feedback Messages

After a page visitor submits a form, they will be able to see a message on their screen. The Jupiter X Form Builder has four types of messages, including Successful Message, Error Message, Required Message and Subscriber Already Exists Message. In the Feedback Messages section, you can alter the messages tailored to fit your needs.

Style Tab

This tab contains six settings including General, Label, Field, Checkbox, Radio, Button. Let’s walk through each setting one by one.

General

In the general section, we have two options:

Column Spacing: this allows you to change the space between fields that are arranged horizontally.
Row Spacing: this enables you to adjust the space between fields that are arranged vertically.

Label

In the label section, we can set the below style for the label:

Color
Font family
Font size
Font weight
Transform
Style
Decoration
Line-height
Letter spacing
Space between the label and field.

Field

In the field section, we can set the below style in the normal and focused situation.

Background color
Border Type
Border Radius
Box Shadow

Also, we can set Color, Typography, and Padding of the placeholder and value.

Checkbox

In the section, we can set below style in the normal and checked situation.

Size
Color
Typography
Spacing between
Spacing
Background color
Border style
Box-shadow

Radio

In the section, we can set below style in the normal and checked situation.

Size
Color
Typography
Spacing between
Spacing
Background color
Border style
Box-shadow

Button

In this section, we can adjust the style for a button with the following settings:

Height
Color
Typography
Spacing
Alignment
Background Type
Icon color
Border style
Box-shadow

Creating a Custom Contact Form

Contact forms are a useful type of form commonly used on websites. Visitors to your page can fill out contact forms to send messages, ideas, questions or any other information to the site owner.

In creating this form, you have the option to include Email, Redirect, Slack and Webhook actions. At the end of this section, we will create a Contact Us form like in the image below:

1. Go to Elementor > Add New.

2. Create a Section that is named Contact Us.

3. Add a new section with one column and set the following:

This image as a background image.
In the Content tab, Content Width: 680px
In the Advanced tab, Padding top and Padding bottom: 100px

4. Add a Heading.

In the Content tab, set Title to Contact Us and Alignment to Center.
In the Style tab, set Color to #FFFFFF
In the Advanced tab, set Padding Bottom to 16px.

5. Add a Form element from Raven Elements, then set the name to contact.

6. Create a First Name Field.

7. Create a Last Name field.

8. Create an Email Field.

9. Create a Phone Number field.

10. Create a Message field.

11. In the Style tab, set:

Background Color to rgba(255,255,255,0.91)
Placeholder Color to #000000

Also, set the other settings as shown in the images below.

12. Go to Content tab > Submit Button section.

13. Go to Style Tab > Button Section. Set Background Color to #6073e0

14. Go to Content tab > Setting section. Set your preferred actions.

15. Change the settings like in the images below in the sections of each action.

In the end, when submitting the form, the data will be sent to my@example.com, the page will be redirected to www.artbees.net, the form data will be sent to our Slack channel and a new email will be sent to the Gmail account that we set up in our zap in Zapier.

Creating a Subscription Form

Subscription forms are popular on websites as it enables the site owner to send news and deals to their subscriber list.

In this section, we’ll go through and explain the MailChimp, Download and Hubspot actions in detail. Also at the end, we’ll create the subscription form shown in the following image.

1. Go to Elementor > Add New. Create a new section and call it “subscribe.”

2. Add a New Section with two columns then set:

Background Image to this image.
In the Layout tab, set content width to 800.
In the Advanced tab, set Padding to 100px.

3. Edit the left column. In the Advanced tab, set:

Padding-top to 19 %.
Padding-Right to 30%.

4. Add a Heading element in the left column the set following settings.

Title: Subscribe to our Feeds
Alignment: center
Text color : #FFFFFF
Size: 26

5. Add a Spacer element in the left column.

6. Add a Social Icons element in the left column with the following settings.

Shape : Circle
Alignment : Center
In style tab: Primary Color to rgba(255,255,255,0.54), Secondary Color to rgba(0,0,0,0.68), Size to 17, Spacing to 18.

7. Edit the Right column:

In the Style tab, set background color to rgba(255,255,255,0.8).
In the Advanced tab, set the following:

Padding-top to 10%.
Padding-Right to 5%.
Padding-left to 5%.
Padding-bottom to 4%.

8. Edit the Right column:

Add a Form Element. In the Content tab set Form to Subscribe.

9. Create the First Name and Last Name fields like in the images below:

10. Create the Email and Phone fields as seen in the following images:

11. Create a Birthday field like the images below:

Important Note: In your MailChimp account, the type of birthday field must be Date.

12. Change the Submit button and Settings sections like in the image below:

13. In the MailChimp section, set our API Key and create five fields in Field Mapping with the following values:

Field Mapping

MailChimp Field	Form Field
Phone Number	Phone
Birthday	Birthday
First Name	First Name
Last Name	Last Name
Email	Email

14. In the Download section, set your URL for download.

15. In the Hubspot section, set the settings as seen in the following image:

Field Mapping

Hubspot	Form Field
firstname	First Name
lastname	Last Name
email	Email

16. Edit the Form > Style Tab, set the following:

Column Spacing: 15
Row Spacing: 25

Finally, after submitting a form the download will begin, the data in the form will be sent to Hubspot, and users will be subscribed to MailChimp.

Securing the Form

There’s no doubt that security is one of the most vital factors when it comes to forms. The Jupiter X Form Builder has been built on top of standard security practices.

Frontend Validation

Frontend validation (HTML5 validation) is used on the client-side to ensure that the data is correct before sending. The data entered into a form needs to be in the right format and certain fields need to be filled in order to effectively send the submitted form. For example, if we enter a number in the email field, an error occurs and the data is not sent.

Backend validation

Backend validation runs on the server after the data from the form is sent to the server. Backend is more important than frontend validation because hackers can disable frontend validation and send malicious data to the server.

reCAPTCHA

reCAPTCHA is a free Google service that protects websites from spam and abuse. With this service, we can ensure that the data is sent by a human, not a robot.

To add this to our form, we must go to reCAPTCHA and get the Site Key and Secret Key, and then insert them into Elementor > Setting > Raven.

Then, create a field with reCAPTCHA type to use it.

Logging the Sent Emails

Being able to log and view the sent emails in WordPress admin is very helpful both for development purposes and in tracking the emails.

There are some plugins that allow us to log the emails.

1. Email Log

Email Log is a WordPress plugin that allows you to easily log and view all emails sent from WordPress.

The features of Email Log include the following:

See all sent emails.
Filtered or sorted based on the date, email, subject, etc.
Delete selected emails or bulk emails.
Resend emails.
Forward emails.
Export email logs.

2. WP Mail Logging

WP Mail Logging logs each email sent by WordPress. This can be useful if you don’t want to lose such mail content. It can also be useful for debugging purposes while developing.

Features

A complete list of sent emails.
Error status from mail implementation is logged.
Zero-configuration – just install and enjoy.
Log rotation – decide which emails you want to keep.
DevOP: IP of server sent the mail.

Conclusion

In this article, we took a deep dive into how you can create custom forms with the Jupiter X Form Builder. This post provided step-by-step instructions on how to create two types of forms: a contact form and a subscription form. Through looking at both of these examples, we also covered the Email, Redirect, Slack, MailChimp and Download actions that are found in them.

We took this post a step further and explained the significance of security and addressed frontend and backend validations, as well as reCAPTCHA. This post further examined two plugins that will allow you to log the emails that have been sent to your server from your site’s forms.

Feel free to share your ideas and experiences with us in the comments!

wordpress customization jupiter x form builder create custom forms

How to Create a Custom Footer with the Jupiter X Footer Builder

Almost all of the themes out there provide you a way to customize the footer for the website they belong to. But have you ever wondered if there is a way to break the mold and build a brand new design to create a custom footer? This was a question frequently asked by Artbees users – now it’s possible with the new Jupiter X theme!

In this article, we’re going to discover how we can customize our footer area with the Jupiter X theme via the default options and then see how we can create a completely new footer design from scratch. The tools we need for this tutorial include:

A WordPress website
Jupiter X Pro theme
Elementor Page Builder
Raven Plugin (Exclusively developed by Artbees to extend Elementor free functionality)

Let’s have a quick overview of how we can customize our website footer with the default options first since it’s an easy and fast method for having a beautiful footer. After that, we’ll show you how to create a completely new footer from scratch.

Customizing the Default Footer in Jupiter X

The first method will use the Jupiter X Customizer settings. As mentioned, it’s powerful enough to build a completely customized footer. However, when using this method, you have only one footer for your entire website, and in case you need a different footer for other pages, you’ll need to create a custom footer and assign it to those pages. We’ll get to that later. For now, let’s look at how we can access the footer customizer and apply some changes on the prebuilt footer.

From the WordPress left sidebar click on Jupiter X > Customize.

Create a Custom Footer Jupiter X Customizer — Access to Jupiter X Customizer

Then find Footer from the list and click on it.

Create a Custom Footer Dashboard — Customizer Dashboard Menu

These settings will allow you to customize everything in your footer including static/fixed behavior, showing/hiding the sub footer, making it full width, and showing/hiding some other elements on the footer like Copyright text and menu.

Create a Custom Footer Choose Footer — Choose Footer from the customizer left dashboard

The cool part is the Widget Area option. As soon as you enable it, you’ll see how many layouts of widgets you can choose for your footer. You can then populate the footer widget areas from WordPress Appearance > Widgets.

Create a custom footer widget area enable — Enabling Widget Area option unveils a set of footer layouts

As soon as you enable the Widget Area, you’ll be able to see the widget styling options in the second tab. It has a set of options including Widgets Title, Texts, Links, Thumbnail, Container, Divider, and Container Styles which allows you to customize every single corner of your widget. And you can do all of it live.

Create a custom footer widget styling options — Widget Styling options in Jupiter X Footer Customizer

It’s pretty neat, isn’t it? Now, let’s see what we can build as a custom footer.

Creating a Custom Footer in Jupiter X

This is the part where you’ll need the Elementor and Raven plugins. Elementor will give you the ability to build fantastic layouts, and the Raven plugin will let you create custom footers and headers on Elementor (free version) and also will give you 22 new elements to use. You can find more information about Raven plugin here.

The great thing about a custom footer is that you are no longer limited to the WordPress widgets. You can put anything you want, anywhere you want in your footer. Also, Jupiter X Pro offers a set of bundled plugins that extends the number of elements and effects (such as Jet Elements and Jet Tricks) that you can use in Elementor. You can utilize them as well.

To use a custom footer on your website, you must:

Create your custom footer in Elementor.
Assign it to all pages on your website or to a specific page.

We’ll walk you through this process step-by-step.

Creating a new Custom Footer in Elementor

1. Like every other WordPress modification, the first step will start from the backend Side Dashboard. From the menu on the left in, click on Saved Templates beneath Elementor.

Create a custom footer saved templates — Click on Saved Templates to see the old templates and add a new one

2. Next to the Saved Templates title, click on the Add New button.

Create a customer footer add a new template — Add a new template to Elementor

Note: If you are using Elementor Pro, you may see your old footer templates in the Theme Builder instead of Saved Templates.

3. For the template type select Footer, give your footer a name and click on the Create Template button.

Crate a custom footer choosing a template — Choosing a template type while adding a new template to Elementor

4. You will now be redirected to the Elementor page editor where you can choose a footer template from the library or create a custom footer from scratch using Elementor. Some of the pre-made footers are part of Elementor Pro and, in order to use them, you must first purchase Elementor Pro. You can also use the pre-made Jupiter X templates, which are free.

To see the Jupiter X templates, simply click on Jupiter X. You can use your preferred template by clicking on the Insert button.

Create a custom footer Jupiter X footer templates for Elementor — Jupiter X Footer Templates for Elementor

If you don’t want to use pre-made templates and plan to create your custom footer from scratch, simply click on the “x” icon. That will redirect you to the Elementor page editor.

Create a custom footer closing templates modal — Closing the templates modal

5. If you’re using a pre-made template, you can customize it or add new widgets. In order to customize a brand new footer (without using a pre-made template), first determine how many columns you need for your footer template. Then add your desired Elementor’s widgets to it, such as Site Logo. Since this is same as creating any other content on your page, in case you needed more information about how to add and modify content on your template, you can check some Elementor Tutorials and the Jupiter X knowledge base.

Create a custom footer building template from scratch — Building up the template from scratch

You can also add WordPress widgets to your footer template by going to the WORDPRESS category in the Elementor widgets panel.

Create a custom footer widgets in Elementor — WordPress widgets in Elementor

6. Publish the template after customizing it.

Create a custom footer save changes — Save and Publish the changes

Important Notes!
1. In case you are using Elementor Pro for a footer template with Display Conditions, some of the Jupiter X footer customizations may not work properly. To fix this:

Make sure the Display Conditions are not provided for your footer templates.

Create a custom footer elementor display conditions — Elementor Display Conditions

Simply save a template without conditions.

2. Make sure the Sticky option under Scrolling Effect is set to None in the Advanced settings of the Section container in your footer template.

Create a custom footer section scrolling — Section Scrolling effect option.

Assigning a Custom Footer to your Website

Now it’s time to assign our beloved footer template to the website.

1. From the menu on the left in WordPress, go to Jupiter X > Customize.

2. From the dashboard on the left in Customizer, click on Footer.

3. For the Footer Type, select Custom and assign your footer from Template.

Create a custom footer customizer — Choosing the footer template in the Footer Customizer

4. Click on Close and Publish the changes.

You’re done! Now, refresh your page and see how your new footer looks on your website. One thing to mention is that you can add as many footer templates as you want and assign them to different pages. Have a look at this tutorial to find more!.

Summary

Footers are like the summary of an entire website. Having a good summary that contains relevant links and content at the end of a page will send your viewers to the right place.

In this article, we learned how to get rid of the technical coding stuff when creating a footer and easily build customized or new footers using the Jupiter X theme. Now, you can channel your energy into creating amazing your content instead of worrying about how to build a footer because every tool you need is ready for you!

wordpress customization jupiter x elementor page builder jupiter x features Create a Custom Footer raven plugin

How to Create a Custom Header with Jupiter X like on the Apple website

With the Jupiter X theme, you can create a new custom header from scratch using Elementor. It allows you to use all of the Elementor elements to build a highly customized header, which is the first thing visitors will see when they enter your site.

Please note that the Raven plugin must be installed and activated among the bundled plugins before being able to use the Custom Header feature with the free edition of Elementor.

The difference between the old Header Builder in Jupiter 6 and the Custom Elementor Header Builder in Jupiter X

Simply put, the old header builder has limited options and styles, while the custom Elementor header has virtually unlimited customization due to its widgets. This means that you will be able to add any Elementor elements to the header, including buttons, images, headings, icons and much more.

The Header Builder in Jupiter 6 doesn’t have as many elements, meaning the design is simpler:

If you’re looking for a more specific header design, Elementor will allow you to do just that:

What you can do with the Jupiter X Header Builder

With the power of the Elementor editor, you can design a custom header any way you like and be able to complete projects faster than ever before. You can also save a header template and reuse it for another project. With the Header Builder and the Raven plugin, things are going to be much simpler and faster.

You also have the option of choosing a header from a large selection of designer-made blocks, which are readily available in the Template Library. There, you’ll be able to find templates from Jupiter X and the Elementor Pro version. Customize it any way you like, and give it your own personal touch.

Note that to use the Elementor Pro templates, you’ll have to buy the Elementor Pro version as the Jupiter X theme only provides the free version of Elementor. However, there are several Jupiter X header templates for you to choose from, and the Pro version is not required.

Creating a custom header like on the Apple website

Creating a custom header can be done with ease and in no time at all as code editing is not required.

As an example, we’ll use a header from the Apple website:

To create a similar header, make sure you have activated the Raven and Elementor plugins.

1. From the menu on the left side in WordPress, click on Templates and go to the Saved Templates menu

2. Click on the Add New button next to the My Templates title.

3. For the template type, select Header, give your header a name and click on the Create Template button.

4. Click on the + icon to add a new section and select the structure as a row without columns.

5. Before adding a menu to the section, create it in Appearance > Menus. If you want to have the icon as the homepage instead of just a text as on the Apple site, you will also need to activate the Menu Icons plugin that is bundled in the theme. Then, in Appearance > Menus, create a menu, and select an icon for your homepage item:

Select any icon you want. If you want to hide the Home text in the menu and only show an icon, you need to check the Hide Label option and set other settings. Then, click the Select button:

6. Add other menu items from your pages or custom links to complete the menu.

7. When it’s saved, go back to your header template in Elementor editor and look for the Navigation Menu element from Raven (the blue one).

8. Select your menu and enable the Menu Icons option in the Settings tab.

You’ll still see the Home label in the editor, but the icon will be shown on the frontend.

9. You can then add a background color for the header. You’ll need to edit the Section settings, and set the background in the Style tab:

Also, style your Navigation Menu via the Style tab in the Navigation Menu settings.

Once you have made the needed changes to the header design, click Publish, and assign the custom header in Appearance > Customize > Header.

That’s it! You’ll now be able to see your handcrafted header live on your site. You can easily create as many headers as you like, and spread them across the relevant pages with a single click.

Wrap Up

From now on, you don’t need to change your header.php file or hire a developer to customize the CSS header elements of your site. Jupiter X features make designing a header quick and straightforward. With the bundled plugins like Raven, Menu Icons and the main one Elementor, you’ll be able to create any custom design for your header.

wordpress customization jupiter x Custom Header Apple

How to Quickly Create a Landing Page Using Custom Blocks in Jupiter X

Elementor is an extremely powerful page builder. Among all its features, the ability to manage and create a landing page with custom blocks is quite handy. It allows you to build different parts of a website, then combine them into a page.

What is a custom block?

A custom block is similar to a piece of a puzzle or a brick of the wall. A landing page or complete website has several sections like a header, footer, hero, slider, testimonial, form, and so on. With the custom block feature, you can create each section separately and use each in any site or web page.

What are the benefits of a custom block?

Ability to use readymade block templates.
Creating a custom block once, then using it on several web pages or websites.
Ability to export/import the custom blocks.
Increasing the speed of creating a web page.

How to Create Custom Blocks

By using Elementor with the Jupiter X theme, you’ll be able to create different types of custom blocks: Page, Section, Header, Footer. With these types, you can create various custom blocks for any web page.

To create a custom block, follow the steps below:

1. From the left sidebar of the admin page, click on Elementor > Templates > Add New

Create a Landing Page Using Custom Blocks 1

2. Select the type of custom block, then enter a template name and click on the Create Template button.

3. In Elementor editor, add a new Section then add a widget.

4. There are two methods to save the custom block.
1). Right-click on the section button, then click on Save as Template.

2). Right-click on the Save Options button then click on Save as Template.

How to Export/Import Custom Blocks

Another valuable feature in Elementor, particularly when it comes to creating a landing page using custom blocks, is exporting/importing. With this feature, you can easily create custom blocks and export them. Also, you can import custom blocks that have been created by other people.

Exporting a custom block

There are two methods to export a custom block.

1. Go to Elementor > Templates > Saved Templates then click on the Export Template button.

2. In the Elementor editor, click on the Add Template button then click on the Export button in the Library popup.

Importing a custom block

To import a custom block from your computer, click on Elementor > Template on the left sidebar of the admin page. Then in a new window, click on Import Templates and choose your file to upload it.

How to Create a Landing Page Using Custom Blocks

A landing page (a.k.a static page, lander, lead capture page) is a standalone page that shows all the important content of any website on a single web page.

Creating a Header Block

The Header block is one of the moment sections on each website. In this case, it contains brand and social icons.

Create a Template and set the type to Header.
Add a new Section with two columns.
Add a Heading element then set the following settings.
- On the Content tab, set Title to Law <span style”color: rgb(248, 88, 88)”>.</span>
- On the Style tab, set color to #000000
Add a Social Icon element the set following settings.
- On the Content tab, create 4 icons as: Facebook, Twitter, Google+, WordPress
- Also set Shape to circle and Alignment to Right.

Creating a Hero Block

The Hero block is one of the most important elements when you create a landing page using custom blocks as it represents the leading message and the product promoted by your website. In this case, it contains two headings and a call-to-action button.

Create a Template and set the type of it to Section.
Add a new Section then set the following settings.
- On the Layout tab, set Height to Fit to Screen and Column Position to Middle
- On the Style tab, set Background Color to #565656
Add a Heading element then set the following settings.
- On the Content tab, set Title to Expert Legal Solution, Alignment to Center
- On the Style tab, set Color to #ffffff
Right-click on the first Heading element, click on Duplicate, and then set the following settings.
- On the Content tab, set Title to Defend Your Constitutional Right with Legal Help
Duplicate the previous heading then set Title to Business Law
Add Button then set following settings.
- On the Content tab, set Text to Make An Appointment, Alignment to Center
- On the Style tab, set Background color to #f85858, Border Radius to 28px
- On the Style tab > Typography set Size to 18px, Weight to 300, Letter Spacing to 2.1
- On the Advanced tab, set margin-top to 5%

Creating a Stats Block

Stats block is a section that allows you to input information and the statistics of your operations, followers, subscribers, delivered projects, among other data points. Typically, a web designer uses a counter, progress bar, and chart.

Create a Template and set the type of it to Section.
Add a new Section with one column then set the following settings.
- On the Layout tab, set the Height setting to Min Height equal to 400.
- On the Style tab, set the Background color to #efefef
Add an Icon element then set the following settings.
- On the Content tab, set Icon setting to user-o
- On the Style tab, set Color to #f74242, Size to 60, and Alignment to Center
- On the Advanced tab, set margin-top to 15px
Add a Counter element then set the following settings.
- On the Content tab, set Starting Number to 0, Ending Number to 27539, Animation Duration to 2000, Title to Satisfied Clients
- On the Style tab > Number section, set the Text color to #000000, in Typography set: Size to 45, weight to 200, Line-Height to 1.6 EM
- On the Style tab > Title section, set the Text color to rgb(0,0,0,0.36), in Typography set Line-Height to 4 EM
Duplicate the first column three times, then set different icons and titles as explained before.

Creating an About Us Block

In web design, the aim of the About Us section is to introduce your team, experience, expertise, operations, services, and to briefly answer questions like: “who are we?” and “what do we do?”.

Create a Template and set the type of it to Section.
Add a new Section with two columns then set the following settings.
- On the Layout tab, set Content Width to Full Width
Edit the left Column then set the following settings.
- On the Style tab, set Background Image to this image. Since you can’t see the background image, you need to add an element like Spacer element to the left column.
Edit the right Column then set the following settings.
- On the Style tab, set the Background color to #665e5c
- On the Advanced tab, set Padding top to 27 and Padding bottom to 24
Add an Inner Section element to the right column.
- On the Layout tab, set Minimum Height to 450px.
Add a Heading element then set the following setting.
- On the Content tab, set Title to Why Choose Us?
- On the Style tab > Typography, set the weight to 300
- On the Advanced tab, set margin-top to 25
Add a Text Editor element then set the following setting.
- On the Style tab > Typography, set Line-Height to 1.6EM
- On the Advanced tab, set margin-top to 5
Add a Progress Bar element then set the following setting.
- On the Content tab, remove Title, set Inner setting to Adoption Law, Percentage to 50
- On the Advanced tab, set margin-top to 50
Duplicate the previous Progress Bar then set the different settings as explained above.

Creating a Contact Us Block

The Contact Us section allows your visitors to view your business contact info. It’s also quite common to add a contact form to this section for easier communication.

Create a Template and set the type of it to Section.
Add a new Section then set the following settings.
- On the Layout tab, set Minimum Height to 500
Add a Heading element then set the following settings.
- On the Content tab, set Title to Contact Us, Alignment to Center
- On the Style tab, set color to rgb(0,0,0,0.84), in Typography, set size to 47px
- On the Advanced tab, set margin-top to 95px, margin-bottom 100px.
Add an Inner Section element with two columns.
In the left Column, add an Icon list element then set the following settings.
- On the Content tab, create 4 items then set proper settings like Text to 198 West 21th Street, Suite 721 New York NY 10016, Icon to location-narrow. Repeat the same steps for other items with different settings.
- On the Style tab > List, set Space between to 25, Divider to On, Style to solid, weight to 1
- On the Style tab > Icon, set Color to #dd290d, size to 14
- On the Style tab > Text, set Color to #9b2f14
In right Column, add a Form element then set the following settings.
- On the Content tab > Form Fields, create 3 fields then set the settings like Type to Text, Label to Name, Placeholder to Name, Column-width to 100%. Repeat the same steps for other items with different settings.
- On the Content tab > Submit Button, set Text to Send, Icon to Send
- On the Style tab > General, set column-spacing to 7, Row-spacing to 7
- On the Style tab > Button, set Text color to #ededed, background color to #e8241e

Creating a Testimonials Block

The Testimonials Section showcases user feedback about your products.

Create a Template and set the type of it to Section.
Add a new Section then set the following settings.
- On the Layout tab, set Height to Fit to screen
- On the Style tab, set Background Color to #efefef
Add a Heading element then set the following settings.
- On the Content tab, set Title to Testimonials, Alignment to Center.
- On the Style tab, set Color to rgb(0,0,0,0.84),
- On the Style tab > Typography, set Size to 45px, Weight to 300
- On the Advanced tab, set margin-bottom to 75px
Add a Testimonials element then set the following settings.
- On the Content tab > Settings, set Slides to show to 1, Effect to slide, Animation speed to 5000, Show Dot Navigation to yes
- On the Content tab > Items, add 3 items and set favorite data to Image, Comment, Name, Date.

Creating a Footer Block

The Footer Section normally contains small widgets that provide information about the website. It may also contain other widgets for additional information.

Create a Template and set the type of it to Footer.
Add a new Section with one column then set the following settings.
- On the Style tab, set Background Color to #ffffff
- On the Advanced tab, set Padding-top to 40, Padding-bottom to 20
Add an Inner section element with 3 columns.
Add a Heading element for the first column then set the following settings.
- On the Content tab, set Title to Attorney’s Law, Alignment to left
- On the Style tab, set color to #515151, in Typography, set the size to 24px, weight to 300
- On the Advanced tab, set margin-top to 10px, margin-bottom 33px
Add a Text Editor element in the left column then set your favorite text.
Duplicate the Heading element in the first column and add it to the second column and set Title to Opening Hours and Alignment to center.
Add an Icon List element then set the following settings.
- On the Content tab, create 3 items then set settings like Text to Mon – Thu: 9:00 – 21 00. Repeat the same steps for other items with different settings.
- On the style tab, set Space Between to 8, Alignment to center
Duplicate the Heading element in the first column, add it to the third column, and set Title to Contact Information and Alignment to center.
Add an Icon List element then set the following settings.
- On the Content tab, create 3 items, then set the settings like Text to 198 West 21th Street, Suite 721 New York, Icon to Address-Book. Repeat the same steps for the other items with different settings.
Add a Heading element then set the following settings.
- On the Content tab, set Title to © 2019 Free HTML5. All Rights Reserved. Designed by FreeHTML5.co Demo Images: Unsplash, Alignment to Left.
- On the Style tab, set Color to #545454, in Typography, set Size to 16px, Weight to 400

Combining all Blocks

After creating the necessary blocks, let’s combine them to create the final page.

1. Create a new Page from the left sidebar of the admin page.

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

3. In the Elementor editor, click on the Add Template button.

4. In the Library popup, click on the My Templates tab. In this tab, you can see your custom blocks (imported or created). Finally, click on insert.

5. Add the templates in the following order: Header, Hero, Status, About Us, Contact Us, Testimonials, Footer.

Note: After adding each custom block (template), the layout of the page may reset. To assign the correct layout, click on the Settings button and choose the proper layout.

Conclusion

In this article, we showed you how to create a landing page with custom blocks in Jupiter X. We further explained the process of building custom blocks from scratch. But don’t worry – if you need readymade custom blocks, you can check out Jupiter X readymade blocks.

wordpress customization jupiter x Create a Landing Page Using Custom Blocks custom blocks

Create a Job board in WordPress using Jupiter X

One of the important things in any person’s life is his or her job. A good career provides structure and gives one’s life direction. Therefore, finding the right job is essential. Nowadays, one way to find a job is by using a job board website.

What is a job board website?

A job board (a.k.a job site, job portal, employment site) is a website or webpage that deals particularly with employment, job seekers, and resumes. It enables employers to offer job positions to potential candidates. Applicants can search job boards to find open positions and career opportunities.

There are different types of job board websites over the internet:

General job board like Career Builder.
Classified job board like The Guardian jobs.
Specialist job board like Upwork.
Employment agency like USA Jobs.

Additionally, there are job search engines. The main difference between a job board website and a job search engine is that job seekers only see job offers on one site but on the job search engine, the applicants can access job offers from several job board websites or employers’ career websites.

In this article, we’re going to create a job board in WordPress using the Jupiter X theme and WP Job Manager plugin. In case you want to use a different plugin, the following list can help you.

WP Job Manager WordPress Plugin

WP Job Manager is a simple, lightweight and shortcode-based plugin that will help you create a job board in WordPress. It allows you to create jobs, job categories, frontend job submission forms and job dashboards for users.

Features

Add, manage and categorize job listings using the familiar WordPress UI.
Searchable and filterable ajax-powered job listings are added to your pages via shortcodes.
Frontend forms for guests and registered users to submit and manage job listings.
Allow employers or recruiters to preview their listing before it goes live. The preview matches the appearance of a live job listing.
Each listing can be tied to an email or website address so that job seekers can apply seamlessly.
Searches also display RSS links to allow job seekers to be alerted to new jobs matching their search.
Allow logged in employers to view, edit, mark as filled, or delete their active job listings.
Create three default pages as Jobs, Job Dashboard, Post a Job.

Useful Shortcodes

The plugin comes with several shortcodes to show jobs and forms in various formats. You can learn more about the following shortcodes in this shortcode reference article.

[jobs]: Shows a list of your jobs as well as filters for searching.
[job]: Shows a single job by ID.
[job_summary]: Shows a single job’s summary by ID.
[submit_job_form]: Shows the frontend job submission form.
[job_dashboard]: Shows the job dashboard used by logged in users.

Create a Job Board in WordPress with WP Job Manager Plugin

Now that we have learned about the WP Job Manager plugin, let’s create a website using this plugin and your Jupiter X theme.

Create a Job Board in WordPress screenshot 1

Creating Job Categories

Categories provide a clear structure to websites. It helps visitors to easily find all jobs within a specific industry or field of expertise.

For creating categories, go to Job Listing > Add Categories, then create the following categories:

Web Development, Web Design, Marketing, Accounting, Customer Support, Illustrations, Writing, Photography, Video Production.

Create a Job Board in WordPress Screenshot 2

Creating Jobs

For the purpose of this article, let’s create some jobs so you can configure the plugin properly.

1. Go to Job Listing > Add New, then create some jobs and set proper values as shown below.

Create a Job Board in WordPress Screenshot 3

2. After creating the jobs, it’s time to configure the settings in Job Listing > Settings

3. In the Job Listing tab, set the following settings.

Create a job board in WordPress Screenshot 4

4. In the Pages tab, set the following settings:

Submit job Form Page: Post a Job (automatically created via the plugin)
Job Dashboard Page: Job Dashboard (automatically created via the plugin)
Job Listing Page: Home (Will be explained in the next section)

Create a job board in WordPress Screenshot 5

Creating a Home Page

1. Create a new page from Pages > Add New. Set the following settings, then edit the page with Elementor.

Title: Home
Template: Full Width

Create a job board in WordPress Screenshot 6

2. Add a new section. Set Padding as shown below:

Create a job board in WordPress Screenshot 7

3. Set the Background settings as shown below. You can download the image from Unsplash for free.

Create a job board in WordPress Screenshot 8

4. Set Background Overlay settings as shown below:

Color: #000019
Opacity: 0.89

Create a job board in WordPress Screenshot 9

5. Add a Heading element then set the following settings:

Title: Hire a talent to do the impossible
Size: XL

Create a job board in WordPress Screenshot 10

6. Add a Text Editor element. Set line-Height to 0.8 and text to:

Compellingly utilize value-added sources vis-a-vis client.
Centric process improvements. Distinctively negotiate impactful leadership skills.

7. Add a Text Editor element. Set text to:

Trending searches: Creative Designer, Remote Developer, Writer

8. Add a Shortcode element then set it to [jobs].

Create a job board in WordPress Screenshot 11

9. In the end, go to Appearance > Customize > Homepage Settings

Set your homepage displays to A static page
Set homepage to Home

Create a job board in WordPress Screenshot 12

Creating Category Pages

For each category, let’s create a specific page so users can find all jobs under that category in one page.

1. Create a new page. Set the Title to Accounting then add Shortcode block with [jobs categories=”accounting”] content.

Create a job board in WordPress Screenshot 13

2. Create the following pages similar to the previous step with the following settings.

Set Title to Customer Support and add Shortcode block with [jobs categories=”customer-support”] content.
Set Title to Web Development and add Shortcode block with [jobs categories=”web-development”] content.
Set Title to Web Development and add Shortcode block with [jobs categories=”web-development”] content.
Set Title to Web Design and add Shortcode block with [jobs categories=”web-design”] content.
Set Title to Marketing and add Shortcode block with [jobs categories=”marketing”] content.
Set Title to Illustrations and add Shortcode block with [jobs categories=”illustrations”] content.
Set Title to Writing and add Shortcode block with [jobs categories=”writing”] content.
Set Title to Photography and add Shortcode block with [jobs categories=”photography”] content.
Set Title to Video Production and add Shortcode block with [jobs categories=”video-production”] content.

Creating Menus

When you create a job board in WordPress, you also need to create two menus as explained below.

1. Go to Appearance > Menus

2. Create a new menu, then follow the below steps:

Set Name to Primary.
Add How It Works (page, link, …) and Job Dashboard pages to your menu.
Save the menu.

Create a job board in WordPress Screenshot 14

3. Create another new menu, then follow the below steps:

Set the Name to Secondary.
Add all the category pages you created before.

Create a job board in WordPress Screenshot 15

Creating a Header

In job board websites, it’s very helpful to create a header with the necessary links like categories, submit a form, etc.

1. In the admin page, go to Appearance > Customize > Site Identity. Add your logo in Site Logo.

2. Go to Header. In the Settings tab, select the custom type and click on the New button.

3. In the popup, add a New Section.

4. Add Site logo Element to section.

On the Content tab, set Choose logo to Primary.
On the Style tab, set Max Width to 75%.

5. Add Flex Spacer element after Site Logo in the Section.
6. Add Navigation Menu element to the section. Set the menu option to Primary.

7. Add a Button element. In the Content tab:

Set Text to Post a Job
Set Link to Post a Job page

In the Style tab:

Set background color to #503bff.
Set Border Radius to 2.
Set Padding Top/bottom to 9 and Padding Right/Left to 15.

8. Add a new Section. In the Style tab, set Background Color to #f8f9fa.

9. Add a Navigation Menu element in the section.

In the Content tab, set Menu option to Secondary.
In the Style tab, set the following settings.

Creating Footer

1. In the admin page, go to Appearance > Customize > Footer.

2. In the Settings tab, choose Custom type and click on the New button.

3. Click on the Add Template button.

4. Choose the following block from the list of ready-made templates, then click on the Insert button.

5. Edit the Section, set Background Color to #000116.
6. Change the Heading to Hire a talent like a pro!
7. Delete the Get Started and Features columns.
8. Replace Company column items with About, Investors, Terms of Use, Privacy Policy, Contact us.
9. Add a new column then add the Recent Jobs widget. On the content tab, set Number of listings to show up to 3 posts.

Improve Default Styling

The WP Job Manager plugin has some basic styling to help you effectively create a job board in WordPress. You can improve the styling by adding the following CSS in Appearance > Customize > Additional CSS.

/* Job board filter */
.job_filters {
 margin: 2rem 0 2rem;
 border: 1px solid #e5e7e8;
 background-color: transparent;
border-radius: 4px;
overflow: hidden;
}

.job_filters input[type=text],
.job-manager-form input[type=text] {
 display: block;
 width: 100%;
 padding: .375rem .75rem;
 font-size: 1rem;
 line-height: 1.5;
 color: #495057;
 background-color: #fff;
 background-clip: padding-box;
 border: 1px solid #ced4da;
 border-radius: 4px;
}

.job_filters .select2-container--default .select2-selection--single {
 height: 38px;
border: 1px solid #ced4da;
}

.job_filters .select2-container--default .select2-selection--single .select2-selection__rendered {
 line-height: 36px;
}

.job_filters .select2-container--default .select2-selection--single .select2-selection__arrow {
 height: 36px;
right: 5px;
}

.job_filters .search_location {
 margin-bottom: .5rem;
}

.job_filters .job_types li {
padding: .7rem 1rem;
}

.job_filters .job_types li label {
margin-bottom: 0;
}

/* Job single */
.single-job_listing .jupiterx-post-author-box,
.single-job_listing .jupiterx-post-image{
display: none;
}

/* Job recent widget */
.jupiterx-widget ul.job_listings {
border-width: 0;
}

.jupiterx-widget ul.job_listings li.job_listing {
border-width: 0;
margin-bottom: 10px;
}

.jupiterx-widget ul.job_listings li.job_listing:hover a {
background-color: transparent;
}

.jupiterx-widget ul.job_listings li.job_listing a {
color: #fff;
padding: 0;
font-size: 1rem;
}

.jupiterx-widget ul.job_listings li.job_listing a div.position {
padding: 0;
float: none;
}

.jupiterx-widget ul.job_listings li.job_listing a ul.meta {
padding: 0;
float: none;
text-align: left;
display: flex;
width: 100%;
}

.jupiterx-widget ul.job_listings li.job_listing a ul.meta li {
margin-right: 10px;
}

Conclusion

In this article, we showed you how to create a job board in WordPress with the WP Job Manager plugin and your Jupiter X theme.

There are some other plugins in the WordPress Community that you can try. Feel free to share your favorite one with us in the comments section below!

jupiter x elementor page builder Create a Job Board in WordPress

Jupiter X v1.3 Is Out! Supercharge Your Forms With These New Features!

A couple of days ago Jupiter X v1.3 was released. Of course, just like any other theme updates, it comes with a long list of improvements and additions to make the theme even more powerful and capable. But looking at the features, you will notice that this update has particularly improved on one feature! Yes, that’s the form element.

Form builders are among those parts of WordPress themes that are basically the same without much difference in various themes and you don’t expect to see anything about them in theme updates. Well, Jupiter X surprises us again with this update!

Jupiter X form builder is already a powerful tool to visually create and order your online forms. It also allows you to customize its appearance to the deepest level. So, let’s see what can possibly be an improvement coming with the latest update, Jupiter X v1.3!

New form elements added

As the title also suggests, you will have more elements to use in your forms including checkbox, radio button, date selector and time selector. Date and time selector will open standard date and time selectors for your users to set a time or date.

For checkbox and radio buttons, add the choices one per line and see them listed down.

Say hi to download action

This action helps you upload a file to get downloaded when the submit button is clicked by the user; say, the PDF book you give away in return for new subscribers or a freebie design file in exchange for some valuable leads! There are 2 ways to link a “file” to “download” action:

Via source file link
By uploading the package directly to your hosting service

Hubspot integration

If you‘re using HubSpot to collect leads and you don’t want to use one of the forms from its built-in library, you can simply connect your Jupiter X form to Hubspot. You can enter your HubSpot account details such as Portal ID and Form ID, and the data your form collects will be sent in defined HubSpot table fields. You should do the field mapping here to choose what field will be connected to which HubSpot fields.

Deeper MailChimp integration

Jupiter has offered MailChimp integration from its very early versions, but with the latest Jupiter X v1.3 form builder updates, you will have tighter integration with MailChimp in your forms. Just by entering your MailChimp API key, you can connect your form to any specific audience list you have in Mailchimp and the emails you collect in your form will be added to that audience segment.

If your audience is segmented into groups, you can choose a group so the collected emails will be directly added to that group. Furthermore, you can activate the double opt-in feature for your entries directly from Jupiter X instead of doing it from MailChimp.

Just like the Hubspot integration, you can perform field mapping to indicate the exact MailChimp fields you want each of your form fields to be connected to.

Recap

How do you like the new additions to Jupiter X v1.3 form builder? Go ahead and build your next online form with it and let us know if there is anything you expect from a form builder that Jupiter X v1.3 form builder hasn’t yet provided. And stay tuned for more and more new features and additions coming your way very soon!

WordPress themes jupiter x form builder jupiter x v1.3

How to Quickly Create a Landing Page Using Readymade Blocks

Nowadays, any business needs a website for presenting and promoting its operation, production, expertise, and services. We live in a world where internet users have grown to more than 4 billion. That is a huge opportunity for businesses.

WordPress theme Landing Page jupiter x features create a landing page using readymade blocks readymade blocks

Now you are able to Create & Edit Custom Header and Footer right from inside Customizer!

Web designers who are into advanced customization know that one of the important parts of a WordPress theme is its ability to create and edit custom header and footer.

The powerful Jupiter X header and footer customizer already allow you to create and edit custom header and footer, but it involved a little back and forth navigation from the backend and frontend. We recently made the whole process a lot easier for you.

Before the new feature was added, you had to create a template first, open the customizer, chose the template for your header or footer, and then go back to Customizer to select and set that header or footer template as your global header or footer. Whew!

With the new feature, the entire process will be within the customizer itself, without the need to go to your WordPress dashboard!

How to Create and Edit Custom Header and Footer from your Jupiter X Customizer

1- Open Customizer WordPress Admin > Appearance > Customizer

2- In Customizer, go to the Header section

There are now two new buttons next to the selected template: ‘Edit’ and ‘New’.

If you want to create a new header from the ground up, you can click on ‘New’ button and you will be quickly taken to the header/footer builder area where you can simply build a header or footer using Elementor, just like a regular page.

On the other hand, the ‘Edit’ button will let you use an existing template and edit the template that you currently selected. You can repeat the same process for your footer by going to the footer section of the Customizer.

Use this method only to create and edit global custom headers and footers. In order to create page-specific headers and footers, select a template from the page meta option > Header tab.

I hope this has eased up the header and footer customization for you! Stay tuned for more improvements and new features in our future updates.

Here’s a video with more info on how to create and edit custom header and footer.

Follow Jupiter X on Twitter to get the latest updates, news, and exclusives.

elementor page builder create and edit custom header and footer jupiter x customizer

How to Create Custom Search Results Page via Jupiter X

Create Custom Search Results Page via Jupiter X Featured Image

Customizing the search page is one of the biggest concerns for web designers. When it comes to WordPress, you need to modify your search page template in order to customize your search results. But what if you had the ability to customize your search results in a blink of an eye with a set of premade options?

Jupiter X uses a default search results page which mimics post archives. This is controlled in the theme by the jupiterx/lib/templates/fragments/search.php template file. There’s no option to create a custom template for a search results page, but you have the capability to customize the page with some settings.

By default, when users search for something on your website, it displays the results from all of the post types such as posts, pages, portfolios, and products. But, you may want to filter the search results in your website and show the results from just a specific post type like posts or pages.

It’s especially useful in e-commerce websites when you want to show particular products in the search result page. You can even specify how many posts should be shown per page. Let’s see how easy it is to create a custom search results page via Jupiter X.

Create Custom Search Results Page via Jupiter X

1. From your WordPress left menu, go to Jupiter X > Customize.

2. Select the Pages option.

Create Custom Search Results Page via Jupiter X 2

3. Choose Search, then a new window will show up with the Search settings.

Create Custom Search Results Page via Jupiter X 3

By Disabling/Enabling the post types from the Display section, you can customize the search results. You can change the number of posts per page as well.

Create Custom Search Results Page via Jupiter X 4

4. Close the Search settings panel and then Publish the changes.

Editing Search Result Text

Using Poedit software

When you check the search results page, you may want to edit or translate some titles like “Search Results for:”, “New Search”, etc.

Create Custom Search Results Page via Jupiter X 5

It can be done with the Poedit software, which is used for translation. You can read more about Poedit in the article “Translating the theme”.

Just create a .po file as described in the linked article above and name it with your language prefix. If you want just to edit the text in English, you need to name the file en_US.po. This way, you’ll be able to edit any Jupiter X text in the English language.

Using the child theme

Another way to override default text is to make changes in the child theme. You’ll need to override the functions of the necessary titles.

You can edit the files through your WordPress dashboard in Appearance > Editor.

1. Look for the file search.php in the parent theme jupiterx/lib/templates/fragments directory.

2. Copy the function name, for example, jupiterx_new_search_title_text if you want to change the text “New search” on a search results page.

Create Custom Search Results Page via Jupiter X 6

3. Go to the child theme folder and open the file functions.php and add this code:

add_filter( 'jupiterx_new_search_title_text_output', function() {

   return 'Some new text of yours';

} );

4. Save the file, and you’re done. The changes will be visible on the frontend.

You can do the same with other functions you find in the file. For example, to change the subtitle text, you can use the same code. Just edit the function name to the one you need, e.g. jupiterx_new_search_subtitle_text for the subtitle, and the code will be:

add_filter( 'jupiterx_new_search_subtitle_text_output', function() {

   return 'If you are not happy with the below results, you may try another keyword.';

} );

Adding a Sidebar on a Search Results page

You can also add or remove the sidebar when you create custom search results page via Jupiter X. To do this, you’ll need to edit Sidebar section in Jupiter X > Customize. You can get comprehensive instructions about how to add a sidebar in this article. It will be applied to all pages, but if you want to add or remove it only for the search result page, do the following:

From the WordPress left dashboard, go to Jupiter > Customize.
From the Customizer left dashboard, go to the Sidebar menu.

In the Sidebar popup, there’s an Exceptions setting which allows you to edit the sidebar for different post types, such as Page, Blog, Search, Shop, Archive, and Portfolio. In our case, we’ll select Search as an exception and configure the sidebar settings to the ones you need.

For how to add widgets to sidebar areas, refer to the article “Adding widgets to a sidebar”.

Customizing Your Search Results Page is Quick and Easy with Jupiter X!

In this article, we learned how we to create custom search results page via Jupiter X. To reiterate, you can customize the search to include/exclude different post types and also change the number of items in the result page. We also explained how to change the text using translation plugins and in the end, we overviewed how we can modify the search page using the powerful Jupiter X API.

In general, with the Jupiter X API, there is nothing you can’t customize. In future posts, we will go through some approaches on how you can easily add or edit some sections using Jupiter X API.

WordPress wordpress customization jupiter x Create Custom Search Results Page

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.

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.

Styles

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.

Excerpt

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

Leave other Excerpt Style options as it is.

Sortable

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:

Summary

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?

jupiter x portfolio post customize your portfolio list with Jupiter X

Category: JupiterX Features

1- Create a listing template for our custom post type

2- Create filters for our listing

3- Create a general listing template

Images Layout

Posts Element

Form Builder

Slider

Testimonials

Price List

Animated Box

Counter

Tabs Element

Wrapping up elements for your restaurant website

1- Define a custom post type with custom meta fields:

2- Create a listing for our custom post type single page

3- Create a design template for your post type single page

Intro & Image Slider

Description and Ratings

Amenities, Location & Booking

Why would you need a custom WordPress login page in the first place?

Choosing the right plugin to create a custom login page

Designing this page for the custom login page with Jupiter X

Wrapping up

Header

Layout

Logo

Menu

Call to Action

Mobile Header

Sticky header

Activate your header

Hero section

Intro section

Services

Subservices

Customers

Testimonials

Blog

Contact Us

Footer

That’s a Wrap on our Agency Landing Page with Jupiter X

What are the problems with the usual website templates?

1- They are a dumb piece of generic design!

2- They look perfect until you touch them!

3- They are lifeless, not lifelike

Meet Jupiter X’s latest round of templates

New Jupiter X templates carry a purpose

Purposeful Architecture

Targeted Design

Actionable Storytelling

Meet Jupiter X Advanced Template Finder

What’s Next?

Adding a New Post

How to Customize your Blog Posts via Blog Customizer

Settings

Template

Display Elements

Styles

Margins and Paddings

Units

Responsive Option

Case Study

Creating blog posts

Customizing global options

Enabling/disabling elements in your posts

Change the styles of existing elements

Featured Image

Title

Meta

Social Links

Author Box

Related Posts

Summary

Form Builder in Depth

Content Tab

Form Fields

Submit Button

Settings

Feedback Messages