Booking Website Pro: Site Theme

In the side panel, click Theme.

1. Click the arrow next to Text.
2. Click the desired text type. The options are:
   • DFLT. This will set the theme for all text in widgets that are not assigned to a heading or to the paragraph style, such as the navigation widget. Link text color and underline can also be set here. Additionally, you have the option to customize the appearance of links for different states, including the Default Link State, Link On-hover, and Link Clicked.
   • PAR. This will set the theme for the text widget.
   • Heading and subheadings H1-H6.
3. You can change the following per text type:
   • Font
   • Font size. This is set for desktop/tablet and mobile, separately.
   • Scale text. When enabled, the text scales based on the parent container's width. This can be helpful if you do not want a line break in a heading. Widgets with text that are connected to the theme will inherit this setting; the setting can be overridden per widget.
   • Font color
   • Font format
   • Text direction
   • Font weight
   • Line height
   • Letter spacing
   • All caps
   • Text shadow

4. Making changes in the Theme text area changes all text in the site that is not overridden by individual, custom style changes. When manual edits are made to individual elements, it overrides the site theme, and any changes made to the site theme will no longer affect the style of these elements. This is at the individual style settings of a certain site element, for example, if you only changed the color of the text in a particular H1 widget on the canvas:

   • And then changed the font size of H1 in the site theme, the H1’s font size will still change in the H1 widget.
   • And then changed the color of H1 in the site theme, the H1 that had been changed will not update with the color change.

    

   Update Theme Text

   You can update theme text in the text settings by clicking Theme, then selecting Text. Or, you can click a text widget to open the context menu, click the heading selection drop-down, and select Update theme. This opens the theme text settings, where you can make updates.

    

   Fonts Library

   The editor features a variety of fonts for your use. Set a theme text font, or choose to differentiate your text by using multiple fonts on your site. 

   To view available fonts and see what they look like:

   In the side panel, click Theme.

   • Click Text.
   • Select a font from the Font drop-down menu.

    

   Theme Colors

   Colors allow you to define a color palette and link the individual colors to any or all widgets with color settings. The color of any element that is linked to the theme colors will automatically be updated when the linked color is changed in the theme colors settings. This allows you to quickly make color changes, which helps reduce design time and ensures your site's style is consistent across pages.

   Account owners automatically have Editor permissions and can edit, view, and use theme colors. Team members and clients who do not have Editor permissions can view and use theme colors, but they cannot edit them.

    

   Configure Theme Colors

   You can configure up to 30 theme colors.

   To configure theme colors:

   1. In the side panel, click Theme.
   2. Select the arrow next to Colors.
   3. Click the Plus icon next to Primary, or whichever setting you need to define.
   4. Type the HEX or RGB value of the desired color, or use the eye dropper tool to select a color.
   5. (Optional) You can generate colors from your logo. Click to open the primary color, then open the Brand tab and click + Add Logo (if you added a logo to your Business Info in the Content Library, it will appear here). After adding your logo, a set of colors is generated.

   If you need to remove or replace the logo, click the three-dot icon next to your logo and select either Remove or Replace Image. Note that you need Content Library & Business Info permission to upload, remove, or replace the logo.

    

   Automatically Configure Theme Colors

   If the site or template doesn't have colors already connected, it can be done automatically. The automatic theme colors generator scans your site and detects the most frequently used colors. It generates a list of colors to select from, and once selected, those colors become your theme colors and are connected to your site widgets.

   To automatically configure theme colors:

   1. In the side panel, click Theme.
   2. Select the arrow next to Colors.
   3. Click Set Theme Colors.
   4. Click Connect it for me, or I'll connect it myself.
   5. (Optional) If you selected I'll connect it myself, click the Plus icon next to each color in the design panel and select the colors individually.
   6. Select which of the generated colors you want to use.
   7. Click Save & Connect Colors.

   The colors will populate in the Colors section of the Site Theme panel.

    

   Connect Theme Colors to Widgets

   To connect a widget to a theme color:

   1. Click a widget to open its settings menu.
   2. Open the color settings and select one of the theme colors listed at the top.
   3. Repeat as necessary for other elements.
   4. (Optional) If you need to edit one of the theme colors, click the pencil icon, and the theme colors settings will open, where you can edit the desired color.

   Once a widget is connected to theme colors, it will automatically update when the linked theme color is updated.

    

   Rename Theme Colors

   To rename theme colors:

   1. In the side panel, click Theme.
   2. Click Colors.
   3. Hover over the desired color name and click the pencil icon.
   4. Type a new name.

   The new name is automatically saved and will appear when hovering over the color in the color picker.

    

   Remove Theme Colors

   You can disconnect any widgets connected to individual theme colors.

   To disconnect a widget:

   1. In the side panel, click Theme.
   2. Click Colors.
   3. Click the three horizontal dot icon () next to the Colors text and select Remove theme colors.
   4. Select which colors to remove, then click Remove Selected Colors.

    

   Site Buttons

   This section lets you define the style of primary and secondary button widgets on your site. Select one of our button layouts and set the text, background color, border, hover state, corners, and shadow styles.

   To hide the Back to Top button on mobile, enable the toggle in the Site Layout section.

    

   Theme Images

   This section lets you control the style of the image widgets on your site. You can change the image layout, add or edit the border style, rounded corners, or shadow effects.

    

   Theme Background

   This section lets you control the background style for your site. Choose between using a color or an image as your background. Choose a custom background image from the photo gallery or upload your own images to add a unique site design. Changes also affect the desktop and tablet.

   For information on site element backgrounds, see Element Backgrounds.

   Customize Site Background

   To customize your site background:

   1. In the side panel, click Theme.
   2. Click the arrow next to Backgrounds.
   3. Click Default Background.
   4. Click either the Color or Image tab or select a color for the site background, or upload an image.
   5. (Optional) Click the Do not optimize this image toggle to prevent optimization (this setting will appear after an image has been selected).

   Customize Background Per Page

   To customize the background per page:

   1. In the side panel, click Theme.
   2. Click the arrow next to Backgrounds.
   3. Click Background per page.
   4. Select a page from the drop-down menu, and select an image or color for the specific page.
   5. (Optional) Click the Do not optimize this image toggle to prevent optimization (this setting will appear after an image has been selected).

   Width & Spacing

   From the Theme panel, you can adjust your site layout, which includes setting page width and default section, column, and inner column spacing.

   To access site layout settings:

   In the side panel, click Theme.

   Click Width & Spacing.

   Click the desired section to expand it.

    

   Page Width

   You can set the default page width for sections not set to full width (previously called “full bleed”) on desktop. Adjusting the default page width can help ensure the best readability and design for the site as it will be displayed. For example, some websites are displayed on a tv screen or screens larger than the average desktop computer.

   To set the default page width:

   1. In the side panel, click Theme.
   2. Click Width & Spacing.
   3. Click to expand the Page Width section.
   4. Select either 1200 px, 1440 px, or Custom. If you select Custom, use the slider to select pixel width or enter a value in the field. The custom value can be between 960px to 1920px, or between 50 vw to 100 vw.
   5. Enable the full-width toggle if you want all new sections to have full width by default.
       

   

    

   Section Spacing

   You can set the default padding for new, blank sections added to your site. If desired, you can override the theme section spacing in the section’s design panel.

   Important considerations:

   • Sections added to the header retain the default header spacing, regardless of what is set in the theme’s section spacing.
   • Note that sections created before this feature release (August 5, 2025) do not automatically inherit the Section Spacing padding; they can be reconnected by opening the section's design panel and clicking Reset to theme spacing in the Section Spacing drawer.

   To set section spacing:

   1. In the side panel, click Theme.
   2. Click Width & Spacing.
   3. Click to expand the Section Spacing section.
   4. Click in the respective boxes to edit the padding values. The horizontal padding values are linked. If you change one, the other will automatically update. They can be unlinked by clicking the link icon. Note that section spacing is set per breakpoint.
   5. If necessary, click Reset padding to reset all values to zero.

   If you modify an individual section's padding, it overrides the theme settings. You can reset it back to the theme Section Spacing settings by opening the section's design panel and clicking Reset to theme spacing in the Section Spacing drawer.

    

   Column Spacing

   You can set the default padding for new, blank columns added to your site. If desired, you can override the theme section spacing in the column's design panel.

   To set default spacing for columns:

   1. In the side panel, click Theme.
   2. Click Width & Spacing.
   3. Click to expand the Column Spacing section.
   4. Click in the respective boxes to edit the padding values. The vertical padding values are linked. If you change one, the other will automatically update. They can be unlinked by clicking the link icon.

    

   Inner Column Spacing

   You can set the default padding for new, inner columns added to your site. If desired, you can override the theme section spacing in the inner column's design panel.

   To set default spacing for inner columns:

   1. In the side panel, click Theme.
   2. Click Width & Spacing.
   3. Click to expand the Inner Column Spacing section.
   4. Click in the respective boxes to edit the padding values. The vertical padding values are linked. If you change one, the other will automatically update. They can be unlinked by clicking the link icon.

    

   Site Layout

   Sidebar Layout for Desktop

   • When you switch from a traditional site layout to a sidebar layout, the header keeps the logo, and all the widgets you had will be removed (similar to switching the header layout to the top header layout). The background color will be changed according to the layout you selected.
   • The shrinking header is not available for the sidebar navigation. The sidebar is always displayed on the site regardless of the site's scrolling.
   • On screens smaller than 1090 pixels wide, the content of the sidebar, except the first image, will be hidden, and an expand menu icon will display. You can customize the color of the trigger button that appears in the design editor.

   To change your site layout to a sidebar layout:

   1. In the side panel, click Theme.
   2. Click the arrow next to Site Layout.
   3. Select the sidebar layout. You can add rows, drag and drop widgets into the sidebar header, and customize it.

   To edit the design of the sidebar header, hover over the sidebar and click Sidebar at the top right corner. You can choose one of the multiple sidebar header layouts to apply to your site, display it on the left or the right side of the screen, define its width, and more.