Create a Booking Page with Divi Premade Layouts and FluentBooking

Divi Premade Layouts are more than just eye-catching designs; they’re the starting point for a functional and problem-solving website. In this post, we’re going to explore how you can effectively use these layouts, and specifically, how to integrate a booking system into a Divi layout using FluentBooking plugin.

Prerequisites

Please make sure you have the following installed and activated:

• Divi
• FluentBooking

Understanding the Value of Premade Layouts

The true potential of Divi’s premade layouts lies in their customization. A layout provides a foundational design that, when augmented with the right plugins and customization, can transform into a fully functional website tailored to specific business needs.

Customizing Divi Premade Layouts

Step 1: Creating Your Page

1. Navigate to Pages > Add New.
2. Name your page appropriately, for instance, “Booking”.

Step 2: Accessing Divi Premade Layouts

1. Once your new page loads, click on “Start Building”.
   
2. Select the option to browse through the premade layouts.
   

Step 3: Choosing Your Layout

1. For a booking site, select a layout category such as ‘Fashion and Beauty’.
   
2. Choose a layout, like the ‘Barber Shop’, that suits your business model.
   

Step 4: Importing the Layout

1. Click on the desired layout.
2. Select “Use This Layout” and import the preset.
   

Step 5: Setting Up Fluent Booking

1. Install and activate the FluentBooking plugin.
2. Navigate to Fluent Booking > Calendars.
   
3. Add a new calendar by clicking on “Add New Host”.
   

Step 6: Configuring Your Booking Calendar

1. Select yourself as the host.
   
2. Define the service, such as ‘Haircut’, including duration, description, location, and timezone.
   
3. Set your availability by adjusting days and working hours.
   
4. If needed, configure SMS notifications via Twilio.
   

Step 7: Customizing Booking Details

1. Adjust schedule settings and override specific dates if necessary.
   
2. Set up email notifications for booking confirmations.
   

Step 8: Enabling Payments

1. Link your Stripe account to accept payments.
2. Set the price for your service in the calendar settings.
   

Step 9: Embedding the Booking System

1. Copy the provided shortcode from Fluent Booking.
   
2. Navigate back to your Divi page and insert a new row with a text module.
   
3. Paste the shortcode into the module.
   

Step 10: Fine-Tuning Your Page Design

1. Add a background and padding to your text module for better aesthetics.
   
2. Save changes and preview the page to ensure the booking system appears correctly.
   

Customizing Your Premade Layout Further

Once you’ve integrated the booking system, you can personalize your layout further:

• Replace generic images with your brand-specific visuals.
• Edit the text to convey your unique brand message.

Divi Premade Layouts and FluentBooking – Conclusion

By integrating plugins like Fluent Booking with Divi Premade Layouts, you unlock a new level of functionality for your website. It’s not just about the aesthetic; it’s about creating a seamless and efficient user experience that serves your business needs.