Style Tool

The Style section inside the Website Builder lets you set universal design choices for your website. Changes you make here automatically apply across all pages, ensuring your site has a consistent look and feel.

To access the Style tool, open the Page Builder from your dashboard menu, then select a template you want to edit. Once the template is open, click "Style" in the left-side Builder menu. A list of all your current Style settings will appear. To edit any of the Elements controlled by Style (Typography, Colors, Buttons, Links, Inputs, Navbar, and Footer) click the gear icon to the right of the Element title:

Typography

Typography controls the text styles used throughout your site. You can set default fonts, sizes, and styles for all your headings and body text here. Options include:

• Headings 1 through 5: Large to small titles for each of your Sections
• Paragraph: Standard body text, for longer pieces of content

Tips:

• Use headings consistently to structure your content. For example, every page of your site should have no more than a single Heading 1, usually near the top of the page. Any other headings should be Heading 2 or higher (up to Heading 5).
• Choose fonts that are readable on both desktop and mobile, and are also accessibility-friendly. This means not only choosing fonts that are large or legible enough to read, but making sure the colors chosen don't contrast in ways that are hard on the eyes.

Colors

Colors set the main colors used on your site, so everything from backgrounds to buttons to text stays consistent. Options include:

• Primary: Main brand color, used for headings and accents
• Secondary: Complementary color used for highlights
• Accent: Can also be used for highlights, as well as icons or emphasis
• Light: Used for backgrounds, or applies to text placed on dark Elements (like a dark background)
• Dark: Also used for backgrounds or applies to text placed on light Elements (like a light background

Tips:

• Though you do have the ability to add more colors to your Style palette, we recommend limiting your palette to the above five to maintain a cohesive look.
• Use contrast to make your text and buttons easy to read.
• Some universal color selections, especially for your text, may not appear as desired if you are manually adding a variety of Section templates with varying designs to your site. In these cases, it's recommended that you adjust the colors of the Elements inside those selected Sections individually.

Buttons

The Buttons option controls the style of various types of buttons across your site. Options include:

• Primary Button: The main call-to-action buttons
• Secondary Button: Less prominent buttons for more secondary actions
• Social Media Button: Buttons that specifically link to your various social media platforms, often smaller than Primary or Secondary buttons

Tips:

• Keep the text inside your buttons concise and action-oriented. Long lines of text make for larger, strange-looking buttons.
• All the settings for Primary and Secondary buttons will be applied universally to each of those buttons across your site. To make independent changes for individual buttons, click on the specific button directly inside the Builder.
• Ensure your buttons stand out against the background color, otherwise they're easy to overlook.

Links

The Links option sets the default style for all hyperlinks throughout your site. This does not include links added to other elements like buttons. Link text will automatically default to match the settings of your paragraph text. To change it, visit Link settings.

Tips:

• Choose a color for your links that is both easy to distinguish from other text, and that also stands out against your background.
• Consider including underline or hover effects in your Link settings to make them even more obvious to your site visitors.

Inputs

Inputs control the appearance of input fields on your site, which are the fillable fields inside things like contact forms or newsletter forms. These settings also apply to the search bar input if you include a search function on your site.

Tips:

• Ensure your inputs are large enough to be easily clickable and readable.
• Maintain consistent spacing, borders, and background colors across all form types. This helps visitors to recognize what fields are fillable.

Navbar (Header) & Footer

The Navbar (or Header) is the top section of your site that appears on every page. It provides essential navigation links and sets the visual tone for your entire website.

The Footer is the endcap to each page of your site for a polished look. It can also provide essential links or other items for visitors to explore, such as additional navigational items, social media buttons, disclaimers and conditions, and site copyright information.

You'll use these sections to allow readers to easily navigate between pages, display your logo or site title for branding, and include links to the most important pages of your site, like Home, About, Books, or Contact.

Your Navbar and Footer can only be edited in the Style menu, whether it's for design or functionality. If you click on either one from inside the main Builder, The Bookshelf will let you know you need to visit the Style tool to make any adjustments needed to that particular section. This makes these a little more specialized than other Sections, or even other Style settings.

Because your Navbar and Footer are universal Sections meant to be applied exactly the same way across every page of your site, all their features live inside your universal Style settings. Whether you want to adjust their colors, links, logo, or anything else, you can only do so from inside the Style tool. Each one is adjusted independently from the other, though do often default to including similar color and typography settings.

Tips:

• Keep the content in your Navbar and Footer concise and organized. Include only essential links to avoid clutter.
• Maintain consistent styling with the rest of your site. Both Sections should look like they are cohesive with every page.
• Consider adding a logo or site name to your Navbar for branding consistency and to reinformce your author brand across every page.
• Ensure the menus in both Sections are easy to use on desktop and mobile versions of your site. The Bookshelf will automatically adapt your menus to achieve this as best it can, but it's always worth checking before publishing your site live.

To learn more about all of the above elements and settings, visit the Website Builder section of our Support Center.