Articles on: Website Builder

Site Theme

Site Theme


The Site Theme panel lets you make changes that affect your entire site. You can customize your site's

text, buttons, images, background, and navigation widgets from the design panel. This allows you to

quickly and efficiently make sweeping visual changes, reducing design time and keeping your site's

style consistent across pages.


To open the Site Theme panel, in the side panel, click Theme. When the Site Theme panel is open, the

canvas is automatically minimized to 50% view so that the entire canvas is visible while adjusting the

site theme settings. If you want to return to 100% canvas view, click the drop down in the top bar and

select 100%. The ability to zoom in or out is also available in preview mode.


📘 NOTE
* Changes that you make to specific widgets or pages will override themes set in the
Site Theme panel. We recommend you first decide on a site theme, and then make
customizations to parts of your site that you want to stand out or look different than
the rest.



Theme Text


This section lets you control text for your site, both for text and headings of all sizes (H1 to H6). Change

the style and look of the text on your entire site. You can change font type, size, and also choose

settings for normal text, links, and titles.


Changing the font size, style, color, and other edits will affect future paragraphs, and other text types as

well as current widgets connected to Site Text that have not been manually changed.


Configure Theme Text


To configure theme text:


  1. In the side panel, click Theme.
  2. Click the arrow next to Text.
  3. 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.
  1. You can change the following per text type:
  • Font
  • Font size. This is set for desktop/tablet and mobile, separately.
  • Scale text. (Editor 2.0 only) 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, however the setting can be overridden per widget.

  • Font color
  • Font format
  • Text direction
  • Font weight
  • Line height
  • Letter spacing
  • All caps
  • Text shadow


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 different fonts on your site.


To view available fonts and see what they look like:


  1. In the side panel, click Theme.
  2. Click Text.
  3. 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 widget 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 20 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.


Repeat these steps as necessary for each theme color. Next, you need to connect the colors to widgets

on your site.


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.

  1. Select which of the generated colors you want to use.
  2. 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 it’s 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*.

  1. 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 Background style for your site. Choose between using a color or 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.


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 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).

Updated on: 12/05/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!