How to match the layout size of Adobe XD to Elementor?

[Rovelyn26075515w8vc]

May I ask how to match the lay out sizes of Adobe xd to elementor??base on mock up they give??

<Title renamed by moderator>

[HARSHIKA_VERMA]

Hi @Rovelyn26075515w8vc,

Thank you for reaching out. I am checking with the team regarding your question and will get back to you once I hear back from them. 

I am keeping the discussion open for our experts if they have any suggestions for you.

Thanks,

Harshika

[Dan Rodney]

Is there a specific kind of thing you're trying to size?

Some things will translate into pixels while others should be percentages, vw or vh. It all depends on how things will need to change as the window resizes. Some areas will end up being margins, padding, borders, etc.

I'm not sure if that helps, but maybe you can be more specific?

[Rovelyn26075515w8vc]

Thank u so much!..now I know thats how its behavior..hmm for example ..in button..with 23px..its not look similar on web..

[Rovelyn26075515w8vc]

how to set lay-out width and height .and spacing from adobe xd to elementor..for example in this 3 column..the spacing of the box in the web?

thank u..just begenner..i dont know if it suppose i just suppost to copy it or not.

[Dan Rodney]

Converting a design to code (or in this case elementor is coding for you) is a bit of its own creative exercise. There's not just one way to do it. In this case I'd have 3 equal size columns with images that are centered in each column. At some point though you'll have to make things change for smaller screens. How you handle that (images scaling or not), how much space you allow around the image, etc. is all the "creative" part. It the designed size, the width/height should match the design, but how it changes at other sizes will all depend on how you build it. Sorry if that seems a bit vague, but there's not a one size fits all answer. It's not as simple as copy and paste.

[Dan Rodney · Accepted solution]

For something like a button, you'd use the font size (23px here) and then add padding.