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.
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.
To configure theme text:
-
In the left panel, click Theme.
-
Click the arrow next to Text.
-
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.
-
-
You can change the Font, Weight, Size (for desktop/tablet and mobile, separately), Color, Font format, Direction, Line height, Letter spacing, and set to All caps.
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.
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:
-
In the side panel, click Theme, then click Text.
-
Select a font from the Font drop down menu.
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 site theme permissions and can edit, view, and use theme colors. Team members and clients who do not have site theme permissions can view and use theme colors, but they cannot edit them.
To configure theme colors:
-
In the side panel, click Theme, then select the arrow next to Colors.
-
Click the Plus icon next to Primary, or whichever setting you need to define.
-
Type the HEX or RGB value of the desired color, or use the eye dropper tool to select a color.
-
(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.
Repeat these steps as necessary for each theme color. Next, you need to connect the colors to widgets on your site.
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:
-
In the side panel, click Theme, then select the arrow next to Colors.
-
Click Set Theme Colors.
-
Click Connect it for me or I'll connect it myself.
-
(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.
-
Select which of the generated colors you want to use.
-
Click Save & Connect Colors.
The colors will populate in the Colors section of the Site Theme panel.
To connect a widget to a theme color:
-
Click a widget to open it’s settings menu.
-
Open the color settings and select one of the theme colors listed at the top.
-
Repeat as necessary for other elements.
-
(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.
You can disconnect any widgets connected to individual theme colors.
To disconnect a widget:
-
In the side panel, click Theme.
-
Click Colors.
-
Click the three horizontal dot icon (
) next to the Colors text and select Remove theme colors.
-
Select which colors to remove, then click Remove Selected Colors.
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.
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.
Note
For information on site element backgrounds, see Element Backgrounds.
To customize your site background:
-
In the left panel, click Theme, and then click the arrow next to Backgrounds.
-
Click Default Background.
-
Click either the Color or Image tab or select a color for the site background or upload an image.
-
(Optional) Click the Do not optimize this image toggle to prevent optimization (this setting will appear after an image has been selected).
To customize the background per page:
-
In the left panel, click Theme, and then click the arrow next to Backgrounds.
-
Click Background per page.
-
Select a page from the drop-down menu, and select image or color for the specific page.
-
(Optional) Click the Do not optimize this image toggle to prevent optimization (this setting will appear after an image has been selected).
Comments
0 comments
Article is closed for comments.