The Styles settings in the Design panel control how different elements look across your entire website. You can use these settings to change text, images, buttons, links, and more.

Important: These are Sitewide settings. Any change you make here will automatically update every matching item across your whole website.

Open the Sitewide Styles Menu

1. Click Design at the top of your Websites app to open the Design panel.

2. Look at the right-hand sidebar and click the Sitewide tab.

3. Select Styles.
   

Styles Sub-Sections

You can edit nine main areas within the Styles menu. Review the guides below to see what you can customize in each section.

1. Controls

This section changes the colors, look, and actions of the interactive elements on your site:

• Buttons: Controls every button layout and color on your site.
  

• Links: Controls all standard hyperlinks.

• Primary Links: Controls the icons that sit next to your links.

• Gallery Arrows: Controls the arrow icons on image galleries.

• Divider Lines: Controls the look of Divider content blocks.

• Divider Labels: Controls any text you type inside a Divider block.

• Tags & Filters: Controls the text and icons on Blog post tags.

• Modals: Controls the look of pop-up image windows.

• Pagination: Controls the visual effect when users click through multiple pages of blog posts.
  

2. Text

Choose the default fonts, sizes, and styles for your website text. Note: You can still override most of these defaults later on individual pages.

• Page Titles: Changes text inside the Title field of a Page Title block.

• Page Subtitles: Changes text inside the Subtitle field of a Page Title block.

• Content Titles: Changes text inside the Title field of standard Content blocks (like Text, Image, or Gallery blocks).

• Content: Changes the main body text inside the Description field of your blocks.

• Bold Text: Changes how bolded words look on your site.

• Italic Text: Changes how italicized words look on your site.
  

3. Images

Add global design styles to your photos. You can choose to add drop shadows or borders to every image on your site, then customize their size, color, and thickness.

4. Maps

Customize the look of the maps generated by the Address content block. You can change the map layout style, choose the color of the map pin (placemark icon), and style the pop-up text boxes.

5. Content Blocks

Adjust the spacing and frame styles for all of your website content blocks:

• Container: This controls the area inside the block edges. You can apply a universal background color, texture, or image here. You can also adjust the default padding and spacing around the edges.

• Border: Add a border to all content blocks. You can place the line on just one side or on all sides of the block.
  

6. Collections

Edit the visual elements used in your dynamic collections:

• Locations & Team Members: Change the look of the status labels.

• Events: Customize the color, size, and style of the action buttons on your event listings.
  

7. Lists & Tables

Change the layouts for structured data blocks:

• Items Display: Controls the layout and text rules for Items List content blocks.

• Definition Lists: Controls the text and layout rules for Definition List blocks.

• Data Tables: Controls the background colors and borders for your information tables.
  

8. Wrapper

A wrapper is an outer frame or border that shows up on every single page of your website. Use this section to turn the wrapper on or off, make it solid or transparent, and change its width and color.

9. Password Protection

If you lock your website with a password, you can style the private login page here. This section lets you change the design of the password form field, the submit button, and the lock screen background.