A theme is a collection of styles and templates which you can apply to your web pages and blogs. Theme settings control the global colors, fonts, website header, typography, buttons, forms, tables, spacing and footer for all the pages of theme.
Watch the video below, where you can learn how to customize and edit the global theme settings.
Let's start with the theme editing
To edit your theme settings, you need to be within the page editor. You can access the page editor by clicking the Design tab given on the left side of the theme template. Then click Edit theme settings.
Global Colors
Your Global color settings apply a primary, secondary, and brand color to all elements included in all the templates of your theme. These styles will be applied globally to all elements on your website.
Global Fonts
Global Font Settings give you the option to choose a primary and secondary font to apply to the website's headings, buttons, forms and body text. Click the color bubble to choose primary or secondary font colors. You can either simply choose a color value or click the Advanced tab and choose a specific hexadecimal value with a color picker.
Website header
Website header settings control the background colors, menu link color and child menu border color which appear in the page header. Also, you can unable or disable the top header.
- Header Top Row Background color: Here you can select the color for the header top background color where support mail and knowledgebase is present.
- Header Bottom Row Background color: Here you can select the color for the header bottom background color where logo, menu and button is present.
- Menu link color: select the color for the menu link and style your font. These styles can only be managed here in your theme settings.
- Border color : Here, you can choose the color of child menu.
Typography
In the typography settings, you can control the fonts applied to the elements in your templates. You can also select custom colors for certain headings, body texts and links in your theme.
- Body : Here you can customize the font, color and text of the body of your page only.
- Headings: You can customize the exact font, color, size, and style for any headings which included on your theme.
- Links: Here you can customize the default color of links on your website. You can also edit the color of your link.
Buttons
Within the page editor you can set custom colors for background, text, hover text, border, border width, border color, border radius, horizontal padding and vertical padding. Basically we have two types button:-
- Primary Button:- Here you can edit background color, text color, text hover color, background hover color etc.
- Secondary Button:- Here you can edit background color, text color, text hover color, background hover color etc.
Forms
In form settings, you can customize the header background color, header text color, color of label, help text, field border, field focus border.
In theme we have provided seperate button style inside form that can help to edit button border width, border type, border color, background color, text color, background hover color and background text hover color etc.
Tables
Set the default colors, fonts, opacity for tables added to your page.
- Table head: You can choose custom colors for fonts in your table header, and the background color across the full width of the table head.
- Font color: Set the custom color for fonts in your table.
- Footer: You can choose custom colors for footer background and text color.
Spacing
Your theme settings for spacing, control the vertical spacing and maximum width of your page content in between elements on your page.
Footer
In this setting, you can choose the custom background color, choose the color of the text, social icon text color, social icon text hover color, social icon background color etc.
After all the editing, click on the Apply changes in the page editor.
Once you are done with the editing, click publish or update button given on the top right side.
If you have any Sales or Support related questions, you can anytime reach us at hubspot@webdew.com or visit this page.