How to Create Custom Filters with Jupiter X

Hotels, car dealers, travel agencies, tools and hardware sellers – and almost all other business owners that sell some products or services – need a way to show their products to the buyers. If you own a business, you usually represent your products and ask your clients some questions to provide them with the best matches possible.

However, when it comes to websites, your clients need a way to find their own match by looking at products and services on a list. And the best you can do is provide some filters for your product list. Since time is gold, the faster the viewers can find what they’re looking for, the better chance you have in selling a product or service. The good news is that the listing feature along with the smart filters are now part of the Jupiter X theme with the help of its bundled plugins. In this blog post, we’ll take a deep dive to fully grasp how to create custom filters with Jupiter X. But, before we do that, let’s first see what we can do without a listing feature!

Using WordPress to display your product list

The simplest way to show a product list is to create multiple pages, link them to each other and use the WordPress search feature to provide a search feature for them. This doesn’t require any special plugins or extra coding – and it can actually be helpful in some cases. But if you own a shoe store, you wouldn’t want to feature your shoe list like this, right?

Create Custom Filters with Jupiter X 1
Simple product listing, the WordPress way

There are dozens of workarounds to create a better and more appealing listing. One of the popular ways is to use WooCommerce and its filter widgets.

Using WooCommerce to represent a list of your products

One way to create custom filters in Jupiter X is simply through installing WooCommerce and add products. It will allow you to have a shop page, archive page, category page and single pages where you can provide details about your product. Also, since it has a basket feature, it’s a perfect choice to feature the products you’re planning to sell. Many more plugins have been developed for WooCommerce to help you build a better list of your products. Simply using a WooCommerce and categorizing them with the minimum configuration with Jupiter X theme will give you results like the following:

Create Custom Filters with Jupiter X 2
A default shop page made by WooCommerce and Jupiter X

Much better than before, wouldn’t you agree? On the left sidebar, you can select different categories and actually filter the shopping products based on the category. Now if you want to add a new filter widget, for example, by price, you can easily add it through WordPress -> Appearance -> Widgets by drag and drop the “Filter Products by Price” to the sidebar that you are using on the products page.

Create Custom Filters with Jupiter X 3
Adding the filter products by price to the sidebar

And it would look like the following:

Create Custom Filters with Jupiter X 4
Filter by price added to the shop page

There’s no need to say that it’s easy to customize the shop page and layouts using the Jupiter X Shop Customizer.

As mentioned before, there are dozens of plugins out there that can help you have a better listing on your website. Also, there is a bundled plugin named Jet Woo Builder that can help you build stunning shop pages completely from scratch. A brief overview of Jet Woo Builder features has already been provided in the previous blog posts here and here.

Using JetEngine to showcase your products

The exciting part of creating custom filters with Jupiter X starts here. The better you design the user experience, the better chance you have to sell your products or services. Imagine that you have to provide a listing directory of your products but you don’t want to create an e-commerce website. As an example, you want to run a hotel website where it should have a list of available rooms categorized by the number of beds, price, amenities and etc – and you would also need to provide a way to filter them. In these scenarios, the best thing to do is to create a custom post type, add your custom fields to it and provide listing directories and custom templates for your post types. Fortunately, this is all available with the Jupiter X theme.

As for the custom post type and listing directory, there is a Crash Course series on the Artbees blog which shows how you can build a listing website step-by-step. You can find the published posts here and here. If I want to briefly explain the process of creating a listing directory using the Jet Engine plugin, it would be these four steps:

  1. Create a custom Post Type and custom meta fields for it.
  2. Create a Custom Post Type template for the single pages and assign it using Jupiter X.
  3. Create a Custom Listing template and based on that, create and assign it to archive post type templates using Jupiter X.
  4. Add Filters to the archive pages of your listing directory.

Let me introduce the Jet Smart Filters plugin for the last step. This is one of the bundled plugins with Jupiter X and aims to help you create and use smart filters on your listings. This is not only on the custom post types created by Jet Engine, but it can be used on WooCommerce and your regular posts.

You can install it for free from Jupiter X -> Control Panel -> Plugins and then activate it.

Create Custom Filters with Jupiter X 5
Activating the Jet SmartFilters plugin

I assume you’ve already created your listing items as previously instructed in the blog posts here and here. Now it’s time to create a new Smart Filter by navigating to Smart Filters and Add New.

Create Custom Filters with Jupiter X 6
Adding a new Smart Filter

We’ll use this to filter the hotels based on the desired price range. So, we call it “Price Range” and set a minimum and maximum value to it.

Adding the Price Range Smart Filter
Setting the minimum, maximum and other configurations for our price range filter.

Now, it’s time to use our filter on a listing page. On the page where you have added your Listing Grid element, drag a Range Filter into the column you want to show it.

Adding the Range Filter to the listing page

Then configure it to use the Price Range filter you created and assign it to the Jet Engine and set the Listing Grid Query ID.

Configuring the Smart Filter on the Listing Page.

Then update and publish the page. The final result would look like this:

Range filter added to the listing page

Now you can filter the hotels by their price on your listing page. As shown in the picture, you can create a different filter for the facilities. It’s actually part of the Hotel Listing template in Jupiter X. There are plenty of use cases you can make using these smart filters. Fortunately, Jupiter X provides a set of premade templates made for the purposes of listing. You can find them here and simply install them on your websites.

Create Custom Filters with Jupiter X Templates
Variety of Jupiter X Listing templates

We’d also recommend that you take a look at the Jet Smart Filters documentation here if you are looking for more resources. Feel free to ask your questions below in the comments.

Wrapping up How to Create Custom Filters with Jupiter X

We need filters to provide a way to ease make it easier for our website visitors to find the best match of what they are looking for. Although there are dozens of ways to do it, we reviewed the following three methods we can use:

  • Simple WordPress pages and search option
  • Using WooCommerce and its filtering widgets
  • Using Jet Smart Filters to create and use advanced filtering options

Each method has its own use cases. So, it’s better that you are first familiar with them and then put them into action based on your requirements.

subscribe

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

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:

  1. Creating a listing template for our custom post type
  2. Creating filters for our listing
  3. 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).
Dynamic Hotel Website Boxed Section
  • 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.
Dynamic Hotel Website Listing Image
  • 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.
Dynamic Hotel Website Dollar Sign
  • 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.
Dynamic Hotel Website Listing Design

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.
Dynamic Hotel Website Checkbox

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.

Dynamic Hotel Website Matching Values

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.
Dynamic Hotel Website Price Range Query
  • 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.

subscribe

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

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.

Elements for your restaurant website Posts Element

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.

Elements for your restaurant website Form Builder

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

Elements for your restaurant website Slider Element Gif
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.

Elements for your restaurant website Testimonials
Testimonials

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:

Testimonials

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.

Elements for your restaurant website Price List
Price List

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:

Elements for your restaurant website Animated Box
Animated Box

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.

subscribe

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

Bring it on! Insider Tips for Your Next Sports Website

Featured Tips For your Next Sports Website
Featured Tips For your Next Sports Website

Let’s start with a simple clue that sums up this and all other similar topics: the best website design is one that allows the audience to predict what the site is about without seeing the textual content. Imagine entering a law firm website – you’ll immediately be able to guess it has something to do with the law. Or you land on a traveling agency website, and you can automatically tell it’s about traveling and tourism.

All comprising elements of a website – and not just its imagery – play a role in carrying on this mission. The main layout, composition, colors, typography and the elements are a part of it. The very same thing is true about a sports website. In this post, we’ll provide some valuable tips for your sports website you can easily use to build something that speaks for itself – without relying too much on its textual content. We’ll use vast a range of Jupiter X templates as examples for gym, powerlifting, yoga, meditation, pilates, and sports event websites.

Layout and composition is a cornerstone

First things first! The layout and composition are the primary factors in the design and the foundation for everything built upon it. Without a solid and clearly thought-out layout and composition, your content will always seem like it lacks something.

Vast sections with bold imagery

A powerlifting center, a gym or an off-road club can enjoy a layout built by vast sections with bold typography and large imagery. If you or your client can afford professional photography from the venue (or at least a Shutterstock subscription!), this layout will help your website shape an image of power and athleticism without much textual content. Jupiter X Caelus and Carius are good examples of sports website templates built in this way.

Vast Sections Tips for your Next Sports Website

Diagonal sections

In graphic design theory, ordinal lines imply movement, dynamism, and livelihood. Using this feature in a website layout will add a level of visual dynamism and excitement for your audience as they scroll and explore your page. It’ll drive them efficiently towards engaging with your call to action. The Jupiter X Hercle template, which is specially designed for off-road clubs and professionals, has expertly used this technique in its layout.

Diagonal Sections Tips for your Next Sports Website

And the Hermippe template is an excellent example of utilizing this technique for a gym website.

Diagonal Sections 2 Tips for your Next Sports Website

Colors are energizers!

Color is like the air your page requires to breathe. One excellent tip for your sports website: a color-aware design will appeal to your visitors and make professionals such as designers say “wow, this company hired the right designer for their agency.” Think of what design will signify your or your client’s brand values. If it’s a gym or dojo, your brand will definitely need sharp and preferably warm colors to carry its meaning.

The Jupiter X Hebe template uses a mixed approach for its accent color. It uses an accent color that is somewhere between green and blue. Green signifies nature, calmness and a golf course, and blue signifies stability, depth and horizon. That’s about all the meaning a golf club needs to convey.

Color Golf Tips for your Next Sports Website

If your brand wants to promote peace, composure and balance like a meditation or yoga house needs, use calming colors such as green with friendly tones and lower saturation. Have a look at the Feretrius template to see a live example of calming colors in action, which illustrates to the audience a glimpse of peace and calm they can achieve doing yoga or meditation.

Color Yoga Tips for your Next Sports Website

Show visitors their future selves in the photos

Imagine you’re looking for the nearest gym with the facilities and conditions you want. You’ll find some viable places through using Google, Foursquare or Yelp, but you’ll definitely want to check their website before calling and booking an appointment to visit and possibly subscribe. And hey, while you’re at it, you definitely don’t want to read blog posts or even a couple of paragraphs about the history, philosophy and achievements of the club you are considering. What you will do is just skim the homepage or landing page.

This is typically the audience for a sports club website; they mostly are in a rush and don’t have much time to spend on a landing page. So you won’t have much time to appeal to and persuade this type of visitor. This means you should use your page assets accordingly and efficiently.

The first thing to consider is imagery. Your visitors will rely a lot on what they can get through quickly scanning your page, and images are definitely a good way to capture those scanning eyes. Good imagery for a sports website requires professional photography or some great collection of stock photos related to your area of specialty. If you rely on stock images for your sports website do make sure they are:

  • High quality: Captured by professional photographers
  • Well-light: Not too bright or too dark
  • Matching in color: They align well with your design color palette, especially with your accent color

Also, it would be good if you can show consistency in the stock photos you use, for example, with the same model posing in the photos. The Jupiter X Devagura template uses stock photos in the template, but they are used seamlessly in the hero section of all pages in accordance with the page content and design characteristics.

Write to motivate – not communicate

Following the same mindset we discussed in the last section about the visitor’s short attention span and importance of the right imagery, I want to emphasize the same thing about the role of writing in your sports website. Another tip for your sports website is that writing is more of a marketing tool than a means of communication. The copy for your sports website should work hand-in-hand with all other elements discussed in this post to drive the audience forward, motivate them to hit the gym and to work those muscles. So imagine the type of writing we need here:

Writing Tips for your Next Sports Website

If you can easily understand that you should not begin your website with a big ‘Welcome to our official gym website’ in the hero section, then you can say you’re qualified to write your website copy yourself – and you’re good to go! But if not, you really need to consider hiring a copywriter to write your website copy that aligns with your and your brand’s specific values.

Use an athletic typography

What you say is not enough – how you say it also matters. Remember you’ll need good typography that matches the message you want it to carry. Consider Oswald, Anton and Source Sans Pro as great sports fonts that can be used in a gym or powerlifting club website. They are also standard Google Fonts that are available to use for free.

Typography Club Tips for your Next Sports Website

If it’s for a meditation, pilates or yoga website, then you might want to think of a more sleek font with less emphasis on power, movement and challenge and more on calmness, elegance, and peace.

Showcase – don’t just tell – your athletic story

Any business or personal brand has a history. But a sports brand also has a story. You came a long way striving, struggling and failing before you achieved where you currently are. If you think it can inspire your website visitors and motivate them to start working out under your guidance and expertise, you’ll need to showcase your story and achievements like an athlete, not like a resume.

The Jupiter X Vinalia template beautifully showcases a challenging athletic history with a timeline. Each year gets a title, image, and description with a color identity. Once you start tripping down memory lane, you can’t help but scroll. You can expect your visitors are twice as more confident in taking their first course with you after scrolling through this page.

Tell visitors why you are the best to train them

Without too much marketing pressure, you should convey to your visitors who you are. You don’t have to do this the second they arrive on your website, but it should be somewhere on the first page of your website. Employ honest but confident language and explain your skills, exclusive points and why you think you are the best person to train your website visitor.

Team Members Tips for your Next Sports Website

The Jupiter X Pilates Studio template is a nice and informative pilates studio website template that uses trainers’ profiles with the Jupiter X Team Members element.

Make it personal and share your clients’ feedback

People will trust your sales pitch a lot more if you can manage to show that your clients are happy with your product or service, which is another great tip for your sports website. If you have satisfied clients, reach out to them and ask them to provide a testimonial about you and your service. If they hesitate, reward them with a free session in return. It’s definitely worth it!

If you want to design a website for a gym or studio, then make your website content as ‘humane’ as possible by including info about your instructors, quotes from them as well as testimonials from your customers. See how Pilates Studio uses the Jupiter X Testimonial element to beautifully organize customer reviews and feedback.

Animate it, make it fun

Movement is one ruling factor that all kinds of sports have in common (well, chess is an exception, I guess!). So how can we design anything related to sports that are not promoting or signifying movement? You can animate some parts of your sports website to add a sense of movement to it. Some elements such as sliders are naturally moving elements, but you can also manually move some elements such as sports figures and models.

The Feretrius and Vinalia templates from Jupiter X WP have used this idea to add a sleek sense of dynamism to their design. The parallax effect is another technique that spices up your layout by adding depth and movement. Using the parallax effect together with the manual viewport animation of elements is commonly used in tons of websites these days.

Add some hype to your sports event with a countdown

It’s a good idea to use landing pages instead of multi-page websites for sports events as people who come to these websites want to quickly see the essential info such as dates, conditions, and prices then sign up and leave. You can define 5 essential sections that cover all the info your participant wants to know. For example for an extreme mountain biking race, you need the following 5 sections:

1- Intro: Nice hero section
2- Countdown to your event
3- Some background info about the event and its experience
4- The roadmap
5- Outro: schedule + call to action

Using a countdown element in the hero section or the first parts of the landing page will add some hype to your event and encourage visitors to proceed with the rest of the page so they can sign up to participate before the time runs out. You can also show the number of remaining seats or slots to amplify the visitor’s sense of urgency. The Jupiter X Mountain Biking template is an excellent example of a website for a sporting event.

Possible call to action? Call, sign up, book, smash!

So thanks to following all the above practices and guidelines, your visitors have made it taking an action. Without a good call to action section or element, your best bet is that they’ll find your address or contact info from Google and proceed – but it’s also very likely that they’ll vanish to your competitor’s website where they can find all the info they need in one page.

There are different kinds of calls to action you can use for a sports website such as calling or booking an appointment. Alternatively, you can put your contact info and a contact box on your landing page or contact page for any possible inquiries. This is what is beautifully done in many sports templates from Jupiter X WP, including Farreus, Feretrius, and Hermippe.

Is that all?

Definitely no! Nobody can say the above list of elements and factors makes a working sports website. There are many ifs and if-nots involved in a website’s success. But you can definitely say these tips for your next sports website will help it engage and convert visitors more efficiently.

Do not forget to check the Jupiter X WP list of sports website templates if you want to kickstart your project with some solid design foundation provided by Artbees experts. And as always said, let us know in the comments if there is a factor or element you think is missing and should be included in this list or share your experience applying these practices to a sports website for you or a client.

subscribe

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

How to Create a Deals Website with Jupiter X

Deals Website with Jupiter X Featured
Deals Website with Jupiter X Featured

Saving money is essential in today’s world. There are several cost-cutting measures out there like replacing normal light bulbs with LEDs, installing a programmable thermostat, getting rid of unused memberships, and so forth. But that only helps save a couple of bucks here and there. One of the best money savers you can offer customers is a deal or discount. This article explores how you can easily build a deals website with Jupiter X.

What is a deals website?

As the name suggests, a deal or discount website is a place where visitors can purchase some products or services for a discount or a much cheaper price. Also, a deals website can provide their visitors with coupons so they can use to buy products or services cheaper from an online store like Amazon and eBay. There are several deals websites on the internet such as Dealnews, Woot, Offers and more.

WordPress has several plugins in WordPress to conveniently build deals websites such as:

In this article, we cover the Affiliate Coupons plugin to create a simple deals website with Jupiter X.

Affiliate Coupons

Deals Website with Jupiter X Affiliate Coupons Plugin

Description

Affiliate Coupons is a coupon plugin that allows us to add coupons and deals to our post and page with simple shortcodes. Also, we can show coupons in the sidebar or widget area with a widget.

The coupon shortcode comes with the click to copy the coupon functionality, which means that the coupon code is copied to the clipboard when the user clicks on the coupon.

With the Affiliate Coupons plugin, we can further define categories, types, and vendors and then assign our coupon to them.

Features

  • Create vendors and predefine affiliate links.
  • Create coupons and link them to vendors.
  • Display coupons via a shortcode on the frontend.
  • Multiple options in order to filter/sort your coupon presentations.
  • The configuration page for more options and customizations.
  • Prepared templates: Standard, Grid & List.
  • Widgets for displaying coupons in your sidebar

Useful shortcodes

  • Single Coupon Shortcode – Can be used to show any single coupon.
    • Example: [affcoups id=”123″]
  • Multiple Coupon Shortcode – Can be used to show multiple coupons at once.
    • Example: [affcoups id=”123,456,789″]
  • All Coupons Shortcode – Can be used to show all coupons.
    • Example: [affcoups] or [affcoups max=”10″]
  • Coupon Category Shortcode – Can be used to show coupons from a specific category.
    • Example: [affcoups category=”123″] or [affcoups category=”group-xyz”]
  • Coupon Vendor Shortcode – Can be used to show coupons from a specific vendor.
    • Example: [affcoups vendor=”123″]
  • Coupon Types Shortcode – Can be used to show all coupons from a specific type.
    • Example: [affcoups type=”123″] or [affcoups type=”type-xyz”]
  • Show/Hide Expired Coupons – Can be used to show/hide expired coupons.
    • Example: [affcoups hideesc_html_expired=”true”] vs [affcoups hide_expired=”false”]
  • Sorting Coupon – Can be used to sort coupons (acs/desc) or order by (name, date, random, title, description, discount, valid_from, valid_to).
    • Example: [affcoups order=”asc”] or [affcoups orderby=”title”]
  • Coupon Template Shortcode – Can be used to show coupons in standard, grid, list, and widget.
    • Example: [affcoups template=”standard”] or [affcoups grid=”3″]

Creating a deals website with Jupiter X using the Affiliate Coupons plugin

At the end of this article, we’ll create a simple website like below.

Deals Website with Jupiter X Demo Website

Note: The scope of this article is about creating a simple Deals website with Jupiter X, Elementor and the Affiliate Coupons plugin so we won’t be able to explain every single detail in depth. If you need more in-depth resources about Jupiter X, you should read the following articles containing its explanatory video.

Our site consists of the header, content, and footer as the main parts. Let’s start by creating the content.

Creating the Content

For creating the content part of the site, we should first install and activate the Affiliate Coupons plugin. We will be able to create the required pages, coupons, vendors and categories with this plugin.

Creating the vendors

Vendors are the shops, websites, and providers that we will provide coupons for on the site. Following the steps below to create vendors.

1. Go to Affiliate Coupons > Vendors.

Deals Website with Jupiter X Vendors

2. Click on the Add Vendor button.

3. On the new screen, set the Title and Url, then click on the Publish button.

After clicking on the Publish button, the plugin generates a shortcode for us, which we can use in a related page later on.

Repeat the aforementioned steps to create as many as vendors you need.

Create Categories

1. Go to Affiliate Coupons > Categories.

Deals Website with Jupiter X Categories

2. In the new screen, set the Name or other optional settings, and then click on the Add New Category button.

Deals Website with Jupiter X Add New Category

After adding the category, a shortcode will be generated for this category.

Repeat the previous steps to create as many as vendors you need.

Creating the Coupons

A coupon is a ticket or document can be used to get a discount when purchasing a product. Let’s add some coupons for your users by following the steps below.

1. Go to Affiliate Coupons > Add Coupon.

Deals Website with Jupiter X Add Coupon

2. In the new screen, set the essential settings like below.

Deals Website with Jupiter X Essential Settings

Now, you’ll be able to see a coupon like below.

Deals Website with Jupiter X Coupon Demo

Note: Go to Affiliate Coupons > Settings > General Tab, and set the Button Background Color to #dd2476.

Deals Website with Jupiter X Select Color

Create the Pages

We at least need the following pages to run a proper site.

  • Home page: The frontend page.
  • All deals page: Shows all coupons from all categories and vendors.
  • Categories pages: Unique page for each category.
  • Vendors pages: Unique page for each vendor.

Create Category Pages

Create a new page, set a title and add a Shortcode widget to the page. Add a category shortcode like [affcoups category=”15″] to it.

Repeat the previous step to create as many as category pages as you need.

Create Vendor Pages

Create a new page, set a title and add a Shortcode widget to the page. Add a vendor shortcode like [affcoups vendor=”74″] in it.

Repeat the aforementioned step to create as many vendor pages as you need.

Create an All Deals Page

Create a new page and add [affcoups] shortcode in it.

Create a Home Page

Create a new page with the Full-Width template then edit it with Elementor.

Deals Website with Jupiter X Home Page

1. Add a section with five columns as shown below.

2. Set the background color of the section to #f7f7f7.

3. Add an image widget to each column, then set proper images and set a proper link for each image.

Deals Website with Jupiter X Link Image

4. Add a new section with one column to page then add the Shortcode widget with [affcoups grid=”3″] value to it.

In the end, we should have a page as shown below.

Creating the Header Part

In order to build the header, we can use Jupiter X’s awesome custom header feature in Customizer.

Note: Before creating the header, we need to set our site’s logo from Customizer > Site Identity > Logo.

1. Go to Customizer > Header, select Custom type then click on the New button.

Deals Website with Jupiter X Header

2. Add a section to the page, then add Logo, Flex Spacer, Search Form and two Buttons widgets one by one to the section. Modify the settings to get the look that you want. Consider that all the widgets (except Flex Spacer) have an Inline position that you can set in Advanced > Custom Positioning for each widget.

3. Add another section to the page and set the background color (#f7f7f7). This section displays categories.

4. Add the Icon List widget to the section. Add the necessary items, and set the Text and Link of related pages.

In the end, we’ll have a header as shown below.

Creating the Footer Part

Similar to the Header, we use the Custom Footer feature of Jupiter X.

1. Go to Customizer > Footer, select Custom type then click on the New button.

Deals Website with Jupiter X Footer

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

3. From Block > Jupiter X Footer Category, insert the following footer.

4. Edit the Logo widget and set it to Primary.

5. Replace the top text with “Get free coupons and promo codes from the shops your love in your email“.

6. Replace Phone, Email and Location widgets by a Form widget with only an email field. Set the button color to #dd2476 and some other styling.

7. Change Our Products to Vendors and Our Showroom to Categories. Also, change the sub-footer text to “© 2019 YOUDEALS. ALL RIGHTS RESERVED“.

That’s a Wrap!

In this article, we defined what a deal site is and then introduced you to some useful plugins that help in creating a simple deal site. More specifically, we used the Affiliate Coupons plugin and its shortcodes to build the site.

Finally, we showed you how to easily create a simple deals website with Jupiter X. Feel free to share your thoughts and experiences in the comment section below!

subscribe

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

Build a Powerful WooCommerce Website using JetWooBuilder and Jupiter X

There are dozens of platforms out there to help you build your eCommerce store. If you’re looking for a free and powerful tool, WooCommerce is the most popular one among the shop builders using WordPress. WooCommerce offers some common shopping processes and features including product overviews, add to cart, checkout, shipping and payment and taxes, among others.

However, when it comes to customizing your pages and user experience, you would need to either develop it using a child theme/plugin or through another tool that allows you to customize your shop pages as desired. But wait – there are still ways to build and tailor your WooCommerce store without a single line of code. Read the article in its entirety to learn exactly how to build an eCommerce store in Jupiter X.

The Jupiter X theme offers a great Shop Customizer tool by default. It allows you to customize every part of the default shop pages or choose between the predefined shop page templates. But what if you want to create your own design and layout and use it to build an eCommerce store in Jupiter X? Fortunately, this is possible with the JetWooBuilder plugin which is bundled in with the Jupiter X theme.

What does the JetWooBuilder offer?

Simply put, the JetWooBuilder allows you to override the default shop pages in WooCommerce from single pages to the archive and category pages. It still doesn’t offer any customization on checkout and cart pages, but that part can still be made using Jupiter X or other plugins. So, if you aim to build a completely custom shop page layout, you can make use of the JetWooBuilder plugin. Here is the JetWooBuilder’s official website.

After adding the JetWooBuilder, there will be four global widgets that you’ll be able to use among your templates and even on your own pages:

It also adds a various number of widgets that you can use on your single page templates such as an add to cart button, attributes, content, excerpts, image, price and etc. You can find out how to create a single page template for your eCommerce here. However, we’ll go ahead and go through the steps of creating a shop while using Jupiter X and Jet Woo Builder.

Setting up an eCommerce store with Jupiter X

Let’s set everything up quickly. We already installed the Jupiter X theme and activated it like this. Now we just need to activate the JetWooBuilder plugin and start using it. So, simply go to Jupiter X -> Control Panel -> Plugins, then install and activate the JetWooBuilder plugin. It’s one of the bundled plugins in the Jupiter X theme.

Build an eCommerce Store in Jupiter X Installing JetWoobuilder
Installing JetWooBuilder from the Jupiter X Control Panel

After activating JetWooBuilder, you will notice that two menus are added onto the WordPress Dashboard:

  • Elementor -> JetWooBuilder settings which allow you to set the available widgets.
Build an eCommerce Store in Jupiter X JetWooBuilder Settings
JetWooBuilder settings under the Elementor menu
  • WooCommerce -> JetWoo Templates which lets you add and manage your templates.
Build an eCommerce Store in Jupiter X JetWooBuilder Templates

There is also another place where you can assign your templates to WooCommerce pages. It’s located on WooCommerce -> Settings -> JetWooBuilder.

Build an eCommerce Store in Jupiter X WooCommerce Settings page
The JetWooBuilder tab under the WooCommerce Settings page

Now let’s create our first shop page template and then assign it to our website.

Creating your first shop page template

In order to override your default shop page (usually it would be /shop/ after you finish the WooCommerce wizard), you would need a Shop Page Template and to set the default shop page template in WooCommerce settings.

Let’s do this together step-by-step.

1 – From WooCommerce -> Jet-Woo-Builder Templates, add a new template.

Build an eCommerce Store in Jupiter X Adding a new template
Adding a new template to Jet-Woo-Builder templates.

2 – Select Shop as the “This template for”, then fill in the name of the template and choose your desired layout and click on Create Template.

Creating a default shop page in JetWoo-Builder

3 – Done. Now let’s take a look at the page template that has been created.

The first thing you’ll notice is that this page does not have a style. It may even look like it’s broken.

Build an eCommerce Store in Jupiter X Adding a new template default Shop page template
The default Shop page template created by the JetWooBuilder

Don’t worry – everything is completely ok. It’s just that the widgets used inside the template require dynamic content and since we don’t have any dynamic content at the moment, it looks like this.

On the created page, you’ll see some elements such as filtering widgets among others. Feel free to add or remove the widgets as you wish. Just consider one point: the JetWooBuilder uses the Products Loop element inside the default shop page template. We need the Product Loop widget here. It’s not possible or recommended to change it to Products Grid or any other product loop as it will ruin the mechanism and won’t look good.

Scroll down the left sidebar to see the available widgets under the JetWooBuilder. You can also use other widgets if you like. As you can see, the default shop page utilizes some native WordPress widgets to filter the shopping items in the front end.

Available widgets in Jet Woo Builder

There is one point we should address about the template settings in the JetWooBuilder: The default shop page can be unique, but the rest of the templates such as archive and category pages will be wrapped up inside the default shop page template, as a Product Loop item template if you have it enabled.

This means that you can only design the whole shop page template once, and after that, if you want to use it for category and archive pages, simply create one of the item templates instead of the whole page. In other words, you won’t need to repeat the whole design of your shop page for your category and archive pages.

If you do so, it’ll ruin your pages, and you’ll wonder why the pages aren’t working. The logic behind this is a little bit confusing, but if you know how to use it correctly, then you’ll have as much flexibility as you’ll need to build up all of your custom designs without a single line of code.

Now let’s save this template then add some products to our shop and check out our shop page. Before that, it’s better to set our template as the default shop page in the WooCommerce Settings.

Setting the Shop Default template

1 – From the WooCommerce Settings page, choose JetWooBuilder.
2 – Check the Custom Shop Page checkbox.
3 – Choose the Product Shop Template that you created in the previous step.

Setting up the default shop page template in JetWooBuilder settings

4 – Save the settings.
5 – Make sure you already selected the default shop page in the WooCommerce settings.

Default Shop page of WooCommerce

After adding some products (you can find a dummy product file here), the final results on the shop page will be like the following:

The Default Shop page populated by the dummy products.

Creating the archive and category pages using JetWooBuilder

The overall process was easy, right? Now let’s practice the steps above with a new goal in mind – which is adding the archive and category pages. The JetWooBuilder website explains this topic thoroughly.

However, a question that will probably pop into your mind is: what will happen if you don’t use an archive or category page? Well, the answer is nothing. It will still wrap up the products on the default shop page and show the default loop item layout. If you want to have a different layout on the loop items, you can use the archive and category page templates. Here is the complete tutorial for this: How to create and set a Product’s Archive template

Here’s the video that demonstrates how this template feature works with the JetWooBuilder.

Final Thoughts

The JetWooBuilder is a tool that can help you create highly customizable shop pages. From the default shop page to archive and single pages, there are widgets and options that allow you to create stunning shop pages that fit your needs.

In this article, we briefly explained how to build an eCommerce store in Jupiter X by working with the JetWooBuilder. The most common issue with JetWooBuilder occurs when you change the Product Loop widget on the shop page or use the product grid on the archive pages.

Let us know your experiences and thoughts in the comment section below! 😉

subscribe

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