To learn more about Site Theme, visit Duda University
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.
-
Prior to March 2023, Site Theme was previously named Global Design.
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 add custom fonts to your site, see Custom Fonts.
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.
You can add custom fonts from the Google fonts library or by uploading custom font files (TTF, OTF, EOT, WOFF2 or WOFF). For best performance, it is recommended to use WOFF or WOFF2 files when adding custom fonts.
Note
-
If you only have a .otf or .ttf file, we recommend using an external tool like FontSquirrel to convert it to the required format.
-
To maintain GDPR compliance, custom fonts are loaded from our CDN without the need to call the Google Fonts API.
-
If you save a site as a template, it will include any custom fonts that have been added.
-
If you reset a site, custom fonts are removed.
To add custom font:
-
You can add custom fonts from any of the following locations:
-
In the side panel, click Theme, and then click Text. Expand the desired text section. Next to the font list, click the Add & Manage Fonts (
) icon.
-
From the design editor of a widget, for any text element click the Add & Manage Fonts (
-
-
Select one of the following options:
-
Google fonts. Select a font from the Google fonts list. The font appears in the Added Google Fonts list below. To remove a font, click the X next to the font in the list. Please note that the list may already display fonts added to the template. It is recommended you do not remove the template fonts.
-
Custom fonts. Click Upload fonts to upload a custom font file. Multiple fonts may be selected at one time. To remove a font, click the X next to the font in the list.
-
-
Click Done.
The font is added to fonts list across the site.
Note
Adobe fonts do not appear in the fonts list. You need to add the font family to the code.
If you remove a font that is currently being used on the site, the text will revert to using the default font. You cannot remove the any of the default fonts.
To remove custom fonts from a site:
-
In the side panel, click Theme, and then click Text. Expand the text section that uses the custom font. Next to the font list, click the Add & Manage Fonts (
-
Click the X next to the font in the list to remove the font from the site.
If you remove a Google font, you must republish the site for the change to take effect. However, if you remove an uploaded font, there is no need to republish for the change to take effect.
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.
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.
Note
This information is specific to the Classic Editor, and not relevant for Editor 2.0 (formerly known as the All-Flex Editor.) To identify your current editor version, see How to Identify the Editor Version Your Site Uses.
This section allows you to define the theme for row and column design in terms of background color and default spacing. Edits that will be made on individual rows or columns will override the theme row and column settings.
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).
Note
This information is specific to the Classic Editor, and not relevant for Editor 2.0 (formerly known as the All-Flex Editor.) To identify your current editor version, see How to Identify the Editor Version Your Site Uses.
Control the site layout navigation on desktop, tablet and mobile. For the desktop version, you can choose from two widths: 960px or 1200px.
Changing your navigation's layout often affects the behavior of your header and sometimes the rest of your site. If your header suddenly looks incorrect after changing the layout, try a different layout.
Note
This information is specific to the Classic Editor, and not relevant for Editor 2.0 (formerly known as the All-Flex Editor.) To identify your current editor version, see How to Identify the Editor Version Your Site Uses.
You can change your desktop site layout to a sidebar layout. Sidebar layout displays the header on the side of the site (either left or right) and is a great design tool to give a unique look to your site. The sidebar header also acts as a sticky header so it will always be displayed on the screen and you can also add widgets into the sidebar like any other row.
Note
-
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 on 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 scrolling.
-
On screens smaller than 1090 pixels width, 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:
-
In the left panel, click Theme, and then click the arrow next to Site Layout.
-
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.