Best way to build Adobe Xd to Elementor & 15 things about it

Updated on December 20, 2022 | By

Elementor and Adobe XD are one of the most popular tools of web designers for starting up web projects, including landing pages. Elementor is a page builder that allows complete control of the interface from WordPress and is one of the most used ways to bring Adobe XD designs to WordPress.

When building a full Elementor website or a simple landing page using an Adobe XD design, you may fall into some issues. We organized useful info for when building an Elementor from an Adobe XD design, and also the best way to build using Elementor

Best way to export Adobe XD to Elementor

download

One of the current best ways to export an Adobe XD to Elementor is by using the new Elementor Cloud, which is Elementor’s new product that facilitates all the work from building a new website.

Elementor Cloud offers an integrated platform to build and manage multiple websites, with the well-known Elementor website builder plugin.

It comes with hosting(hosted on Google Cloud Platform), CDN By Cloudflare, Custom Domain Connection, Free SSL Certificate, and Elementor Pro. Pricing starts at $99/year

Exporting from Adobe XD to Elementor

When exporting 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.

  1. 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).

  2. 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.

  3. 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.

  4. Avoid margin, use padding

    When building out your sections, avoid the use or margin and use padding instead.

  5. 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 notice features missing from Adobe XD which difficult to export to Elementor. Here’s a list of those:

  1. You can’t center the text vertically in a text box.
  2. The Adobe XD line-height is different from the line-height of CSS.
  3. You can’t create a stack that grows upwards or to the left.
  4. There is no right-to-left text support.
  5. Text formatting options are very limited. You can not create a bulleted list.
  6. You can’t apply a border to separate sides of a rectangle, you have to draw lines manually to simulate it.
  7. You can’t make an inner shadow.
  8. The canvas artboard is not infinite.
  9. Imported assets are messy.
  10. You can’t customize keyboard shortcuts.

Sources: Reddit r/webdesign