Global Theme settings

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.

Screenshot_47

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-color

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. 

global-fonts

Screenshot_325

 

Spacing 

Your theme settings for spacing, control the vertical spacing and maximum width of your page content in between elements on your page.

spacing

 

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. 

    typography-change

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.

    buttons-img

    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.)

    forms-changing

    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.

    table-img

    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.

      

                                                                    website-header-1

    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.

    footer

    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.