How to Optimize Your Website Layout with Elementor

Want to know how to optimize the layout of your website with Elementor ?

Optimizing website performance is one of the most important aspects of its User experience. A slow loading website can frustrate any user, often resulting in a rebound rate high which may adversely affect the success of our business.

The performance of the website can be affected by many factors, for example: large image sizes, server configurations, too many plugins, among other factors.

Website performance is one of our strongest values ​​as web creators. That's why we created this course in 5 parts.

Now you can learn how to create layouts and posts using optimal techniques. This knowledge will ensure that your websites will not include redundant sections, columns, or widgets that are just not needed. We'll also explore some built-in widget features to improve loading times.

By the end of this tutorial, you will be fully ready to optimize the performance of every website Elementor you create and immediately reap the rewards.

Lesson 1: Layout Optimization Best Practices

In our first lesson, we'll cover the most efficient way to create your pages and posts in the editor Elementor. We often see the use of far too many sections, columns, internal sections and widgets, when the same layout could have been achieved using far fewer elements.

Using excessive amounts of elements slows down your website performance, so let's dive in and learn how to build websites with Elementor in the most efficient way.

We will cover the following topics:

• A closer look at the structure of a correct page
• Viewing and testing your website's performance
• Optimizing your header, footer and page content
• Examples of good and bad website layout practices
• Correct use of widgets, positioning and global styles
• Tips to avoid load lag, improve SEO and increase loading time
• Accessibility optimization
• Reducing the amount of DOM elements
• And much more !

To better understand the optimal layouts in Elementor, we're going to explore an Elementor template that shows common abuses of sections, columns, and widgets. 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 consists of nine sections, 31 columns, five internal sections, and 44 widgets.

At the end of the tutorial, our optimized page will be reduced to six sections, seven columns, and 16 widgets.

We will use the free, light Hello Themeand we will recreate each section of the template and improve the overall performance of the website using best practices.

Testing for bad practices

Before we dive into website layout optimization, let's run a test on our page to fully understand what happens when someone visits our website. Once all our optimizations have been done, we will repeat the test and compare the results.

Step 1: Verify your website in an incognito window

• Open a new window in "Incognito mode" and type in the URL of the web page you are testing.

Step 2: Verify that you are using the direct URL path

If you are unsure of your page link, you can easily find it by going to your WP dashboard:

• Click "Pages" to see all the pages on your website.
• Hover your cursor over your page and click on the "View" option. This will take you directly to your page.
• Copy and paste this URL into the incognito window and once the website loads you are ready to test it!

Testing & Viewing Performance Results

Step 1: Test the performance results

You may have used Chrome Developer Tools in the past.

If not, in order to inspect and display the HTML and CSS content of your page:

• Right click anywhere on your page and click select “Inspect.” You will see several tabs where you can read your HTML and CSS, find errors, get SEO results, and run various tests.
• Select the Network tab and press the cmd or ctrl + R buttons to load the results.

As you can see, our current layout takes 2,88 seconds to load and performs 81 requests.

Step 2: View Performance Results

• Switch to the Lighthouse tab, where we can run an audit report on our page.

This will give us more information on the current performance of the page.

• Select “Generate Report”. After a few moments, your report will appear.

We are currently receiving a performance rating of 73/100, which we can certainly work on.

Ideally, we would like all of these numbers to be green. Now let's move on to optimizing our page and improving our statistics.

Keep in mind that after each optimization step we do, we may take some best practices from the changes and keep them in mind for future websites we create.

Optimizing page elements

Step 1: Optimize the header

Let's start with the Header.

As you can see in this design, the header was made with three columns.

In the first column, our logo consists of two widgets:

1. Un Widget Image which displays a .png image file of our logo
2. A Title Widget.

In the second column, the header menu consists of our Navigation Menu Widget.

The third column contains:

1. An internal Section Widget (which controls the position of the Icon Widget).
2. Our contact details for the Header

Let's see how we can minimize the number of sections, widgets, and sections here.

Step 2: Create the new header

Column 1:

• Create 1 section with 1 column only.
• Add it Website Logo Widget and drag it into the section.

Best practices for images:

• Give each image file on your website a relevant title and alt text in the media library.

This will improve your page accessibility and your search engine ranking. In the logo we originally used, the title is irrelevant to the actual image, and there is no alt text.

• Define the dimensions of the image inside the widget.

This allows the page to be laid out with the proper space before images load, avoiding layout lag (a factor measured by browsers).

In the example we're working on together, solve this problem by going to the Style tab and setting the image width to 200px.

Columns 2

Return to the widgets panel:

• Drag and drop the navigation menu widget under the logo
• Set the pointer to "None"
• Go to the "Style" tab and add the font of your preference (so that it matches our previous design)

Best practices for overall styling:

• Avoid using more than 2 different fonts that include multiple weights (Global fonts).
• Avoid selecting different colors for each item with the color picker (Global colors).
• Improve your website loading speed by generating fewer queries (overall fonts).
• Repeat unnecessary code twice (global colors).
• Maintain consistency and control of your model (overall style).

Global fonts:

This can be done using the Global Fonts function:

• Go to the "Style" tab and add your preferred font (so that it matches our previous design) by selecting one, make a small change and hover over the plus icon.
• Click the plus icon and select the font family you need
• Save the styles you will use in the template as global fonts

You can then use this style on every widget you create.

Global colors:

The same method can be used for your overall colors:

• Click on "Global"
• Hover over the color picker and click on it
• Select a color and point to the plus icon
• Click on "Global" >> select "Principal"

Once you've done that, the color will be saved in your template's color palette, so you can select it from your Global Colors list whenever you need it for an item or widget.

Before we continue with our header, let's set the vertical padding to zero.

Step 3: Edit the header

Column 3

• Go to the "Widgets" panel
• Drag the Icon List Widget under the menu.
• Remove additional list items
• Add your text
• Choose the icon of your choice
• Go to the "Style" tab
• Define the overall colors and fonts of your choice

Now we need to fix one more thing - the three header elements are currently stacked and not aligned with each other. We can solve this problem by changing the width of each element to its actual size, so that it does not take up all the space in the column.

To resolve this problem :

• Select the Site logo widget >> 'Advanced' tab
• Select "Positioning" and set its width to "Inline"

Repeat this exact step for the Navigation Menu widget and for the Icon List widget.

Now that all the header elements are in line, all that remains is to position them correctly.

Defining the positioning of the column with inline elements

• Select your column >> go to the "Layout" tab
• In "Vertical alignment", choose "Bottom"
• "In Horizontal alignment" choose "Space between"

Choose the “Space between” alignment positions the first and last widget at both ends, giving equal spacing between all other widgets.

However, the first and last widgets have different widths, so the equal space may not always center our internal widget.

We can solve this problem by adjusting the margins:

• Select the Navigation Menu widget >> “Advanced” tab
• Ungroup the margin and remove the spacing with a negative value

Step 4: Make the header responsive

Now let's see what the current version of our website looks like on mobile devices.

Best practices for mobile responsiveness:

• Simplify your design and think of ways to make the same sections responsive, to avoid using twice the amount of code that will affect your page speed.

Just as you see in this header - It's common to see the same section redesigned specifically for tablets and mobile devices. This is what we see here: two versions of the design were created: one version for desktop and one for mobile.

Instead, when your design and code are responsive, your page speed improves because it will use less code.

Let's see how we can achieve this, using the “Custom Width” setting for our widgets and elements.

Setting a custom width for tablet

• Click on 'Nav Menu' >> 'Advanced' tab
• Select "Positioning" >> set the width to "Custom".
• Select "%" >> give the widget the same width (in percentage) of the empty space around it.
• Click on the “Content” tab >> “Toggle Align” >> select “Right”.

This allows you to align the toggle menu anywhere within the width of the widget.

Now let's finish customizing the toggle menu.

• "Content" >> Click on the "Full Width" toggle and set it to "Yes".
• "Style" >> Remove the background by dragging the "Color Picker" bar all the way to the left.

Now let's see what things look like on a mobile screen.

Defining a custom width for mobile

In this scenario, we'll keep the three header widgets inside the viewport. But keep in mind that for some websites it may make more sense to omit certain elements from the header when viewed on mobile or tablet.

In this case, what happens to our header when displayed on mobile is that the Navigation Menu and Logo widgets cannot fit into a single row.

To resolve this problem :

Positioning of the Nav Menu

• Click on "Nav Menu" >> tab "Advanced"
• Select "Positioning" >> set the width to "Custom"
• Select "%" >> Give the widget a width of 30%, so that it fits next to our logo

Positioning of the icon list

• Click on "Icon List" >> '' Advanced 'tab
• Select "Fill" >> Ungroup values
• Add 12px padding to "TOP"

Can you believe it?

Originally our header used 2 sections, 12 widgets and 10 columns. Now our header uses 1 section, 3 widgets and 1 column.

And the result is the same!

Step 5: Optimize the Hero section

Let's move on to the next section of our website: the hero section

Best Practices for Hero Sections:

• Make sure your hero section text is easily visible, especially when it has a background image.

Control the position of the widget in a column

A common mistake we see made in the Elementor editor is using extra columns and spaces to control the positioning of a widget.

In our example model, our hero image consists of a section with a background image. The title and the text are positioned horizontally, using two columns. There is also a spacer inside the section to space the elements vertically.

Let's see how we can create the same design with just one section:

• Delete the additional column to the right of the text.
• Remove the spacer.

Instead, to position our hero text where we want, we'll use the column alignment options:

• Select the column.
• Set the “Vertical Alignment” to “Middle”.
• Go to the "Advanced" tab.
• Select "Fill" >> Ungroup values
• Set Right Padding to 50%.

• Select the section.
• Select "Minimum height" >> set it to 80.

Fixed contrast between texts and backgrounds

It is important that every website has a good contrast between the text and the background. Unreadable information affects your website scores and can drive visitors away as well. Either way, the text should always be clearly legible.

There are several ways to improve the clarity of a section whose background is a colored image (as we see in this template):

• Click on your header.
• Go to the "Style" tab >> Select "Text shadow".

This will improve the readability of the text by making it stand out from its background image.

Another way to make your text clearer is to use overlays.

• Select the section >> 'Style' tab >> 'Background Overlay'
• Select one of your overall colors and play around with the opacity until you get the result you want

Step 6: Optimize the section with icon boxes

Now let's move on to our next section, where we currently have an inner section with four columns. Currently, each column has three widgets: Image Widget, Title Widget, and Text Editor Widget.

Let's see how we can simplify this section to improve its performance.

Content of icon area

• Select the »Widget Icon Box« button in the widget menu and drag it into the column
• Select the "Icon box"
• Point to the icon image
• Select "Download SVG" **
• Insert your custom icon

** Note: Badges are SVG files. If you haven't, go to the WordPress dashboard, then go to Elementor >> Settings. You will need to enable Enable unfiltered file downloads.

• Type your "title"
• Type your "Description"
• Select "Style" >> Choose an overall color
• Select "Size" and drag the bar to the size of your choice
• Select "Padding" and drag the bar to the number of your choice

Step 8: Optimize the "Services" section

We are now going to rebuild the “Services” section, which currently uses two columns, two images, the title widget and the text editor widget.

Let's create the same design in a new section, but with only one column.

• Create a new section with a column
• In "Layout" >> set "Content Width" to "Full Width"
• Select the "Widget Image Box" in the widget panel and drag it into the column

(We will be able to integrate all the assets of the section into this widget)

• Type the Title
• Type the description

For the image, we will keep the current design we used for our images.

• Insert same image from media library
• Go to the “Content” tab >> Set “Image Position” to “Right”

• Go to the "Style" tab
• Increase spacing between elements
• Increase the "Width" of the image
• Expand the "Content" section
• Choose the "center" alignment
• Set "Vertical Alignment" to "Middle"
• Define the overall colors and fonts of your choice
• Go to the "Advanced" tab
• Add 10% infill to the widget

Now the Services section has the same design, but with fewer assets.

Step 9: Optimize the call to action section

Best practices for CTA links:

• Make sure all of your social media links are working properly and the button contains the link.
• When you add a link to another website, include this attribute: "rel | noopener"

(You can do this by clicking on the gear icon and typing the attribute in "Custom Attributes"). This will open the link in a new browser tab and increase your performance score.

The following section presents a call to action for our services.

The section currently has two columns, which contain:

1. A background image with a spacer
2. Two headers, an internal section, a text editor and a button

Let's create the same design in a new section, but with only one column.

• Go to the "Layout" tab >> set "Content Width" to "Full Width"
• Go to the "Advanced" tab >> Remove any additional filling

• Select the "Call To Action Widget" in the widget panel and drag it into the column
• Set "Image Position" to "Left"
• Select your image from the media library
• Expand the "Content" section
• Type the header
• Type the description
• Type the button text

• Go to the "Style" tab
• Add "Padding" between the elements
• Adjust Image Width
• Expand the "Content" section
• Select the global font for your title
• Increase the space between the description and the button
• Choose the global colors suitable for each resource
• Expand the "Button" section
• Set its size to "Large"
• Customize it according to your needs, such as background color and border radius

So far it has been a 2 column section with 6 widgets. Now it's a 1 column section with only 1 widget!

Step 10: Optimize the Image Carousel

The current design of our Image Carousel section has a common mistake with the way it displays multiple images.

This design consists of 5 columns, a practice that many users tend to do to control the size of their images.

Let's explore a simpler way that will also optimize your website performance.

• Create a new section with 1 column
• Go to the "Layout" tab >> set "Content Width" to "Full Width"
• Select the »Image Carousel Widget« button from the widget panel and drag it into the column
• Add desired images from media library

• Go to the "Content" tab
• Set "Image Size" to "Medium - 300 x 300"
• Adjust "Slides to display", "Slides to scroll" and "Navigation" according to your preferences

• Go to the "Style" tab
• Set "Vertical Alignment" to "Center"
• Customize the "Spacing"

• Go to the "Advanced" tab
• Add the necessary filling

What was once a 5 column section is now 1 column only.

Let's move on to the next section, where we can optimize the videos on our website.

Step 11: Optimize the video section

Best practices for video content:

• Use Lazy Load whenever possible, in order to improve the loading times of your websites.

What happens when we apply the “Lazy Load” option?

Technically speaking, the video embed code is replaced by a static image. This way the video only loads when the user clicks on the image - which really helps with our page load times.

What we're going to do now is change the way we use the Video Widget, so that it doesn't delay our page speed or website performance.

• Select the "Video Widget"
• Go to the "Style" tab
• Select "Lazy Load"

Step 12: Optimize the footer and keep it updated

A common mistake seen on many websites is that their footer uses multiple headers for the date and description, as well as an icon for the copyright symbol.

Let's see how to optimize the footer and make sure it always stays up to date.

We will configure this continuous update process using Dynamic tags. This way, we won't need to change the header content every year, as the dynamic tags will automatically update to the current year.

To do this, we will proceed as follows:

• Remove the extra widgets, leaving only the Title widget
• Select the Title widget
• Click on the "Dynamic Tags" symbol to the right of the "Title" field (also known as the "Parent button"

• From the drop-down menu, select the menu item "Current date and time"
• Click on the key's parent icon
• Click on the "Date Format" tab and select the "Custom" menu item
• Delete what is currently in the "Custom Format" field, except the "Y"
• Select the "Advanced" tab
• Highlight the "Forward" field and hold down the "option" and "G" keys simultaneously (or "control", alt "and" C "simultaneously) to type the" © "symbol.
• Add a space after the "©"

• Select the "After" field
• Type in a space and write the text you want to appear after the year, such as "All rights reserved"

You may notice that in the example website in this tutorial, each widget has its own section. We have done this to make the tutorial clearer and easier to follow.

Ideally, the fewer sections you have, the less additional HTML CODE you will have.

You can merge some widgets in the same section by dragging and dropping them in the above section and then deleting the empty section.

And that's it, your layout is optimized!

New website performance evaluation

We'll check the results in the DevTools (Inspector) window:

• Select the "Network" tab:

There are some nice and positive changes here:

• Website now takes 568 milliseconds to load
• We went from 81 requests to 46
• Select the “Lighthouse” tab, where you will see that our performance score has increased from 73 to 98

Keep in mind that we have optimized our performance without using any third-party plugins. All it took was simple tweaks and best practices.

Step 13: Test the results with motion effects

We want to make our site more interactive and fun, but how will that affect our performance scores? Let's see what we can do.

Make the header a "fixed" element:

• Select the header
• Go to the "Advanced" tab
• Expand the "Motion Effects" tab
• Set the "Sticky" option to "Top"

Make the hero section a "fixed" element:

• Select the hero section
• Go to the "Style" tab
• Select the "Attachment" drop-down list and select "Fixed"

Use a Entrance animation for the hero's text (header):

• Select the Header widget
• Go to the "Advanced" tab
• Expand the "Motion Effects" tab
• Select Input Animation and set it to “Fade In”

Use an input animation for the hero's text description (Text Editor widget):

• Select the Text Editor widget
• Go to the "Advanced" tab
• Expand the "Motion Effects" tab
• Select the "Input animation" and set it to "Fade In"

Do the same for the widgets that come after, for subtle effects when the page loads.

Now, let's run the performance test again, to see how the motion effects affected our score:

• Return to the "Inspector" window
• Select the "Lighthouse" tab
• Click on "Generate a report"

Now we see that our performance score has been reduced to 97 - this is definitely not a big difference and it makes the website more interesting and fun.

Can you believe our new performance score?

We are delighted for you to now be fully equipped to increase your performance score from every Elementor website you create. It will make a big difference to your website building goals and the success of your business.

We suggest that you bookmark this tutorial for future reference, so that you can examine the performance of your website pages and apply best practices to optimize your layout.

And that's just the beginning - the next part of this course coversimage optimization.

In the tutorial, we'll go through each image in the sample website and learn how to improve them for even more efficient load times.

Get Elementor Pro Now!

Conclusion

So ! That's it for this article that shows you how to optimize your website layout with Elementor. If you have any concerns about how to get there let us know within Comments.

However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks.

...