/INSTRUCTIONS

 Your turn

Customize the site theme

Follow the steps below to configure the site fonts, sizes, and colors. As with the other lessons, we've got videos for you if you'd prefer to follow along that way.

Step 1: Access theme settings
  1. In the side panel, select Theme.


Step 2: Define site theme colors

Setting up theme colors simplifies future design changes and ensures design coherence.

  1. Select the colors section: Click the arrow next to Colors.
  2. Click the color swatch: Click the color swatch next to the color setting you wish to define (e.g., Primary Color).
  3. Input field: Enter the HEX value of the desired color, or use the RGB value or the eyedropper tool to select a color.
  4. Repeat: Repeat these steps for each theme color as needed to create a cohesive color scheme.
  5. Rename colors: To rename theme colors, hover over the desired color name and click the pencil icon. Type a new name.
White Dark Brown Dark Orange Light Orange Orange Tint
#FFFFFF #302B28 #F58847 #F4D8BB #FDF6EE
Step 3: Define site theme buttons

To ensure buttons appear the same across the site:

  1. Select the buttons section: Click the arrow next to Buttons.
  2. Primary/Secondary button settings: Change each of the button settings to match the specifications below:
Button Layout Font Color Background Color Border Color Hover State Corners & Shadow
No action required. Set color to White. Set color to Dark Orange. Set color to None. No action required. Set corner radius on All corners to 10px.
Button Layout Font Color Background Color Border Hover State Corners & Shadow
No action required. No action required. Set color to None. Set color to Dark Brown. Set hover background color and hover border color to Dark Brown. Set hover font color to White. Set corner radius on All corners to 10px.
Corner radius
Click the gear icon and select All borders. Then, set Corner radius to 10px.
Default Background > Color
Set Background color to White
Primary Button settings
Secondary Button settings
Theme Image Adjustment Example:
Theme Background Adjustment Example:
Step 4: Define theme text

This section lets you control the typography for your site, including text and headings (H1 to H6). 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.



  1. Select the Text Section: Click the arrow next to Text.
  2. Select a Text Type: Click the desired text type. The options are: 
  3. DFLT. Sets the theme for all text in widgets that are not assigned to a heading or paragraph style. Additionally, you can customize the appearance of links for different states here.
  4. PAR. Sets the theme for the text widget.
  5. H1-H6. Sets the theme for headings 1 to 6.
  6. Text Settings: Adjust the Font, Weight, Size (for desktop/tablet and mobile, separately), Color, Font format, Text Direction, Line height, Letter spacing, All caps, and Text shadow.
  7. Font Family: Choose font families that align with your brand’s personality and ensure readability. Use web-safe fonts or incorporate custom fonts. 
  8. Font Size and Weight: Define consistent font sizes and weights for headings, subheadings, and body text to maintain hierarchy and readability.
  9. Color: Ensure text color contrasts well with the background for accessibility and readability.
Step 5: Define theme images

To control the style of image widgets:

  1. Select the Images Section: Click the arrow next to Images.
  2. Style Consistency: You can change the image layout, add or edit the border style, set rounded corners, and add shadow effects.
Step 6: Define theme backgrounds

To ensure consistency in backgrounds:

  1. Select the Backgrounds Section: Click the arrow next to Backgrounds.
  2. Set Default Background: Click Default Background to expand settings. Choose between the Color or Image tab to select the color or image for the background.
  3. Set Background per Page: To customize the background per page, click Background Per Page to expand settings. Select a page from the drop-down menu, and choose between the Color or Image tab to select the color or image for the background.