How to Create a Responsive WordPress Website with Astra theme

This tutorial will teach you how to create a stunning responsive WordPress website without any code whatsoever and by using Elementor and Astra theme.

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.

About the Author

Ben Pines

Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

15 Responses

  1. Ben, I have a business website https://www.foodmanageronline.com targeting each of the 50 states. A couple of page sections are nearly identical for each state, but there are a couple of sections that are state specific.Question: Is it better to use a cloning plugin (like I did on my current website) to make each of the 50 state pages or use an Elementor saved template and tweak it for each page? Thank you. I am so grateful I saw wpCrafter Youtube videos on Elementor.

  2. Hi, thanks for this great post and make me discover Astra theme. Usually, I work with generate press + Elementor. What is your advice about this epic question : why I may or may not want to switch to astra (vs generate press) ?

  3. Hey Ben, great tutorial. Is it possible for you guys to add a new width to the responsive section? I dont think Ive ever got an answer on this. 1920 x 1080 is what your desktop is set at but I design in 3840 x 2160 which is what most newer laptops are in….the layouts show up different when viewing on 1920 x 1080 after you have designed in 3840 resolution. So this would be very useful to create a higher res option.

  4. Hi, The fact that Astra is accessibility ready theme came as surprise to me. It is a very good theme, I have nothing against it, but I’m sorry guys, I’m not sure about Astra being accessibility ready. It does not pass WordPress accessibility review and so have no `accessibility-ready` tag (check at https://wordpress.org/themes/astra/). I also checking some of the theme’s demos and I can’t see them passing in-browser accessibility tests without any errors or violations.
    If anybody was interested in accessibility free themes compatible with Elementor, you may check my Reykjavik at https://wordpress.org/themes/reykjavik – I’m sorry for shameless plug 😉

  5. I am a newbie on this and I have just bought elementor Pro to start building.

    I like the ease to be able to adjust for different devices.

    I do wonder if there is some global setting that I can choose to change all e.g. text sizes so that they for “ipad” is e.g. 90% and for mobile is e.g. 80% of the desktop size.

    I think of this as user choosable % of desktop and also having it only to auto adjust not manually adjusted sizes / having a tickbox to lock a specific text size.

    Maybe similar functionality for other than text size also

    Would this be possible?
    or does it already exist?

Leave a Reply