Learn Themes Customizations Step 4

Step 4: Most settings for your website will be altered within the Elementor plugin, however, there are some options you may want to access within the Customize menu. If you have any custom CSS you want applied to the whole site, you can add it under Additional CSS. You can also create a menu and set your homepage, which will be covered in future units. If you make any changes to the Customize settings, be sure to press Publish at the top to save your changes. 

For now, let’s focus on adding some branding elements to your site by adding information to the Site Identity. Click the arrow next to Site Identity to open those settings. You should give your site a name and tagline/slogan. These are easily added by removing the placeholder text and adding your own title and tagline. 

You should also upload a logo for the site and set a site icon, or favicon, which will display in browser tabs or when someone bookmarks your site. To add a logo press Select Logo, which opens the media library. The Media Library stores all the media for the website. As you build pages and posts, your photos and videos will be stored there. If your media library is empty, it will automatically take you to the Upload tab. If you have items in your media library, it will open the Media Library tab. Upload your site logo by dragging and dropping a file or using Select Files. When uploading your file be sure to consider the size and type of file you are uploading. The goal is to use the smallest file that still looks good to help your site load faster. A WebP, JPEG, or PNG file is the best option. You can also resize your file before uploading it to your media library, and there are plugins you can install later to further optimize your image size for faster page loading.  

Once you upload your image, there are additional options that appear. Look to the right side of the media library to add metadata for the image. Metadata is additional information about the image. You can add a title, caption, or description to any image. Some of those elements will then be used with certain block types as you create pages.  

The most important thing to add is alt text. Alt text is used by screen readers for people with disabilities. When alt text is added, someone who is visually impaired can still “see” the image with a screen reader, which reads the text of paragraphs and then the alt text for images. Alt text is also used by web crawlers to help SEO. SEO stands for search engine optimization and is related to ranking higher in a web search. The goal of most website owners is to show up as high as possible (page 1) in a Google search and using alt text to describe an image helps engine crawlers understand the content on the site and recommend it to others. Alt text should be a short description, like logo or Labrador retriever walking on a leash in a neighborhood. Be concise, yet descriptive. Once you have added your alt text, press Select to place the logo. 

Repeat the same steps to add your site icon/favicon. The site icon may be similar to your logo, but it should not contain any words or be too complex, as it will be very small in the browser tab. Once you have finished adding elements to the site identity, press Publish to save your changes. You can then press the X in the top left corner to return to the dashboard. 

Step 7: In addition to setting global colors and fonts for the site, you should also change elements in the theme style. Settings changed for items in the theme style part of the site settings panel will be applied to non-Elementor elements. This means if you use third-party plugins to add blocks to Elementor, the style settings set in theme style will be used for those elements, helping the colors and fonts to look the same as the settings you applied to the blocks that come with Elementor.  

Another example would be adding a form creation plugin to gather information from users. The settings changed in the form fields part of the theme style will control how that form looks. Any changes made to the buttons part of the theme style will make sure the form creation plugin uses the same colors, fonts, and styles for the buttons used to submit the form. The typography settings within the theme style will make sure that the form creation plugin uses all the same fonts on the form. The theme style settings are important to set to help your site maintain consistency in design whether using things that are part of Elementor, or things outside of the plugin.  

To change elements in the theme style, click on them from the site settings. If you need help navigating to the site settings, you can click the hamburger menu from inside the Elementor plugin, and select site settings.  

Let’s start by setting the typography. When you open the typography settings you may see a message at the top of your panel prompting you to make a change to Elementor. If you do, you will need to navigate out of Elementor to change the setting from the dashboard. 

To get out of the typography theme style settings, press the back arrow. Once back at the site settings list, press the X in the top right corner to return to the Elementor plugin panel. 

From the Elementor panel, press the hamburger menu and select exit from the list of options. A popup may appear to ask where you want to exit to. You may select any option you wish, but the WP Dashboard option is likely the most useful.  

From the dashboard, select Elementor > Settings. Make sure disable default colors and disable default fonts are both checked, then press save changes at the bottom. 

You can now go back into the Elementor plugin to make theme style changes. To do this, go to Pages > All Pages from the dashboard. 

When you hover over the name of the page you want to edit, you can select edit with Elementor to go straight into the Elementor plugin. 

When the page opens in Elementor, you can access the site settings again by pressing the hamburger menu in the top left corner, then selecting site settings and then typography. 

Within the typography settings, make changes to match the settings previously set with your global fonts. This will at ensure the same font is being used site wide, regardless of whether you are using elements within Elementor or outside of it. Remember that H1 is your largest font setting, and H6 is your smallest.  

As you make changes, notice that Elementor makes it easy to apply your global settings in just one click. This will help make it easier in the long run if you decide to change a color or font, as the settings will change across all elements if you use global settings. 

Next to each setting option there is a Globe icon, which will bring up the global settings to one-click apply. In the example below, clicking the globe icon next to text color for the body will bring up the global colors that were set previously. It is best practices to always use the global settings when using a global color or font.  

Sometimes you will want to use a color (or font) that is not part of your global colors/fonts. If this is the case, you can select the icon next to the globe to access the color picker (or other settings if not for color), as seen below. 

Once you have set your typography settings, use the back arrow in the top left corner to return to the site setting options.   

Next select buttons to open the theme style settings for buttons on your site. Set the styles for your buttons by choosing their color and font. You will see the same globe icon as you did with typography, which will allow you to set your global colors or fonts with one click. 

Within the buttons settings you will also see two options: normal and hover. The settings for normal will be the font and button color on the site. The settings within hover can be changed so the button color and text color change when users hover their mouse over the button.  

You can also change the shape of the buttons from rectangle to rounded by changing the border radius. By default, the top, right, bottom, and left settings all change simultaneously as they are linked. If you want to create different shapes, you can press the unlink icon to change the settings for each individually.  

Once you’ve set your buttons to the style you want, press the back arrow in the top left to return to the site settings.  

Next under theme styles are images. Here you can add a border or round the corners, in addition to changing the opacity of images. There are settings for normal and hover, and you can add shadow settings to images. Remember these are site wide settings, so if you are unsure if you want to apply these styles to all photos, remember that you can always alter these same settings for individual images on the site.  

Once you have set your image settings, use the back arrow to return to the site settings to select form fields. At some point you will likely add a contact form to your site, so setting up colors and options now will save you from having to do it later. There are also style settings for header and footer. For now, leave the settings for the header and footer alone, as we will cover creating your own in future units.  

Before closing out of the site settings there are additional options you can change. Opening site identity will bring up the settings to change your site icon, favicon, and tagline. The background settings will allow you to change the background, with options for a solid or gradient color.

There are some settings you won’t likely need to change now but should be aware of in case you’d like to change them in the future. The layout settings are where breakpoints for tablets and phones can be changed. The lightbox settings will control how images and galleries open on mobile devices. You can also set page transitions for while your page content loads and apply custom CSS to the site here as well. As you navigate through the options and customize your site, remember that small arrows will often reveal additional settings within menus.  

Remember that you can always come back to the site settings to make changes in the future. For now, explore the customizations for your site and theme and set as many as you can, since it will save you time in the long run. These settings are covered in more detail in future units. Once you are happy with your settings, press the update button at the bottom of the panel. You can then use the X icon to leave the site settings.