Mobile Editing – Create a Responsive Website Visually with Elementor Page Builder

0

– [Noah] Hey everyone, thisis Noah from Elementor! Today I'll teach you how to use the mobile editor with Elementor.

This feature enables you to create pages that are truly responsive, down to the last pixel.

As you can see on this page, I've designed it so itlooks great on desktop.

However, if I go over tothe mobile version display, a few things here won't look so great.

So, before we begin editing the page, I'll just give you a quick overview on the mobile editing feature.

With mobile editing feature, you can easily change styleparameters according to device, such as font size, lineheight, padding, margin, etc.

Note that whenever yousee a small desktop icon by a certain setting, this means you've got fullcontrol over its responsiveness.

If you click on this icon, two more icons will appear, the tablet and the mobile icon, and if you click on one of them, notice how the webpage previewadjusts itself accordingly.

Same goes for the buttonyou already know down here.

If you click on a tabletor mobile display, the tablet and mobile iconswill automatically appear, and now I'll show you a fewexamples of this great feature.

As you can see on this page, I have here an eye-catching heading.

It looks great on desktop, but once I move to the mobile display, as you can see, it's too big, and it does not look too great.

So what can I do to improve it? With the mobile editing feature, I can just click on the widget.

As you see in the Alignment area, I have the desktop, tablet, and mobile icons.

Right now, I'm in the mobile display, and I would like to changealignment to center.

As you can see, only inmobile, it's centerized.

If I move to the desktop, the alignment is right like before.

Now the alignment is great on mobile, but I also need to reduce the font size because it's way too big.

So I go over to the Style tab, and under Typography, Size, as you can see, are the three icons displayed, and right now, I'm on mobile display.

So, I set its size as 31 pixels.

As you can see, it looksgreat now in mobile, and desktop, it's 61.

Now the heading looks great, but what about the padding up here? There is way too much padding.

So, to do so, I have to go to the section, and under the section settings, I go over to the Advanced tab, and here in the Margin and Padding, as you can see, are the three icons, and we're right now in the mobile display, and I would like to reducethe padding for the mobile.

So I just give top 50, bottom 50, right and left 20 pixels.

Look at that.

It looks great in mobile and in desktop.

Now, down here, I have three sections divided into two columns.

On desktop, it looks great, but if I move over to the mobile version, as you can see, thecolumns are disordered.

To rearrange them, I'll justgo over to the second section, click on it, Advanced, Responsive, Reverse Columns, I'll click on Yes.

Now the columns look fantastic.

Now let's go back to thefirst section of the page.

On desktop, the section isdivided into two columns, but in mobile, all the columns are automatically set as full width.

However, I could easilydisplay them each as 50% with the mobile as well.

How? I simply click on the column, set it to mobile version, Advanced, Responsive, Mobile Width, I set as Customized, and Column Width, I set as 50.

Now I do the same to the other column.

Customized and 50.

However, the responsiveflexibility does not end there.

With Elementor, you can also choose whether to display or hide a section or widget according to device.

Let's say I don't want to see this phone on the mobile version.

I simply click on the widget, Advanced, Responsive, Hide on Mobile, I click on Hide, and once I click on the Preview mode, as you can see, there's nophone on the mobile version.

By using Elementor'smobile editing feature, you can easily adjust awebsite's responsiveness without coding.

Saves you a lot of time and effort.

I hope you enjoyed this video.

For more videos and tutorials, subscribe our YouTube channel or visit us at docs.

elementor.

com.

.

Leave A Reply

Your email address will not be published.