{"id":66091,"date":"2021-05-05T08:47:32","date_gmt":"2021-05-05T08:47:32","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=66091"},"modified":"2025-12-02T15:32:41","modified_gmt":"2025-12-02T13:32:41","slug":"layout-optimization-best-practices","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/","title":{"rendered":"How to Optimize Your Website Layout With Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"66091\" class=\"elementor elementor-66091\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-67088bf elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"67088bf\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ab8bcd7\" data-id=\"ab8bcd7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a4ca8ad elementor-widget elementor-widget-text-editor\" data-id=\"a4ca8ad\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Website performance optimization is one of the most important aspects of its user experience. A slow loading website can frustrate any user, often resulting in a high bounce rate that can damage our business success.\u00a0<\/p><p>Website performance can be affected by many factors, for example: large image sizes, server configurations, <a href=\"https:\/\/elementor.com\/blog\/wordpress-plugins-you-can-replace-with-elementor\/\" target=\"_blank\" rel=\"noopener\">too many plugins, <\/a>bloated themes, among other factors.<\/p><p>Website performance is one of our strongest values as web creators. This is why we&#8217;ve created this 5-part course: <a href=\"https:\/\/www.youtube.com\/watch?v=QURAUu8TPl0&amp;list=RDCMUCt9kG_EDX8zwGSC1-ycJJVA&amp;index=1\">Performance Optimization in Elementor<\/a>.<\/p><p>Now, you can learn how to create page and post layouts using optimal techniques. This knowledge will ensure that your websites won&#8217;t include redundant sections, columns, or widgets that simply aren&#8217;t needed. We&#8217;ll also explore some built-in widget functionality for improved loading times.\u00a0<\/p><p>By the end of this tutorial, you&#8217;ll be fully prepared to optimize the performance of every Elementor website you build, and reap the rewards right away.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-69222bd elementor-align-center elementor-widget elementor-widget-button\" data-id=\"69222bd\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">How Elementor Prioritizes and Improves Website Performance<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8150af0 elementor-widget elementor-widget-text-editor\" data-id=\"8150af0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">The complete 5-part course comprises five video lessons:\u00a0<\/span><\/p><ul><li><span style=\"font-weight: 400\">Lesson 1:\u00a0\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=vBAKGupM0co\">Layout Optimization Best Practices<\/a><\/span><\/li><li><span style=\"font-weight: 400\">Lesson 2: <a href=\"https:\/\/www.youtube.com\/watch?v=8BqHUx6Zex4\">Optimizing Your Images<\/a><\/span><\/li><li><span style=\"font-weight: 400\">Lesson 3: <a href=\"https:\/\/www.youtube.com\/watch?v=pM_b3OfpG9I\">Additional Performance Boosts<\/a><\/span><\/li><li><span style=\"font-weight: 400\">Lesson 4: <a href=\"https:\/\/www.youtube.com\/watch?v=JYkt_laRsBI\">Choosing a Suitable Web Host<\/a><\/span><\/li><li><span style=\"font-weight: 400\">Lesson 5: <a href=\"https:\/\/www.youtube.com\/watch?v=wqBqq0YXHWo\">Optimizations With Third-Party Tools<\/a><\/span><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-da3fa19 blog-toc elementor-widget elementor-widget-heading\" data-id=\"da3fa19\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Table Of Contents<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a8b8f06 blog-toc elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"a8b8f06\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#layout-optimization-best-practices\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Lesson 1: Layout Optimization Best Practices<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#testing-bad-layout-practices\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Testing the Bad Practices<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#view-website-performance-results\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Testing &amp; Viewing the Performance Results<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#optimizing-page-elements\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Optimizing the Page Elements<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#retest-website-performance\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-chevron-right\" viewBox=\"0 0 320 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Re-testing the Site Performance<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#new-performance-score\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Can You Believe Our New Performance Score?<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4376492 elementor-widget elementor-widget-menu-anchor\" data-id=\"4376492\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"layout-optimization-best-practices\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c289427 elementor-widget elementor-widget-heading\" data-id=\"c289427\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Lesson 1: Layout Optimization Best Practices<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-adc985e elementor-widget elementor-widget-image\" data-id=\"adc985e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"768\" height=\"447\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768,h=447\/blog\/wp-content\/uploads\/2021\/05\/design-house-inspector-768x447.png\" class=\"attachment-medium_large size-medium_large wp-image-66171\" alt=\"website performance inspector\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/05\/design-house-inspector-768x447.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/05\/design-house-inspector-300x175.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/05\/design-house-inspector-1024x596.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1271\/blog\/wp-content\/uploads\/2021\/05\/design-house-inspector.png 1271w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7072f41 elementor-widget elementor-widget-text-editor\" data-id=\"7072f41\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In our first lesson, we will cover the most efficient way to create your pages and posts in the Elementor Editor. 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.<\/p><p>Using excessive amounts of elements slows down the performance of your website, so let\u2019s dive in and learn how to build websites with Elementor in the most efficient way.<\/p><p>We\u2019ll cover the following topics:<\/p><ul><li>A closer look at the correct page structure<\/li><li>Viewing and testing your website\u2019s performance<\/li><li>Optimizing your header, footer, and page content<\/li><li>Examples of good and bad practice website layouts<\/li><li>Correct use of widgets, positioning, and global styles<\/li><li>Tips to prevent load shift, improve SEO and increase loading time<\/li><li>Optimizing Accessibility<\/li><li>Minimizing the amount of DOM Elements<\/li><li>And much more!<\/li><\/ul><p>To better understand optimal layouts in Elementor, we\u2019ll explore an Elementor <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/library\/all-categories\/\"   title=\"Alle categorie\u00ebn\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"25276\">template<\/a> which presents some common section, column &amp; widget misuses. By the end of this lesson, we will have completely rebuilt this entire page by reducing the number of columns and widgets. Our initial page is made up of nine sections, 31 columns, five inner sections, and 44 widgets.<\/p><p>At the end of the tutorial, our optimized page will be minimized to six sections, seven columns, and 16 widgets.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c2f919c elementor-widget elementor-widget-text-editor\" data-id=\"c2f919c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We\u2019ll be using the free, lightweight <a href=\"https:\/\/elementor.com\/blog\/introducing-hello-theme\/\" target=\"_blank\" rel=\"noopener\">Hello theme<\/a> and we\u2019ll recreate each section of the template, and improve the overall website performance by using best practice techniques.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c0e5e2 elementor-widget elementor-widget-image\" data-id=\"9c0e5e2\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"671\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=671\/blog\/wp-content\/uploads\/2021\/05\/hello-theme-screenshot.png\" class=\"attachment-large size-large wp-image-66125\" alt=\"elementor hello theme\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=929\/blog\/wp-content\/uploads\/2021\/05\/hello-theme-screenshot.png 929w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/05\/hello-theme-screenshot-300x252.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/05\/hello-theme-screenshot-768x644.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1ddab06 elementor-widget elementor-widget-menu-anchor\" data-id=\"1ddab06\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"testing-bad-layout-practices\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d97b2e3 elementor-widget elementor-widget-heading\" data-id=\"d97b2e3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Testing the Bad Practices\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-415e91c elementor-widget elementor-widget-text-editor\" data-id=\"415e91c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Before we dig into optimizing the website layout, we\u2019ll run a test on our page to fully understand what is going on when somebody visits our website. Once all of our optimizations have been made, we\u2019ll repeat the test and compare the results.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee00cce elementor-widget elementor-widget-heading\" data-id=\"ee00cce\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 1: Check Your Site in an Incognito Window<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f1ad9c elementor-widget elementor-widget-text-editor\" data-id=\"3f1ad9c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>Open a new window in &#8220;Incognito Mode&#8221; and type the URL of the <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/webpage-website\/\"   title=\"WebPage vs. WebSite: Understanding the Difference (2025 Guide)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"25273\">webpage<\/a> you are testing.\u00a0<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8b92542 elementor-widget elementor-widget-heading\" data-id=\"8b92542\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 2: Verify That You\u2019re Using the Direct URL Path\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0af1f21 elementor-widget elementor-widget-image\" data-id=\"0af1f21\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"316\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=316\/blog\/wp-content\/uploads\/2021\/05\/direct-url-screenshot-1024x404.png\" class=\"attachment-large size-large wp-image-66126\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/05\/direct-url-screenshot-1024x404.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/05\/direct-url-screenshot-300x118.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/05\/direct-url-screenshot-768x303.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/05\/direct-url-screenshot-1536x606.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1722\/blog\/wp-content\/uploads\/2021\/05\/direct-url-screenshot.png 1722w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f5026f elementor-widget elementor-widget-text-editor\" data-id=\"3f5026f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you&#8217;re not sure what your page link is, you can easily find it by navigating to your WP Dashboard:<\/p><ul><li>Click on \u201cPages\u201d to see all your website&#8217;s pages.<\/li><li>Hover your cursor over your page and click the &#8220;View&#8221; option. This will take you directly to your page.<\/li><li>Copy and paste this URL into the incognito window and once the site loads, you are ready to test it!<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ea406e2 elementor-widget elementor-widget-menu-anchor\" data-id=\"ea406e2\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"view-website-performance-results\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-95c93dc elementor-widget elementor-widget-heading\" data-id=\"95c93dc\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Testing &amp; Viewing Performance Results<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-93156ea elementor-widget elementor-widget-heading\" data-id=\"93156ea\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 1: Test the Performance Results<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ceb4484 elementor-widget elementor-widget-image\" data-id=\"ceb4484\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"380\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=380\/blog\/wp-content\/uploads\/2021\/05\/image-4-placeholder.png\" class=\"attachment-large size-large wp-image-66106\" alt=\"elementor test performance inspector\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/05\/image-4-placeholder.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/05\/image-4-placeholder-300x158.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf8fcaa elementor-widget elementor-widget-text-editor\" data-id=\"bf8fcaa\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You may have used Chrome Developer Tools in the past.<\/p><p>If not, in order to inspect and view the HTML &amp; <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"25274\">CSS<\/a> content of your page:<\/p><ul><li>Right-click anywhere on your page and click select \u201cInspect\u201d.<p>You will see several tabs where you can read your HTML and CSS, find errors, get SEO results, and perform various tests.<\/p><\/li><\/ul><ul><li>Select the Network Tab and hit the cmd or ctrl + R buttons to load the results.<\/li><\/ul><p>As you can see, our current page layout is taking 2.88 seconds to load and is running 81 requests.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c61005 elementor-widget elementor-widget-heading\" data-id=\"9c61005\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 2: View the Performance Results<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-556aa23 elementor-widget elementor-widget-image\" data-id=\"556aa23\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"380\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=380\/blog\/wp-content\/uploads\/2021\/05\/image-5-placeholder.png\" class=\"attachment-large size-large wp-image-66110\" alt=\"inspector poor optimization results\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/05\/image-5-placeholder.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/05\/image-5-placeholder-300x158.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ba26fb6 elementor-widget elementor-widget-text-editor\" data-id=\"ba26fb6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li>Switch over to the Lighthouse tab, where we can run an audit report on our page.\u00a0<\/li><\/ul><p>This will give us more insight into the page\u2019s current performance.<\/p><ul><li>Select \u2018Generate Report\u2019. After a few moments, your report will appear.<\/li><\/ul><p>We\u2019re currently receiving a Performance score of 73\/100, which we can certainly work on.\u00a0<\/p><p>Ideally, we\u2019d like all of these numbers to be green. Now let\u2019s get to work on optimizing our page and improving our stats.\u00a0<\/p><p>Keep in mind that after every optimization step we do, we can derive certain best practices from the changes, and keep them in mind for future websites we build.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-68c219c elementor-widget elementor-widget-menu-anchor\" data-id=\"68c219c\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"optimizing-page-elements\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3b7d848 elementor-widget elementor-widget-heading\" data-id=\"3b7d848\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Optimizing the Page Elements<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-313c9ac elementor-widget elementor-widget-heading\" data-id=\"313c9ac\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 1: Optimize the Header\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-75fd5a4 elementor-widget elementor-widget-text-editor\" data-id=\"75fd5a4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Let\u2019s begin with the <a href=\"https:\/\/elementor.com\/blog\/header-footer-builder\/\" target=\"_blank\" rel=\"noopener\">Header<\/a>.\u00a0<\/p><p>As you can see in this design, the header was made with three columns.<\/p><p>In the first column, our logo consists of two widgets:<\/p><ol><li>An <a href=\"https:\/\/elementor.com\/help\/image-widget\/\" target=\"_blank\" rel=\"noopener\">Image Widget<\/a> that displays a .png image file of our logo\u00a0<\/li><li>A <a href=\"https:\/\/elementor.com\/help\/heading-widget\/\" target=\"_blank\" rel=\"noopener\">Heading Widget<\/a>.<\/li><\/ol><p>In the second column, the header menu consists of our <a href=\"https:\/\/elementor.com\/help\/nav-menu-widget-pro\/\" target=\"_blank\" rel=\"noopener\">Nav Menu Widget<\/a>.<\/p><p>The third column has:<\/p><ol><li>An <a href=\"https:\/\/elementor.com\/help\/inner-section-widget\/\" target=\"_blank\" rel=\"noopener\">Inner Section Widget<\/a> (that controls the position of the <a href=\"https:\/\/elementor.com\/help\/icon-widget\/\" target=\"_blank\" rel=\"noopener\">Icon Widget<\/a>).\u00a0<\/li><li>A Heading for our contact information.<\/li><\/ol><p>Let\u2019s see how we can minimize the number of sections and widgets and sections here.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-519c217 elementor-widget elementor-widget-heading\" data-id=\"519c217\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 2: Create the New Header\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f37f0a elementor-widget elementor-widget-image\" data-id=\"3f37f0a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"464\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=464\/blog\/wp-content\/uploads\/2021\/05\/design-house-site-hero-section-1-1024x594.png\" class=\"attachment-large size-large wp-image-66179\" alt=\"design house hero\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/05\/design-house-site-hero-section-1-1024x594.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/05\/design-house-site-hero-section-1-300x174.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/05\/design-house-site-hero-section-1-768x446.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1277\/blog\/wp-content\/uploads\/2021\/05\/design-house-site-hero-section-1.png 1277w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9e4821f elementor-widget elementor-widget-text-editor\" data-id=\"9e4821f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: bolder\">Column 1:<\/span><\/p><ul><li>Create 1 section with 1 column only.\u00a0<\/li><li>Add the\u00a0<a href=\"https:\/\/elementor.com\/help\/site-logo-widget-pro\/\" target=\"_blank\" rel=\"noopener\">Site Logo Widget<\/a>\u00a0and drag it into the section.<\/li><\/ul><div><div><span style=\"font-weight: bold\">Best Practices for Images:<\/span><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-684614d elementor-widget elementor-widget-image\" data-id=\"684614d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"349\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=349\/blog\/wp-content\/uploads\/2021\/05\/image-optimization-best-practices-1024x447.png\" class=\"attachment-large size-large wp-image-66176\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/05\/image-optimization-best-practices-1024x447.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/05\/image-optimization-best-practices-300x131.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/05\/image-optimization-best-practices-768x335.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/05\/image-optimization-best-practices-1536x670.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1618\/blog\/wp-content\/uploads\/2021\/05\/image-optimization-best-practices.png 1618w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b049a45 elementor-widget elementor-widget-text-editor\" data-id=\"b049a45\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><strong>Give every image file on your site a relevant title and Alt Text inside the Media Library.<\/strong><\/li><\/ul><p>This will improve your <a href=\"https:\/\/elementor.com\/blog\/web-accessibility-design-guide\/\" target=\"_blank\" rel=\"noopener\">page accessibility<\/a> and your search engine rankings. In the logo we originally used, the title isn\u2019t relevant to the actual image, and there\u2019s no Alt Text.\u00a0<\/p><ul><li><strong>Set image dimensions inside the widget.<\/strong><\/li><\/ul><p>This allows the page to be laid out with the appropriate space before the images have loaded \u2014 avoiding layout shift (a factor measured by browsers.)<\/p><p>In the example we\u2019re working on together, address this issue by going to the Style tab and setting the image width to 200px.<\/p><p><strong>Column\u00a0<\/strong><strong>2<\/strong><\/p><p>Back in the widgets panel:<\/p><ul><li>Drag and drop the Nav Menu Widget underneath the logo\u00a0<\/li><li>Set the pointer to \u201cNone\u201d\u00a0<\/li><li>Go to the \u201cStyle\u201d tab and add the font of your preference (so that it will match our previous design)<\/li><\/ul><p><strong>Best Practices for Global Styling:<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8521a98 elementor-widget elementor-widget-image\" data-id=\"8521a98\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"351\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=351\/blog\/wp-content\/uploads\/2021\/05\/global-styling-best-practices-1024x449.png\" class=\"attachment-large size-large wp-image-66177\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/05\/global-styling-best-practices-1024x449.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/05\/global-styling-best-practices-300x131.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/05\/global-styling-best-practices-768x336.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/05\/global-styling-best-practices-1536x673.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1575\/blog\/wp-content\/uploads\/2021\/05\/global-styling-best-practices.png 1575w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b0f84dc elementor-widget elementor-widget-text-editor\" data-id=\"b0f84dc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul>\n<li>Avoid using more than 2 different fonts that include multiple weights (<a href=\"https:\/\/elementor.com\/help\/global-fonts\/\" target=\"_blank\" rel=\"noopener\">Global Fonts<\/a>).&nbsp;<\/li>\n<li>Avoid selecting different colors for each element with the color picker (<a href=\"https:\/\/elementor.com\/help\/global-colors\/\" target=\"_blank\" rel=\"noopener\">Global Colors<\/a>).&nbsp;<\/li>\n<li>Improve your website loading speed by generating fewer requests (Global Fonts).&nbsp;<\/li>\n<li>Repeat unnecessary code twice (Global Colors).<\/li>\n<li>Maintain consistency and control over your template (Global Styling).&nbsp;<\/li>\n<\/ul>\n<p><strong>Global Fonts:<\/strong><\/p>\n<p>This can be done using the&nbsp;Global Fonts&nbsp;feature:<\/p>\n<ul>\n<li>Go to the \u201cStyle\u201d 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<\/li>\n<li>Click the plus icon and select the font family that you need<\/li>\n<li>Save the styles you will be using across the template as Global Fonts<\/li>\n<\/ul>\n<p>You can then use this style on every widget you create.<\/p>\n<p><strong>Global Colors:<\/strong><\/p>\n<p>The same method can be used for your&nbsp;Global Colors:&nbsp;<\/p>\n<ul>\n<li>Click on \u201cGlobal\u201d<\/li>\n<li>Hover over Color Picker and click on it&nbsp;<\/li>\n<li>Select a color and hover over the plus icon<\/li>\n<li>Click \u201cGlobal\u201d &gt;&gt; Select \u201cPrimary\u201d<\/li>\n<\/ul>\n<p>Once you\u2019ve done this, the color will be saved to your template\u2019s color palette, so you can select it from your Global Colors list whenever you need it for any element or widget.<\/p>\n<p>Before we continue with our header, let\u2019s set the vertical padding to zero.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-850c6e2 elementor-widget elementor-widget-heading\" data-id=\"850c6e2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 3: Edit the Header\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8bfbf51 elementor-widget elementor-widget-text-editor\" data-id=\"8bfbf51\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Column 3<\/strong><\/p><ul><li>Go the \u201cWidgets\u201d panel<\/li><li>Drag the <a href=\"https:\/\/elementor.com\/help\/icon-list-widget\/\" target=\"_blank\" rel=\"noopener\">Icon List Widget<\/a> to underneath the Nav Menu.\u00a0<\/li><li>Delete the extra list items<\/li><li>Add your text<\/li><li>Choose the icon of your choice<\/li><li>Go to the \u201cStyle\u201d tab<\/li><li>Set the Global Colors and Fonts of your choice<\/li><\/ul><p>We now need to fix one more thing \u2014 the three elements in the header are currently stacked and not in line with each other. We can solve this by changing each element\u2019s width to its actual size, so it won\u2019t take up the whole space of the column.\u00a0<\/p><p>To fix this:\u00a0<\/p><ul><li>Select the Site Logo Widget &gt;&gt; \u201cAdvanced\u201d tab<\/li><li>Select \u201cPositioning\u201d and set its Width to \u201cInline\u201d<\/li><\/ul><p>Repeat this exact step for both the Nav Menu Widget and for the Icon List Widget.\u00a0<\/p><p>Now that all of the Header elements fit inline, all that\u2019s left is to position them properly.<\/p><h4>Setting the Column\u2019s Positioning with Inline Elements<\/h4><ul><li>Select your Column &gt;&gt; Go to the \u201cLayout\u201d tab<\/li><li>In \u201cVertical Align\u201d, choose \u201cBottom\u201d<\/li><li>\u201cIn Horizontal Align\u201d choose \u201cSpace Between\u201d\u00a0<\/li><\/ul><p>Choose the \u201cSpace Between\u201d alignment positions the first and last widget at both ends, giving equal spacing between all the other widgets.\u00a0<\/p><p>However, the first and last widgets have different widths, so the equal space might not always center our inner widget.\u00a0<\/p><p>We can fix this by adjusting the margins:<\/p><ul><li>Select the Nav Menu Widget &gt;&gt; \u201cAdvanced\u201d tab<\/li><li>Unlink the margin, and remove the spacing with a negative value<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-566c496 elementor-widget elementor-widget-heading\" data-id=\"566c496\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 4: Make the Header Responsive<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-afc447a elementor-widget elementor-widget-text-editor\" data-id=\"afc447a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-size: 1rem\">Now, let&#8217;s find out how the current version of our website looks on mobile devices.<\/span><\/h3>\n<p><strong>Best Practices for Mobile Responsiveness:<\/strong><\/p>\n<ul>\n<li>Simplify your design and think of ways to make the same sections <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\"   title=\"How To Create A Responsive Website: Step-By-Step 2025 Guide\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"25275\">responsive<\/a>, to avoid using twice the amount of code which will affect your page speed.&nbsp;<\/li>\n<\/ul>\n<p>Just like you see in this header \u2014 It&#8217;s common to see the same section redesigned specifically for tablet and mobile devices. This is what we see here: two versions of the design were created: one version for desktop and one for mobile.<\/p>\n<p>Instead, when your design and code are responsive, your page speed will improve since it will be using less code.<\/p>\n<p>Let&#8217;s see how we can achieve this, using the \u201cCustom Width\u201d setting for our widgets and elements.<\/p>\n<h4>Setting Custom Width for Tablet<\/h4>\n<ul>\n<li>Click on \u201cNav Menu\u201d &gt;&gt; \u201cAdvanced\u201d tab&nbsp;<\/li>\n<li>Select \u201cPositioning\u201d &gt;&gt; Set the Width to \u201cCustom\u201d.<\/li>\n<li>Select \u201c%\u201d &gt;&gt; Give the Widget the same Width (in percentage) of the empty space around it.<\/li>\n<\/ul>\n<ul>\n<li>Click on the \u201cContent\u201d tab &gt;&gt; \u201cToggle Align\u201d &gt;&gt; Select \u201cRight\u201d.&nbsp;<\/li>\n<\/ul>\n<p>This lets you align the toggled menu anywhere within the widget&#8217;s width.&nbsp;<\/p>\n<p>Now, let&#8217;s finish styling the toggled menu.&nbsp;<\/p>\n<ul>\n<li>\u201cContent\u201d &gt;&gt; Click on the \u201cFull Width\u201d toggle and set it to \u201cYes\u201d.<\/li>\n<li>\u201cStyle\u201d &gt;&gt; Remove the background by dragging the \u201cColor Picker\u201d bar all the way to the left.<\/li>\n<\/ul>\n<p>Now let&#8217;s check how things look on a mobile screen.&nbsp;<\/p>\n<h4>Setting Custom Width for Mobile<\/h4>\n<p>In this scenario, we&#8217;ll keep all three of the header&#8217;s widgets inside the viewport. But keep in mind that for some sites, it might make more sense to omit some of the header&#8217;s elements when it&#8217;s viewed on mobile or tablet.&nbsp;<\/p>\n<p>In this case, what happens to our Header when viewed on mobile is that the Nav Menu and Logo widgets can&#8217;t fit together inside one line.&nbsp;<\/p>\n<p>To fix this:&nbsp;<\/p>\n<p>Nav Menu Positioning<\/p>\n<ul>\n<li>Click on \u201cNav Menu\u201d &gt;&gt; \u201cAdvanced\u201d tab&nbsp;<\/li>\n<li>Select \u201cPositioning\u201d &gt;&gt; Set the Width to \u201cCustom\u201d<\/li>\n<li>Select \u201c%\u201d &gt;&gt; Give the Widget a 30% width, so it will fit next to our logo&nbsp;<\/li>\n<\/ul>\n<p>Icon List Positioning<\/p>\n<ul>\n<li>Click on \u201cIcon List\u201d &gt;&gt; \u201cAdvanced\u201d tab&nbsp;<\/li>\n<li>Select \u201cPadding\u201d &gt;&gt; Unlink the values<\/li>\n<li>Add 12px padding to \u201cTOP\u201d<\/li>\n<\/ul>\n<p>Can you believe it?<\/p>\n<p>Originally, our Header used <strong>2 sections, 12 widgets, and 10 columns.<\/strong><strong><br><\/strong>Now, our Header uses <strong>1 section, 3 widgets, and 1 column<\/strong>.&nbsp;<\/p>\n<p>And the result looks the same!&nbsp;<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-387095f elementor-widget elementor-widget-heading\" data-id=\"387095f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 5: Optimize the Hero Section\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-509864d elementor-widget elementor-widget-text-editor\" data-id=\"509864d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Let\u2019s proceed to the next section of our website: the hero section.\u00a0<\/p><p><strong>Best Practices for Hero Sections:<\/strong><\/p><ul><li>Make sure your hero text is easily visible, especially when it has a background image.\u00a0<\/li><\/ul><p><strong>Controlling the Widget\u2019s Position in a Column<\/strong><\/p><p>A common mistake that we see made in the Elementor Editor is using extra columns and spaces to control the positioning of a widget.\u00a0<\/p><p>In our template example, our <a href=\"https:\/\/elementor.com\/blog\/hero-image\/\">hero image<\/a> consists of a section with a background image. The Heading and Text are positioning horizontally, using two columns. There is also a spacer inside the section to space the items vertically.\u00a0<\/p><p>Let\u2019s see how we can create the same design yet with only one section:\u00a0<\/p><ul><li>Delete the extra column on the right of the text.\u00a0<\/li><li>Delete the spacer.\u00a0<\/li><\/ul><p>Instead, to position our hero text where we want to, we will use the <a href=\"https:\/\/elementor.com\/help\/section-column-vertical-and-horizontal-alignment\/\" target=\"_blank\" rel=\"noopener\">column alignment<\/a> options:\u00a0<\/p><ul><li>Select the column.<\/li><li>Set the \u201cVertical Align\u201d to \u201cMiddle\u201d.\u00a0<\/li><li>Go to the \u201cAdvanced\u201d tab.<\/li><li>Select \u201cPadding\u201d &gt;&gt; Unlink the values<\/li><li>Set Right Padding to 50%.\u00a0<\/li><\/ul><ul><li>Select the section.\u00a0<\/li><li>Select \u201cMinimum Height\u201d &gt;&gt; Set it to 80.\u00a0<\/li><\/ul><h4>Fixing the Contrast Between Texts and Backgrounds<\/h4><p>It\u2019s important for every website to have good contrast between the text and background. Non-readable information affects your website scores and can also drive visitors away. No matter what, the text must always be clearly readable.<\/p><p>There are several ways to improve the clarity of a section whose background is a colorful image (like we see in this template):<\/p><ul><li>Click on your Heading.<\/li><li>Go to the \u201cStyle\u201d tab &gt;&gt; Select \u201cText Shadow\u201d.<\/li><\/ul><p>This will improve the readability of the text by making it stand out from its background image.\u00a0<\/p><p>Another way to make your text more clear is by using overlays.\u00a0<\/p><ul><li>Select the Section &gt;&gt; \u201cStyle\u201d tab &gt;&gt; \u201cBackground Overlay\u201d<\/li><li>Select one of your Global Colors and play around with the opacity until you get your desired result\u00a0<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d98f897 elementor-widget elementor-widget-heading\" data-id=\"d98f897\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 6: Optimize the Section With Icon Boxes\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7228770 elementor-widget elementor-widget-image\" data-id=\"7228770\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"399\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=399\/blog\/wp-content\/uploads\/2021\/05\/design-house-icon-list-1024x511.png\" class=\"attachment-large size-large wp-image-66178\" alt=\"design house icon boxes\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/05\/design-house-icon-list-1024x511.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/05\/design-house-icon-list-300x150.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/05\/design-house-icon-list-768x383.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1242\/blog\/wp-content\/uploads\/2021\/05\/design-house-icon-list.png 1242w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d6b722 elementor-widget elementor-widget-text-editor\" data-id=\"5d6b722\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now let&#8217;s proceed to our next section, where we currently have an inner section with four columns. At the moment, each column includes three widgets: Image Widget, Heading Widget, and <a href=\"https:\/\/elementor.com\/help\/text-editor-widget\/\" target=\"_blank\" rel=\"noopener\">Text Editor Widget<\/a>.\u00a0<\/p><p>Let&#8217;s see how we can simplify this section to improve its performance.<\/p><p><strong>Icon Box Content<\/strong><\/p><ul><li>Select the \u201c<a href=\"https:\/\/elementor.com\/help\/icon-box-widget\/\" target=\"_blank\" rel=\"noopener\">Icon Box Widget<\/a>\u201d from the widget menu and drag it into the column\u00a0<\/li><li>Select \u201cIcon Box\u201d<\/li><li>Hover over the icon image<\/li><li>Select \u201cUpload SVG\u201d**<\/li><li>Insert your Custom Icon\u00a0<\/li><\/ul><p>** Please note: The badges are SVG files. If you haven&#8217;t done so, go to the WordPress dashboard and then Elementor &gt;&gt; Settings. You&#8217;ll have to turn on Enable Unfiltered File Uploads.<\/p><ul><li>Type in your \u201cTitle\u201d<\/li><li>Type in your \u201cDescription\u201d<\/li><li>Select \u201cStyle\u201d&gt;&gt; Choose a Global Color<\/li><li>Select \u201cSize\u201d and drag the bar to your size of choice<\/li><li>Select \u201cPadding\u201d and drag the bar to your number of choice\u00a0<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1dc9735 elementor-widget elementor-widget-heading\" data-id=\"1dc9735\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 8: Optimize the \"Services\" Section\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e5b824c elementor-widget elementor-widget-image\" data-id=\"e5b824c\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"416\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=416\/blog\/wp-content\/uploads\/2021\/05\/design-house-services-1024x533.png\" class=\"attachment-large size-large wp-image-66180\" alt=\"design house services\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/05\/design-house-services-1024x533.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/05\/design-house-services-300x156.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/05\/design-house-services-768x400.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1496\/blog\/wp-content\/uploads\/2021\/05\/design-house-services.png 1496w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b5e7bde elementor-widget elementor-widget-text-editor\" data-id=\"b5e7bde\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We\u2019re now going to rebuild the \u201cServices\u201d section, which currently uses two columns, two images, Heading Widget, and Text Editor Widget.\u00a0<\/p><p>Let\u2019s create the same design in a new section, but with one column only.\u00a0<\/p><ul><li>Create a new section with one column\u00a0<\/li><li>In \u201cLayout\u201d &gt;&gt; Set \u201cContent Width\u201d to \u201cFull Width\u201d\u00a0<\/li><li>Select the \u201cImage Box Widget\u201d from the widget panel and drag it into the column\u00a0<\/li><\/ul><p>(We\u2019ll be able to fit all of the section\u2019s assets into this widget)<\/p><ul><li>Type in the heading<\/li><li>Type in the description<\/li><\/ul><p>For the image, we\u2019ll maintain the current design we\u2019ve used for our images.<\/p><ul><li>Insert the same image from the Media Library<\/li><li>Go to \u201cContent\u201d tab &gt;&gt; Set \u201cImage Position\u201d to \u201cRight\u201d<\/li><\/ul><ul><li>Go to \u201cStyle\u201d tab<\/li><li>Increase the \u201cSpacing\u201d between the elements<\/li><li>Increase the \u201cWidth\u201d of the image<\/li><li>Expand the \u201cContent\u201d section<\/li><li>Choose \u201cCenter\u201d Alignment<\/li><li>Set \u201cVertical Alignment\u201d to \u201cMiddle\u201d<\/li><li>Set the Global Colors and Fonts of your choice<\/li><\/ul><ul><li>Go to \u201cAdvanced\u201d tab<\/li><li>Add 10% padding to the widget<\/li><\/ul><p>Now, the Services section has the same design, but with fewer assets.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d95d54 elementor-widget elementor-widget-heading\" data-id=\"0d95d54\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 9: Optimize the Call to Action Section<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5387bbd elementor-widget elementor-widget-text-editor\" data-id=\"5387bbd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><strong style=\"font-size: 1rem\">Best Practices for CTA links:<\/strong><\/h3><ul><li>Make sure all of your links and social media links work correctly, and that the button contains the link.<\/li><li>When adding a link to a different website, include this attribute: \u201crel|noopener\u201d<\/li><\/ul><p>(You can do this by clicking on the gear icon and typing the attribute into \u201cCustom Attributes\u201d). This will open the link in a new browser tab and boost your performance score.\u00a0<\/p><p>\u00a0<\/p><p>The next section presents a call to action for our services.\u00a0<\/p><p>The section currently includes two columns, which contain:<\/p><ol><li>A background image with a spacer<\/li><li>Two headings, one inner section, one text editor, and one button<\/li><\/ol><p>Let\u2019s create the same design in a new section, but with one column only.<\/p><ul><li>Go to \u201cLayout\u201d tab &gt;&gt; Set \u201cContent Width\u201d to \u201cFull Width\u201d<\/li><li>Go to \u201cAdvanced\u201d tab &gt;&gt; Delete any extra padding<\/li><\/ul><ul><li>Select the \u201cCall To Action Widget\u201d from the widget panel and drag it into the column\u00a0<\/li><li>Set \u201cImage Position\u201d to \u201cLeft\u201d<\/li><li>Select your image from the Media Library<\/li><li>Expand the \u201cContent\u201d section<\/li><li>Type in the heading<\/li><li>Type in the description<\/li><li>Type in the button text<\/li><\/ul><ul><li>Go to \u201cStyle\u201d tab<\/li><li>Add \u201cPadding\u201d between the elements<\/li><li>Adjust the Image Width<\/li><li>Expand the \u201cContent\u201d section<\/li><li>Select the Global Font for your Title<\/li><li>Increase the space between the Description and the Button<\/li><li>Choose the right Global Colors for each asset<\/li><li>Expand the \u201cButton\u201d section<\/li><li>Set its Size to \u201cLarge\u201d<\/li><li>Customize it to your requirements, such as Background Color and Border Radius<\/li><\/ul><p>Until now, this was a 2-column section with 6 widgets. Now, it\u2019s one 1-column section with 1 widget only!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4b4c562 elementor-widget elementor-widget-heading\" data-id=\"4b4c562\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 10: Optimize the Image Carousel<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2086db2 elementor-widget elementor-widget-image\" data-id=\"2086db2\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"327\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=327\/blog\/wp-content\/uploads\/2021\/05\/design-house-image-carousel-1024x419.png\" class=\"attachment-large size-large wp-image-66182\" alt=\"image carousel optimization\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/05\/design-house-image-carousel-1024x419.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/05\/design-house-image-carousel-300x123.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/05\/design-house-image-carousel-768x314.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/05\/design-house-image-carousel-1536x628.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1677\/blog\/wp-content\/uploads\/2021\/05\/design-house-image-carousel.png 1677w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8202d13 elementor-widget elementor-widget-text-editor\" data-id=\"8202d13\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-size: 1rem\">The current design of our Image Carousel section has a common error with how it displays multiple images.\u00a0<\/span><\/h4><p>This design consists of 5 columns, a practice which many users tend to do to control their image sizes.\u00a0<\/p><p>Let\u2019s explore an easier way which will also optimize your site performance.\u00a0<\/p><ul><li>Create a new section with 1 column<\/li><li>Go to \u201cLayout\u201d tab &gt;&gt; Set \u201cContent Width\u201d to \u201cFull Width\u201d<\/li><li>Select the \u201c<a href=\"https:\/\/elementor.com\/help\/image-carousel-widget\/\" target=\"_blank\" rel=\"noopener\">Image Carousel Widget<\/a>\u201d from the widget panel and drag it into the column\u00a0<\/li><li>Add the images of your choice from the Media Library<\/li><\/ul><ul><li>Go to \u201cContent\u201d tab\u00a0<\/li><li>Set \u201cImage Size\u201d to \u201cMedium &#8211; 300 x 300\u201d<\/li><li>Adjust \u201cSlides to Show\u201d,\u201cSlides to Scroll\u201d, and \u201cNavigation\u201d according to your preferences<\/li><\/ul><ul><li>Go to \u201cStyle\u201d tab<\/li><li>Set \u201cVertical Align\u201d to \u201cCenter\u201d<\/li><li>Customize the \u201cSpacing\u201d<\/li><\/ul><ul><li>Go to \u201cAdvanced\u201d tab<\/li><li>Add necessary padding<\/li><\/ul><p>What was once a 5-column section is now 1 column only.\u00a0<\/p><p>Let\u2019s move on to the next section, where we can optimize the videos on our site.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-879db89 elementor-widget elementor-widget-heading\" data-id=\"879db89\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 11: Optimize the Video Section\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cea1cd3 elementor-widget elementor-widget-image\" data-id=\"cea1cd3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"405\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=405\/blog\/wp-content\/uploads\/2021\/05\/elementor-video-optimization-1024x518.png\" class=\"attachment-large size-large wp-image-66183\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/05\/elementor-video-optimization-1024x518.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/05\/elementor-video-optimization-300x152.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/05\/elementor-video-optimization-768x389.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1160\/blog\/wp-content\/uploads\/2021\/05\/elementor-video-optimization.png 1160w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3efae67 elementor-widget elementor-widget-text-editor\" data-id=\"3efae67\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Video Content Best Practices:<\/strong><\/p><ul><li>Use Lazy Load whenever possible, so you can improve your websites\u2019 loading time.<\/li><\/ul><p>What happens when we apply the \u201cLazy Load\u201d option?<\/p><p>Technically speaking, the video embed code is replaced with a static image. This way, the video is only loaded when the user clicks on the image \u2014 which really helps with our page loading times.<\/p><p>You can find this option in a variety of other widgets like <a href=\"https:\/\/elementor.com\/help\/lottie-widget\/\" target=\"_blank\" rel=\"noopener\">Lottie Widget<\/a> and <a href=\"https:\/\/elementor.com\/help\/gallery-widget\/\" target=\"_blank\" rel=\"noopener\">Gallery Widget (Pro)<\/a>.\u00a0<\/p><p>What we\u2019ll do now is modify how we use the <a href=\"https:\/\/elementor.com\/help\/video-widget\/\" target=\"_blank\" rel=\"noopener\">Video Widget<\/a>, so that it doesn\u2019t delay our page speed or site performance.<\/p><ul><li>Select the \u201cVideo Widget\u201d<\/li><li>Go to \u201cStyle\u201d tab\u00a0<\/li><li>Select \u201cLazy Load\u201d<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-050f1d7 elementor-widget elementor-widget-heading\" data-id=\"050f1d7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 12: Optimize the Footer and Keep It Updated\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5b0afaf elementor-widget elementor-widget-image\" data-id=\"5b0afaf\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"253\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=253\/blog\/wp-content\/uploads\/2021\/05\/optimize-website-footer-1024x324.png\" class=\"attachment-large size-large wp-image-66184\" alt=\"elementor footer optimization\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/05\/optimize-website-footer-1024x324.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/05\/optimize-website-footer-300x95.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/05\/optimize-website-footer-768x243.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/05\/optimize-website-footer-1536x487.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1616\/blog\/wp-content\/uploads\/2021\/05\/optimize-website-footer.png 1616w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2c49aa2 elementor-widget elementor-widget-text-editor\" data-id=\"2c49aa2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A common mistake seen on many websites is that their footer uses multiple headings for the date and description, as well as an icon for the copyright symbol.\u00a0<\/p><p>Let\u2019s see how to optimize the footer and make sure it always stays up to date.\u00a0<\/p><p>We\u2019ll set up this continuous update process by using <a href=\"https:\/\/elementor.com\/help\/dynamic-tags-pro\/\" target=\"_blank\" rel=\"noopener\">Dynamic Tags<\/a>. That way, we won\u2019t need to change the Header content every year, since the Dynamic Tags will automatically update to the current year.\u00a0<\/p><p>We\u2019ll do this by taking the following steps:\u00a0<\/p><ul><li>Delete the extra widgets, leaving only the Heading Widget\u00a0<\/li><li>Select the Heading Widget\u00a0<\/li><li>Click the \u201cDynamic Tags\u201d symbol on the right of the \u201cTitle\u201d field (otherwise known as the \u201cParent button\u201d<\/li><\/ul><ul><li>In the dropdown menu, select the \u201cCurrent Date Time\u201d menu item<\/li><li>Click on the wrench parent icon<\/li><li>Click on \u201cDate Format\u201d tab and select the \u201cCustom\u201d menu item<\/li><li>Delete what\u2019s currently in the \u201cCustom Format\u201d field, except for the \u201cY\u201d<\/li><li>Select the \u201cAdvanced\u201d tab<\/li><li>Select the \u201cBefore\u201d field and hold the \u201coption\u201d and \u201cG\u201d keys simultaneously (or \u201ccontrol\u201d,\u201calt\u201d, and \u201cC\u201d simultaneously) to type the \u201c\u00a9\u201d symbol.\u00a0<\/li><li>Add a space for after the \u201c\u00a9\u201d<\/li><\/ul><ul><li>Select the \u201cAfter\u201d field<\/li><li>Type in a space, and write the text that you want to appear after the year \u2014 such as \u201cAll Rights Reserved\u201d<\/li><\/ul><p>You may notice that in this tutorial\u2019s sample site, each widget has its own section. We did this to make the tutorial clearer and easy to follow.\u00a0<\/p><p>Ideally, the less sections you have, the less extra HTML you\u2019ll have.<\/p><p>You can merge certain widgets into the same section by dragging and dropping them into the section above, and then deleting the empty section.<\/p><p>And that\u2019s all, your layout is optimized!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-404fc88 elementor-widget elementor-widget-menu-anchor\" data-id=\"404fc88\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"retest-website-performance\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-70b47c5 elementor-widget elementor-widget-heading\" data-id=\"70b47c5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Retesting the Site Performance\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a33e55d elementor-widget elementor-widget-text-editor\" data-id=\"a33e55d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We\u2019ll check the results in the DevTools window (Inspector):<\/p><ul><li>Select the \u201cNetwork\u201d tab:<\/li><\/ul><p>There are some nice, positive changes here:<\/p><ul><li>The website now takes 568 milliseconds to load<\/li><li>We\u2019ve gone from 81 requests to 46<\/li><li>Select the \u201cLighthouse\u201d tab, where you\u2019ll see that our performance score has gone from 73 to 98<\/li><\/ul><p>Keep in mind that we\u2019ve optimized our performance without using any third party plugins. All it took was some simple adjustments and better practices.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5a70cc2 elementor-widget elementor-widget-heading\" data-id=\"5a70cc2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Step 13: Test the Results With Motion Effects\n\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-36bee99 elementor-widget elementor-widget-text-editor\" data-id=\"36bee99\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We want to make our site more interactive and playful, but how will this affect our performance scores? Let\u2019s see what we can do.<\/p><p>Make the header a \u201cfixed\u201d element:<\/p><ul><li>Select the Header<\/li><li>Go to the \u201cAdvanced\u201d tab\u00a0<\/li><li>Expand the \u201c<a href=\"https:\/\/elementor.com\/blog\/introducing-motion-effects\/\" target=\"_blank\" rel=\"noopener\">Motion Effects<\/a>\u201d tab\u00a0<\/li><li>Set the \u201cSticky\u201d option to \u201cTop\u201d<\/li><\/ul><p>Make the hero section a \u201cfixed\u201d element:<\/p><ul><li>Select the hero section\u00a0<\/li><li>Go to the \u201cStyle\u201d tab<\/li><li>Select the \u201cAttachment\u201d dropdown and select \u201cFixed\u201d<\/li><\/ul><p>Use an <a href=\"https:\/\/elementor.com\/help\/entrance-animations\/\" target=\"_blank\" rel=\"noopener\">Entrance Animation<\/a> for the hero text (heading):<\/p><ul><li>Select the Heading Widget<\/li><li>Go to the \u201cAdvanced\u201d tab<\/li><li>Expand the \u201cMotion Effects\u201d tab\u00a0<\/li><li>Select the \u201cEntrance Animation\u201d and set it to \u201cFade In\u201d\u00a0<\/li><\/ul><p>Use an Entrance Animation for the hero text description (Text Editor Widget):<\/p><ul><li>Select the Text Editor Widget<\/li><li>Go to the \u201cAdvanced\u201d tab<\/li><li>Expand the \u201cMotion Effects\u201d tab\u00a0<\/li><li>Select the \u201cEntrance Animation\u201d and set it to \u201cFade In\u201d\u00a0<\/li><\/ul><p>Do the same for the widgets that come after, for subtle effects when the page loads.\u00a0<\/p><p>Now, let\u2019s run the performance test again, to see how the motion effects have affected our score:<\/p><ul><li>Go back to the \u2018Inspector\u2019 window<\/li><li>Select the \u201cLighthouse\u201d tab<\/li><li>Click \u201cGenerate report\u201d\u00a0<\/li><\/ul><p>Now, we see that our performance score has been reduced to 97 \u2014 this is certainly not a big difference and it makes the website more interesting and playful.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ddc15bd elementor-widget elementor-widget-menu-anchor\" data-id=\"ddc15bd\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"new-performance-score\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-02df5cd elementor-widget elementor-widget-heading\" data-id=\"02df5cd\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Can You Believe Our New Performance Score?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-83425be elementor-widget elementor-widget-text-editor\" data-id=\"83425be\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We\u2019re excited for you that you\u2019re now fully equipped to raise your performance score of every Elementor website you build. This will make a big difference to your website creation goals and business success.\u00a0<\/p><p>We suggest bookmarking this tutorial for future reference, so that you can review your website pages for performance and apply best practices to optimize your layout.\u00a0<\/p><p>And this is only the beginning \u2014 the next part of this course addresses <a href=\"https:\/\/www.youtube.com\/watch?v=8BqHUx6Zex4\">image optimization<\/a>. In the tutorial, we\u2019ll go over each image in the example site and learn how to improve them for even more efficient loading times.<\/p><p>Happy learning (and performing)!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Introducing the first lesson of our new 5-part course: &#8220;Website Performance Optimization With Elementor&#8221;. This post and tutorial covers Lesson 1: Layout Optimization Best Practices. This tutorial will show you how to optimize the performance of your Elementor website.<\/p>\n","protected":false},"author":2022935,"featured_media":66206,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[44],"tags":[79,173],"marketing_persona":[47],"marketing_intent":[49],"class_list":["post-66091","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-build","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How To Optimize Your Website Layout With Elementor | Elementor<\/title>\n<meta name=\"description\" content=\"Meet our new &quot;Performance Optimization in Elementor&quot; 5-part course. In Lesson 1, we&#039;ll cover how to optimize your website layout in the Elementor Editor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Optimize Your Website Layout With Elementor\" \/>\n<meta property=\"og:description\" content=\"Introducing the first lesson of our new 5-part course: &quot;Website Performance Optimization With Elementor&quot;. This post and tutorial covers Lesson 1: Layout Optimization Best Practices. This tutorial will show you how to optimize the performance of your Elementor website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-05T08:47:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-02T13:32:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/05\/04.05.2021_LAYOUT-OPTIMIZATION-WITH-ELEMENTOR_BLOG-01.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1201\" \/>\n\t<meta property=\"og:image:height\" content=\"629\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ashley Whitehair\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@razohad\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ashley Whitehair\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/\"},\"author\":{\"name\":\"Ashley Whitehair\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/655b7971652e68619ebf0b4424cb1f8c\"},\"headline\":\"How to Optimize Your Website Layout With Elementor\",\"datePublished\":\"2021-05-05T08:47:32+00:00\",\"dateModified\":\"2025-12-02T13:32:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/\"},\"wordCount\":3995,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/05\/04.05.2021_LAYOUT-OPTIMIZATION-WITH-ELEMENTOR_BLOG-02.png\",\"keywords\":[\"Build\",\"Video\"],\"articleSection\":[\"Elementor\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/\",\"url\":\"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/\",\"name\":\"How To Optimize Your Website Layout With Elementor | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/05\/04.05.2021_LAYOUT-OPTIMIZATION-WITH-ELEMENTOR_BLOG-02.png\",\"datePublished\":\"2021-05-05T08:47:32+00:00\",\"dateModified\":\"2025-12-02T13:32:41+00:00\",\"description\":\"Meet our new \\\"Performance Optimization in Elementor\\\" 5-part course. In Lesson 1, we'll cover how to optimize your website layout in the Elementor Editor.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/05\/04.05.2021_LAYOUT-OPTIMIZATION-WITH-ELEMENTOR_BLOG-02.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/05\/04.05.2021_LAYOUT-OPTIMIZATION-WITH-ELEMENTOR_BLOG-02.png\",\"width\":1201,\"height\":629,\"caption\":\"elementor layout optimization\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor\",\"item\":\"https:\/\/elementor.com\/blog\/category\/elementor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Optimize Your Website Layout With Elementor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/655b7971652e68619ebf0b4424cb1f8c\",\"name\":\"Ashley Whitehair\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/49062696ae45a42e9206626097d74b7bfc6a8e6c413f53449a154f67c73ab82b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/49062696ae45a42e9206626097d74b7bfc6a8e6c413f53449a154f67c73ab82b?s=96&d=mm&r=g\",\"caption\":\"Ashley Whitehair\"},\"description\":\"Ashley is an Elementor Specialist with a keen eye for design and a passion for creating user-friendly and effective websites. When he is not creating websites and educational material, he enjoys CrossFit, mountain biking, reading, and exploring the world.\",\"sameAs\":[\"https:\/\/x.com\/razohad\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/user-60190f8d0e66e\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Optimize Your Website Layout With Elementor | Elementor","description":"Meet our new \"Performance Optimization in Elementor\" 5-part course. In Lesson 1, we'll cover how to optimize your website layout in the Elementor Editor.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/","og_locale":"en_US","og_type":"article","og_title":"How To Optimize Your Website Layout With Elementor","og_description":"Introducing the first lesson of our new 5-part course: \"Website Performance Optimization With Elementor\". This post and tutorial covers Lesson 1: Layout Optimization Best Practices. This tutorial will show you how to optimize the performance of your Elementor website.","og_url":"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2021-05-05T08:47:32+00:00","article_modified_time":"2025-12-02T13:32:41+00:00","og_image":[{"width":1201,"height":629,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/05\/04.05.2021_LAYOUT-OPTIMIZATION-WITH-ELEMENTOR_BLOG-01.png","type":"image\/png"}],"author":"Ashley Whitehair","twitter_card":"summary_large_image","twitter_creator":"@razohad","twitter_site":"@elemntor","twitter_misc":{"Written by":"Ashley Whitehair","Est. reading time":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/"},"author":{"name":"Ashley Whitehair","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/655b7971652e68619ebf0b4424cb1f8c"},"headline":"How to Optimize Your Website Layout With Elementor","datePublished":"2021-05-05T08:47:32+00:00","dateModified":"2025-12-02T13:32:41+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/"},"wordCount":3995,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/05\/04.05.2021_LAYOUT-OPTIMIZATION-WITH-ELEMENTOR_BLOG-02.png","keywords":["Build","Video"],"articleSection":["Elementor"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/","url":"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/","name":"How To Optimize Your Website Layout With Elementor | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/05\/04.05.2021_LAYOUT-OPTIMIZATION-WITH-ELEMENTOR_BLOG-02.png","datePublished":"2021-05-05T08:47:32+00:00","dateModified":"2025-12-02T13:32:41+00:00","description":"Meet our new \"Performance Optimization in Elementor\" 5-part course. In Lesson 1, we'll cover how to optimize your website layout in the Elementor Editor.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/05\/04.05.2021_LAYOUT-OPTIMIZATION-WITH-ELEMENTOR_BLOG-02.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/05\/04.05.2021_LAYOUT-OPTIMIZATION-WITH-ELEMENTOR_BLOG-02.png","width":1201,"height":629,"caption":"elementor layout optimization"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Elementor","item":"https:\/\/elementor.com\/blog\/category\/elementor\/"},{"@type":"ListItem","position":3,"name":"How to Optimize Your Website Layout With Elementor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/655b7971652e68619ebf0b4424cb1f8c","name":"Ashley Whitehair","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/49062696ae45a42e9206626097d74b7bfc6a8e6c413f53449a154f67c73ab82b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/49062696ae45a42e9206626097d74b7bfc6a8e6c413f53449a154f67c73ab82b?s=96&d=mm&r=g","caption":"Ashley Whitehair"},"description":"Ashley is an Elementor Specialist with a keen eye for design and a passion for creating user-friendly and effective websites. When he is not creating websites and educational material, he enjoys CrossFit, mountain biking, reading, and exploring the world.","sameAs":["https:\/\/x.com\/razohad"],"url":"https:\/\/elementor.com\/blog\/author\/user-60190f8d0e66e\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/66091","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/2022935"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=66091"}],"version-history":[{"count":8,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/66091\/revisions"}],"predecessor-version":[{"id":146352,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/66091\/revisions\/146352"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/66206"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=66091"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=66091"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=66091"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=66091"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=66091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}