Edit the global styles settings applied to all pages and blog posts using the a website theme.
Global modules and background colours
In the edit themes settings, you can apply a primary, secondary, and background colour to all elements included in the Nexus theme.
To adjust primary and secondary colours of all elements in all Nexus theme-based pages, click on Global Background Colour.
Click the color bubble to customize your primary or secondary colors. You can choose a simple color value or click the Advanced tab and choose a specific hexadecimal value with a color picker.
Please note: Modules use primary color (like indigo, blue etc.) and secondary color (gray) and numeric scale (where 50 is light and 900 is dark) by default. You can generate colors by using material palette generator or any free color palette generator online.
Global typography
In your typography settings, you can control the fonts applies to certain elements in your templates. All Google fonts are supported. You can also select custom colors for certain headings, fonts, or links in your theme.
- Headings: you can customize the exact font, color, size, and style for any headings included on your theme.
- Body: customize the font, color, or text size of the body of your page only.
- Links: customize the default color of links on your website. You can also customize the color and behavior of links when a visitor hovers over or clicks your link.
Global forms
Customize the default colors, fonts, and text styles, and buttons styles for your forms.
- Title: these are styles applied to the text field that appears above your entire form. This typically includes a greeting and instructions for completing the form. These styles on your form can only be managed here in your theme's settings.
- Labels: styles applied to the labels that appear above a form field.
- Fields: styles applied to the names of the form fields themselves.
- Help text: this is the sample content that appears inside each form field, indicating what type of information your visitor should submit.
- Submit: choose which button style and size should be applied to your forms.
- Background color: the background color applied to your form.
- Border: the border color around the form fields.
- Padding: the amount of spacing around the form on your page.
To adjust the global forms in all DigiHub theme-based pages, click Global Forms.
Global buttons
You can set custom colors, fonts, and styles for buttons on your pages and blog. Within the page editor for a specific page, you may be able to swap button sizes or types, depending on how your theme was created by your website developer.
- Size: specify the dimensions of small, regular, and large buttons on your page.
- Primary: a primary button is for the most important action a visitor takes on your page. This color should stand out and catch your visitor's attention.
- Secondary: a secondary button is used for relatively less important actions when there's already one primary button on your page. Secondary buttons are typically applied to pages for lower priority actions.
- Simple: these are the default fonts and styles applied to simple button modules in your page.
To adjust the global forms in all DigiHub theme-based pages, click on Global Buttons.
Global scroll animation
Motion helps make your website more compelling. With the Animations on Scroll module, you can animate elements on any of your HubSpot web pages without any knowledge of JavaScript. Work directly in the page editor instead of having to go to the design manager, saving you time and making it easier for anyone to add moving elements to your pages.
To adjust this, go to Global Scroll Animation.
Global container
In the container settings, you can set the maximum width of your page content. This will be applied to the theme modules only.
To adjust the global forms in all DigiHub theme-based pages, click on Global Container.
Video Explainer