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.

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.


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.


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

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.

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


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:

  1. Define a custom post type with custom meta fields (as room attributes)
  2. Create a listing for our custom post type single page (room profile page) and a template for it
  3. 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 FieldField Type
Price Ratetext
Cleaning Ratetext
Restaurant Ratetext
About Hoteltextarea
Room Imagesgallery
Car Parkcheckbox
Air Concheckbox
Airport Shuttlecheckbox
Night Clubcheckbox

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!

Congrats to You Both! Here are 6 Key Elements for Your Wedding Website

Are you right in the middle of planning for your big day? Preparing a wedding website has become a growing trend among newlyweds – but among all other tasks that need to get done, typically very few couples find the time and energy to build their website! Well, we all know how stressful ticking things off the wedding to-do list can be – however, creating a wedding website doesn’t have to be! This is particularly true when you know which elements for a wedding website to use and where. In fact, this will be the easiest of all wedding planning tasks! And we’ll show you just how you can easily get it done.

In this article, we’re going to walk you through the key elements that should be used in a wedding template while having a look at three Jupiter X wedding templates. If you’re planning a wedding website (or maybe a wedding!) this will specifically help you kickstart your website. We will try to visualize what an informative, classy and fun wedding website should look like, as well as showcase a list of important elements for a wedding website that best matches your big day’s theme and style.

Websites that are built for special occasions such as weddings, Valentine’s Day, engagement parties, graduation ceremonies or even honeymoons are like online albums in a way. So the focus should be on images and the elements that organize images. Jupiter X’s Sarpedon template can be a good example of such a concept. Using elements like the Image Carousel and the basic gallery portrays an image-driven template. Let’s go through one-by-one some of the useful elements that’ll help you build a clean, well-designed website (or better to say online album) for your big day:

Image Carousel

Image Carousel Element

Your website loads to a beautiful set of you and your partner’s photos, and the first thing visitors see on your website is a collection of your most precious photos together – isn’t that fancy?! We think so too! You can do this with the Image Carousel element. Here’s how it looks in the Sarpedon template:

You can customize the Image Carousel down to every single detail: from image size, the number of slides to show on one click, animation style, and speed to hover effects.

Elements for a wedding website- Image Carousel setting

You can learn more about the Image Carousel element by looking at more examples here.


You most probably have an Instagram history with your partner that you carefully created to share with your followers. You can actually showcase your Instagram feed on your website by using the Instagram element. Choose between grid, masonry and list layouts to make pictures appear as you wish. You can also choose which photos to show, set the number of columns and customize the overall look of the element. To read more about how to work with this element in detail, please visit this page.

Elements for a wedding website- Instagram
Instagram Element

A typical wedding website template should allow you the option to showcase your love-filled pictures through Images Layout in the catchiest way, as well as collect information and track down your attendees through a well-designed RSVP section equipped with a functional Form element. The Leda template is Jupiter X’s other one-page wedding template that comes in handy with these two elements.

Let’s take a look at these elements that – together with the other carefully planned details – will make your guests congratulate you twice on your big day!

Images Layout

As mentioned earlier, you can showcase your pictures in an organized way with the Images Layout element. Just like with any other image-related element, you can customize its look, hover effects, number of images and columns to show, add an icon or a title on the image and many more!

Elements for a wedding website- Images layout
Images Layout

Images Layout has four different layout styles you can choose from: Masonry, Grid, Justify and List. Their width and height sizes are what differentiates them from each other. For this template, we choose the Grid layout to ensure that all items have the same width and height. To learn more about the other layouts, you can head over to our knowledge base and read more here.

Form Builder

Wouldn’t it be cool and creative to gather all your RSVP information in your email instead of just posting your guests one-by-one and receiving reply notes in your physical mail? Of course, the traditional way is fun, but a simple online RSVP form can save you a lot of time, money and energy and ease the wedding planning tension a bit!

Elements for a wedding website- Form builder
Form Builder

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 field placeholders and sizes and add the email you want to gather information in the “Add Action” section of the setting, and tada! You’ve got yourself a nice and clean RSVP form!

You can even customize the feedback message to pop up after a message is sent. It can be a catchy informal “thank you” message from you and your spouse or a more formal one appreciating their reply.

Learn more about the Form Builder element and how to create one here.

And last but not least let’s dig into three more elements for a wedding website that should not be forgotten! We’ll look for the examples in one of Jupiter X’s most recent wedding templates, the Wedding Invitation.


Elements for a wedding website- Countdown
Countdown Element

Why not add some hype around such an important day of your life?! Add a countdown timer to your website and make your guests wait excitedly and impatiently for the big day to come. You can play with this element all you want, change its styling, typography and the overall appearance, choose between different timer types based on your taste and even set what happens after the timer is expired. You can find detailed instructions on how to use the Countdown element here.

Horizontal Timeline

Elements for a wedding website- Horizontal timeline
Horizontal Timeline element

You can showcase the main activities happening on your wedding day using the Timeline element. Add as many items as you want and stylize each by adding icons, titles, and texts and set the timing for each so that your guests know what kind of fun events they should be expecting at your wedding.

Here you can find examples of Timeline in vertical and horizontal style.

Team Members

Yes, you heard correctly! You can actually use the Team Member element to introduce your very precious bridesmaids and groomsmen! Create a profile for each of them and customize the look of it by adding names, photos, position, and even their social media accounts! Cute surprise, eh?!

Elements for a wedding website- Team member
Team Members element

Wrapping it Up

Everything is set for a fun and beautiful wedding website, you just need to plan on which elements suit your taste and get it done – it’s as easy as a piece of wedding cake!

Let us know about your experience in the comments. Have you built a wedding website for your special day? How did the invitees and attendees like the idea? Or you just made up your mind creating one just now? We would love to hear your ideas!

Say Cheese: The Anatomy of an Ideal Photography Website

Ideal Photography Website Featured Image

While social media has dramatically changed the world of photography, it has also provided platforms for ordinary people to reveal their inner photographers. And the majority of us embraced it for good as these social media sites have become increasingly popular by the day. But if you’re a professional photographer – or have a real passion and talent for it – it might be time to create an ideal photography website as a way to store and showcase your valuable photos.

Wouldn’t you prefer your beautiful snaps be displayed in a professionally made website to impress the crowd and potential clients rather than scattered around Instagram or Flickr? You owe that to your skills and talent!

Too confused to know where to start? We hear you! Starting off somewhere is always a hassle, but worry not! Jupiter X has got you covered! In this post, we’ll walk you through 5 photography website templates, explaining each one’s unique anatomy as well as features that will help you choose the best option that best suits your expectations and goals. It will also help you get your hands on your personal or corporate photography website in a snap!

Proserpina: Mixed

Multipage with right sidebar navigation and sectioned homepage

Ideal Photography Website Prosperina
Prosperina template with Mixed anatomy

Who should use it?

One of our popular photography templates, Proserpina, is perfect for both freelancers and studios who want an uncluttered, yet descriptive portfolio website.

Homepage Structure

The homepage consists of a full-height hero section that you can leverage to shout your name as your personal/professional brand with an intriguing background image, descriptive sections to write about yourself, your business and your projects, portfolio and one-half large sections with video background that adds a cinematic feel to your website if you want to showcase your video editing and shooting abilities. The burger menu with the right sidebar navigation effect helps place focus on the content and images more by keeping menu items out of sight.

Inner Pages

Proserpina has 2 inner pages: Portfolios and Contact. You can store your photo albums and collections in a clean portfolio page. Your concept and vision matter for every single photo. So what’s even better than putting them in different categories for faster and smoother navigation through your photos? Proserpina comes with Posts Element that you can categorize according to your point of view.

Proserpina Portfolio

Forms, addresses, and social media channels make you reachable to your customers and give them a way to stay in touch with you. You have it all in the contact page, which is ready for customization.

With no more than 3 pages (Home, Portfolio, Contact), this template has everything your audience needs to know about you, your style and your work.

Locaste: Dark Minimal

Multipage page with a 4-column grid

Ideal Photography Website Locaste
Locaste Photography Template

Want to impress your audience with nothing but your photos at first sight? Well, search no more! Locaste template does just that!

Who should use it?

This minimal template can suit both freelancers and studio owners of the same taste.

Homepage Structure

The homepage loads to a full gallery of photos using the images layout and is organized in 4 columns with no other text or elements to distract your visitors. And the tiny burger menu adds up to it! So the no-intro homepage style is also surprisingly compelling to website visitors.

Inner Pages

Locaste has 4 inner pages: About, Gallery, Blog and Contact. They all follow the overall minimal style of the template but contain multiple layout options to choose from for Gallery and Blog pages.

You can choose between various gallery and blog layouts, from classic to masonry, each with a categories option and different column structure to better organize your albums and posts.

Locaste Photography Template

The About page includes 4 main sections, a hero section with a background image, the about section to write about the artist or the business, a section to add teammates and the last section organized in 2 columns of an image and text, which can be dedicated to anything related to the photos, studio or the artist.

And finally, the contact page consists of a column for the address, social media accounts and a simple form following with a Google Map.

All in all, if you need a big album and a blog to write about the spirit behind your photos, this clutter-free template is the perfect choice. Just take your camera and let Locaste guide your fans through the magical world of your shots!

Cynosura: Minimal

Single page with no navigation

Ideal Photography Website Cynosura
Cynosura One-page Template

You’re a beginner, you know you’ve got the eye and want to share it with the world, but in no way want to mess with the technical hassles of creating a complicated website! We hear you and offer you the ultra-minimal one-page Cynosura template.

Who should use it?

This single page template is perfect for freelance photographers who just need to set up a virtual album and a place to communicate with those who find their photography interesting.

Homepage Structure

The homepage loads to a short intro consisting of a full-height background image and some minimal text without a navigation bar. There are no inner pages, and the portfolio is presented on the same page. So all you need to do is to add a photo album element, upload your photos, add your social media accounts and contact information in a simple footer, and trust us, that’s it! You have your simple cool portfolio website.

Arbius: Simple

Multi-page with 2-column Grid

Ideal Photography Website Arbius
Arbius Photography Template

Who should use it?

This multi-page template is ideal for those freelancers who would like to add a bit more detail to their online portfolio.

Homepage Structure

The homepage starts with a short intro and portfolio organized in two half large columns that each can be served as an album containing more information and photos inside, as well as a minimal footer.

Inner Pages

Arbius has three more inner pages: About, Personal and Contact.

The about page is simply made up of some image and text elements and defines what can be called the best “about” page in its most concise and well-set way.

The personal page can be called your album storage. You can organize your photos into different albums here using the photo album element.

And, finally, the very simple contact page contains your personal studio address, phone number, and email. Isn’t that what a typical contact page should offer?

Jovial: Classic

Multi-Page with classic navigation and sectioned homepage

Ideal Photography Website Jovial
Jovial Photography Template

Who should use it?

Jovial is a classic multi-page template, perfect for photography studios that consider their website as the main platform to present their services, explain the techniques they use and to showcase their work samples.

Homepage Structure

The section-based homepage starts off with an eye-catching intro, a full-height hero image, and scrolls down to more sections, each containing details and explanations about the services offered. The proper combination of image and text while avoiding an uncluttered overall look is noticeable.

Inner Pages

Like the majority of the classic website templates, Jovial also has many inner pages: About Us, Our Team, Projects and Contact Us.

The about page has an intro with bold headings on top and a cover image below. The inner sections in between can be served as side notes about your business. The fixed background with text element walking on it adds a sophisticated look to the page.

The team page has the same bold heading and cover image style and uses sections to introduce the team members. A whole descriptive section that speaks to the members’ background and experiences sounds great! Some of the sample works can also be added as posts to the page. It will for sure invite the visitors to check on the projects page!

The projects page is all about its name! Following the same intro style, it’s your treasure chest, storing your work samples and past projects.

And finally, the contact page which will serve as a bridge between you and clients with a Google map and contact information down the page.

Wrap Up

We showcased 5 models that represent different approaches in design and content for an ideal photography website and can be chosen as a foundation or inspiration for your photography website based on your brand’s characteristics and preferences.

Have you already started setting up your website? Do you plan to strengthen your online presence and let the world see through your eyes? Let us know in the comments!

Artbees Takeaways from Translation Day 4 as First-Time Contributors

Artbees Hosted Istanbul Meetup on WordPress Translation Day 4

24 hours, 81 local events, 612 volunteers and contributors. Yes, this is the power of WordPress! On Translation Day 4 on May 11, the WordPress family came together in 35 countries around the world to celebrate the MakeWordPress polyglots team. Hundreds of volunteers dedicated their time and skills to translate all things WordPress and to make this online platform available to more people around the globe.

We at Artbees wanted to be part of this amazing polyglot crowd and event, so we decided to hold a meetup in Istanbul. It was the best chance for us to both meet with fellow WordPress lovers in Istanbul and to contribute what we could to help WordPress grow into as many languages as possible.

It took us such as long time to recover from all the excitement of Translation Day 4 in that we’re finally getting around to publishing this post! Everything went as planned, and on a cloudy Saturday morning, Niloufar and Maziar gathered at a cozy diner in Istanbul to help make the event a success.

After setting up the equipment, preparing snacks and welcoming two other attendees, we lined up to join the live session with Afsana Multani, WordPress enthusiast, speaker and contributor, and to speak with the WordPress community as first-time polyglots contributors.

Other activities as part of WordPress Translation Day 4 included live online training, localization and internalization sessions as well as local and remote events. During the course of the day, polyglot contributors collaborated on a number of common goals such as increasing the number of PTEs and mentors, translating the 200 most popular themes and plugins and improving Rosetta’s Translate page.

We hit the ground running, and our local Istanbul meetup contributed translations to and WordPress Rosetta projects! Being among avid participants from 35 countries with the common goal of making WordPress more accessible in different languages felt beyond amazing!

What is WordPress Translation Day

WordPress Translation Day – which takes place every year – is a 24-hour worldwide marathon that is committed to translating everything in the WordPress sphere, including core, themes, plugins, documentation and marketing assets into as many different languages as possible.

The day is entirely driven by contributors, who volunteer their competence, time, labor, and equipment to translate WordPress into their languages. Everyone from WordPress professionals to inexperienced users is invited to join in the event.

Previous WordPress Translation days had over 700 people globally participate both online and in person in local meetups to translate WordPress – but the event has grown in size throughout the years. Translation Day 4 had more local meet-ups than previous translation days with contributors working around the clock in Africa, Asia, Europe, North America, South America, and Oceania.

Why We Should Contribute to WordPress

The main aim of WordPress Translation Day is to help make WordPress understandable to as many people as possible around the world. This aligns with the WordPress culture of giving back to the community.

On a regular basis, contributors with varying levels of experience from developers to marketers, designers and translators lend their expertise and knowledge to the WordPress open source project, which in turn helps millions of people throughout the world to build websites and provide digital services.

Anyone who knows about any aspect of WordPress can contribute to creating, maintaining and growing the platform. Contributors are part of the larger global WordPress community and ultimately aim to enhance the platform and connect with other WordPress enthusiasts.

Why WordPress Needs to be Translated

The reach of WordPress is far and wide: it powers more than one-third of all websites – meaning that there’s a need to translate a massive amount of content into several different languages.

The number of languages that WordPress has been translated into has grown since the first Translation Day was held. In 2017, WordPress was translated into 178 languages. That number has now surpassed the 200th mark.

Presently, WordPress is accessible in 201 locales with 3,086 PTEs, 614 GTEs, and 32,585 contributors.

The more that WordPress is translated, the more that users throughout the world are empowered. Thanks to the hard work and commitment of the global polyglot community, more and more people are able to access the most popular WordPress plugins and themes that have been translated into their language.

Artbees 2018 in Review

Nine years after Artbees started in an abandoned apartment basement, the team launched new products and released countless updates, resulting in new milestones and exceptional growth for the company!

You may have already seen enough of Year In Review posts in the last days of 2018, so we thought it’s better to keep ours for early January when you’re back afresh from the holidays.

This post highlights what Artbees has done in 2018 and recollects how we reached our achievements and milestones.

Jupiter X

Probably our biggest news in 2018 was the release of Jupiter X, the most capable and customizable remake of the Jupiter WP theme yet.

Well, listing all the powerful features that Jupiter X offers would definitely not fit in a single blog post, let alone a short paragraph. Suffice it to say, Jupiter X is going to be a game-changer with its very new page builder, Elementor. Just imagine that you have limitless control on every single aspect of every element and the ability to customize everything within a smooth user experience. All that would be possible with Elementor.

You now can build a unique header and footer with header and footer builder, customize every bit of your WooCommerce shop through the Shop Customizer, revamp the look of your blog and portfolio list, enjoy the ready-made block templates and get inspired to kick off your website, to name a few. If you want to step into the future of WordPress themes, Jupiter X can take you there —  just dream and create!

To see for yourself the unimaginable freedom and power Jupiter X gives you, please visit this link.


It was in November that, along with our attendance at the Web Summit 2018, we introduced our very young product, GrowFlow, that just like Jupiter X for WordPress themes, is the future of Marketing. It basically personalizes marketing solutions for each and every user. The best thing about it is that it’s “intelligent”! Yes, Artbees stepped into the growing and exciting world of AI and machine learning to make marketing easier for everyone, not just marketers. GrowFlow constantly monitors users’ behavior and provides intelligent suggestions accordingly.

GrowFlow is in its very first steps, it is evolving as AI does, but it’ll soon take you away from the mass marketing giant, and instead offers you the tailored marketing solutions in the most efficient and intelligent way, and makes sure you are not left behind halfway. GrowFlow is not released for public yet and we are planning to send beta access invitation in early 2019.

To read about our official announcement of GrowFlow, please visit this link.

A Community of 132000 Users, Yay!

We’re proud to announce that the number of our users has grown by 20%  from 2017. And to be exact, we are now a family of 132,206 members who trust and support us to this day. Shout out to our great Artbees family, and way to go!

Agencies and Businesses Run by Artbees Themes

Nothing is better than watching the result of your hard work powering websites and fueling up businesses all around the world. 2018 was again a year of dreams and creations! Here are some statistics to get a better idea:

  • 1 agency made 100 websites using Artbees Themes.
  • 131 agencies each made more than 5 websites using Artbees Themes.
  • 40 agencies each made more than 10 websites using Artbees Themes.
  • 4 agencies each made 50 websites using Artbees Themes.

More and more awesome websites will come to life in 2019, cheers to that!

Artbees in WordCamp Europe 2018

2018 was the year of social presence and our reunion with the great community of WordPress. We managed to attend a couple of WordCamps around the world, the first of which was the WordCamp Europe happening in Belgrade, Serbia. Needless to say that we were lucky enough to be among 2000+ developers, designers, freelancers, entrepreneurs, speakers and experts who had one thing in common — the passion for WordPress. 

In the upcoming days, we were running from isle to isle and moving from workshops to talks to get the most out of the event. The entire WordCamp was somehow revolving around WordPress’s new editor, Gutenberg, and its capabilities, as well as GDPR. Matt Mullenweg had a keynote speech about that and the state of WordPress.

We managed to attend many exciting talks and workshops such as, “Mastering Feedback by Davide Casali”, which was simply about how we can master at giving and getting good feedback, “Making Websites Talk by Andrea Volpini” of which was mainly about the importance of the intelligent content on AI and machine learning application, and “Technical SEO to Grow Your WordPress Business by Yoast founder Joost de Valk”.

We also had a chance to engage in warm chats with some of the best in the market during the event and in after-parties, like the guys from Envato, Freemius, Elementor and many more. We learned a lot and met with a lot of fabulous people in this WordCamp, and cannot wait to attend WordCamp Europe 2019 in Berlin.

Artbees in WordCamp Milano 2018

Our second WordCamp experience happened in the charming city of Milan. Along with other factors that get us excited every time before attending WordCamps, this event was special in another way because we were lucky enough to sponsor a WordCamp event for the first time as Bronze-tier sponsor. Jupiter X was also presented to the great Italian community of WordPress.

One thing we’re sure about WordCamp Milano is that it had the best Contributor’s Day among all our WordCamp experiences. In a blog post, Maziar, one of our representatives, wrote about the insights and the reasons why he thought contribution day at WordCamp Milano was so special and how it changed his mind on voluntary work.

At this very special day and the days forward, Artbees had the chance to meet with guys from Yithemes, who run some of the most successful WooCommerce plugins in the market. We also met with Raffaella Isidori, an expert designer and passionate speaker, who shared some valuable tips and insights on the topic Maziar was going to speak about in our next WordCamp.

As always, we learned, shared, contributed, networked and strengthened our bonds with the great community of WordPress and came back excited for the upcoming WordCamps, this time in Greece.

Artbees in WordCamp Thessaloniki 2018

The last WordCamp we attended in 2018 was a local one in the beautiful city of Thessaloniki, Greece. Well, it was our last chance to contribute to WordPress and follow the culture of giving which is the spirit of all WordCamps, local or continental. That being said, we had the pleasure of sponsoring the event with our brand new Jupiter X for the second time.

Along with the sponsoring opportunity, Artbees had the pleasure to present in one of the talks. Maziar Firuzmand talked about a less covered topic “WordPress and The Problem of Diversity”, as part of a company dealing with this problem all the time. He gathered quite a positive response from the much diverse community of WordPress. Maziar also joined a panel discussion about Gutenberg and shared ideas, suggestions and community concerns together with other guests. Full videos of both sessions will soon be available on

Like all other WordCamps, we were really happy to be able to meet with fellow developers, designers, marketers, and WordPress-based agencies in Greece and will definitely plan to go back soon, hopefully for WordCamp Europe 2020 in Athens this time. You can read our full travelogue of this WordCamp here.

Artbees Got Even More Diverse

Artbees family has grown and got even more diverse during 2018. Right now there are 32 bees all around the world working hard hand in hand to make great products and to support our valuable community. Bees from many countries around the globe like Philippines, Ukraine, Colombia, India, Turkey, Nepal, Russia, and Canada bring together their unique cultures and languages along with their professionality to make Artbees a great example of a diverse WordPress family.

We are inexplicably grateful for every single member of our squad and will look forward to work with more peers from other parts of the world.

Audience and Users from Different Countries

In 2018 we again were rewarded with our users’ trust from all around the world. Receiving feedback, positive and negative, has made us work even harder to fulfill the users’ needs and to deliver the support they deserve.

Just like 2017, our reports show that our biggest community is in the US, with Germany and the Netherlands in the second and third row. A big shout out to our people in these and other countries. We will keep striving to make greater products and to walk the long way to flourish our young products together with you.

Happy Creating in 2019!

None of these milestones, objectives or achievements would be possible without the valuable community of people who use Artbees themes to create great websites or products. We are honored to be part of many ventures and businesses who use Artbees products to build and run and we can’t wait to see what our community will come up within 2019!

Learn How to Nail Small Business Branding With WordPress

Every small business will come to the conclusion at some point that they will need a well-executed rebranding strategy in order to gain voice in the competition and stay in the minds of customers for years. Small business branding encompasses a broad set of techniques. Here we discuss some of the many solutions to achieve an appealing website which is critical for a blooming and growing brand and business.

Continue reading

What a Veteran Online Seller Says About Online Store Builders

online store builder-featured image

In today’s internet-dominated age starting an online store is a must for every business owner. It’s a proven fact that poor usability will kill your business. You can avoid this risk by building an intuitive and user-friendly website. Here is how you can easily build your online store and keep consumers and visitors glued to your website with the help of a good online store builder.

Continue reading