Creating a website according to this tutorial requires no prior skills and is achieved using the FREE Astra theme, Elementor, and Elementor Pro.
In the video, we show how to create the complete website, section by section. In this tutorial, however, we put the focus on the steps to customize the website so it becomes 100% mobile responsive. If you thought creating a mobile responsive website requires tons of code, think again. Here you will see the Elementor way to create a stunning website that looks perfect on every device.
Following this step by step tutorial, not only will you be able to create this astonishing page:
It will also look spectacular on any mobile device:
Here are the steps for setting a mobile-specific styling:
Step 1: Make the page's headings responsive
The difference in screen width between desktop and mobile is substantial. This means that if you have a large heading designed for desktop, it can often get too big when you switch to mobile. There could also be alignment issues, so often you will need to change the alignment from left to center, so the design stays balanced on the transition to mobile.
In the tutorial, we reduce the size of the headings so they don’t take up the entire screen on mobile devices. We also align the headings to the center. This should be done with all the headings on the page.
Step 2: Adjust mobile margins and paddings
A 20-pixel left margin can look one thing on desktop, and a whole other thing on mobile. Margin and padding adjustments are easily done with the draggable size scale in Elementor.
Set new larger margins for the headings, images and other widgets on the page, so enough space appears on all sides of the elements. You should also make sure spacing is not too large since it can take up too much space quite frequently.
Step 3: Text editor mobile adjustments
As you can see in the video, the text editor widget is another commonly used feature in Elementor that requires specific adjustments to be responsive. In our example, we center the text editor, increase its width and its font size. We also set more padding for the text editor to push it away from the left border
Step 4: Adjusting minus margins for mobile
This might be a bit advanced for the newbie user, but using minus margins is quite commonly used by web designers in Elementor, especially to get two different widgets to overlap to create an interestingly layered design.
In our tutorial, Manual adjustment of the minus margin is used to get the image to re-align it with the text.
Step 5: Reverse columns on mobile
The page layout in Elementor is built so multi-column sections are split apart automatically on the transition to mobile. This way, in mobile view, each column gets its own separate row and takes up the entire width of the mobile screen.
The problem with this is that sometimes you get a reverse order than you need. Let’s take an example where you have a two column section on desktop: one containing an image and one a text widget. When we go to mobile view, each column gets its row, but the image, because it appeared in the right column of the original section, now gets below the text editor widget on mobile. If we want to reverse their order, there’s a special switch in Elementor that does this.
Simply go to Section > Advanced > Responsive and switch on ‘Reverse Columns’
Step 6: Adjust responsive column width
I mentioned earlier that each column automatically gets 100% width when you switch to mobile, but this can be specifically altered, so you can set a different width per column on mobile.
For the icon section in our video, we set each column to be 50% width, so each row has 2 icon boxes.
Step 7: Hide or show elements on mobile
In Elementor, you get the flexibility to hide a section, column or widget on desktop, tablet and mobile devices. In our video, we hide an image that doesn’t work for us on mobile. We can also show the same image only on mobile, and use this tool to set an entirely differentiated display on different devices.
Step 8: Widget specific mobile adjustments
Each Elementor widget offers advanced mobile editing options. For our video, we show how to set Form row gap, to increase the row gap for the form so the fields are set wider apart. We also show how to adjust the margins and paddings for the media carousel, as well as narrow it down so it has some space on the sides.
Why We Chose Astra Theme?
There are several advantages of using Astra theme to create mobile responsive websites with Elementor, including:
Simplicity – Astra focuses on simplicity. In minimum options, users get desired output through well-categorized settings in the customizer.
Accessibility Ready – Accessibility ready is a requirement in many countries and enterprise-grade projects. Besides that, it is just a nice thing to have accessible interface for good user experience. There are very few accessibility-ready themes available on the market today and Astra is one of them.
Made for Speed – Astra is made for the speed! H# Focus on Simplicity
Here are just some of the facts:
- Astra makes only 4 HTTP requests (That’s minimum possible for a functional WordPress theme)
- Loads less than 50 KB code
- Does not use jQuery by default.
Astra excels at performance and speed. But keep in mind that speed of the websites depends on various factors like hosting, other installed plugins, the images on the website, PHP version, and the location of the server. Choosing a fast, performance focused theme Astra is only the first step.
Freemium – Just like Elementor, Astra is free in the WordPress Repository. For more features like white labeling, transparent headers customers can purchase a paid extension.
Made for Elementor – When using Elementor, Astra automatically goes full width without title and sidebar. No clicks or settings required.
Dozens of Free Elementor Sites, Ready to Import – Yes, full sites. Not single page templates. Makers of Astra have built a free plugin and which allows users to import 100% ready websites built using Elementor & Astra in one click.
Typography Controls – Typography is important and probably the most important aspect of a well designed, UX focused website. And Astra theme, just like Elementor offers controls to set a beautiful, responsive typography & fonts
Widget Ready – User can place widgets in various theme areas. Even in the headers as well!
Multilingual, RTL & Translation Ready
Developers – Astra is “Framework Theme”
If you’re a developer, you will have fun working with Astra. It can be called as a Framework theme, as it offers tons action/filter hooks.
You can even browse through the active development on GitHub or contribute.
Made by Brainstorm Force – Astra is built by a Brainstorm Force, an organization of WordPress professionals operating for 8 years. Business and agencies can count their mission critical websites on Astra and be assured of the active development and professional support.
Conclusion
As you can see, all of these steps are easily understood, as they require no code and are achieved using Elementor’s intuitive control settings. This way, you can freely design the desktop version, then quickly accommodate it for mobile devices within minutes.
I hope you take advantage of the mobile editing tools next time you design a page or website in WordPress. If you have any questions related to this tutorial, feel free to add your comments below.
Looking for fresh content?
By entering your email, you agree to receive Elementor emails, including marketing emails,
and agree to our Terms & Conditions and Privacy Policy.
