Can You Upload More Than One Template To Elementor At The Same Time

So you built your beautiful web page with Elementor, and now you lot are a petty bit shocked afterward viewing your page on mobile for the first fourth dimension.

Sections are stretched and lots of white space is added, that leads to lots of scrolling, images have up large parts of the site, the font size is also big, and so on. In brusk, your page is barely usable on mobile devices and you need to work on the responsiveness of your page.

It looks like a lot of piece of work to fix all this. The reality is if you apply a few mobile-specific settings you will country at an okay-ish folio inside minutes.

This list of tips is the result of building lots of pages with Elementor for our clients (and our ain, of course).

Change Padding and Margin Settings for mobile

The number 1 thing you should set is the padding and margin settings for your sections and columns. Elementor does not automatically reduce or compute a plumbing fixtures margin/padding setting for your folio.

Let'due south take a await at an example. In this screen-recording, yous can run into our contact section from our frontpage. There are multiple paddings and margins applied on department and column level. If I switch to mobile yous can come across that the margin and padding settings are empty and that it looks ugly on mobile.

What I recommend is the following:

1. Switch to mobile view
2. Set up padding and margin to nothing for all sections/inner department and columns
3. Add margin on the principal section holding the content
4. Then outset adding paddings on content columns (i.e. 5%).

As you can see in the case higher up, with a few small edits the page looks ameliorate on mobile within seconds. Go on in listen that it is important to utilise the exact aforementioned paddings and margins for all sections and columns for mobile, that volition lead to a consistent feel.

Alter the society of columns

Sometimes it looks weird when the verbal same lodge of content is applied on mobile. For our contact section, I practise not want to accept my moving-picture show shown outset. Elementor comes with a handy characteristic to change that.

On the inner section holding the two columns, I tin edit the responsive property under advanced. The magic slider is called opposite columns.

Avoid responsive settings on widget level when possible

Elementor is powerful by providing the possibility to position every element as y'all similar. You can customize paddings and margin on all elements.

In improver, y'all can also hide individual elements. To come up back to my previous case I could decide to hide my picture on mobile completely.

I would contend you should exist cautious of using these powerful features to often. Every time yous edit your page you accept to recall of desktop/tablet/mobile separately. Particularly on big pages editing can get quite complicated.

Whenever possible, avert hiding elements on the widget level. You may have a folio with 50 or more than content widgets, managing the responsive settings individually tin create lots of overhead.

If there is no other way of getting your page mobile-ready, get for information technology.

Change content alignment and font sizes for mobile

In some cases, it can make sense to center content on mobile.

Take for example this newsletter/social follow bar. It looks great on the desktop with content left-aligned, but on mobile not and then much.

With a few clicks, you tin center the content on mobile simply.

The Typography settings are another source of potential problems on mobile. The style of headline and text widgets tin exist customized. Nearly chiefly is font size, but all other typography properties are customizable likewise.

Change background fashion settings

If yous work with background images on sections you might realize that information technology does non expect expert on mobile. At that place are several ways to customize background images:

• Change the positioning of the image on mobile
• Or you could upload a resized version of the image for mobile
• Or remove the background image on mobile by uploading a transparent graphic for mobile

Take for example the hero area of our homepage. The desktop settings for the background image practice not fit for mobile, with a few clicks yous tin change how the prototype is positioned on mobile.

Piece of work with templates, global widgets and "global sections"

If you lot work on a WordPress website that uses Elementor for multiple pages, go used to working with templates, global widgets or global sections/templates.

Global widgets allow you to re-utilise elements across your site. Once a widget has the perfect settings for desktop, tablet, and mobile yous can re-use it beyond your site, and later easily change it centrally.

Templates are bully for re-using style settings and in combination with the Elementor Pro widget "templates" a groovy way to reuse globally on your site.

I take written a detailed guide that explains how to use global widgets and templates (global sections).

Don't ignore tablet users completely

Yep, tablet traffic is low on your page, tablets are lying on our couches almost of the time.

just 2,6% tablet users on Fresh van Root

If you have ten yard unique users a month and you lot got five% tablet traffic that is notwithstanding 500 users, keep that in mind and practice quick customizations for tablet users as well.

Check out all responsive settings

In this post, I have mentioned the tricks for making your site responsive quickly, but there are many more than means to customize your sites responsiveness.

The best way to acquire most all the possibilities you get with Elementor is to always look out for the responsive switch card.

The responsive style options for the text widget

These are the settings you will touch most ofttimes to make your site responsive:

• Hide/show elements on mobile/tablet/desktop
• General layout:
  • Margins and padding
  • Column width
  • Reverse columns
  • …
• Change the mode of widgets
  • Font size and typography settings
  • Alignment
  • Background style settings
  • Remove/modify animations
  • …

Besides, check out the official Elementor docs for mobile editing.

Should you get Elementor Pro?

You lot can make your site responsive without ownership the Pro! Elementor Pro brings additional fifty widgets and features for managing global sections (the needed template widget). The responsive settings, in general, are non Pro-exclusive.

You will end up buying the PRO version if you want to build multiple pages, as the features are needed. If you lot piece of work on a single landing folio the complimentary version might be good plenty.

Conclusion

Elementor offers many ways to optimize your site's responsiveness and there multiple ways to solve the aforementioned effect in many cases. You may need to invest hours to make your whole website mobile-perfect, only fixing the most common issues mentioned in this post you will become to a good mobile experience fast on a landing folio. You so demand to think on how to best get the settings practical to all pages created using Elementor (global widgets, templates, copy style role).

Elementor is nonetheless a young product, so the characteristic-set to manage your site'due south responsiveness is constantly changing.

• Some more Elementor responsive tips.
• All our Elementor posts

Can You Upload More Than One Template To Elementor At The Same Time,

Source: https://freshvanroot.com/blog/2019/how-to-elementor-page-mobile-responsive/

Posted by: rowestrust.blogspot.com

Share this post