In this tutorial, we will go over the responsive features and options in Elementor. We’ll review the basics of responsive design, and optimize a website’s header, content, and footer, using Elementor’s responsive section, column, and widget settings.
This tutorial will cover:
✔︎ Responsive features
✔︎ Responsive menu
✔︎ Responsive font styles
✔︎ Device-specific settings
✔︎ And much more!
Hey there, it’s Aviva from Elementor. Today I’ll show you how to make your website fully responsive.
With people accessing websites from an array of devices these days, it’s more important than ever to make sure your website looks and functions as intended, and is user friendly, at any size. By making sure your designs adjust automatically to different sizes, your website will be optimized for just about any viewport, or screen size
While developers often achieve this by using HTML and CSS, never fear, with Elementor, you can optimize your whole website without writing a single line of code.
We’ll begin with an Overview of Responsive features, and then I’ll show you how to use Elementor to:
1. Design a Responsive Menu
2. Change Column width and wrapping
3. Set up Responsive Font Styles
4. Hide & Show Elements on different devices
5. Reverse the column order in a section
6. Use the responsive widget options
Let’s start with a tour of the responsive features in Elementor.
First is the responsive mode, which you can access here, on the panel toolbar. Switch between Desktop, Tablet and Mobile previews by clicking the corresponding icon. Upon selecting a viewport, the page is previewed in that specific viewport’s width.
Also, you will notice upon entering the settings of any widget, column or section, that the editor automatically switches the viewport icon to match the selected view, just like we see here.
Clicking the icon and switching between viewports will also switch the preview of your web page.
Let’s get to know the viewport a little better. It’s important to understand that responsive edits in Elementor are generally inherited from the larger viewport down to the smaller viewport. So this means, that changes to Desktop responsive settings, are automatically applied downward to Tablet as well as Mobile views, and changes to Tablet are applied to Mobile.
Here, on this heading widget, you can see that if we set the font size on the Desktop, the values on tablet and mobile appear empty. This is because they’ve been inherited from the larger viewport and will only change if we edit them manually, like this.
Responsive edits are not inherited upwards, so Mobile edits don’t affect Tablet or Desktop, and Tablet edits don’t affect Desktop.
That said, there are times when Elementor intuitively anticipates a layout for smaller sizes, and the columns or widget’s width will change to fit the mobile viewport by default.
There are even more responsive options for sections, columns and widgets that you can access from the advanced tab, which we’ll cover soon.
Now that we understand what a responsive website is and know how to navigate between Elementor’s viewports, let’s make our website responsive!
I have my homepage here, designed in desktop mode, and it’s time to see how it looks on tablet and mobile. Select the tablet icon to preview the website in the tablet viewport.
As you can see, a lot of things appear different at this size.
If you’re using Elementor Pro, you can use Elementor to optimize your headers and footers.
Don’t have Pro? Don’t worry, you can still follow along. The same principles of responsive design apply to all content, and all the same responsive options are available in the free version for any content designed with Elementor.
We’ll begin with the Header, move on down to the Footer, and then come back to the Page content.
With Elementor’s full site editing, we can quickly switch from the page content to the header, like this. The blue outline around the header tells us that it’s now active.
The first noticeable difference in tablet mode is this hamburger icon. By default, when you build your navigation menu, it’s set to toggle, on smaller viewports. Depending on your design, you can set the nav menu links to display on tablet, mobile, or to not display at all.
In this design we don’t have so many links, so let’s set the breakpoint to mobile. This way, the menu icon shows only when someone is viewing the website from mobile, and the menu links will be visible on tablet.
Now switch the preview to mobile. The menu icon is displayed just as we set it before, but the layout needs a little work.
As mentioned in the overview, on smaller viewports, Elementor anticipates the column width, and sets it to 100% on mobile. We’ll discuss column width in more detail soon.
Let’s set these icons back to appear in the same row, by entering the column’s settings and set the width to 50% here. Do the same to the second column, so together they span one row. Perfect.
Let’s take a closer look at the nav menu, and some of its settings. Click to expand it. Under Mobile dropdown, Align the menu links to the Center. In style, under Toggle Button, remove the background color by dragging the opacity all the way left.
Great!
Click update to save changes to the Header.
Let’s switch back to tablet, scroll down, and click Edit footer to quickly enter its editing settings.
Before we begin editing, let’s get a better understanding of how columns work.
When you have multiple columns in a section, their widths are by default equal. So for example, if you have 2 columns, each one will have a width of 50%, if you have 4 columns, each one will have a width of 25%, and so on.
In this section, we have 5 columns of equal width, so each column by default takes up 20% of the section. They still fit in the viewport, but ideally, we want to allow a little more space between them, so that the columns won’t be so close to each other. We can group the first 3 columns into one row, and the last two in the row below.
To do this, set the column width of each of the first three rows to 33.33.
Whenever the total width of the columns exceeds 100% of the section width, columns that no longer fit, are displaced and pushed below into a new row.
In this case, the last two columns have wrapped to the next row, and have retained their default widths of 20% each. Now let’s set each of them to 50% so together they take up the full width of the section.
That’s better.
Now, let’s switch to the mobile.
The columns have wrapped here by default, and each one takes up 100% of the section’s width, which works nicely here.
Let’s switch back to tablet and edit the page content. Make sure to click Save, when prompted to save the edits we did on the footer.
The layout looks good, we only need to edit this heading. We can control the font size in each viewport.
I already saved this as a global font when designing for desktop, so we’ll edit it directly from the Global settings.
I’ve set the font size to the VW, which represents the Viewport width, and is relative to the percentage of the viewport’s width. Let’s hide the preview panel to see how it changes size based on the screen size. Cool.
Now let’s preview it on tablet by clicking here. Let’s make the heading a little larger. Great. And now let’s check it on mobile…. and change it to better fit the small screen. You can also use other units, such as pixels, depending on your preference.
The column with the social media icons was perfect for the desktop and tablet, but it takes up a lot of space on mobile. Since we have this information repeating in the footer, we don’t absolutely have to have it here.
Elementor gives you the ability to hide widgets, columns or even a whole section, when the website is displayed on different devices. You can find this option in the advanced tab under responsive.
So go ahead and set this column to hide.
Once you choose to hide an element, it will appear greyed out in its corresponding preview. But don’t worry; it will be completely hidden on the published page.
Let’s take a look at the next section. Switching between viewports can cause columns to wrap, and sometimes display in an undesirable order.
In Elementor, you can rearrange the column order. Select the section, and in advanced options, under responsive, enable Reverse columns for Tablet. Much better!
We can also hide this image since it’s not needed anymore. We’ll hide it for both tablet and mobile.
Switching back to mobile, we can see that everything looks great.
The following section is interactive, and uses the flip box widget to create this effect.
As you can see on tablet1, it looks great. Now switch mobile. Let’s keep things simple for the user, on mobile, by hiding it.
But if we hide the section, the text will also be hidden. So let’s first make a copy of the text, and set the text to show only on mobile.
Right click the text, select duplicate, and drag the text widget here.
Go to its responsive options, and select to hide on desktop and tablet, allowing it to show only on mobile.
Now hide the entire section below it, and voila!
With this method, you can create unique content to match your design needs, and be displayed only on specific devices.
Switch the viewport back to tablet, and move to the next section.
It looks good,1 now how about mobile?
The only thing we need to change here, is the alignment of the contact information.
As mentioned, each widget has viewport icons for available responsive options. Select each heading and text editor widget, and align to the centre like so..
To save time, we can copy and paste the styles between widgets of the same type.
Use care when making changes; If an element doesn’t have a Viewport Icon next to it, changes will affect the element at all viewport sizes.
Ok! everything is optimized. Let’s preview the site in Tablet mode…and Mobile. Nice!
Let’s recap what we learned today. First, we went over the responsive features in the Elementor editor, which include the viewport preview modes, the viewport icons, and the advanced responsive widget options.
Then we optimized our header and responsive navigation menu. In the Footer, we reviewed column width and wrapping.
In the page content, we reviewed how to make a font responsive, hide and show elements on specific devices, and reverse column order. We then used the viewport icons to edit responsive widget options.
And that’s it. Now you know how to optimize your website for responsive view.
As you familiarize yourself with the responsive options in the Editor, and gain more experience, using responsive units like viewport width and percentages, will become second nature to you. You’ll be able to design more intuitively in desktop mode, while keeping responsive layouts in mind, for more consistent results.
So what are you waiting for? Get into tablet…or mobile mode, and optimize your site today. 🤓
Thanks for watching. For more tutorials, subscribe to our YouTube channel. And don’t forget to hit the notifications bell.
