Learn Themes Customizations Step 6

Step 6: Before you begin designing your pages and adding elements to your site, it is important to set up the styles for your site. This includes selecting fonts, colors, backgrounds, and other elements to help ensure your site has a cohesive look. 

While you can add elements to a page and set the color, font, and other styles individually, Elementor provides a comprehensive list of options to set before you begin creating your website to eliminate the time spent styling each individual element. This also ensures that your fonts, colors, and sizes are consistent throughout your site. To access the site settings, press the hamburger menu (three horizontal lines stacked on top of each other) in the top left of the Elementor panel. 

The hamburger menu opens several options to help set up your website. Press Site Settings to open a list of common global settings you will want to change to help style your site before you build it. 

Changing settings in this area will make global changes. Global changes are changes to the whole site. Let’s say you are building a website for a client using the colors blue and orange. Months later, they decide to change their logo and site colors to green and gold. Instead of clicking each element within your site to manually change the color, you can change the global settings and it will take effect on the whole site. This makes changing colors, fonts, and logos much easier since you don’t have to change it locally each time it is used.  

• Global settings: Sets the style for the entire site 
• Local settings: Overrides the global style for one element 

When you open the site settings you will see several options. The more time you spend setting up your global styles, the easier it will be to create your pages. Let’s start with making changes to your site colors by pressing global colors. The screen that appears has four presets: primary, secondary, text, and accent. The primary color you set should be your main color. Items that will use the primary color include headings and icons. The secondary color you set should be a color that compliments your primary color. It will be used for subheadings, lists, and some animations and block backgrounds. The text color will be used for paragraph blocks and the accent color is used for links, buttons, and other accent features. 

When picking colors, it is important to remember to have a high level of contrast between colors to make text readable. You also want the colors to complement each other. You should also try to stick to just a few colors, or shades of those colors, to make your site more professional. You can explore color theory and get recommendations for creating a color palette for your site by visiting Adobe Color or W3Schools Color Picker. 

Once you’ve selected your colors, you can set them by clicking on the color. This will open the color picker. The color picker brings up a spectrum where you can move the circle around to select a color. It also has a space at the bottom to type in a hex code for your color, which will help you select a precise color. 

You can also add additional preset colors to easily access as you create your pages. By pressing add color you can then select a color using the Color Picker and give your color a name. Once you have set your four main colors and added any additional colors, press the back arrow at the top of the panel to navigate to additional site settings. 

Once back at the site settings list, select global fonts. The panel that opens resembles the global colors panel. Here you can click the pencil icon and change the font settings for the primary text, secondary text, paragraph text, and accent text. You can also add additional custom styles the same way you did with custom colors.

You can use the slider to input a font size, or you can enter an amount in the text box. When changing elements like size, you will notice the default setting is usually pixels (px). It is important to note exactly which unit of measure you are changing. The unit of measure controls the size of items, both fonts and other design elements, like images. While it might not seem to matter which you select, as they will all change the appearance on your desktop version, the correct unit of measure is important if you want visitors to see your site correctly on a tablet or phone.  

When you change the size of something in pixels, you are setting it to an absolute unit. This means if you set it to 90 pixels, then it will be that size regardless of whether the site is displayed on a desktop or mobile device. Using pixels as the unit of measure for a font is usually not a good idea. However, you might have an image you want to stay the same size regardless of the device someone is viewing it from, and in that case, pixels would be the correct unit of measure.  

There are also relative units of measure. This means the size will change relative to other items on the page, which makes it much easier to adapt a page to view correctly on tablets and phones. EM and REM are both very similar. They each will adjust their size to different devices, but the way in which they do that is different. If using EM, the size will adjust according to the settings for the parent element. This means if your default size for heading text is 16, but you change it for a specific instance to be 12, then using EM will modify the size on a mobile device using the modified setting of 12. With REM, if the default size for heading text is 16, and you change it for a specific element to be 12, then REM will modify the size for mobile devices based on the HTML default of 16. There is no official right or wrong answer when choosing between EM and REM. Most designers use EM, but as you grow in your web design skills you may prefer one over the other, and it may change based on what you’re building. The biggest takeaway, from what is arguably a confusing way to determine sizing options, is that it is usually best to use a relative unit of measure, whether EM or REM, over an absolute unit of measure (px), so your site adapts more easily for people accessing it from a mobile device. 

Other options to change include the weight (boldness), style (normal, italics), decoration (underline, line through, etc.), and other height and spacing choices. Once you’ve set your font styles, press the back arrow to return to the site settings.