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:
- 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
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:
- 00:00:00 - Introduction
- 00:00:44 - Internal Page
- 00:33:44 - Contact Us Page
- 00:45:10 - Header Navigation
- 00:52:30 - Custom JavaScript Header Function
- 01:12:36 - Header Navigation Responsive Design
- 01:34:38 - Conclusion
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:
Top comments (4)
Rawr xD lol
I notice that it's not subtitled for the deaf and hard of hearing. I strongly suggest you guys be WCAG compliant. I wish I could understand what you're saying in the video.
Just saw that the second video is subtitled.
XD to WordPress Starting from 5USD.
fiverr.com/share/plwWxZ