How to Add Top margin values in % and left margin in px in Elementor, like WPB

[harshwe]

Hello Luke,

1. How can we Edit different types of Margin or Padding values like we can do in WPB.
Means, in WPB, we are able to change the Values of Margin in % as well as in px or VH within same Row Edit box for any one Row or any element, within, at a time.
https://i2.paste.pics/HOHSQ.png

How can we do the same way in the Elementor.
I tried, but when I enter -6% value for left and right margins (in % option), then I switch back to px option and try to enter -35px for Top and Bottom, then I found that values that were previously entered in % option, got disappeared. (removed). Even if we have clicked on Update button.

Am I doing something wrong. Is there some other way to enter values in different units in Elementor for Section or other elements

In short, how can we set Top and bottom margin of any Row (or widget or element) in pixels (px option)
And how can we set Left and right margin values of that same Row or widget in % (% option)
https://i2.paste.pics/HOHWS.png

2. I could not find the VH, VW option while editing any Section, column or other elements to adjust the Margin and Padding values accordingly in VH, VW. Are those hidden somewhere. Or do I have to set from some other area. Or those have been removed from Elementor completely.
PS: I am using Elementor for the first time ever, and using the latest version.

3. Do ROW in WPB refers to Section in Elementor
b). Do elements in WPB refers to Widgets in Elementor

Regards

• This topic was modified 2 years, 5 months ago by harshwe.
• This topic was modified 2 years, 5 months ago by harshwe.

Hello,

1. Seems that there is no way to make it at one time like in WPB.

2. Such options are in specific elements, the below video shows where you can see them.

https://www.youtube.com/watch?v=2Z1WnCFYsyQ

3. Yep.

Judging by the tab title in the Elementor, they are called elements also.

https://prnt.sc/bMLwCb4MZsJe

Kind Regards

Bit important:
Hello Luke,

1.

Seems that there is no way to make it at one time like in WPB.

I think there is some confusion. I asked about it for Elementor. In WPB, we can already do that by entering units.
https://i2.paste.pics/HOHSQ.png

2.

Such options are in specific elements…

Will check. Until then, how can we have VH, VW for Section (Rows) and Columns. I could not find those.
Is there any way.

3. Thank you. Great.

Regards

[harshwe]

Bit Urgent
Hello Luke,

In addition to my above previous message, I tried to create the same Slider and Slide (on Staging2 site, after importing Decor Demo content), the same way, it is on the Live site.

4. In staging2 site (creating with Elementor) I found that in the Column settings of the Slide, under Adv > Responsiveness

That is for the Right Column, the Hide on Mobile option is set to OFF (Not enabled). Even after that, the Right column is Hidden on mobile devices (not showing). This happened with Demo Content slides also (from Decor demo)
https://i2.paste.pics/HPOJ3.png

a) Although I wanted this way only (to hide right column on mobile), but how and why without Enabling this option, the right column is Hidden for Mobiles, by default.

5. I matched every Slider setting, then the respective Slides setting from Live site, to the Slide of this Staging site.
This is how it is correctly displaying on Live site (with WPB), and how we wanted –
https://i2.paste.pics/HPOE5.png

This is how on Staging2 site (with Elementor)
https://i2.paste.pics/HPOAQ.png

a) How to fix this. And have the edges of images of Slide, till the edges of Navigation arrows, that are at extreme left and right side of the the Slide (as shown in above screenshot)

-> We matched the settings of Slider and Slide that are in WPB(live site), with the Elementor (Staging2)
https://i2.paste.pics/HPOGT.png
-> The images are exactly same that we are using on both sites.
-> The site width and Slider height settings are also same.

This is one of the area, that is very important for us, as the Slide keep changing, but will be having exactly same dimensional images
For left column – as SVG image element (325x440px)
For right column – as BG image (750x500px)

PS: Left-right margin settings of Row are -6% set in WPB (live site), as well as -35px margin values for top-bottom

However, in Elementor, I could use only one, at a time. Is’nt it so. How can we fix this.
https://i2.paste.pics/HPOTC.png

In either case, how to resolve this, so as to have exactly same slider in Staging2 site, the same way, it is currently on the Live site.

PS: we are very eager to use the Elementor builder for our site, due to it being have more features, keep updated with latest requirements

Regards

• This reply was modified 2 years, 4 months ago by harshwe.

Hello,

1. In the Elementor you can set a specific value for the margin or padding (in % or px etc.) but not all together.

2. The sections don’t have such types of dimensions in the Elementor.

4. The thing is that the column doesn’t have any content so on mobile it has 1px of the height therefore you don’t see it. I suggest you add a “Spacer” element to the column so on the mobile it will appear.

https://prnt.sc/JUC0OACpI3QT

5. Please try to define options as on the below screenshot.

https://prnt.sc/dgV6y5OVRFXB

Also, try to stretch the section for the slider item.

https://prnt.sc/EfkDXgkeZr-6

Unfortunately, in the Elementor you cannot set such dimensions as in the WPB (in % and px at once).

Kind Regards

[harshwe]

Hello Luke,

1.

In the Elementor you can set a specific value for the margin or padding (in % or px etc.) but not all together.

OK, then, If we First set the value in % (for Top-bottom) using Elementor, then, can we set values in px units, using custom CSS. So as to have values in both units. That is, For Top-bottom in %, for Left-right in px. Or some other way. We only need for Woodmart Slider widget, as of now.

4.

The thing is that the column doesn’t have any content…

a) My point is, the same Slides with same setting is working on Live site (with WPB). And the right column on Live site is also Not having any such content (except having just the BG image set. But that too in both sites)
Point is, We have to set it to be Hidden on Mobile on Live site also in order for it to be hidden, otherwise, it then becomes visible, there on live site.

b) Most importantly, the same setting is in your your Demo Slides also (imported from Demo content). Please check Slides 1 – 3 on staging2 site.

c). Another important thing to note, is that, if that if right column is Not visible in mobiles, due to it having No content, then how come it is displaying on Desktop or Laptops. Technically this is confusing, because without setting Responsiveness settings (to be hidden on mobiles), it is actually getting Hidden.

5. The settings suggested by you, helped a bit. That is the BG image of right column is showing same (in full) the same way, it is there on the Live site (WPB)
However, after applying settings, I found that the Slider (on Staging2 site) extends extra towards left and right edges (outside of site width). Even more, that the actual width of the whole site. As can be seen from below

https://i2.paste.pics/HRFK1.png (even after applying settings, suggested by you, this is how it looks like)
https://i2.paste.pics/HRG66.png

Hence, wanted to know, how to fill the Slider Container gap, which is showing in Greyish-blueish sort of color.
I want the navigation arrows of the Slider, to touch the Slides images in left and right edges. As can be seen from below, and as they are showing correctly on Live site (using WPB).
https://i2.paste.pics/HRFK5.png

Would appreciate, if you could please read same point number 5 from my previous message (as well as here), and suggest what is actually missing now. And how to achieve this way.
https://i2.paste.pics/HRG66.png

PS: You can test in order to resolve this thing, and achieve as per our above requirement, on Staging2 site (Elementor). You can do whatever testing you want to make. URLs and Credentials already shared.

Regards

• This reply was modified 2 years, 4 months ago by harshwe.

[harshwe]

Good to Find
Hello Luke,

In addition to my above message, I think I managed to find out the Solution for one of the above issue. Please confirm, whether It is correct or not. For this point 5–
https://i2.paste.pics/HRR0R.png

Issue with the Solution-
https://i2.paste.pics/HRQUS.png
https://i2.paste.pics/HRQVU.png

However, the same Slider, on actual Home page of Staging2 site is showing correctly. As there is No such negative margin values for Left and right for relevant section or column
https://i2.paste.pics/HRR30.png

I think this is resolved, atleast as of now. Can you please look and confirm, whether this was the reason or not.

Please answer on 1) and 4 number points too.

Regards

• This reply was modified 2 years, 4 months ago by harshwe.

Hello,

1. In general it can be.

4. When the image is on the background of the column, the height of such column depends on the height of the nearby column (which has some content) – https://prnt.sc/9m6NyrqUV6u2.

On the mobile, the column with the background image hides because it is moved under the column with the content therefore in this case the column with the background image loses its height because it depends on nothing.

5. Well done, good job.

Kind Regards

[Author]

Posts