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.
Comments
0 comments
Please sign in to leave a comment.