#Elementor image carousel not working pro#

You can make your site responsive without buying the Pro! Elementor Pro brings additional 50 widgets and features for managing global sections (the needed template widget). Hide/show elements on mobile/tablet/desktopĪlso, check out the official Elementor docs for mobile editing.These are the settings you will touch most often to make your site responsive: The responsive style options for the text widget Templates are great for re-using style settings and in combination with the Elementor Pro widget “templates” a great way to reuse globally on your site. Once a widget has the perfect settings for desktop, tablet, and mobile you can re-use it across your site, and later easily change it centrally. Global widgets allow you to re-use elements across your site. If you work on a WordPress website that uses Elementor for multiple pages, get used to working with templates, global widgets or global sections/templates. Work with templates, global widgets and “global sections” The desktop settings for the background image do not fit for mobile, with a few clicks you can change how the image is positioned on mobile. Take for example the hero area of our homepage. Or remove the background image on mobile by uploading a transparent graphic for mobile.Or you could upload a resized version of the image for mobile.Change the positioning of the image on mobile.There are several ways to customize background images: If you work with background images on sections you might realize that it does not look good on mobile. Most importantly is font size, but all other typography properties are customizable too. The style of headline and text widgets can be customized. The Typography settings are another source of potential issues on mobile. With a few clicks, you can center the content on mobile only. It looks great on the desktop with content left-aligned, but on mobile not so much. Take for example this newsletter/social follow bar. In some cases, it can make sense to center content on mobile. Change content alignment and font sizes for mobile If there is no other way of getting your page mobile-ready, go for it. You may have a page with 50 or more content widgets, managing the responsive settings individually can create lots of overhead. Whenever possible, avoid hiding elements on the widget level. Especially on large pages editing can get quite complicated. Every time you edit your page you have to think of desktop/tablet/mobile separately.

I would argue you should be cautious of using these powerful features to often. To come back to my previous example I could decide to hide my picture on mobile completely. In addition, you can also hide individual elements. You can customize paddings and margin on all elements. Avoid responsive settings on widget level when possibleĮlementor is powerful by providing the possibility to position every element as you like. The magic slider is called reverse columns. On the inner section holding the two columns, I can edit the responsive property under advanced. Elementor comes with a handy feature to change that. For our contact section, I do not want to have my picture shown first. Sometimes it looks weird when the exact same order of content is applied on mobile. Keep in mind that it is important to apply the exact same paddings and margins for all sections and columns for mobile, that will lead to a consistent experience. 5%).Īs you can see in the example above, with a few small edits the page looks better on mobile within seconds. Then start adding paddings on content columns (i.e.Add margin on the main section holding the content.Set padding and margin to zero for all sections/inner section and columns.If I switch to mobile you can see that the margin and padding settings are empty and that it looks ugly on mobile. There are multiple paddings and margins applied on section and column level. In this screen-recording, you can see our contact section from our frontpage. Elementor does not automatically reduce or compute a fitting margin/padding setting for your page. The number one thing you should fix is the padding and margin settings for your sections and columns. Change Padding and Margin Settings for mobile This list of tips is the result of building lots of pages with Elementor for our clients ( and our own, of course). The reality is if you apply a few mobile-specific settings you will land at an okay-ish page within minutes. It looks like a lot of work to fix all this. In short, your page is barely usable on mobile devices and you need to work on the responsiveness of your page. Sections are stretched and lots of white space is added, that leads to lots of scrolling, images take up large parts of the site, the font size is too large, and so on. So you built your beautiful web page with Elementor, and now you are a little bit shocked after viewing your page on mobile for the first time.

Elementor image carousel not working