Adobe XD to WordPress

Adobe XD to WordPress

The whole process of converting an Adobe XD design into a WordPress website. The process for developing a full website on WordPress, including converting all images from Adobe XD, making sure it’s a responsive website, and integrated with the WordPress CMS WordPress.

This tutorial adobe XD WordPress will cover developing that over 4-5 hours, and we cover 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.

This is how we do a wordpress theme development 2020 for those who are just learning, as well as using all the elements such as HTML, CSS, and making sure the UI and UX work as well as adding in animation and JavaScript, js.

00:00:00 – Introduction
00:00:43 – Part 1: Adobe XD Design Review and Installation
00:08:30 – Part 2: Setting up WordPress and Theme
00:13:10 – Part 3: Header
00:56:50 – Part 4: Home – Call to Action
01:13:55 – Part 5: Home – Responsive Design
01:47:00 – Part 6: Home – About Section
02:13:03 – Part 7: Home – Join Our Community Section
02:30:25 – Part 8: Home – Our Collections Section
03:08:50 – Part 9: Home – My Island Section
03:52:58 – Part 10: Home – Testimonials Section
04:22:56 – Part 10: Footer
04:44:48 – Conclusion

This is part of a series, and the next video can be found here which is:
Adobe XD to WordPress | Part 2

Design for Developers – Enhance UI
A book I’ve created to help you improve the look of your apps and websites.
📘 Enhance UI:

#adobexd #wordpress #tutorial

Follow and support me:
🐦 Twitter:
💬 Discord:
💸 Patreon:

About admin


  1. Keep it up Adrian and thanks

  2. I am trying to grow my channel, so if you find this video useful, #subscribe & hit the #bell 🙂 Thanks for watching and hope you liked and learnt something new!

  3. nice content, thanks 🙂

  4. I love this video! This is exactly what i was looking for. Thank you very much! Also I like your channel and your style!

  5. Awesome video! BEAUTIFUL design. You are doing a helluva good job designing and explaining the whole process 🙂

  6. Thank you for doing this series.

  7. Could you share the xd source for practice purpose?

  8. Ayodeji Ojurongbe

    Great tutorial Adrian. I have a little suggestion if you permit me.

  9. murilo matheus

    extremely helpfull Adrian! thank you very much man!

  10. Hi Adrian Twarong. Can you create a new video that connects WordPress to GitHub on Windows 10? I want to push my WordPress files to GitHub, but It's not working well on Windows. I found you have already used GitHub in this video. Thank you.

  11. Thank you so much!

  12. Sir which file copy in host folder

  13. Hello Adrian
    Beside you are so f*ckin hot, you are a great developer and teacher : )
    I'm really sad you only have 6k subs. Keep going and you will get 1M like Traversy .

  14. hey man i just stumbled across your channel i really like your videos. thank you for your efforts im a fan <3

  15. thank you bro…

  16. Ahmed Elborollosy

    Extremely useful tutorial to the level that let me wonder about why may someone make one dislike, by the way, my experience is 20 years.
    thank you

  17. What are the prerequisites before setting up your 'theme' for WordPress (Installation section)?

  18. Pavani Varanasi

    Hi Adrian, I am new to developing WordPress theme. Can you please tell, which host file you had there in part 1(installation and setup)?

  19. Sidhesh Shinde

    just what i was looking for. Thank you 3000

  20. Awesome thanks Adrian. Video has come at the right time for me. I have a large website that I'm building in to WordPress.

  21. im very new to this… i will try this lol 😀 is there a free wireframe kit for adobe xd to download?

  22. For some reason no matter what I do, when I run gulp it's just stuck on "Starting 'watch'", and I can't get it fixed in any way, I've used npm install to install all dependencies, still doesn't work. other commands such as compiling do work, only watch doesn't. Any solution?

  23. Emerson Creative

    Hey Adrian. Thanks for putting together this series. FYI – The link in the SHOW MORE section appears to a link back to the 1st video instead of Part 2

  24. I dont get xd. I got a site from a company with for a landing page in xd. Now is have to redo everything in wordpress, right? Whats the point of xd ? how to this help?

  25. Every time I write Adobe XD people think that I'm joking about something haha

  26. Hi.Can you give us the XD file as a resources

  27. shouldnt responsive websites be mobile first… using min-width instead of max-width, otherwise good tut.

  28. Thank you for your videos Adrian 🙂 Is it safe to play with fixed pixels height and width? Despite the fact of the media queries, it may brake down in some viewports, isn't that right?

  29. You videos are very helpful and help me a lot do have a video on woocmmerce

  30. Please make an easy theme without any complicated thing like saas.

  31. What are the prerequisites for this course??

  32. Is it possible to import Adobe XD design into WordPress and making an interactive website without coding?

  33. benjamin pastrana

    Adobe should create an export as interactive media instead for programming

  34. Extremely useful series ! job you are doing throughout your channel is just great , thank you Adrian :=)

  35. How would this apprach work regarding updates to the bootstrap core, is there no need for a child template when using _theme.scss for custom styles? Or the header.php//template-home.php/footer.php for that sake.

  36. Thank you for this tutorial. I am currently a premium WordPress member, does it cover …?

  37. hi i am going with same u shown to create custom theme but when m changing something in header and footer the changes not reflecting in output

  38. Mohammad Atikur Rahman

    Excellent work. Could you please provide the resources you used to follow along the tutorial?

  39. Hey anyone helps me, why page attribute dropdown is not showing my custom PHP file pages

  40. is there a way to complete your tutorial without using a host? Or is Dreamweaver something I can use?

Leave a Reply

Your email address will not be published. Required fields are marked *