Xd to Elementor // Website Design Integration with WordPress



This is my process to take a website design from Adobe Xd and bring it into WordPress using the Elementor Pro page builder.

** Links:
IG:
FB:
TW:

** Time Code:
0:00 – Intro
0:50 – Edit: Plan for this and the next video
2:01 – Four steps to go from Adobe Xd to Elementor Pro
2:45 – Analyzing the design in Adobe Xd
3:08 – Selecting the colors from the design
3:47 – Selecting the typography elements from the design
5:47 – Building the design system in Elementor Pro
6:06 – Setting up global colors in Elementor Pro
7:00 – Setting up global fonts in Elementor Pro
7:51 – Setting up global typography in Elementor Pro
9:33 – Styling buttons and form elements in Elementor Pro
10:31 – Bringing visual elements and images from Xd to Elementor Pro
12:38 – Designing global header and footers in Elementor Pro
12:55 – Designing the website pages in Elementor Pro
17:10 – Wrap up and planning for the pre-launch checklist
18:00 – Question of the Week

Tags:
#akamaiwebsites #markmoran #webdesign #adobexd #xd #wordpress #elementor #elementorpro

21 comments

  1. What is your favorite page builder? I love me some Elementor, but I've used Divi, Beaver Builder, and lately I've been working with Oxygen. They really help to speed up my web design workflow (although some of my coding skills are getting rusty). 🙂

  2. Hi, the video was very helpful, but what I really would looove to know is THE GRID in XD. You already know that you're going to build the website with elementor so you must create identical GRID system in adobe XD so that all the elements such as font sizes and spacing would correspond.? How to prep your XD file for elementor, that's my question?

  3. Arrrg! Yes – you are a super web designer, but a bit lacking as a TEACHER. You know this stuff so we’ll, and it is second nature to you, you fly through all the “simple stuff “ the new users need to know. You went so fast pulling over fonts & colors in XD all I could see was a blur of panes appearing one the left column with the mouse flicking so quickly on the right colum I quickly got lost, and gave up. Personally I think this “tutorial” (like so many on YouTube) was more of a show case of your work. Thanks for the effort… just wish it could have been slower and actually showed how do the steps,

  4. This is really nice. However, I curious as to what you may be doing exactly during the time lapse. I have attempted to slow it down. When styling the buttons, I am assuming that you are taking the settings/parameters from XD and applying them in Elementor, but can't seem to match what you are looking at when you changed the border radius and padding. I am new to web design, I sure it click via the walk through.

  5. I would have loved to see how you actually did anything. Instead, you sped up the XD processes so much that it was a blur to try to see what you were doing, making this video frustrating. You could have shown one or two at a normal speed.

  6. Thanks for the video , its help me a lot to structurize the work flow on Xd before going to Elementor, and this make the job on Elementor faster and easier. Thanks Mr. Mark Moran !

  7. I am hoping you can explain why you chose your process: Why did you replicate in your site settings the Global Fonts and the Theme Style Typography Settings. You replicated H1 – H6 in both places – why? What is the advantage of doing this? I usually never use the Global Fonts because when I designate something as an H1-H6 that style is already set when I set a title as a header size. Also as a note, I have found that when setting the link style that buttons and menu styles get overridden more times than I would like to mention. Is there a way to avoid this? In XD, to save yourself a lot of time – !Name Your Layers! – I work for an agency and our designer does not do this, when you mark for export they will use the layer name. Automate that process and you wont have to rename the images after the fact.

  8. Thanks, this has been super helpful. I have a question about recreating a webpage in Elementor after originally building it in Adobe XD — when creating the design in XD, I am very careful about the spacing between all the elements so that everything is super precise and professional looking. However, when recreating it in Elementor, I don't see an option to enter the specific spacing of elements unless it's the size of an image. Do you just eyeball everything in Elementor by playing around with the margins/padding? Or is there a way to input the specific pixels/etc from XD to Elementor? PS. I'm originally from Maui — love seeing Hawaii represented!

  9. I saw you added some Additional custom CSS using the inspector to view which elements you were editing. My question is why did you not just use elementor to individual style those elements since it was in one place? or was it a global style that you implemented?

Leave a comment

Your email address will not be published.