Learn how the Booking Website Pro editor is organized and where to manage site design, pages, content, and layout settings.
This article covers the areas of the editor and how to add and configure sections, rows, columns, inner rows, and widget alignment.
The editor can be divided into several areas.
In the editor, there are several predefined sections: the top navigation bar, the side panel, the central content area (often referred to as the editor canvas), and the design panel on the side. These sections are the basis for constructing websites according to the user’s vision.
The top navigation bar inside the editor contains helpful shortcuts for different site actions.
The top navigation bar allows you to:
- Hamburger menu. Open the hamburger menu on the left side of the top navigation bar to access dev mode, site dashboard, platform language, and various site-building and support resources.
- Page navigation. Click the pages dropdown to view a list of pages on your site. You can navigate to a page by selecting it from this menu.
- Device icons. Switch between different screen size views (also called breakpoints) by clicking on the device icons. This allows you to preview how your current page appears on various screen sizes, from desktop to tablet to mobile.
- Undo and Redo. Click the Undo or Redo buttons as necessary when working in the editor.
- Save Progress Indicator: The check mark icon serves as an indicator of your current site progress and whether changes have been successfully saved.
- Site comments. Click to open the site comments panel. If there is a new comment, a red dot appears on the site comments button in the top bar.
- Share. Click Share to access your site's preview link per screen size, site domain, site name, and client management.
- Preview Changes: Click to preview your site, including unpublished changes, on all or individual device screen sizes.
- Publish or Republish: Use the publish or republish button to publish your site with the latest changes.
- Home Button: Click on the home icon to return to your site dashboard.
The side panel serves as a comprehensive toolkit for managing various aspects of your site's design and functionality.
The following are the default options available in the side panel:
- Add. From this element, you can easily drag and drop Widgets, Media, and Site Text onto the canvas.
- Pages. Add, view, and manage pages and popups.
- Theme. Define default styles and settings for all text, colors, buttons, images, backgrounds, rows, columns, layout, width, and spacing on your site.
- CMS. Manage collections and content collected from clients.
- SEO/AEO. Manage SEO settings for pages, images, internal and external links, and more.
-
More. Provides access to Blog, Store, Bookings, Personalization, Settings, and Site Dashboard.
Note that after you install Blog, Bookings, or Store, they are added to your side panel for easy and quick access.
The design panel offers a range of design settings for selected elements, enabling precise customization. Whether you are tweaking layout content alignment, spacing between elements, animation, and background, the design panel provides a comprehensive set of tools to enhance your website's visual appeal. Design options include layout adjustments, sizing configurations, alignment settings, and more, tailored to the selected element.
The Website Builder is built from a header, footer, rows, sections, and columns. Every widget you add is inserted into one of these sections.
Rows are the horizontal sections of your site. When you add widgets and columns to your site, they are placed within these rows. To change how content is displayed in the mobile view, click the reverse column order toggle in the row editor.
You can add rows to your site by dragging widgets into the site. When you drag a widget between rows or into a space where you want to add a row, a new row will be created when you drop the widget.
To delete a row, right-click anywhere on the row to open the context menu, and then click Delete. Alternatively, click the Row button in the top-left corner of the row, then click Delete.
Background Image Sliders can be used to set background images for rows or columns.
After selecting multiple images in the image picker, click Done. Once the slider is created, select a Slide transition from the drop-down menu, and move the slider to select a Slide speed (seconds).
Any of the other background image options, such as Background Overlay, Positioning, and display style, can be applied to the slider.
Sections are pre-built rows of elements that users can add to their responsive sites. Sections enable users to build great-looking sites quickly by saving time during the design process. The infrastructure was built in order to provide a better user experience with a variety of pre-made sections.
Note
- Sections do not use any custom CSS, and are all built within the editor by designers.
- Sections do not use the text color or text font settings from the site theme settings. However, you can always clear the format and apply your design.
Add Sections
To add sections of widgets:
- Hover between rows, and click Add Section.
- Select Designed. Sections display in the side panel.
- In Section Mode, a gallery of pre-made sections is available in the left panel, grouped into categories (Intro, Features, About, Team, Testimonials, and so on).
- In the side panel, click a section to display it as a new row. You can then browse sections within the same group by using the arrow keys or by selecting a section from a different group.
- To embed the section into the site, click Save. Alternatively, click Save & Add Another to continue adding sections to your site. The section converts into a row, and all elements within it are editable.
When aligning widgets within the same column, the website builder attempts to snap them to be the same size. As you resize, the builder jumps ahead or behind to snap to the location. This should make it easier to make widgets the same size.
There is also a Snap to Grid feature. The Snap to Grid feature helps lay widgets in the pages of your site with professional precision. This system allows you to align widgets horizontally and vertically within columns and rows. Rulers are presented when moving an element in its row or column, or when resizing the widget. The aligned elements are marked with a colored border. A widget may be aligned with more than one other widget, depending on the specific use case.
Alignment is supported in the views of the three different devices (desktop, tablet, mobile).
For more information on configuring headers and footers, see Booking Website Pro: Header & Footer