[01] Layout Optimization Best Practice

in our first lesson i'm going to teach you the most efficient way to create your pages and posts in the elementor editor often we see the usage of far too many sections columns intersections and widgets when the same layout could have been achieved using much fewer of these elements using excessive amounts of these elements would contribute to slower performance on your website so let's dive in and learn how to build websites with elementor in the most efficient way to better understand optimal layouts in elementor we'll explore this template which has been built with some common section column and widget misuses by the end of this lesson we will have completely rebuilt the entire page using many less columns and widgets our initial page currently has 9 sections 31 columns 5 intersections and 44 widgets our optimize page will have six sections seven columns and just 16 widgets we'll be using the free lightweight hello elementor theme and we'll recreate each section of the template while utilizing best practice techniques which will result in improved performance for the website let's run the tests on our page which has been created with bad practice and check out the results we'll perform the test in a private window of our browser which is also known as incognito mode open up a new incognito window and type the link of the webpage you are testing make sure your link displays the direct path to your page if you are unsure what your page link is you can easily find it by navigating to your wordpress dashboard click on pages to see all of your website's pages and then hover your cursor over your page and click the view option this will take you directly to your page copy and paste this url into the incognito window and once the site loads you're ready to test it now right click anywhere on your page and click inspect you will see several tabs where you can read your html and css find errors get seo results and perform various tests select the network tab and hit command or control r to load the results as you can see our current page layout is taking 2.88 seconds to load and is running 81 requests if we switch over to the lighthouse tab now we are able to run an audit report on our page which will give us more insight into its current performance select generate rapport and after a few moments your report will appear we're currently receiving a performance score of 73 out of 100 which we can certainly work on ideally we'd like all these numbers to be in the green now let's get to work on optimizing our page so that our stats are improved back in the elementor editor let's begin with the header as you can see in this design the header was made with three columns in the first column we have an image widget that displays a png image of our logo and a heading widget the second column has our nav menu widget and the third column has an inner column that controls the position of an icon and a heading for our contact information let's see how we can minimize the use of widgets and sections here create one section with one column and on the widgets menu find and drag the site logo widget into our new section as you can see we have updated our logo to include both the symbol and its text we'll explore this in more depth in the next part of the course where we speak about image optimization but since we're here let's mention a few must-have practices for the website's images let's check the logo we used in the bad practice as you can see the title isn't relevant to what the image shows it also doesn't have any alt text setting relevant alt text is important as it helps screen reading tools describe images to visually impaired readers and also allow search engines to better crawl your website just like we have here make sure you give every image on your website a relevant title an alt tag to improve your page accessibility and rankings another important factor to notice when adding images to your page is to set their dimensions this allows the page to be laid out with the appropriate space before the images have loaded this helps to avoid layout shift which is a factor measured by browsers let's switch to the style tab and set the width to 200 pixels back in the widgets panel drag and drop the nav menu widget underneath the logo set the pointer to none to match our previous design and in style add the font of your preference when building your page ideally you want to avoid using more than two different fonts that include multiple weights select the font family that you need and save the styles you will be using across the templates as global fonts by clicking this plus icon for each one of your widgets simply select the global font from the list you created by doing so you will be generating less requests on your website and this will help with improving the loading speeds now select the global color of your choice it's best if you can avoid selecting different colors for each element with the color picker simply save your template's color palette by clicking this plus icon to create your global colors just like we did with the fonts each time you need to set a color to an element or widget simply select it from the global color list this way you avoid repeating unnecessary code twice and maintain consistency and control over your template you can find our dedicated video about the globals in the description below set the vertical padding to zero and we are done back to our widgets panel find and drag the icon list widget underneath our nav menu this widget includes both an icon and text which are positioned right next to each other and this helps us to keep the widget used to a minimum delete the extra list items and add your text then choose the icon of your choice in the style tab set the global colors and fonts of your choice great these are all the widgets we need to complete the rebuild of our header however as you can see they are currently stacked and aren't in line with each other we can fix this easily select the site logo widget to enter its settings and in the advanced tab under positioning set its width to inline as you can see when a widget's width is set to in line the widget stops taking up the whole space of the column it will limit the width to its actual size helping us position them next to each other select the nav menu and in the advanced tab under positioning set its width to inline repeat this step one last time for our icon list widget okay great we've finished placing our elements next to each other now it's time to position them properly we can use the columns layout options to control the position of inline widgets select your column and in vertical align choose bottom for the horizontal align we're going to select space between this option will position the first and last widget at both ends and will give equal space between all of the other widgets since the width of the first and last widget is not the same the equal space may not always center our inner widget you can amend its position to make it pixel perfect with margins select your nav menu widget and in the advanced tab unlink the margin and remove the spacing between with a negative value great let's find out how this works on mobile devices switch to responsive mode and select the tablet viewport it's common to see the same section redesigned specifically for tablet and mobile devices just like you see here in this header which was created twice one for desktop and one for mobile and tablet use simplify your design and think of ways to make the same sections responsive to avoid using twice the amount of code which will affect your page loading times now let's see how we can make our header responsive and position our widgets exactly where we want them click on your nav menu and on the advanced tab under positioning set its width to custom this will allow us to set the custom width that we want the widget to take select percentage and give it the same width of the empty space around it now back to the contents tab you can easily align the toggled menu anywhere within its width under these options select write let's finish styling it enable the full width to remove any extra padding and in style remove the background by dragging the bar all the way to the left and that's it now let's check it on mobile there are many ways to approach the mobile design of our header but in this example we will keep all three widgets shown in the mobile viewport in the advanced tab of our nav menu widget under positioning set the width to custom and alter it to fit next to our logo next select the icon list widget and in the advanced tab add some padding to the top that's it we managed to optimize our header from using the same section twice with a total of 12 widgets and 10 columns to just one section containing three widgets and one column achieving exactly the same result at this point we understand a little better how layout optimization works let's delete the old header sections and keep going through our template to see more examples a common mistake we often see is to control the position of a widget using extra columns and spaces just like we see here we have a section with a background image the heading in text is positioned horizontally using two columns and vertically using a spacer we can simply use one column for this so delete the extra column on the right then delete the spacer since this can be controlled using the column alignment options great now select the column and set the vertical align to middle next in the advanced tab unlink the values and set right padding to 50 as you can see we have achieved exactly the same result using the column settings correctly select the section and double check that you have set the minimum height of this section just like we mentioned before this helps determine the image size and avoids layout shift and before we move on to the next section let's discuss the clarity of this section it is important for every website to have a good contrast between the text and background non-readable information not only affects your website scores but also drives visitors away make sure your text and background colors create strong contrast and the text is clearly readable for sections like this one which uses a colorful image as a background there are a couple of ways that can easily improve the clarity click on your heading and in style simply add a drop shadow to it this will boost the readability of the letters and make it stand out from the image another way to make your text more clear is by using overlays click on the section to enter its settings and in style under background overlay play around with the opacity and the color until you get a desirable result scrolling to our next section we have an intersection with four columns and each one includes an image heading and text editor widget let's see how we can simplify this section on the widgets menu drag and drop the icon box widget into our column hover your cursor over the image and select upload svg to insert your custom icon please note that to upload svgs you will first need to enable this in the elementor settings next type your title and add a description and in style choose a global color change the icon size and padding next in the advanced tab under positioning set the wick to custom since we want to make four of them we're going to give them a width for 25 each which will make up the full column space right click and duplicate your icon three more times replace the images and text and that's it an easily optimized section which is now using many less assets whilst appearing exactly the same next we are going to rebuild this section it's designed using a section with two columns two images a heading and the text editor widget let's create a new section with one column and set the content width to take up the full width of our section in the widgets panel find and drag the imagebox widget into our column this widget includes all of the assets that we need to achieve exactly the same results type your heading and description and for our image we'll combine the two images into one since this gives us the same effect set the image position to right in style let's make some customizations set the spacing between our elements and increase the size of the image under content align the text to the center horizontally and vertically next set the global colors and fonts of your choice in the advanced tab set some padding to the widget and we are done optimizing the section with less assets the next section presents a call to action for our services it has two columns in the first column a background image with a spacer in the second column we have two headings an intersection a text editor and button widget we're going to create a new section with one column and set its content width to full width select the column and in the advanced tab delete any extra padding on the widgets menu search and drag the call to action widget into the column the call-to-action widget has many options which can help us create complete sections just by using this widget set the image position to left and select your image expand the content tab and type your title description and button text whilst we're here it would be good to mention the best practice when you have links like buttons menus and social media links make sure that all of your links work correctly and that your page's buttons include an active link you can easily add a link to your pages from a button just by typing its name like this now let's continue editing our widget in style add some padding and adjust the image width next expand the contents tab select the global font for your title and increase the space between the description and the button choose the right global colors for each asset now expand the button tab select the size of your button and customize it to your design requirements once you have finished you have completely minimized your entire section with just one widget that's a big improvement scrolling down to our next section we can see a common error when displaying multiple images here we have a section that has an inner section with five columns many users tend to do this to control the size of their images but there is an easier and more optimal way create a new section with one column set it to full width and on the widgets menu drag and drop the image carousel widget select the logos of your choice and set their size to medium now adjust the slide settings and in style set the vertical align to middle and give your images some spacing lastly in the advanced tab give your widget some padding this will provide a nice motion while maintaining an optimized solution in the next section we are going to see how we can optimize videos on our website select the video widget find the lazy load option when we apply the lazy load option the video embed code is replaced with a static image the video is only loaded when the user clicks onto the image which really helps with our page loading times you can find this option in a variety of other widgets like the lotte and pro gallery ones make sure you enable it to improve your website's loading times we've seen the structure in many footers using multiple headings for the date and description and an icon for the copyright symbol in this last section we will see how to optimize and keep our footer always up to date delete the extra widgets and select the remaining heading widget we are going to use the dynamic tags to keep our copyright date always updated automatically click it and select current date and time next click on the wrench icon under date format option select custom we'll keep the y which stands for year and delete the rest this will always display the current year now expand the advanced tab and in the before options hold option plus g or control plus alt plus c to type the copyright symbol and press spacebar to add a space on the after options enter some text like so starting with a space and we are done and as you can see in the final format we easily added our text symbol and dynamic date with just one heading widget to help this tutorial flow easier we created a new section for each example widgets like this or this one can be merged under the same section simply drag and drop them into the previous section and delete the remaining ones this will remove any unnecessary html and with this step we have completed optimizing the layout of our page now it's time to run the results again to see how our score is affected we'll first see the results in the network tab we can see a lot of positive changes here our website is loading in just 568 milliseconds and we've gone from 81 requests to 46. let's check the lighthouse tab as well as you can see our scores are great and we've gone from a performance score of 73 to 98 out of 100. the best thing is this was achieved without using any third party plugins just some simple adjustments and using better practice what about the interactions and motion effects though let's quickly go over our template and make it more playful how will this affect our scores select our header and in the advanced tab expand the motion effects and set the sticky options to top next select the hero section and in style set the image attachment to fixed then select its heading and in the advanced tab under motion effects set the entrance animation to fade in repeat for the text description i will do the same for the next widgets for a subtle effect when the page loads now let's go over and run the test again and see how the motion effects have affected our score cool we see that our score has been reduced with just one point this is certainly not a big difference and it makes your website more interesting and playful be sure to save this guide for future reference and use what you have learned to review your website's pages and apply some best practice techniques to fully optimize your layouts in the next part of this course we're going to take a look at image optimization we will go over each image in our example and learn how to improve them for even more efficient loading times you

Channel: Elementor

Views: 90,742

Keywords:

Id: vBAKGupM0co

Length: 22min 16sec (1336 seconds)

Published: Sun Apr 25 2021