Our website builder offers plenty of choices when it comes to the colors and fonts you’d like to have on your site. What follows is a guide on how to make changes to the main portions of your site. These tips can be applied to other sections as well, and if you’ve had custom work done in the past, some customizations may need to be made by our team. If you encounter any issues changing the styles on your website, please message support.
Accessing Styles
1. Log into your account at Twentyoverten.com
2. Access Your “Site Settings” in the bottom-left toolbar:
3. Click “Styles” at the top of the menu:
4. A dropdown will appear, allowing you to make changes to different sections of your website. We recommend starting with the “Main” section, which will apply changes to your entire site:
5. You can choose other sections to customize that will override your main settings. For instance, if you wanted the links in your header to be a different color than from the rest of your website, you would select “Header” from the menu:
6. Under each section are sub-elements. Clicking each will open a new dropdown of options. The sub-elements that can be customized are “Typography,” “Links,” and “Buttons”:
To Make Changes
1. For “Fonts,” click and select from the dropdowns to choose families and styles:
2. For “Colors,” click the circle icon and enter a color number into the text box or click and drag within the color window:
Typography Styles
1. The first place to make updates is to the “body” of your website’s text. Think of these as the paragraphs that fill up the page:
2.“H1” can be selected to make changes to the largest headlines on your site. These look like the text here and often go in the “hero” section of your site:
3.“H2” can be selected to update the second-largest headlines on your site. They will most often appear on your contact page and at the top of your forms:
4. “H3” settings are applied to the headlines that are most often used as titles that lead into paragraphs:
4. “H4” settings are applied to the smallest headings on your site, like the email address in your bio:
Link Styles
1. There are 2 settings to update: “Default” and “Hover.”
2. “Default” is how the link first appears on your site:
3. “Hover” is how the link appears when someone’s cursor or mouse rolls over it:
Button Styles
1. Just as shown with “Links” in the above screenshots, “Buttons” also have default and hover settings:
2. “Default” buttons are the ones that most often appear with your contact forms:
3. The settings for your “Default” buttons will carry over to your “Primary” and “Secondary” button styles unless you decide to override them:
Opacity & Bases
3. “Opacity” is sometimes an option for color styles, most notably “Bases,” which are the background colors for elements. While “Bases” aren’t customizable under “Main,” they are everywhere else.
4. The most common place you’ll adjust the “Opacity” is under “Hero” > “Base” > “Background.” The overlay background color there is usually semi-opaque to make the text more legible against the background image.
5. Click the slider at the bottom of the color window and drag it right to make the background more opaque:
6. Click the slider at the bottom of the color window and drag it left to make the background less opaque:
Accents
1. Accents appear throughout your website, most notably as quotes and parts of layouts:
2. To update this small detail, go to “Page” > “Base” > “Accent.”
Have more questions or need help with your settings? Just get in touch with support!