Customize your website theme

Use the Theme side panel to set broad visual styling for your website, then use page or widget settings when a specific part of the site needs to look different. Theme settings cover text, colors, buttons, images, rows and columns, backgrounds, width and spacing, and site layout.

Open the Theme panel

Open the website editor before changing theme-wide styling. If you need the editor first, follow Access the website editor.

1. Open the website editor.

2. In the side panel, click Theme.

3. Open the section for the part of your site you want to style: Text, Colors, Site Buttons, Theme Images, Theme Rows and Columns, Backgrounds, Width & Spacing, or Site Layout.

Set site-wide text styles

Use Theme > Text to style text that still follows the site theme.

1. In the Theme panel, click the arrow next to Text.

2. Select the text type you want to configure: DFLT, PAR, or a heading from H1 through H6.

3. Set the available text properties for that text type, including font, font size, font color, font weight, line height, letter spacing, all caps, and text shadow.

DFLT applies to widget text that is not assigned to a heading or paragraph style, such as navigation text. It also includes link color and underline settings, with separate states for the default link, hover, and clicked states. PAR applies to the text widget, while H1 through H6 apply to headings and subheadings.

Theme text updates affect text that has not been manually customized. A widget with an individual style override keeps that override instead of following the corresponding theme property.

Define and connect theme colors

Use Theme > Colors to create a shared color palette and connect widget colors to it.

1. In the Theme panel, click the arrow next to Colors.

2. Click the Plus icon next to Primary, or next to the color setting you want to define.

3. Enter a HEX or RGB value, or use the eyedropper to select a color.

4. Repeat the process for the other theme colors you want to define. You can configure up to 30 theme colors.

To connect a widget to a theme color, open the widget’s settings, open its color settings, and select a theme color listed at the top. A connected widget updates when its linked theme color changes.

If your site or template does not already have connected colors, open Colors, click Set Theme Colors, and choose Connect it for me or I’ll connect it myself. With the manual option, select the generated colors individually with the Plus icon, choose which generated colors to use, and click Save & Connect Colors.

Style buttons and images

Use Site Buttons and Theme Images to set shared styles for button and image widgets.

1. In the Theme panel, open Site Buttons to define primary and secondary button styles.

2. Select a button layout and set its text, background color, border, hover state, corners, and shadow styles.

3. Open Theme Images to set image widget styling.

4. Choose the image layout and set the border style, rounded corners, or shadow effects.

Set row, column, and background styling

Use Theme Rows and Columns for shared row and column design, and use Backgrounds for the site or an individual page.

1. Open Theme Rows and Columns to set row and column background color and default spacing.

2. Open Backgrounds, then click Default Background.

3. Choose the Color or Image tab to set the site background. For an image background, choose an image from the photo gallery or upload one.

4. To style one page, open Backgrounds, click Background per page, select the page, and choose an image or color for that page.

Individual row, column, page, or widget settings can override the corresponding theme styling.

Set width and spacing defaults

Use Width & Spacing to set page width and default spacing for sections, columns, and inner columns.

1. Open Width & Spacing in the Theme panel.

2. Click the section you want to expand: Page Width, Section Spacing, Column Spacing, or Inner Column Spacing.

3. In Page Width, choose 1200 px, 1440 px, or Custom. For a custom width, use the slider or enter a value between 960px and 1920px, or between 50vw and 100vw.

4. Enable Full width when you want new sections to use full width by default.

5. In a spacing section, enter the default padding values for new blank sections, columns, or inner columns. Linked values update together; click the link icon to edit them separately.

Section spacing is set per breakpoint. You can override theme spacing in an individual section or column’s design settings; reset an individual section to the theme spacing from its Section Spacing settings.

For page-level layout changes such as adding rows, moving content, or adjusting a specific page, use Add widgets and edit page layout.

Change the site layout

Use Site Layout to control navigation layout across desktop, tablet, and mobile.

1. In the Theme panel, click the arrow next to Site Layout.

2. Choose the layout you want for the site. Desktop layouts include 960px and 1200px widths.

3. Review the header after changing the navigation layout because the change can affect the header and sometimes the rest of the site.

You can also select a sidebar layout. A sidebar places the header on the left or right side of the site, keeps it visible while the site scrolls, and lets you add widgets to the sidebar like any other row.