Elementor and Site Wide Settings
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.
- Go to Pages - All Pages and select the new page that we created in the last tutorial.
- 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 ColorsChoose 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.
- 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.
- Repeat the previous step for the Secondary, Text and Accent colors.
- After making your changes, click the Apply button at the top.
Default FontsClick 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.
- Click Primary Headline to open the font picker (see screenshot). Set the Font Family and Font Weight of your choice. Click Apply.
- Repeat these steps for the Secondary Headline, Body Text and Accent Text.
Color PickerClick 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 SettingsClick 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.
Elementor Page Builder Plugin
Elementor screenshots used by permission of Pojo Me Digital LTD
Editor's Picks Articles
Top Ten Articles
Content copyright © 2018 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.