How to give style to my website with global settings?

Give your website style with global settings

Global settings are used to customize the appearance of your site, and the changes you make here will be reflected across your entire website. The available options are typography (your fonts), colors, container and buttons. These settings will automatically be used (by default) for all content on your website, with the exception of items where you make individual changes.

Typography

Maybe sometimes you won’t even notice, but using great fonts on a website can make a huge difference. This settings section allows you to decide which fonts you want to use for different elements, font size, font weight, etc.

Let’s start by choosing a font family for your website. This should be the dominant family for your website (although you can use several on your website).

Basic typography

If you don’t have a predetermined font yet, spend some time browsing the fonts and choosing the right one. You can do this by clicking on the “Font Family” drop-down menu and scrolling through the list of choices or typing the name in the search field.

The selection is vast, because next to the system fonts, you can choose any of the Google fonts, the largest directory of free and open source web fonts. The list can be expanded with our plugins:

Custom Adobe Fonts (Typekit) to integrate Adobe fonts;
Custom Fonts will allow you to use all the custom fonts you need. Simply download the font file and it will be added to the font list.

Now, once you’ve selected your font family, let’s get to the details. Selecting all variants will save you time and clicks If you choose by
example the "700 italics" variant, each time you mark your text in italics, it will be automatically assigned the weight 700.

Next, set the default text size (in pixel), weight and, if necessary, text transformation (for example, capitalize each word on your website).

The last two options will influence the space occupied by your text. The line height will define the height of each line of text, while the lower margin of the paragraph will determine the space added at the bottom of each paragraph. You can set these values by entering the size value or by moving the cursor left and right.

Headers

Headers help visitors to your website understand the importance of different pages or publication sections. The WordPress platform uses titles from H1 to H6 by default.

The most important title on each page or publication is H1, and it should provide search engines with the information on that page or that publishing content (what is it). Thus, there should be only one on each publication or page.

Other title tags can be used as needed. The higher the title number, the less important it is. Thus, the title H6, if used, marks the least important content.

In the “Typography” section, you can define almost all the basic options for each header separately, giving them a specific and optimized look.

Colors

Once you have defined your typography, it is time to give it color. Here you can set your color scheme to make your content attractive and create the ambiance you want. Used in the right way, the colours speak volumes about the type of website they visit and the brand itself.

Here is a brief summary of what each color option does:

Text Color: The color of the body of the text (the text included in “paragraph” format on your pages and in your content) and descriptions on the website.
Theme color: Color of all elements of the theme such as buttons, background color of selected text, etc.
Link Color: Color of all text to which a link has been added.
Link Hover Color: The color of all text to which a link has been added when hovered with the cursor (known as “Hover Color”).

To change a color, click the colored circle next to the name of the color type. You can visually choose your color by clicking on the color selector and adjusting the opacity (transparency) if you need it. You can also add the color value to HEX, HSL or RGB formats.

To remove the changes and restore the default color, click the "Clear" button or click the "Return to default settings" icon.
You can also set the background for the entire website:

Background: Choose from three options: Color, Gradient or Image. Whichever option you choose, it will be applied as a body background across the site.

You can also define both color and image. In this case, be sure to adjust the opacity (less than 100%) of the color to make the image visible, as the color will be used in overlay.

Container

Now it’s time to set some parameters for the content of your website. A container is the area where all your content is displayed on each page or post.

The content area and sidebar are both parts of the container. The content area is technically called the main container, while the sidebar is the container
secondary.

Content Width

This value will set the maximum width of your container. This will define how much space your content and sidebars (if defined) will occupy on pages and
publications.

Disposition

By defining the container layout, you will choose how your content, sidebar and widgets, header, footer and website background
will assemble on your website. You have access to 4 types of container layouts:

Frame/all: this layout will display individual containers and widgets will appear in boxes. This leaves space on all sides around each box so you can see the background of the website.
Frame/ Content only: with this, only your content appears in the box format, while the sidebar and widgets are displayed on a plain background.
Full width / Spaced: this will define your content and sidebar in a single container. This container will display in a container width, leaving space on the left and right side.
Full width/stretched: using this layout, your content and sidebar will be displayed in a single container, stretched from one edge of your screen to the other.

Ex2-Theme allows you to define a different layout on the entire website, according to your needs:

Layout: the layout selected here will be set by default for the entire website. The selected layout option will then be automatically used on all elements of the site except those that you choose to customize separately. However, you can change the layout for the following publication types if necessary:

Layout: for pages
Layout of blog articles: for blog archives and unique blog article pages
Archive layout: all archives

In addition, depending on the other extensions you might use on your website, you will find options to set the layout of their dedicated pages, for example, WooCommerce Layout or LearnDash Layout.

Buttons

The last global option is used to set the default appearance of website buttons. We will provide a brief overview of the options available and what they are used for:

Text color: set the normal and hover color of the button text;
Background Color: Set the normal color and the button color (background);
Border width: if you want to add a border to your buttons, simply set the border width here;
Border color: set the normal and hover color of the button border;
Edge radius: adding a radius will make your buttons more rounded; as you increase the radius value, your buttons will change shape from rectangle to circle.
Button font: the typography settings available here will be applied only to the button text.
Internal margins: this will add an internal margin to your button; a larger margin will make your button larger.

Final notes on global settings:

The options with a "reactive edition" icon next to it can be modified separately for display on desktop, tablet and mobile phone. The application of
changes in each display type will change the parameters only for that type.

In contrast, parameter changes in options that do not have a "reactive edit" icon will apply the same changes to all display types.

Keep in mind that some global options may not apply to your content because they can be replaced by the settings you set in the page editor. This will depend on the choice of page builder tool used to design your website.

Updated on: 27/03/2023