Edit Your Website Styles
The Styles settings in the Design panel control the appearance of various elements of your website, such as text, images, buttons, links, and more. This is a Sitewide settings, so any change you make here will edit all instances across your website.
To choose or change the layout of your website:
- Click Design at the top of your Websites app to open the Design panel.
- On the right-hand sidebar, navigate to the Sitewide tab and select Styles.
Below is a list of the sub-sections you can edit.
Controls
Here, you can edit the colors, appearance, functionality, and other design elements of various controls on your website. Below is a list of the following controls you can edit in this section:
| Buttons | Controls any button that appears on your site. |
| Links | Controls all hyperlinks on your site. |
| Primary Links | Controls the icons that appear next to links, where applicable. |
| Gallery Arrows | Controls the arrow icons that appear beside image galleries. |
| Divider Lines | Controls the appearance of Divider content blocks. |
| Divider Labels | Controls any text that is entered in a Divider content block. |
| Tags & Filters | Controls the text and icons that appear on Blog post tags and filters. |
| Modals | Controls the appearance of pop-up image modal windows. |
| Pagination | Controls the animation that appears when a user navigates through multiple pages of blog posts. |
Text
In this section, you can choose the designated font for different text categories on your website. You can also choose the default size and appearance for these text categories (most of these can be overwritten on the page-level design settings).
Below is a list of the following controls you can edit in this section:
| Page Titles | Controls the text entered in the Title field of a Page Title block. |
| Page Subtitles | Controls the text entered in the Subtitle field of a Page Title block. |
| Content Titles | Controls the text entered in the Title field of a Content block (such as Text, Image, or Image Gallery blocks). |
| Content | Controls the text entered in the Description field of a Content block. |
| Bold Text | Controls the appearance of bolded text on your site. |
| Italic Text | Controls the appearance of italicized text on your site. |
Images
In this section, you can choose whether to apply drop shadows or borders on every image on your site. If you choose either of these options, then you can fine-tune the size, color, and appearance of these elements here.
Maps
This section lets you edit the appearance of the maps that appear when you use an Address content block. You can edit the style of the map, the color and appearance of the "placemark" icon, and any popups that appear.
Content Blocks
Here, you can edit the Container and Border of all content blocks on your website. You have the option to edit the following content block settings:
| Container | Refers to all elements bounded by the edges of a particular content block. Here, you can add a universal background (either a color, texture, or image) to all content blocks, or add universal padding and spacing around the edges of content blocks. |
| Border | Here, you can choose to add a border to all content blocks. You can limit the border to one side of the block, or all sides of it. |
Collections
This section lets you edit certain elements that appear on your Collections. You can edit the appearance of status labels for your Locations and Team Members collections. For the Events collection, you can modify the color, size, and appearance of the different buttons seen on event listings.
Lists & Tables
This section lets you edit the following settings:
| Items Display | Controls the layout and text settings of Items List content blocks. |
| Definition Lists | Controls the layout and text settings of Definition List content blocks. |
| Data Tables | Controls the background color and border of any data tables. |
Wrapper
This section lets you add a "Wrapper", which is a border that appears on every page on your website. This wrapper can be transparent or a solid color. You can modify the size, color, and appearance of it in this section.
Password Protection
If you have password protection enabled on your website, then you can edit the appearance of the password form field, the button, or the background of the "lock screen" here.
Related Articles
Add Border to Content Block
You can add borders to specific content blocks on your site. To add or edit a content block's border: Select the Design tab at the top of the Websites app. In the Design preview window, click directly on the content block you'd like to edit. This ...Edit Your Website's Header & Logo
The Header & Logo settings in the Design panel lets you manage your website's logo, favicon, and edit the spacing and border of your website's Header. These are Sitewide settings, so any changes you make here will apply to every page on your website. ...Edit Your Footer Layout and Design
The Footer settings in the Design panel control the layout, text settings, social icon designs, and design settings of your website's Footer. This is a sitewide setting, so any change you make here will apply to every page on your website. To find ...Add an Image or Image Gallery to a Page
To add images to your website's pages, you can upload images to an Image block or Image Gallery block. An Image block only allows you to upload one image, while an Image Gallery allows you to add multiple images. Add an image block Add an image ...Edit Your Website's Navigation Design
The Navigation settings in the Design panel lets you manage the appearance of your your website's navigation bar, menu items, and drop-down menus. You can choose separate settings for how your navigation menu appears on desktop and mobile devices. ...