Adobe XD to WordPress Tutorial

in today's video I'm going to show you how I turn in Adobe XD design into a functional WordPress website [Music] hello everyone and welcome back to my channel my name is Megan if you have not been here before thank you so much for coming I post every Wednesday and Sunday and I have been designing for about seven years so I love to talk with you guys about graphic design the graphic design world the trends all the things I'm learning and what it's really like behind the scenes to run a graphic design business on your own so really hope that you guys stick around but thank you so much for coming to this video I'm going to be sharing with you all how to turn an adobe XD website design into a functional WordPress website so first things first I wanted to mention why the heck I design on WordPress because there's so many website platforms out there and I know it can get a little overwhelming when it comes to choosing which one to use for your clients so typically I always design on WordPress I am pretty flexible with my clients because I know some clients have already locked into a platforms such as Squarespace show it Wix whatever it is so I'm not going to be super strict on if I'm forcing them to be on WordPress however if they come to me and ask for advice I'm definitely going to push them to consider using Wordpress and I'm going to share with you all why so the first reason I love WordPress is one it's so flexible there's no platform as flexible as it because you basically own your website that is one of the reasons I love the flexibility of it if you decide you don't like the Hosting account you're on it's so simple to just take a backup of your website and start up a new Hosting account so you don't really have that option you can't go from Squarespace to Wordpress you'd have to redesign the whole thing so I love the flexibility of switching platforms if you ever have to do that and by platforms I mean hosting accounts so that's one of my biggest reasons I love it is you basically own your website you can download your database and you can put that anywhere you please second reason I love WordPress is that it's affordable I mean I think there's so many platforms that are amazing but there comes a price tag with that and I love that WordPress you can make it as complex of a website that you want or you can make it super simple but at the end of the day you're paying for the complexities that you're going to be adding to it instead of paying for a package and a platform that maybe you're not going to be using all the features it provides so I love that WordPress you purchase the Hosting account that fits your complexity and then you can make the design as simple or as complex as you please and I love that so much that's also a reason I love the flexibility and I also love the way you can make a super custom design and you really have no limits with it there are just a few of the reasons I love WordPress there's so many other reasons I've made lots of videos on it and I also have a WordPress course if you're interested in checking that out I would love to share that with you all I'm actually currently working on updating the course adding new lessons to it so definitely check that out out so you can see when I add those new lessons but now I want to hop into me actually designing a real client website so I was working on this today we are planning on launching her website we are going to do it at the end of this week but I think we might we might wait a little bit because there's quite a few things that we still have pending like some blog posts and freebies some certain items that we want to include on the website but I figured this is the perfect time to show you how I'm preparing the website for launch and also I'm going to show you how I build a website page because I still need to create her Links Page to use on Instagram kind of like a link tree but a custom link tree page where she can have all the places she wants her Instagram audience to go to or Pinterest audience so I will be designing that with you all today super excited I love how this website came out it's definitely right up my alley I love her business I just love everything about it so with that said let's hop on over to my screen recording and I'll talk through some of the things that I'm doing before I hop over to my screen I have to share with you guys my little friend that is here with me today because he is super cute sitting on my chair he totally took it over and he's like legit laying on his back he's so comfy he's living the life okay guys I just logged into siteground which is my favorite Hosting account to use with WordPress right now I mean that might change down the line it used to be Bluehost for me but they got so saturated with so many people on their platform that I felt like my website speed just wasn't up to par and how fast I wanted my website to be and so that's when I did some research and my good friend I was actually using siteground and highly recommended it because the customer service is so good if you have any questions at all they're very quick to respond to you like right away so that's huge especially if you're going to be doing this for a client because if one day you're not there to help them they can easily utilize the support on siteground so I do have a link down below if you guys want to check outside ground um I do love it so this is where we are building and we're holding her website so she actually just allowed me to be a collaborator on the website which is something really cool that siteground allows you to do so if I go over to my collaborations I'm going to see that we have the two websites right here so I'm going to click on site tools and I'm going to show you guys what I started so far on the actual development part of Wordpress and then I'm going to also compare it to the Adobe XD to show you how similar you can really make your Adobe XD websites to a functional WordPress website because I think sometimes that can be the problem with creating a custom website is it's not easily convertible meaning like you can't develop it exactly the same but we're able to do that on WordPress because it's so awesome to go over to Wordpress install manage and then I'm just going to log into the dashboard from there and this is what I have set up so far so I'm just going to kind of walk you through what I have installed I have Divi installed of course because that's how I build the websites that's the platform I use to do that I have a coming soon page on which I'll show you what that looks like right now [Music] because we are not ready to launch yet so we gotta want to make sure we have something there in case anyone goes to that domain so we also need to change the favicon which I can show you guys how to do that but this is what the website's showing right now um also there's lots of other things and that's why I created a course on this there's so many things that go into making sure that your name servers are set up right for WordPress and siteground and making sure that your domain is SSL like you have an SSL certificate there's so many things to do before you even set up your WordPress so um I go over all that in my course and yeah there's a lot to it so it's hard for me to go over in just one YouTube video but I also have yoast installed I'm going to uninstall this Pinterest tags because it's actually not really working it's not a good plug-in in my opinion and then I also have a cash plugin installed because when we're doing a lot of revisions on the pages and that's actually one reason I love to design on Adobe XD before WordPress because WordPress stores a lot of your revisions so if you're doing revision after revision your website can get really weighed down but crashing allows you to clear out a lot of the held revisions allows you to clear out all the things that maybe you're not using anymore so I have that installed and I can always access it from up here by just purging all um that way we're not loading anything old okay so that's a little bit of the dashboard now if I go to visit site we'll see the actual website design which I'm so happy with how this is coming together it's so fun loving it um yeah so I figured I can show you guys how to actually develop one of these Pages I'll just like kind of redo it with you all and then I'll also show you um how to create a brand new page and I'm going to do that Links Page with you to do the link tree so first things first I feel like I'm a little all over the place but I do want to make sure I get that favicon updated before I forget so to do that I'm going to go over to the drop down here go to theme customizer that'll pop open this customizing option and then we're going to go to general settings site identity and then you'll have a site icon option there I might have to resize one create one for her but this should work and we'll see if that works yeah it's a little too small um let's see I actually have a logo for from her this is why it's so good to send your clients logos if you're doing their branding and stuff so good to send the logos in all color options because I will likely be using a filled in color option which we didn't think we needed at first but you'll need it for things like this so just pulling that up over here I also saved the icons separately if we wanted to use one of those but those are still going to be really hard to see um I was thinking of her sister brand as the one where I have the icon colored in but let's actually try out um I guess it's better to have a lighter version so let's try out this one and it might actually crop it that's the problem with let's see see what that looks like yeah that's still not working okay let's try the light version of this all right we're just going to leave that for now I'll probably come in here later and change it but it's fine okay going back this is just the website I have built and I'm going to open up the Adobe XD to show you how similar I was able to make them to each other I opened up my Adobe XD so I'm going to pull that in right here and I always first things first when I design on wxc I like to set up the document assets with the colors character Styles the logos and all that so I'm going to zoom in so you can kind of clearly see how similar the website is to um the actual Adobe XD mock-up so this is technically a mock-up this isn't Technic this isn't really a website design it's more of the mock-up and it's kind of hard sometimes some clients don't understand why like these buttons don't click and why um this isn't a functional website yet but I typically just like to tell them this is just the mock-up to make sure we like the look of it before I make it super functional and optimized for your business that way we can edit customize the design and do anything we want to it um yeah so I always try and explain that to them but um anyway so I basically just already developed all of this but I was gonna show you guys and I'll design the link page with you actually that way I can save us some time too or else I'd be here all day long showing you how to do this um but yeah so let's create the Links Page so this is everything I've designed and you'll notice I have the visual Builder option up here which is how you can do really awesome visual building customization on the front end because sometimes when you're on the back end it can be a little confusing on customization on WordPress so that's one of the reasons I love Debbie is they have this visual Builder which one I open you'll see all the options to hover over something and edit the text all that really cool stuff so love Divi for that reason but I'm going to exit this we're going to create a new page for the links so I'm gonna go over to dashboard and I'm going to go pages add new and I already started one but I'm gonna create a new one with you guys so you can see exactly how I do this [Music] okay I'm gonna call this one Instagram [Music] okay use Divi Builder and you'll notice I have the yoast installed so there's a lot of cool SEO things which is another great thing about WordPress is they really guide you with that SEO okay we're gonna build it from scratch so the header and footer is global so that's going to show up on any page every page that you want it to be on for the Instagram Links Page I actually might not want the header and footer sometimes it's nice to just have it go straight to the links and you guide the audience where you want them to go so I'll show you how to do that in a minute but I'm going to basically make this entire section a image a parallax image so we can kind of get the design going from there so I'm going to open this up and let's actually just use an existing image like this one's pretty cool open that up in there and then if you're like this is way too skinny like I need that to be a lot taller um first I'm going to turn on Parallax so that way we can really see what we're doing um either one works CSS holds this image still and then you scroll through the image but true Parallax just kind of makes the image flow with you so in order to increase the spacing on top and bottom I'm going to go to padding and then hit 100 or both top and bottom and you'll notice like the image is not showing up properly probably because the Parallax but we can play around with getting that perfect we might need to select a different image let's try that one okay that that might work for now um you can also adjust the height on the page itself if you wanted to do that makes it really fun to kind of play around with okay now I'm going to add a section to and she kind of showed me what she wants this to look like that's why I'm just jumping right in and I know what to create but she did want a section that kind of overlaps the logo here and just like makes it look really pretty so I'm gonna add a background color and I did not set up the global colors yet which we really need to do um which I can show you how to deal as well but I'm just going to go over here copy the color paste the color and there we go now I'm going to add I'm actually going to change this to a different column structure like this and I'm gonna add in the logo in the center there and let's do let's do the dark logo see how that looks go to design sizing we'll make it a little smaller okay and then to overlap these sometimes I'll just actually grab make sure that there's no spacing on top and bottom and then you'll see if I hover over the green right here if I pull it up it's going to overlap it and you might be wondering like how is that going to be responsive how is that going to like work on mobile well I will show you how to fix it on mobile and this is actually pretty responsive like if I shrink the page increase the page it's still going to stay the same mobile is the only thing you really need to worry about so click those three dots click on mobile and you'll see yeah it looks a little different so I'm going to click on the icon go to design sizing with click on width it's not going to allow me to do okay well usually it allows you to oh there it goes usually it pops open this where you can hit desktop versus mobile and you could shrink the sizing for mobile there okay awesome so let's go back to desktop let me save draft okay there we go and now I'm going to create another new section I like to do section by section that way I can change background colors if I want to we're going to open that up and we're going to do one like this so I can put image on this side text on that side so let's add some text there and I'm going to show you too I can add a code to make all the fonts look the same across every page add that image let's just add images we have for now we can always change that later and I'm kind of just playing around with the sizing to match the inspiration that she sent me okay so for this I'm going to put link so that she knows to add a link there okay now let's go find the right font for this which this should this code will help us automatically have that set up I'm gonna actually increase the sizing Link Link Link Link and then I also want to background color you can change the background color for the whole page by clicking on the settings background Global recent it'll change it for the entire page if you do it like that okay so that's good for now I'm gonna go look back on the inspiration and make sure that I'm making this look kind of similar to how she wants it okay guys I'm gonna change this up a little bit because I feel like it's not breaking up the page enough so I'm going to go to enable visual Builder again and I'm actually going to change the background color here to just white um and let's see maybe I can add [Music] a background I'm just playing around with it now those global colors will save you so much time I don't know why they're not in here yet but I did have my developer help me with some of this so we might have just completely forgot on it but that's okay okay let me see if I can get a rounded border okay that's not gonna work so I'm just going to leave it how it is for now but what I'm going to do is I'm going to play around with this area here and there's actually an option to do like a really special kind of layout if you wanted to do it like that so I'm actually going to look into this because I think I want two images on one side so let's play around with that and you can also it's kind of cool but you can also going here and set a column background foreign [Music] let me delete this image there's lots of ways you can like change up the design of this I'm actually going to remove that and then you can you can change the sizing of this entire row if you wanted it to be wider if you wanted to make it stretch maybe the whole page you could do that so I'm just kind of showing you around what Divi offers but let me see if I can add in a couple images here make it look pretty cool [Music] [Music] foreign [Applause] [Music] [Applause] [Music] [Applause] foreign [Music] foreign [Music] [Applause] [Music] [Applause] foreign [Music] [Applause] [Music] [Music] [Music] [Music] foreign [Music] [Applause] [Music] foreign [Applause] [Music] [Music] [Applause] [Music] [Applause] [Music] [Music] foreign [Music] [Music] foreign [Music] [Music] okay one thing I wanted to show you guys now that I built this this page or at least the start of this page we need to add in all these links is the options to set up the global colors and just show you like the global footer and header that I create before I do anything really so if I go over to Divi theme options I'm going to see color picker's default palette which is exactly where I want to enter in the colors that I'm going to be using so I'm going to head on over to my Adobe XD copy in all these colors and it'll automatically pop that up on every page and then I'll also show you guys how I add in the global font um okay so I'm just adding in all of these colors to make sure that we have them set for every page okay and we don't have that many colors in this palette so we're probably just gonna leave those other colors there sometimes I like to select like a white color and like a black color just since those are you know Common colors to use and then I'm going to save changes it's perfect so yeah I really like having the option to add those colors in so I'll show you once I go to the site now if I go to enable visual Builder and if I open up let's say this text and if I go to heading 2 you will see whoops zoomed in um you will see all those colors right here which is awesome so that's how you set those global colors or the default colors for the website um and yeah I mean I love converting Adobe XD into WordPress I think having the design on here first allows a lot more customization and it also allows me to potentially send this to developers if I want to move on to my next project without worrying about you know converting this into functional but super happy with how this website came together it definitely mimics exactly how I wanted it on here looks exactly the same which is always the goal but um yeah super happy with it so that is how I turn Adobe XD mockups into functional WordPress website designs I really hope that this was helpful if it was please let me know by commenting down below or giving this video a thumbs up it really helps when I get your guys's feedback but I had so much fun designing this website I'm so excited to launch it and get this out into the world it's been so fun to create but I really just wanted to show you how exactly I create these custom websites and also why the heck I use WordPress because I know that it can be so overwhelming but as I mentioned earlier I do have a WordPress course because I know WordPress itself can be a little bit of a learning curve but I know you guys will understand and learn it really quickly but if you want some guidance I do have that course so definitely check it out I'll leave a link down below it's always down below so definitely check that out but thank you guys so so much for watching this video really hope you enjoyed it and I cannot wait to see you in my next one blinds [Music] I had a reach for the city lights [Music]

Channel: Megan Weeks

Views: 17,210

Keywords: adobe xd, adobe xd web design, adobe xd tutorial, wordpress tutorial, wordpress, wordpress website, wordpress full course, wordpress tutorial 2022, adobe xd to wordpress

Id: 9ZbJ8-x8XfA

Length: 30min 8sec (1808 seconds)

Published: Wed Nov 02 2022