Cover image for Adobe XD to Wordpress | Full Development Process for Making a Website

Adobe XD to Wordpress | Full Development Process for Making a Website

adriantwarog profile image Adrian Twarog Updated on ・3 min read

This tutorial is long (4-5 hours) but will cover everything required for developing every aspect along the way. We will start with an Adobe XD design for Desktop, Tablet and Mobile, with the home page and subpages, and see exactly what is required to build all the elements out.

I spent a lot of time on this, so I hope you like it.

Full Playlist: Adobe XD to WordPress

This is the process for developing a full website, including converting all images, making sure it's responsive and integrated with a CMS like WordPress takes a long time.

In this video, we cover topics such as:

  • Exporting Elements from Adobe XD
  • Installing WordPress and a theme builder
  • Setting up our theme file in CSS / SCSS
  • Creating our Header Navigation
  • Creating our Home page content
  • Developing a Footer
  • Adding Responsive design to all elements on the page
  • Ensuring a Tablet and Mobile design based on XD

I also have timestamps for this video which will include:

I have also put together a second part to this series where I built out the other parts of the website. See part 2 below:

Part 2 | Adobe XD to WordPress

In this video we cover:

I hope you enjoy the whole process. I will be doing another video to talk more about the development of this site for those who want to follow along!

Part 3 is on it's way...

Follow and support me:

Special thanks if you subscribe to my channel :)

Want to see more:

I will try to post new great content every day. Here are the latest items:

Posted on by:

adriantwarog profile

Adrian Twarog


My goal is to make useful and helpful advice and content that will help others! New content everyday, please leave feedback if there is something you want to see!


markdown guide