When using Elementor, you have controls to customize the pages of your website at both the site wide level and on a single page level. It will save a lot of time when we start building the pages of our site, if we set the site wide options first. We will see these settings reflected throughout the website but we can make changes for individual pages, widgets, etc.

In the previous tutorials, we installed Elementor and the Astra theme for our Wordpress website. We also started our first blank page, by setting the template option to the Elementor Canvas template. With this, we have a totally blank webpage. Let's get in to Elementor and get going.

1. Go to Pages - All Pages and select the new page that we created in the last tutorial.
   
   
2. Click the Edit with Elementor button.
   
   At this point, we have a blank page and a list of widgets or elements on the left (see screenshot). But we want to set the site wide settings. So click the hamburger icon at the top left corner, to open the Styles and Settings menu (see screenshot).
   
   NOTE: Notice the Exit to Dashboard button. You will use this to return to the Wordpress dashboard.
   
   

   Default Colors

   Choose the Default Colors option from the list (see screenshot). In the Default Colors menu, we have a few preset palettes in the More Palettes section. Choose one, if you like. But most of us will have our own brand palette. So let's set a custom palette in the Color Palette section.
   
   As you can see we have four color squares for the Primary, Secondary, Text and Accent colors.
   
   
3. Click on the Primary color square to open the Color Picker (see screenshot). Use the controls to change the color or type in the HTML color code.
   
   
4. Repeat the previous step for the Secondary, Text and Accent colors.
   
   
5. After making your changes, click the Apply button at the top.
   
   

   Default Fonts

   Click the hamburger icon again and choose Default Fonts (see screenshot). We can set options for the Primary Headline, Secondary Headline, Body Text and Accent Text.
   
   
6. Click Primary Headline to open the font picker (see screenshot). Set the Font Family and Font Weight of your choice. Click Apply.
   
   
7. Repeat these steps for the Secondary Headline, Body Text and Accent Text.
   
   

Color Picker

Click the hamburger icon again and choose Color Picker (see screenshot). In this panel, you can click on a color square and change the color (see screenshot). This will tell Elementor to make your choice of colors available in the Color Picker. You will probably want to add your brand colors. Click Apply when you are done.

Global Settings

Click the hamburger icon again and choose Global Settings (see screenshot). The Global Settings are used as backup default settings. For example, if your choice of font is not available, the Sans-serif font will be used. Let's keep the default settings in the panel.

Finally, we are ready to add our first element/widget on to our webpage.

Back

Wordpress
Elementor Page Builder Plugin
Astra Theme

Elementor screenshots used by permission of Pojo Me Digital LTD