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 theme settings easily.
Let's start with the theme editing
To edit your theme settings, you need to go 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.
Spacing
Your theme settings for spacing, control the vertical spacing and maximum width of your page content in between elements on your page.
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.
- Headings H1-H6 : You can customize the exact font, color, size, and style for any headings which included on your theme.
- List Items: Here you can customize the font, color and text of list items present in your theme.
- Body : Here you can customize the font and color of the body of your page . If somewhere list items are not changed by changing body, then need to make changes in above list items respectively.
- Links: Here you can customize the default color and font of links on your website.
- Mobile Responsive : Here you can customize the font size of all your headings tag from h1 to h6 including paragraph , this changes will reflect in mobile view.
Buttons
Within the page editor you can set custom button type which have plenty of options like colors for background, text, hover text, border, border width, border color, border radius, horizontal padding and vertical padding etc. Buttons are of following types:-
- Default CTA : You can customize the background color, border width, border type, border color, border radius, text color, text transform, horizontal padding , vertical padding, background hover color and text hover color.
- Transparent CTA : Here you can customize the background color, border width, border type, border color, border radius, text color, text transform, horizontal padding , vertical padding, background hover color and text hover color.
- White CTA : Here you can edit the background color, border width, border type, border color, border radius, text color, text transform, horizontal padding , vertical padding, background hover color and text hover color.
- Simple CTA : Here you can customize the text color, text transform, horizontal padding , vertical padding, and text hover color.
- Arrow CTA : Here you can customize the background color, border width, border type, border color, border radius, text color, text transform, horizontal padding , vertical padding, background hover color and text hover color.
- Simple CTA With Arrow : Here you can edit the text color, text transform, horizontal padding , vertical padding, and text hover color.
Forms
In form settings, you can customize the header background color, header text color, color of label, help text, field border, field focus border and button that include background color, hover color etc.
(Note:- General Style available in forms will apply to all forms except the form that are available in footer module, and to change that we have given that style seperately in website footer.)
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.
Website header
Website header settings control the background colors, menu link color and child menu border color which appear in the page header.
- Menu : Here you can make changes of navigation text, dropdown navigation and mobile navigation of your website.
- Background : Select the color for the header background color. These styles can only be managed here in your theme settings.
- Button : Here, you can edit your button present in header with plenty of option like changing background color, border, text color, spacing, hover color etc.
Footer
In this setting, you can edit the text color, custom background color ,form styling, social icons and spacing
- Text : Here you can make changes text color, highlighted text color and footer menu hover text color.
- Form Style : Select the form background color, border style, border radius and spacing.
- Social Icon : Here, you can edit icon color, icon hover color, icon background color, icon hover background color and address icon color.
- Background : Here, you can select the footer background color.
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