Skip to main content
Adding website sections

Learn how to add and customize website sections

Nathan Crossley avatar
Written by Nathan Crossley
Updated over 4 months ago

Sections are the building blocks of your rental website. The Header, Top bar, and Footer sections apply to all pages.

Each page of your Booqable website consists of sections, and within each section, you can add Blocks that display content specific to that section. For example, when adding a Products section, you can add additional blocks to show more products in this section.

Follow the guide below to learn more about the different sections you can add to your Booqable website.

💡Note: Some sections are only available in specific themes.


Available sections

To add a section, click Add section in the Booqable website builder. A pop-up will appear where you can preview each section before adding it to your website.

Below are the sections available for building your rental website:

💡Note: Each section includes settings for color palette selection and padding for desktop and mobile devices. This allows you to customize the color of a section and padding for each device type.


Accordion

The Accordion section helps you display text neatly and efficiently. It saves space by showing condensed titles that users can click to expand and read more details. This way, visitors can quickly find and access the information they need.

To add items to the Accordion, click on +Add block under the Accordion section and select Item.

Item settings:

  • Title

  • Description


Call to action

You can add the Call to action section on your Booqable website to prompt customers to visit different parts of your website by adding buttons that link to a page. Buttons are optional.

In the general settings of the Call to action section, you can customize the following:

  • Title

  • Description

  • Background Image (optional)

  • Overlay Percentage: Adjust the overlay opacity on the Background Image

In the Buttons settings, you can change the text and the link of each button.


Collections

Adding Collections allows you to display curated product collections on your website, enabling customers to navigate to the most relevant products quickly.

You can add more collections to a Collections section by clicking the +Add block under the Collections section and select Collection.

Follow the guide below to set up collections from products in your inventory:


Columns

Columns allow you to add written content to your website where you can talk about your business, what customers should expect, and any special offers you have.

Columns settings:

  • Layout: A choice of either 2 or 3 columns displayed on desktop devices.

You can add more columns to a Columns section by clicking the +Add block under the Columns section and select Column.

Column block settings:

  • Icon: Select an icon from available icons or set to none if you do not want to use an icon.

  • Image (optional)

  • Buttons (optional)


Contact form

The contact form section allows customers to send questions directly to you. Any questions submitted through the form will be sent to the email address specified in Company information found in Booqable Settings.

Contact form settings:

  • Translations: You can change the wording of every element that is a part of the Contact form


Date Picker

Adding the Date Picker will allow customers to select their rental period. If you have locations available, they can also select the location they want to pick it up from.

Date picker settings:

  • Title: Change the default "Check availability" to the wording of your choice


Hero

Hero sections are used for creating a strong visual impact at the top of a Booqable page, usually featuring a large image, a headline, a button (optional), and a date picker (optional). Some themes allow you to create an interactive Hero section by adding transitions between sections or by adding a video.

Hero settings:

  • Overlay percentage: The transparency level of an overlay applied to the background image of the Hero section

  • Custom title: Headline displayed in the Hero section

  • Custom description: text below the title in the Hero section


Images

Images section is a more advanced Hero section, it is only available on certain themes. With Images, you can display a slide show or carousels on your Booqable website. It can also be used to show a video!

Images settings:

  • Show date picker: You can choose to enable or disable the date picker on the Images section. The default title "Check availability" can be reworded.

  • Position: The date picker can be displayed at the bottom of the Images section or in the Call to action part of the Images section.

  • Carousel settings: You can set how many seconds each picture shows, make it stop when you hover over it, and choose how the pictures change (fade or slide).

To add extra Slides to the Images section, click +Add block under the Images section and select Slide.

Slide settings:

  • Image: Upload or select an image.

  • Image mobile (optional): Upload or select a different image for mobile devices.

  • Video URL (optional): Enter a video link from YouTube or Vimeo.

Image overlay settings:

  • Show overlay: Turn on to add a color overlay over the image.

  • Overlay background color: Choose the background color for the overlay.

  • Overlay text color: Choose the color for the text on the overlay.

  • Overlay percentage: Set the opacity level of the overlay (e.g., 80%).

In the Buttons settings, you can change the text and the link of each button.


Logos

The logo section lets you display logos of your partners or brands that you are offering on your Booqable website.

Logos settings:

Title: The title can be added to the Logos section

Title Position: The title can be positioned to the left, center or right of the section.

To add extra Logos to the Logos section, click +Add block under the Logos section and select Logo.


Mosaic

Add a Mosaic section to your website, where you can customize the display of items in a mosaic layout. Mosaic section can be used to showcase products or lead users to articles/blogs on your website.

Mosaic settings:

  • Button label: Text for the main button (e.g., "See all Articles").

  • Button link: Select where the button leads.

  • Layout: Choose the arrangement of items (e.g., large left, small right).

To add extra blocks to the Mosaic section, click +Add block under the Mosaic section and select Article.


Numbered blocks

Create Numbered blocks section to display content blocks with numbered headings. Numbered blocks can be used to display a step-by-step guide on how to order products, feature highlights, or a ranked list.

To add extra blocks to the Numbered blocks section, click +Add block under the Numbered block section and select Block.

Block settings:

  • Text alignment: Choose the vertical alignment of the text (top, middle, bottom).

  • Image position: Choose the position of the image (left or right).


Products

You can add Products to your website to show off specific products, for example, your most rented items, to give customers easy access to these products.

To add extra blocks to the Products section, click +Add block under the Products section and select Product. You will be able to select a product from your inventory that will be displayed as the block by clicking on the Product block.


Spacer

Adding a Spacer will create a space between two sections. It can either be clear or you can select a color palette. Some themes allow you to add an image as a spacer.


Testimonials

The Testimonials section allows you to showcase customer reviews on your Booqable website, which can be turned into a carousel if more than one testimonial is present.

To add extra blocks to the Testimonials section, click +Add block under the Numbered block section and select Testimonial.

Testimonials settings:

  • Color palette: Choose a set of colors for the section.

  • Image position: Select whether the image appears on the left or right.

  • Show navigation buttons: Enable or disable arrows for navigating between testimonials.

  • Show page bullets: Enable or disable dots indicating the number of testimonials.

  • Rotation time: Set the time in seconds for how long each testimonial is displayed (set to 0 to disable auto rotation).


Text

The Text section allows you to add titles and written copy wherever you want on your website.


Text with image

The Text with image section works by combining text with an image and an optional button. Similar to the standard Text section, it allows you to add content anywhere on your site, but with an image and an optional button. This section can be used to highlight featured rental items with descriptions and a "Rent Now" button.


Title

A Title section can be used to display a title of a section, in combination with an optional button. As shown on the example above, it is used to show "New arrivals" of the website with the "See all" button that takes users to all new arrivals.

Did this answer your question?