loading...
Cover image for Adobe XD to Fully Responsive WordPress Site

Adobe XD to Fully Responsive WordPress Site

adriantwarog profile image Adrian Twarog ・2 min read

Converting an Adobe XD design by actually coding it by hand to work with WordPress and be fully responsive is no small task.

If you are interested in what it takes to move a design from just UI and develop it manually, including all the steps if literally starting with a blank canvas and coding out every container, class and style, I take you through the entire process here.

Included in this video:

  • Installing WordPress
  • Adding Understrap theme builder
  • Preparing the theme for usage
  • Developing the code with HTML from our design (Header, Hero Banner, Sections, Footer, etc)
  • Adding styling to our code using CSS
  • Adding responsive design

This is a slightly longer video, but hopefully, this video gives you insights into the whole process of how a design to development job is normally completed.

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

@adriantwarog

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!

Discussion

markdown guide
 

Thanks for sharing the super comprehensive tutorial on how to convert XD design to WordPress. We at Fantastech provide this as a service, but follow different workflow and prefer to build sites using a base theme and a builder like Beaver Builder. That makes the development process super fast.

 

Dude, I HAVE to see this. Im just commenting here to remind, also saved he post.

I'm really interested in this.

Have you tried frontity?