Articulation provides many options for controlling the style and design of your website. To manage styles, theme, and more, click on Site Design on the upper right of the website editor to open the Site Design panel.
Theme
Themes are a combination of structure and style which can quickly change the look of your website. To change themes, click on the Change Theme button and then click on a theme. The website editor will refresh and show your site with your selected theme. Note that your site design choices will update to defaults used by the new theme you choose. Any custom CSS you added will remain, however.
Text Styles
You can control the text styles for multiple different kinds of text on your site. Click on the type of text you want to edit, then adjust any of the styles you wish. We currently support all of the following text styles and options:
- Headings - H1, H2, and H3 with the following options for each:
- Font (this is shared by all three heading types)
- Size
- Color
- Letter Spacing
- Line Height
- Bold
- Italic
- Uppercase
- Regular Text
- Font
- Size
- Color
- Letter Spacing
- Line Height
- Bold
- Italic
- Uppercase
- Links - All of these options can be set separately for the *default* and *hover* state.
- Color
- Show Underline
- Underline Color
- Buttons
- Font
- Size
- Letter Spacing
- Bold
- Uppercase
- Quotes
- Font
- Size
- Color
- Letter Spacing
- Line Height
- Bold
- Italic
- Uppercase
- Navigation
- Font
- Main Navigation
- Color
- Active/Hover Color
- Size
- Letter Spacing
- Bold
- Uppercase
- Sub Navigation
- Size
- Letter Spacing
- Bold
- Uppercase
- Form Inputs
- Text Color
- Background Color
Colors
Site colors are the color palette for your site and are used for various components. Click on a color bar to change its color. There are three ways you can do this:
- Color chooser.
- Hex code.
- Preset colors.
Site Background Color
As with link colors, you can use the default background color of your theme or pick a custom color. Note that if you have set custom background colors for page sections, these will replace the site background color within those sections.
Shape
Choosing a shape option will uniformly change the shape of multiple components on your site, such as buttons, cards, and images. It’s a quick and easy way to give a different feel to components that better matches your branding and style.
Advanced
Click on the Site CSS button to add your own CSS style rules. These are loaded after all the other CSS of your site, so you can override default rules as well as add your own.
Saved Design Settings
To save all of your design settings, click on the Save Current Settings button. Each time you save, we add an option below the save button to restore previous design settings. For example, if you change themes and want to keep your design choices with a different theme, simply click the Restore button for a version.