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

Create a Custom Footer Featured Image

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!

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:

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

Create a job board in 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!

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.

Some Handy Elementor Plugins for Jupiter X

Elementor Plugins for Jupiter X featured image

Elementor page builder enables you to deliver high-end page designs with advanced capabilities, never before seen on WordPress. The standard and extendable nature of this plugin allow developers to create plugins to add new features to it.

Jupiter X theme is using Elementor as its default page builder. It’s also coded with standard practices so the Elementor community plugins are compatible with the theme. In this article, let’s cover some handy Elementor plugins for Jupiter X theme. The plugins are divided into two main categories:

  • Adding new widgets to Elementor
  • Extending functionalities of Elementor

Note: The compatibility of the plugins with Jupiter X theme have been tested at the time of writing this article.

HT Mega – Ultimate Addons for Elementor Page Builder

HT Mega extends Elementor with 80+ elements and 360 blocks with various styles. The live demo can show you the real usage of the elements.

Features:

  • Ability to enable/disable elements to improve performance
  • Unlimited Color and Typography options
  • Fully responsive and mobile ready
  • Cross Browser Compatible

Available Elements:

  • Team member
  • User login form
  • User register form
  • Litebox
  • Instagram
  • Twitter feed
  • Image magnifier
  • Etc.

Download here.

Premium Addons for Elementor

Premium Elementor add-ons and widgets with numerous customization options are available to extend the Elementor Page Builder capabilities and help you build impressive websites with no coding required. The live demo can show you the real usage of the elements.

Features:

  • 22+ Fully Customizable Elementor add-on widgets
  • Options panel for enabling desired widgets only for faster performance
  • Fully Responsive and Cross Browser Compatible

Available Elements:

  • Blog
  • Dual heading
  • Fancy text
  • Image separator
  • Counter
  • Modal box
  • Image button
  • And more.

Download here.

Image Hover Effects Add-on for Elementor

You can add 40+ Image hover effects with title and descriptions in a simple way, using this WordPress plugin image hover effects add-on for Elementor. The live demo can show you the real usage of the elements.

Features:

  • Easy to customize options
  • 40+ Image Hover Effects
  • Circle and Square border both come with all effects
  • Center the text horizontally
  • Control the spaces between elements

Effects:

  • Fade
  • Slide
  • Reveal
  • Push
  • Hinge
  • Flip
  • Shutter
  • Fold
  • Zoom
  • Blur

Download here.

Contact Form 7 Widget For Elementor Page Builder

This plugin adds a new element to Elementor Page Builder which helps you to easily drag and drop contact form 7 forms from a drop-down list. No need to go into your Contact Form 7 to copy the shortcode and add it to your Elementor widget anymore — simply drag and drop!

Features:

  • Add CSS directly from Elementor live preview to your contact form 7
  • Add any WordPress page as a thank you page directly from the Elementor edit screen when you add the VOID Contact Form 7 widget
  • Use single Contact Form 7 with different Style and redirect rule

Download here.

Toolbar Extras for Elementor – WordPress Admin Bar Enhanced

This plugin is a huge time saver. It enables you to have quick access to your site building resources. Using the Toolbar Extras plugin, you can add useful links to the top toolbar of your admin page and access links quickly to reduce scrolling and save time. Furthermore, with this plugin, you can access links when from the frontend.

Features:

Page Builder links: Elementor & Elementor Pro.
Links for Elementor Add-On Plugins.
Enhances the New Content section (under + New) with more links.
Support for creating an internal new Menu for Admins which hooks into the Toolbar.
Fully internationalized and translatable also for RTL language.

The main item has useful links.

This plugin enhances + New

Download here.

Custom Fonts

One of the important factors in typography is a good font. If you need to use your custom font in your website, you can use the Custom Fonts plugin. This plugin allows you to add a custom web font to Elementor font library.

Adding a Custom Font

1. To add your custom font, go to Appearance > Custom Fonts then upload your fonts. We downloaded Sonika and converted it to a web font using the Web font generator tool.

2. Use your custom font like other fonts. It’s added at the top of Fonts under Custom group.

Download here.

Custom Icons for Elementor

Elementor comes with Font Awesome icons by default and there’s no way to upload custom icons. But the Custom Icons for Elementor plugin enables you to add your custom icons to the built-in Elementor icon controls and elements.

How to Add Custom Icons

1. Select some icons in Fontello website, then download them.

2. Upload the downloaded zip file in Elementor > Custom Icons.

3. Use your custom icons.

Download here.

Elementor Blocks for Gutenberg

As you may know, Gutenberg is the default WordPress editor. But Elementor Blocks for Gutenberg allows you to easily insert any Elementor template into Gutenberg with just one click.  By using this plugin, you can benefit from both page builder features.

Add an Elementor Template in Gutenberg

1. Edit a page. Add Elementor Library block in the page, then select your template.  

2. You will see your Elementor template inside your Gutenberg page.

Download here.

Elementor Element Condition

This plugin gives you the ability to add conditions to sections and widgets so they can be shown or hidden. At the moment, it only supports two simple variables and one operator.

  • This plugin adds Condition section for all widgets in Style tab.
  • The Digital Solutions section will be only visible to logged in users based on the following condition.

Download here.

Make Column Clickable Elementor

This plugin adds a very handy and simple feature to the Elementor column. It allows you to make the whole column clickable.

This plugin adds a Custom Link setting in Column > Layout tab.

Download here.

Visibility Logic for Elementor

Hide or show an Elementor widget based on the user’s role. Based on your visibility setting for each widget, you can restrict rendering elements from the front-end, meaning that you can hide or show any Elementor widget based on the user role (Subscriber, Author, Administrator, etc), whether the user is Logged in or not.

This plugin adds a Visibility control section for all widgets in the Advanced tab with the following settings.

  • Enable conditions
  • Visible for
  • Hidden for

Download here.

Elementor Plugins for Jupiter X will make your life easier!

In this article, we introduced some handy Elementor plugins for Jupiter X. Some plugins add widgets, while some extend the functionality of Elementor page builder.

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