How to make responsive website with Elementor
Do you want to make a responsive website with Elementor?
Now a days most of the users are accessing internet with mobile devices. So if your website are not compatible with the small screen ratio then you are going to lost a huge numbers of users. Elementor has it’s default responsive option so using Elementor you can easily make your website responsive. So here in this article you are going to show you how to make your website responsive with Elementor.
What is responsive website?
For websites, responsive means that the website can work and display properly in different screen ratios. It doesn’t mean that website should display same for every devices but instead it will adapt the device screen ratios and display the content properly according to that device screen.
Using the Elementor responsive design you can resizing all the elements of your website so that it can adopt the users screen and fit the content. There are there types of screen ratios you can resizing with Elementor without compromising with the quality. The devices are-
- Desktop
- Tablet (768px)
- Mobile (360px)
You can see our article to learn how to make responsive page using pre built template on Elementor.
How to view different screen on Elementor
At first open a page you want to resizing and rearranging elements for responsive website. Open it on Elementor and from the bottom of the left dashboard you will be able to see the responsive mode option. Click on it and three device option show up desktop, mobile and tablet. Just click on the mobile to see the mobile view. To see the tablet view click on the tablet option.
The desktop view is the default view but when you click on the others device view you can see how your page will look like on that device. The best of Elementor responsive features is that when you style your website on the mobile device it will not effect on the tablet or desktop layout. Same things apply for the other devices too. So you can easily work with different layout without effecting other layouts.
Which elements need to be adjusted?
When you create a website based on a proper responsive theme then most of the elements are automatically adjusted with the different screen ratios. But sometimes you need to adjust it manually based on your content. Here you will show you how to adjust element to make your website more responsive.
Fonts
Fonts are very important to any websites as the users need to read it to understand about your website. If the fonts are not displaying properly it will not possible for your users to read it. So you lost the users as well as it will effect the SEO. So you can not ignore the fonts to make it readable for every devices available.
Your fonts may look like perfect for mobile devices but for smaller screen it may not be perfect. you can easily fixed that selecting the layout. To do that at first select the layout for example you are going to resize the font for mobile devices. So select mobile from responsive mode and the click on the text and you can see the text option in left dashboard. You can set the size and alignment from here.
Now click on the style tab and you can see the font style there. From the typography option you can change the font family, size, line height everything about the fonts.
But you need to consider that some of the changes will effect other devices too. So the text need to be adjusted in proportion.
Padding and margin
Padding is the space between the content and edge of the elements on the other hand margin is the space between elements. You can easily adjust the padding and margin of any section for different devices. Just click on nay section and go to advance tab from the left dashboard.
Here you can add padding and margin for left,right, top and bottom. The linked option from right will add the value for four option. Unchecked it to add value separately.
Raw height
Raw height is very important for website which can be adjustable using Elementor for different devices. To adjust the row height at first select the section and click on the edit option.
Now from the layout tab you can set the minimum height for different devices.
Enable or disable section.
Another important features of Elementor is that you can hide a specific section for any specific devices. For example you have a section for desktop device but you can disable the section for mobile devices and make a new section for mobile devices too. So the desktop section will shoe the desktop section and the mobile device will only show the mobile section.
To do this select any section then go to the advance tab and then click on the responsive option. From their you can hie this section for mobile devices and create e new section for mobile devices and hide your newly created section for desktop devices.
This will show you the mobile section on mobile and the desktop section on desktop devices.
Wrapping up
That’s it applying this process you can easily make your website responsive for all the devices. You can easily do it with Elemento responsive features.
We hope this article will help you to make website responsive with Elementor. If you like this article please like our Facebook page to stay connected.