Convert Adobe XD Web Design to WordPress page using X-Theme Pro

Convert Adobe XD Web Design to WordPress page using X-Theme Pro


hey now I’m welcome to another tutorial my name is Raddy and you’re watching my channel RaddyTheBrand in this tutorial I want to show you how to take an existing design which I actually did in the previous tutorial so have a look in the description below if you wanna check it out. Today we’re going to take that existing design from Adobe XD and convert it into a wordpress website using the team called X-Theme Pro – the latest version of X-Theme Pro actually allows us to use nesting & flexbox which will make things a lot easier then used to be before the latest version. If you enjoyed this tutorial or if you want to see more let me know in the description below give me the thumbs up if you liked the video and don’t forget to subscribe to my channel because you helped me a lot and last but not least if you decide to purchase the next theme please use my link in the description below don’t have me and my channel locked that’s it for now so let’s go to the computer and get started so let’s open the design that we’ll be building today in X-Theme I’ve done the design in Adobe XD and if you want to watch the full tutorial I will link down in the description below but basically this is what we will be recreating in Eckstein today hopefully xtreme3 should make things a lot easier now that we have the option to use flexbox everywhere I will keep this file open and by the way I have already extracted some of the graphics but to do this all you have to do for example you can select this you can mark it as export as you can see it’s already marked but you can unmarked it and then mark for export and then you can go here on the left side and find the export option and then you can do batch export selected or artboards and so on so i think in this case it will be best to do selected you choose the format and in this case i want the I want the phone not to have a background color or anything like that so PNG is the correct format then I would probably select for web then I usually select the 2x so I get a big image and a small image then I usually decide which one to use yeah let’s quickly export this in the desktop so I’ve exported this and as you can see has exported 2x image and a small image I’ll probably end up using the 2 X 1 2 X 2 X because then I can scale that down if I want to and hopefully it will look a little bit more sharper on the web but anyways this is how you export the images I won’t be using those icons so are we actually using the icons from X team so I won’t have to export to those icons I’ve already exported those two images of exporting the Gutenberg image as well and I already have the background image of the mountains exported so let’s go to the browser as I’ve mentioned before my website is using extreme which means I can use the cornerstone editor to update my pages super quickly Kotaro I won’t go through the whole setup on how to install like Steam is just to install like Steam is the same as installing ID any other team just follow the instructions and you will be okay but if you want me to make full-on video back about X team let me know in the comments below and I will be more than happy to do that if we go to pages and create a new page let’s name this one this basically the minimalist demo I want to make sure that on the page attributes we have the template set to no container no header and no footer and we don’t want a parent page or order so let’s publish this quickly then if we click on edit with pro edit with pro again that should open the pro editor and then we can start building the website so the first thing we’re going to look at building is this error we have the text on the left side and we have the mobile phone on the right side so we can technically split this into one big section with two columns with eco weights so if we go back to the browser I can add a new section by clicking on this plus sign here then on the newest version of x-team Pro we have these options which you have on the old one as well but in this case we actually have the option of flex box which will make things a lot easier but if you don’t have the option of flex box don’t worry you can either do custom codes or is padding say margins I guess which isn’t perfect but it’s an option so let’s choose the layout with the two columns and as I said in the first column I will have the text in the second column I will have the mobile phone which is here let’s click on the section and at the background so to add the background image goat in the here background click on advanced and then this will open those two menus and we actually want a lower layer image so I’m just going to click on this and select an image and as I said I’ve already extracted my images so this is the image that I need and this is perfect it’s already covering everything is set to cover and Center which is exactly what I want but also I want to make sure that the height of this is if we look at and ext I want the height to be around 100 percent of the height of the window or maybe slightly less so people can see that there is scroll I haven’t started yet but let’s go for something like 94 now let’s go back to the browser and what we can do is we can actually write custom code in here and the customize and you can either write in 9 CSS or you can write element CSS in here and to write element CSS in here it’s actually explain it here what we have to do is put the dollar sign and now as element and then you can just write the CSS that you want so in this case I want to set the height to 90 VH and this I don’t know if this is good enough maybe maybe I can go even 98 just let’s even go hundred let’s go home just for now but maybe we can add a little icon that there is crow or maybe just such a little bit less than hundred and let’s close this now if you remember in the XD we have the title which I’m probably going to change not sure about this 100% so I’m just gonna copy this for the demo anyway and go to elements and insert a heading so headline let’s drag the headline in here and as you can see the text is looking super small but if we click on it let’s click edit text paste this in here and I’m just gonna hack this super quickly and just put a br breakpoints so it breaks the text into lines and also we need to change the text to be h1 and I want the M to be I don’t know maybe maybe around free we’ll see how it goes in a second but I also want to change if we scroll down I also want to change the font family to be set to headings which will use the already preset fonts on this website actually I did another I can just change the font type from here maybe I can do oh this is the base font so maybe I can do that as one and leave this one is free I will leave the spacing as days and also the phone wait I want it to match my design so that’s 700 which is bold let’s change the color to white and also if you notice on my design uneasy everyone here if you notice on my design actually have a little bit of a drop shadow here so I’m going to try to mimic this drop shadow as much as I can if I click on the text scroll down you can see the text shadow in here what I can’t do is give it’s one to read so let’s make this black give it a little bit of opacity here and then we need to put the Y offset maybe my 3 pixels we need to blur it a little bit just like this and I know I felt like this let’s see this is this is just okay I can always mess up mess with it and make it a little bit better but something like this will do and let’s now add the second text which is which is this here this text here I will copy this and then I will go to element and type text I will just drag and drop the text and then if here am I give the actual heading a little bit margin so it pushes the text below a little bit and for the margin just scroll down in here you can do if you unlink this it will give you the option to do margins on different margins on the inside so for example I might want like to them one am I think 1 M will do and I can just give each side individual values now obviously we need to change this text to be white so let’s scroll down the font family is set to inherit which is correct or I can just put as body type regular is fine let’s give it a white color and maybe the form x can be up to one point four for one point to something like this should be okay I’m not too first about replicating the design exactly as it was in Adobe XD because I’m still gonna mess around and improve things as I go along we are good here let’s quickly add the phone so we need an image element let’s drag that into the right side select here the source the source is here now this is set this is quite small so we need to click on this I in here which will make the image a lot bigger which is what exactly what I want and maybe I can change the max week to be slightly smaller and maybe in fact something like this would do so the max weight set to 60 syndra pixels so it’s not gonna go above that anytime soon I also want to make sure that the foam itself is centered aligned on the column horizontally and vertically and this is the new great feature in in the latest Extreme Pro you can actually use flexbox so if i click on the column let’s find where x flex boxes and flex box is hidden under here and the set up and at the moment is off so we need to turn that on and it’s going to open this many first which is awesome and what i want to do is align horizontally set to center as you saw i moved in the center of the column and I want align vertically to be set to center is wrong you didn’t see a move because the phone is quite bigger thing and it was kind of already in the center but it looks well but trust me on this one it is in the center now oh it should be now this is great I also want to do the same thing for the heading and the power of paragraph in here so let’s click on the column the left side column turn on flex box layout and I want to do align horizontally I want to have this to set to the start and align vertically I want to set this to Center which brings the text in the middle just like on the design that we have in Adobe XD so far everything is perfect I could do this circle in three ways I can either export separately or work in export actually as the background which I didn’t do alia so but just to let you know you can export this together and do it as one background or you can just explore this separately or maybe just like positioning in fact let’s export this super quickly right-click mark for exports let’s go to export selected and I’m just going to choose desktop again and let’s go here and this is the one I want but also I want to every time I upload something on my website a one more website to be fast and I put a bit for a quick pee and geez I like to use the tiny PNG JPEG and PNG compression website we have to do is actually just drag the image that you want to compress and then click and then if you see in here it was hundred seventy-nine kilobytes and now I stir it in kilobytes which is absolutely insane and now I can download this my website should my webpage should load a lot faster so now that this is downloaded I will have to find it under my download but what I can do is if I click on the section hopefully I can then select the upper layer background in here click on the image and I need to find the image that I just downloaded so give me a second I think should be and download let’s drag that in okay so we’ve got this image let’s insert a and as you can see it’s a set under cover and center ideally we might have to remove the size and for the position we might have to do top and then right which then positions this image positions this background image to the top right and it does the effect that we have on XD design now we can always give it we can also change the size in here and make it the one we like so hundred 400 pixels should make a little bit smaller as you can see but this works really well and so on so just keep playing and see what you like and what you dislike and so on so this is awesome so far obviously on mobile we’re going after just a little bit but yeah so let’s continue and by the way make sure you save your work when you work in Adobe XD sorry in when you work in X team and just test it in the browser to see how it looks so as you can see the circle looks a little bit off but that’s okay I can just maybe remove the pixels save it and go back just refresh and that looks a little bit better to me but anyway let’s move on you’re probably now wondering well how we’re going to do the buttons because we have flex box now set to align left’ vertically aligned to Center the buttons will be a little bit tricky to do so we’re actually gonna have to nest another row in here and let’s do that so first of all let’s go to sections actually let’s go to layout and inside this column here if you select it you will see the plus sign if we click on this we can now the we can now nest a row and as you can see it it gives us a lot options so in this case I’m just gonna go for the full width and then I can just drag my button here let’s try a button here and the first button you know design was red and also in my extreme I’ve already have a few presets that I have I use globally on my website so what I’m going to do is actually apply the red preset which is big red button and apply but you can create this super easily just by changing the background colors give a different size and so on so this is perfect if we go back to the XD you will see we have the free download button with the download icon and we have watch watch YouTube video so let’s replicate this super quickly I’m not gonna going to be linking it now just because this is them we are in fact I haven’t finished the wordpress theme yet so let me quickly change the learn more free download and also I want some sort of a download icon so I’m gonna scroll down and under graphics setup if you click on – it allows now to choose new graphic and photographic I will choose type as icon but you can also use your own images if you like and then if you scroll down a little bit more you can change the size a lot of other options and obviously I want the color to be set to white on however I wanted to be set to white with a little bit of alpha so it just goes like this it goes a little bit the opacity changes a little bit I want to obviously change the icon to like a download icon this is the download icon that I will use so far that’s perfect also I want to give a little bit of margin on the paragraph here so let’s do that and I need to replicate this button and do the watch each video now but the YouTube one was black so let’s do that if we quickly set everything to black and for the icon let’s have a look for the icon I need some sort of like there isn’t YouTube icon so maybe like I don’t know maybe this will do and obviously we need to change the text watch your video and as you can see there is a lot of space between on the left and the right side of the row or column in this case and what we have to do is actually right click and okay let’s select the bro first okay so the menu I’m looking for it gonna be wrong here so yeah it’s really hard to click some reason so maybe this is Amanda or is it this road I need to click on let’s have a look I think it’s just outside this road and you need to click it’s a little bit hard for some reason but maybe ex-team will fix this at some point but basically what you have to do is right click on this row and remove spacing and that should align everything to the left I’m not super happy with the spacing between those elements maybe I can put this as C and maybe have a little bit more spacing between each individual button here okay I think this will definitely move on because is taking a long time now but we have the title which you can always change we have the text in here we are the buttons we have the phone and we need to move on to the next bit which is this section and this section is what you can do with the minimalist theme so let’s go back to the browser click on layout and let’s rename this to hero and let’s add another section and this section what he will call it this one more you can do and for the layout I can just choose the first one which is one single column and I can copy in fact let’s add a new element new heading and what I want to do is I don’t know if you can see in here but what I can do is I don’t know the section just for now so it gives us a little bit more space and for this let’s edit the text super quickly what you can do with the minimalist theme and maybe I can set this as H to a let’s set the size to be let’s actually let’s go for heading and let’s go for maybe frames I think that’s looking perfect and let’s center line this and that’s actually perfect and the next thing we need to do in here is if you look at the design there is a little bit of text underneath the title and then one two three four columns okay let’s copy this text from here because I wanted to make sure that all the text styles are the same so I’m just going to duplicate this paste it in here and obviously we need to change the color to black and we need to Center align the text now I think that the spacing between those two element can be a little bit more so I will give margin to the Harry instead of pixels out changes to um and that would look okay I think and now we need to create another row we go to layout so we have one row here and if you go to the column row then we need another we can actually add another column in here or another row maybe another row would be a little bit better let’s have a look so let’s do this so second row in here and for the second row as I mentioned we need four columns which is super easy to do and by the way you can now you can mess with the size of the columns which is amazing but I’ll reset back to four and what I want to do is add therefore icons from here so build a website start a blog start a podcast and to do this let me copy the title room here let’s change this to build a website and obviously I’m gonna change this to be maybe like M font size to be 2m and I’m actually happy with this size and let’s add an icon and for the icon we can have to do three things so for full of font size we need to set it to be a lot bigger and we need to make sure that it’s the icon is Center lined and to do this we may have to go back to the column in here click on the text align middle also if we click back on the icon I want to add the background color this background color let’s go back so let’s have a look how to do this and to do color background I think this is the icon so the icon is to go white the background needs to go to the blue that we have already used and now I think I need to make this the background circular and I think I can do this with border-radius hopefully but also if I do this such a name which is probably ridiculously huge I think I’m gonna have to set the height and width to something so let’s say 1 & 1 M talk to them and let’s set this to to them as well this is now giving a circular shape which is exactly what want and obviously we want to change the icon and you can select another control here I will use this globe for make a website let’s actually make the icon a little bit bigger I don’t know maybe maybe yacon can be six but the wit can be set to 1.4 let’s see 1.4 that’s pictures we need to change this to M this is okay the design looks a little bit better so we’re gonna have to I reckon we can send this to 1.6 yeah this looks a little bit better now and what we can do now give the Builder website a little bit of margin for the bottom because all those columns will be stuck in underneath each other on mobile so I need to give this a little bit of margin at the bottom just like and just like this maybe two we’ll see how it goes in a second how good looks and also I want to push the text a little bit as well so I might as well give the text a little margin at the top so something like this and let’s now duplicate this just replicate everywhere and again and again okay so if we select the column text-align:center so like get a1 text-align:center and so on the second bit was start a blog started post cast start a blog start a podcast and what was the last shit start a store maybe we’ve you we’ve used that quite a few times so maybe like builder store something build a maybe I need to have a look at the wording a little bit more because I’m not sure about the title is well but anyways let’s continue for the blog in let’s see I don’t think we’re gonna get the WordPress icon so we’re gonna have to do something else for the blog in we can do something like this what do I think for a podcast we might be able to find an icon yes there is a podcast icon folder builder store maybe we can put a shopping cart or or a store like this I think the store looks a little bit better and we are actually done with the sections so let me double check quickly in fact we’re not done with this section we have a white background color and on the next section we have a great background color which I’m going to copy now so let’s do the what background color super quickly let’s click on the section and change the background to white and then on the next section I can click on I already and change the background color to the very gray color that I just selected so if we go back to the XD then we can see that the titles keep replicating so I can just copy and change the wording and let’s do that and then we have three columns let’s copy this quickly let’s change the four way as well go down and I’m going to create a new section just so it gives us a little bit space so you can see a little bit better let’s have a look at the new section okay so we have the title and the title is actually demos or demo whatever and then let’s copy this text in fact I haven’t changed this text so I’m gonna have to change in a sec but let’s drag a copy of this text and change it okay if I go back to the design I just quickly want to change to copy this text and update in here okay and now for the demos we have two demos in here two images which I’ve already extracted which I showed you in the beginning of this tutorial how to extract so I’m not gonna repeat myself here and just continue so let’s go to layout and underneath section I will add another row row two and I will just split this row into two columns and each column will have an image okay let’s add an image element and choose the first one and this is the first one I’m going to use and also I forgot to actually add alt text in this one but make sure you do that because it’s good for your SEO so something like that would do and but obviously make sure you give you images a good old text and I’m just going to copy this now duplicate it and drag one to the right side that’s perfect so let’s actually swap this image for the second one in here and I’m not big fan of the padding in here yeah maybe we can mess around with the space between but let’s have a look how the website looks so far okay this is good so far but also I want to live I would like a little bit more space between each section so let’s do that super quickly if you go back on this one we can actually do a little bit more spacing from here so I don’t have something like 80 from the top might be get 80 from the bottom might be good if there’s a little bit more space and I have to do this for each individual section unfortunately but the website should look a little better believe and maybe we can give a little space between this and this the dirty routes to do this you can just maybe do change the margin on the text but you have to be careful with this because mobile things could start looking a little bit weird so just make sure you test your mobile as well and adjust so let’s save this and continue so this section was super easy and let’s have a look at the next section what we have here and we have the Gutenberg section so what I’m gonna do now is do a layout with two columns and inside here I’m gonna add an image and this image will be the Gutenberg demo image which one I would like to replace to an actual gif image that moves around and shows a little bit of demo but in this tutorial I’m just showing you how to build stuff with extreme which is fairly easy if you ask me but yeah so let’s duplicate the sudden drag it down here let’s duplicate this text and drag it down as well I need to change this to Gutenberg Gutenberg and the text needs to be changed to this and also as you can tell I want actually I want the button and I want a black button which then I can copy this one actually because I’ve already done styles so let’s drag this black black button here I don’t actually need so much space now so I’m gonna go to I don’t know if I want the icon now maybe maybe not let’s remove for now let’s find out where it is so graphic setup off and obviously I want everything horizontally and vertically Center lined and this is where flexbox will help us out a lot so let’s switch that on the center Center this is it so if we go back the only thing we need to change now is try Guttenberg we need the background color to be set to white so let’s select the section go to background drag to white let’s change the button to where you say okay try Guttenberg try getting back and I think this is it in here maybe the space the section space that we did the top needs to be set to 80 pixels again and 80 pixels at the bottom as well so we’re consistent let’s save this and have a look at the next challenge and the next challenge is the features so the features would be similar to the icons that we did in here and in fact we can copy one of the icons just replicate so let’s have a look so in this case we’re gonna have three rows with four columns let’s go back go to layout so this one is called Gutenberg Gutenberg and this one is called DuBose now we need maybe I’ll call this one news and the first one will be obviously the full weight let’s duplicate the title from here reuse this data as well and let’s copy the text super quickly features and I don’t actually have a different text for this section so at some point I’ll come up with something but let’s add another section so we can see better okay now in this row use we need another row sorry in this section we need to create another row and in this row we’re gonna have four columns and in fact we can replicate those four column in a second but first let’s replicate one of the microns so copy drag down and copy one of the titles and drag down and obviously we need to centreline the text in this column do the same for the other ones okay and let’s copy duplicate this one is well keep on duplicating we need four of them let’s do the same for the title you can see how easy it is to build website with XT now it’s a lot easier and with them the first bro but now what I want to actually do is I actually want to duplicate this and you can just click the button here if you select the row you can click on the duplicate button now what I have to do is actually start changing the icons and the text so let me quickly do that when you want to get off their darkest ground the gravity pulls you straight down you some golf and I see these okay so let’s save this ctrl + s is a shortcut for saving and if we refresh let’s um look at what we have so far we have the demo s and by the way there’s these images can be linked to be easily we have the Gutenberg center line and we have the features and in fact I want to live with space here now let’s go back and let the space of four m and let’s go back to the final section which is need help setting up your website so let’s quickly do that and for this section I will go one big column or row its column in this case and I want the section to you have the background image of the image that we use at the top and that would be okay and maybe I can actually copy the title room here duplicate and replicate it here at the bottom just make sure that is remove the BR from here and I want to Center align the text and I also don’t want it to be doubled something like this would be let’s change the actual text need help setting up your website your site excuse me and I can duplicate this actually and actually I forgot to change this to you let’s have a sage tea for now and I can change this to something else maybe like h3 or whatever and then now we’re just gonna say maybe contact us the and what does it say on the design contact us and we have this email so I can just use this for now but obviously because I can actually use an H ref which is male 2 and the hello at buddy Caleb ek someone is I don’t know if the black works here well that need to close the link as well and also let’s add a little bit of padding on this section maybe like a tee at the top and maybe like hundred sixty for the bottom maybe even more 400 that would do for now so let’s save this and by the way because I’m using next team I can add a lot more elements from here such as contact form and so on so let’s say this and have a look what we have today is working quite well the section is all the sections are working quite well maybe I forgot the space on this one so if I click on the section here let’s add the 80 pics of space 80 pixels of space at the bottom and now you probably wondering well how does this look or mobile well for mobile we’re gonna have to do a little bit more work so if we inspect this click on the little mobile in here you will see that on mobile it’s not looking too bad the headings and text is actually looking really good the buttons can do can be changed to full weight that image can be removed or maybe put behind here the circular image can be moved and so on so it will require a little bit more work but as you can see we are like 80% there and it’s just a little bit more work and to do for example if you want to remove this phone from here what you can do is go back and you can actually hide stuff so if I click on the house section actually let’s click on this mobile device here and let’s go to mobile and if I click on this column here on the right side and if I scroll down actually you have to go under customize excuse me then you will see height your jurian breakpoint so what I can’t say is height during the mobile phone breakpoints which means when we go on mobile this will hide but let me actually add this and what I want to do is actually want to do this for the actual column so let me go to customize and hide this column so yeah hide this column everything inside this column during this break point and obviously things can be improved a lot more but let’s save this for now let’s refresh this page now and as you can see the phone is now gone so yes you will have to do a little bit of custom editing to fix everything for example this text is a little bit maybe too big but yeah you’re gonna have to work on this a little bit more and get it to work but as you can tell x-team has improved so much more yeah now extreme is catching up with the error WordPress editors this is it from this tutorial I hope you enjoyed it and I hope you learned something if you did enjoy this tutorial give me the thumbs up and if you’d like to see more tutorials on extreme or XD let me know in the comments below don’t forget to subscribe to my channel because that would help me a lot I’m trying to grow my audience share my videos if you like them and as always thank you for watching my name is ready a new watching my channel ruddy the brand

6 thoughts on “Convert Adobe XD Web Design to WordPress page using X-Theme Pro

Leave a Reply

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