Connect with us

Build

How To Optimize Your Website Layout With Elementor

Published

on

How To Optimize Your Website Layout With Elementor


Now, let’s find out how the current version of our website looks 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 which will affect your page speed. 

Just like you see in this header — It’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.

Instead, when your design and code are responsive, your page speed will improve since it will be using less code.

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

Setting 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 lets you align the toggled menu anywhere within the widget’s width. 

Now, let’s finish styling the toggled 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 check how things look on a mobile screen. 

Setting Custom Width for Mobile

In this scenario, we’ll keep all three of the header’s widgets inside the viewport. But keep in mind that for some sites, it might make more sense to omit some of the header’s elements when it’s viewed on mobile or tablet. 

In this case, what happens to our Header when viewed on mobile is that the Nav Menu and Logo widgets can’t fit together inside one line. 

To fix this: 

Nav Menu Positioning

  • Click on “Nav Menu” >> “Advanced” tab 
  • Select “Positioning” >> Set the Width to “Custom”
  • Select “%” >> Give the Widget a 30% width, so it will fit next to our logo 

Icon List Positioning

  • Click on “Icon List” >> “Advanced” tab 
  • Select “Padding” >> Unlink the 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 looks the same! 



Source link

Continue Reading
Click to comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.