Elementor and Adobe XD are one of the most popular tools of web designers for starting up web projects. Elementor is a page builder that allows complete control of the interface from WordPress and one of the most used ways to bring Adobe XD designs to WordPress.
When building an Elementor website or a simple landing page using an Adobe XD design, you may fall on some issues. We organized useful info for when building an Elementor from an Adobe XD design.
Building from Adobe XD to Elementor
While actively building from Adobe XD to Elementor you will need to make some adjustments. Some of those adjustments are for convenience, some for security, and some are just best practices; they’re all optional choices.
- Use PNG instead of SVG
Depending on your website configuration, SVG files will need to be exported as PNG or JPEG, as most WordPress websites have the import SVG function disabled for security purposes. If you still want to use SVG you can enable the import SVG function on Elementor(This maybe need additional steps).
- You may need to use a custom plugin for building custom elements.
While using custom CSS and HTML is a great choice for performance, it may be best practice to use a specialized plugin for creating a custom element, such as vertical tabs or accordions. It will let your client easily edit the element later. Pick a specialized and up-to-date plugin for building those custom elements. This is a norm for hard-to-make responsive elements and animated elements.
- It may be necessary to buy an Elementor Pro license for building
Depending on the elements, you might need to use a Pro license of Elementor; elements such as slider, need an Elementor Pro license. For freelancers, it’s best to know beforehand, to give the client an accurate quote.
- Avoid margin, use padding
When building out your sections, avoid the use or margin and use padding instead.
- Reduce the number of sections
Use the lowest number of sections possible, this will greatly improve the performance of the website.
Building using Adobe XD
After and before starting a full conversion of an Adobe XD design to Elementor, you may face some issues and features missing from Adobe XD wich difficult building to Elementor. Here’s a list of those:
- You can’t center the text vertically in a text box.
- The Adobe XD line-height is different from the line-height of CSS.
- You can’t create a stack that grows upwards or to the left.
- There is no right-to-left text support.
- Text formatting options are very limited. You can not create a bulleted list.
- You can’t apply a border to separate sides of a rectangle, you have to draw lines manually to simulate it.
- You can’t make an inner shadow.
- The canvas artboard is not infinite.
- Imported assets are messy.
- You can’t customize keyboard shortcuts.
Sources: Reddit r/webdesign