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

build a dynamic hotel Website with Jupiter X featured image

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
Bedsselect
Ratingtext
Pricetext
Price Ratetext
Cleaning Ratetext
Restaurant Ratetext
About Hoteltextarea
Addresstextarea
Room Imagesgallery
WiFicheckbox
Minibarcheckbox
Car Parkcheckbox
Air Concheckbox
Airport Shuttlecheckbox
Night Clubcheckbox
Breakfastcheckbox

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!

subscribe

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

How to Build a WordPress Multisite with Jupiter X

Build a WordPress Multisite with Jupiter X Featured
Build a WordPress Multisite with Jupiter X Featured

If you’re the owner of several WordPress websites that share common aspects such as themes and plugins, then you might wonder if there’s a more efficient way of managing them as a single install. WordPress Multisite might just be the exact thing you’re searching for. Since version 3.0 came out, WordPress has offered the multisite feature. Multisite allows users to create a network of sites on a single WordPress installation – which ultimately means that you can run as many sites as you like. Read this article in its entirety to find out how to build a WordPress Multisite with Jupiter X.

Advantages of WordPress Multisite

  • Ability to use the same plugins on your project (e.g. performance, security, SEO).
  • Flexibility to use one theme as a parent theme on multiple sites.
  • Ability to share similar media files for your organization’s branch sites.
  • Saves time on updates to your sites.
  • Freedom to experiment with new ideas while developing client sites on a temporary domain.
  • Community networks

Let’s take a look at these benefits in more detail.

Disadvantages of WordPress Multisite

The things that make Multisite a great sharer also contribute to its flaws.

  • Migrations. Because the network uses one database and stores data from each site in a single database, migration is a bit difficult and complex.
  • Users. You can’t separate users, meaning that each one will continue having access to the entire network. Also, you cannot create separate users for FTP uploads because only one folder is used for all the sites.
  • Plugins. You aren’t able to install one plugin for only one site, once the network administrator installs the plugin, it will immediately be available for all the sites in the network. Also, if you delete a plugin, all sites using that plugin will be affected.

So then, this begs the question: Who needs a WordPress multisite network?

Enable a Multisite Network in WordPress

By default, the Multisite Network feature is built-in with each WordPress installation. All you need to do is set up and activate it.

To do this, you’ll need access to the files in your WordPress installation. Use the FTP browser or file browser in your hosting to edit files. This process requires access to two files .htaccess and wp-config.php – both of which are in the base folder of your WordPress installation. Make a backup of both of those before you start. (It’s also a good idea to backup your entire site too.)

To start, open the wp-config.php file in your code editor and add the following code just before the

/* That’s all, stop editing! Happy blogging. */ 

/* Enable Multisite */
 define( 'WP_ALLOW_MULTISITE', true );

Once you’ve done that, save your changes to the server. This code simply enables the multisite feature and once enabled, you will still need to set up the multisite network

P.s. don’t forget to create a complete backup of your WordPress site.

Setting Up WordPress Multisite Network

Now that we have successfully enabled multisite, it’s time to configure the Network settings. Head over to the Tools » Network Setup page to configure your multisite network.

You’ll then see a screen that asks how you want your network to be set up and whether or not you want to use subdomains or subdirectories.

Subdirectories

Select which one you want to use, enter the title and admin email address for your network in the Network Title and Network Admin Email fields, and click the Install button.

After this, you’ll be taken to the Network Setup screen. Here, you’ll find some codes with instructions where to paste them. One is for the wp-config.php file and one for the .htaccess file.

How to build WordPress Multisite with Jupiter X Network Setup

Please note: you’ll get different code from this site because we have different sites 🙂

Once you make changes to the files, go back to your site admin. Click the link on the Network Setup screen, and log into your network. Use your default login credentials you used before.

Now, you’ll find that your admin changed a little bit, and you’ll see new items in the toolbar at the top called My Sites and the second one called Network.

My sites used to manage your sites. Among these settings, not only can you add or delete but you can also deactivate and archive sites.
Network – used for configuration and overall network setup, user roles, plugins and theme management, and their updates.

And that’s it! You’ve successfully activated the WordPress network, and you’re now ready to add your new sites in the network.

Building a WordPress Multisite in Jupiter X

As we now know all the advantages and disadvantages of this feature, we should think about how to use WordPress Multisite with Jupiter X. There might be several use cases, but let’s take a look at the most interesting one.

Let’s say you are a freelancer who travels a lot and loves mountain biking. You want to create a site or sites where all these interests will be published according to their styles.

This is what our task looks like:

Freelance site. This site will have a solid looking design, complete with your portfolios and the services you provide. You’ll also want to list all your clients and their testimonials.
Travel site. Since you’re traveling quite a bit and have accumulated good experiences that you want to share with the world, the site must contain a gallery, trips, places you’ve, as well as your future plans.
Mountain Bike. Since you’re really into mountain biking, you’ll want this website to have a very sporty style. If you’re participating in various races, then you’ll also want to have race events and stylish blog posts where you will publish your previous and future adventures.

Having these sites under one hood where you’ll be able to manage everything from one dashboard sounds like a great plan. Now, let’s take a look at what Jupiter X can offer us and how it can help us achieve our goal.

Currently, Jupiter X offers 250 premade templates that are sorted into 16 categories. You’ll find at least one type of business in this extensive list of premade templates. Now, let’s check what we got for our situation.

The freelance-style website under the creative/portfolio category has 33 premade demos:

How to build a WordPress Multisite with Jupiter X Premade Demos

I will choose Creative Studio, which has a clear design, pleasant typography and colors match – all of which I’d like to incorporate into my website:

How to build a WordPress Multisite with Jupiter X Creative Studio

Travel site – There are 9 templates in this category:

How to build a WordPress Multisite with Jupiter X Category

And my favorite is Adventure since it closely resembles my personality and active lifestyle:

Lastly, for my mountain bike hobby, I’ll go ahead and choose the Mountain Bike template from the 10 available demos. It has everything needed on a hobby site and the design exactly what I want.

Now, as we already know what we want, it’s time to roll up our sleeves and get our hands dirty. This is what our task looks like for now:

  1. Install WordPress.
  2. Setup a WordPress network site.
  3. Create three domains and name them based on our goal (For example Freelancer, Traveler, Biker).
  4. Install Jupiter X and all the necessary plugins.
  5. Install templates for each domain.
  6. That’s it – now it’s your turn to make the final changes to them. The Jupiter X templates are almost ready. All you’ll need to change are the text and images. Everything else has already been taken care of (Thanks to the design team behind Jupiter X).

Wrapping Up

WordPress Multisite is a great feature when used correctly. While it has it up and downsides, you can use it for your personal or business sites, to host client or community sites or to run a WordPress.com-like system of blogs that people create themselves.

In this blog post, we took a deep dive into how you can set up, enable and build WordPress Multisite with Jupiter X quickly and efficiently so you can begin managing several sites at once. We’d love to hear more about your thoughts and experiences in the comment section below!

subscribe

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

How to Build an Editorial Calendar for Your WordPress Blog

editorial calendar for your wordpress blog featured
editorial calendar for your wordpress blog featured

Are you struggling to keep your blog up-to-date? Or do you have a list of great ideas for blog topics but are unsure when to publish each one? If so, then an editorial calendar can help you schedule the posts and assign due dates. In other words, editorial calendars for your WordPress blog allows you to have a plan for your post – there are even some calendar plugins that will help you create a content calendar.

What is an editorial calendar?

An editorial blog calendar is more than just a calendar. It allows you to set it and forget it. It’s hard to simply wake up and know what to blog about that day, how long it’ll take to make a post and how much information you should provide so freely, among other things.

With an editorial calendar, your blog starts working for you, instead of you working for it. Your blog will become a powerful tool for your business that attracts new customers.

Why do you need an editorial calendar for your WordPress blog?

Editorial calendars make it easy to keep track of your blogging schedule, blog post ideas and holidays that might inform your blog topics. Other reasons to use editorial calendars include the following:

  • Keep your content consistent.
  • Organize your writers and contributors.
  • Visualize and share your strategy with your team.
  • Fill in any content gaps.
  • Plan your SEO strategy before creating content.

How to create a WordPress blog editorial calendar

1. Determine how many posts per week you can write

When starting an editorial calendar, you first need to determine how many days you will actually post. Don’t try to post seven days a week if you don’t have time for it. It’s better to consistently post twice a month than randomly post every day for one week followed by three months of no posts at all.

2. Define topics for each post day

Think of over 5-10 blog topics related to your business that your customers are interested in. You must know who you are talking to in order to create an editorial calendar of topics that will engage your audience.

3. Brainstorm post ideas

It’s better to take a pen and a paper and write down everything that pops into your head. You should provide interesting and useful information for your potential customers that will attract new readers.

4. Create an editorial schedule

You can do this step with a paper calendar, Excel sheet, etc. Below I’ll show 2 plugins that can be used with Jupiter X theme to create a schedule.

5. Write and share your post

Of course, you have to write posts in order to build your blog. Write at least two blog posts. Schedule those two blog posts to be published on the days marked on your editorial calendar. You can pick a day of the week and write as many posts as you can in one business day so you can focus on other things on other days. It is really up to you. Then once you have a finished post, share it! Share it across your various social media – even send out a newsletter if you want. Your audience won’t know to tune into your valuable information if you don’t tell them to.

Creating an editorial schedule

There are several editorial calendars that integrate directly into WordPress. These calendars will show your planned WordPress posts and allow you to schedule new content.

We’ll review two of them:

Using the PublishPress Calendar, you can easily see when content is planned and when it was published. You can also drag and drop content to a new publication date.

The calendar gives you a powerful overview of your publishing schedule:

editorial calendar for your wordpress blog 1

You can read more about how to install the plugin in the PublishPress documentation.

When you add a new item to the calendar, it will automatically be saved under the Pitch category and assigned to your user account. To see all of your content and its categories, you can go to the PublishPress > Content Overview tab:

editorial calendar for your wordpress blog 2

The Content Overview screen allows you to drill down and see content organized by status, categories or users. You can find out more information here.

The calendar gives you a powerful overview of your publishing schedule. By using the Editorial Calendar, you’ll easily be able to see when content is planned and when it was published. You can also drag and drop content to a new publication date. By default, you see all the WordPress content you have planned for the next six weeks. If you need to drill down, you can filter the calendar by post status, categories, users or post types.

Read more about this calendar here.

Custom Statuses is a feature that allows you to create custom post statuses such as “In Progress” or “Pending Review.” You can further define statuses to match the stages of your team’s publishing workflow. A detailed description can be found here.

So the key features of PublishPress include the following:

  • An editorial calendar to help you schedule content
  • Notifications for custom events, so you don’t miss anything
  • Custom post statuses, so you know how every article is progressing
  • Editorial comments on team members’ posts

The Editorial Calendar plugin gives you an overview of your blog and when each post will be published. You can drag and drop to move posts, edit posts right in the calendar and manage your entire blog.

With this plugin, you’ll be able to do the following: –

  • See all of your posts and when they’ll be posted.
  • Drag and drop to change your post dates.
  • Manage your drafts with the new drafts drawer.
  • Quickly edit post titles, contents and times.
  • Publish posts or manage drafts.
  • Easily see the status of your posts.
  • Manage posts from multiple authors.

To install the plugin, you can follow the steps as for any third-party plugins described here.

After activating the plugin, you can access the calendar via Posts > Calendar:

editorial calendar for your wordpress blog 3

There are no settings to configure and no options to fiddle with. You can start using it immediately. Clicking on the calendar menu takes you to a screen with a calendar display that includes all your published and scheduled posts.

Creating new posts is as simple as hovering over any date on the calendar and clicking New Post. This brings up a Quick Edit popup that enables you to add the post title, content, publish time and status right there in the calendar. Default posts will be created as drafts.

Draft posts will not be published automatically unless you actually set the status to Scheduled.

editorial calendar for your wordpress blog 4

Published posts in the calendar have View and Edit links that link directly to the post’s permalink and the edit screen. Draft and scheduled posts have an additional option for Quick Edit that enables you to edit the post title, content, publish time and status using the same popup mentioned before.

Conclusion

Creating an editorial calendar for your WordPress blog content can be time-consuming, especially if you are posting regularly, but is a vital part of successful blogging. Using a plugin can make it easy to setup and manage your scheduled posts.

subscribe

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

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.

Instagram

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.

Countdown

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!

subscribe

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