Set the Global Colors and Fonts of your choice.Drag the Icon List Widget to underneath the Nav Menu.Once you’ve done this, the color will be saved to your template’s color palette, so you can select it from your Global Colors list whenever you need it for any element or widget.īefore we continue with our header, let’s set the vertical padding to zero. Select a color and hover over the plus icon.Hover over Color Picker and click on it.The same method can be used for your Global Colors: You can then use this style on every widget you create. Save the styles you will be using across the template as Global Fonts.Click the plus icon and select the font family that you need.Go to the “Style” tab and add the font of your preference (so that it will match our previous design) by selecting one, do a small change, and hover over the plus icon.This can be done using the Global Fonts feature: Maintain consistency and control over your template (Global Styling).Repeat unnecessary code twice (Global Colors).Improve your website loading speed by generating fewer requests (Global Fonts).Avoid selecting different colors for each element with the color picker ( Global Colors).Avoid using more than 2 different fonts that include multiple weights ( Global Fonts).Our initial page is made up of nine sections, 31 columns, five inner sections, and 44 widgets.Īt the end of the tutorial, our optimized page will be minimized to six sections, seven columns, and 16 widgets. By the end of this lesson, we will have completely rebuilt this entire page by reducing the number of columns and widgets. To better understand optimal layouts in Elementor, we’ll explore an Elementor template which presents some common section, column & widget misuses. Tips to prevent load shift, improve SEO and increase loading time.Correct use of widgets, positioning, and global styles.Examples of good and bad practice website layouts.Optimizing your header, footer, and page content.Viewing and testing your website’s performance.A closer look at the correct page structure.Using excessive amounts of elements slows down the performance of your website, so let’s dive in and learn how to build websites with Elementor in the most efficient way. We often see the usage of far too many sections, columns, inner sections and widgets, when the same layout could have been achieved using significantly fewer elements. In our first lesson, we will cover the most efficient way to create your pages and posts in the Elementor Editor.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |