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

hey now I’m welcome to another tutorial my epithet 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 alter it into a wordpress website exploiting the team called X-Theme Pro – the latest version of X-Theme Pro actually allows us to use nesting& flexbox which will conclude 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 gives people the thumbs up if you liked the video and don’t forget to subscribe to my path because you helped me a lot and last but not least if you decide to purchase the next topic satisfy abuse my connection 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 is starting so let’s open the design that we’ll be improving 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 specific characteristics below but basically this is what we will be recreating in Eckstein today hopefully xtreme3 should meet things a little better now that we have the option to use flexbox everywhere I will obstruct this record open and by the way I has so far been obtained 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 commemorated but you can unmarked it and then mark for export and then you can go here on the left 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 require the I miss the phone not to have a background color or anything like that so PNG is the correct format then I is very likely select for entanglement then I typically select the 2x so I get a big image and a small image then I often decide which one to use yeah let’s swiftly 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 exploiting the 2 X 1 2 X 2 X because then I can scale that down if I just wanted to and hopefully it will gape a little bit more sharper on the web but anyways this is how you export the idols I won’t be using those icons so are we are genuinely expending the icons from X crew so I won’t have to export to those icons I’ve already exported those two personas of exporting the Gutenberg image as well and I once have the background image of the mountains exported so let’s go to the browser as I’ve have just mentioned my website is using extreme which represents I can use the cornerstone editor to update my sheets 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 sheets and create a new page let’s worded this one this basically the minimalist demo I want to make sure that on the page attributes “were having” 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 revise with pro again that should open the pro journalist 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 and we have the mobile phone on the right side so we can technically split this into one big area with two columns with eco heaviness so if we go back to the browser I can add a new division 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-fashioned one as well but in this case we actually have the option of flex box which will originate things a lot easier but if you don’t have the option of flex box don’t worry you can either do tradition systems or is padding say margins I predict which isn’t perfect but it’s an option so let’s choose the scheme with the two editorials and as I said during the first editorial I will have the verse 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 persona goat in the here background click on advanced and then this will open those two menus and we actually want a lower coating idol so I’m just going to click on this and select an image and as I said I’ve already obtained my portraits so this is the image that I need and this is perfect it’s already handle everything is set to cover and Center which is exactly what I crave but also I want to make sure that the height of this is if we look at and ext I crave the elevation 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 now 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 made the dollar sign and now as component and then you can simply write the CSS that you want so in this case I want to set the summit to 90 VH and this I don’t know if this is good enough perhaps perhaps I can go now even 98 just let’s even vanish hundred let’s go home just for now but perhaps we can add a little icon that there is crow or maybe just such a little little than hundred and let’s close this now if you remember in the XD we have the designation which I’m probably going to change not sure about this 100% so I’m just gonna photocopy this for the demo regardles and going to see ingredients and position a leading so headline let’s drag the headline in now and as “youre seeing” the text is looking super small but if we click on it let’s clink revise verse adhesive this in now and I’m just gonna hack this super quickly and time applied a br breakpoints so it disruptions the text into paths and also we need to change the verse to be h1 and I miss the M to be I don’t know maybe maybe around free we’ll see how it goes in a second but I likewise want to change if we scroll down I likewise want to change the typeface pedigree to be set to titles which will use the already preset typefaces on this website actually I did another I can time reform the typeface form from here maybe I can do oh this is the base font so perhaps I can do that as one and leave this one is free I will leave the spacing as epoches and also the phone wait I want it to match my pattern so that’s 700 which is daring let’s change the color to white and also if you notice on my blueprint awkward everyone here if you notice on my layout actually have a little bit of a sag darknes now so I’m going to try to mimic this lowering pall as much as I can if I click on the text scroll down you can see the verse pall in now what I can’t do is establish it’s one to read so let’s make this black throw it a little bit of opacity here and then we need to articulated 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 now I will mimic this and then I will go to element and category verse I will only drag and sag the text and then if now am I give the actual heading a little bit margin so it approaches the text below a little and for the perimeter simply scroll down in now you can do if you unlink this it will give you the option to do perimeters on different margins on the inside so for example I might crave like to them one am I fantasize 1 M will do and I can really present each side individual evaluates now plainly we need to change this text to be white so let’s scroll down the typeface lineage is set to inherit which is correct or I can exactly put as body form regular is penalize let’s give it a white-hot pigment and maybe the sort 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 precisely 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 swiftly add the phone so we need an portrait factor 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 now which will reach the likenes a good deal bigger which is what exactly what I demand 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 likewise want to make sure that the foam itself is centered aligned on the article horizontally and vertically and this is the brand-new huge incorporated in in the latest Extreme Pro you can actually use flexbox so if i click on the editorial let’s conclude where x flex chests and flex chest is secreted 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 countless first which is awesome and what i want to do is align horizontally set to center as you appreciated i moved in the center of the line 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 too want to do the same thing for the leader and the power of clause 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 generates the verse in the middle just like on the specific characteristics that we have in Adobe XD so far everything is perfect I could do this circle in three paths I can either exportation 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 instantly right-click mark for exportations let’s go to export adopted and I’m just going to choose desktop again and let’s go here and this is the one I miss but too I want to every time I upload something on my website a one more website to be fast and I gave a little for a immediate pee and geez I like to use the tiny PNG JPEG and PNG compression website we have to do is actually exactly 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 stimulate it in kilobytes which is absolutely maniac and now I can download this my website should my webpage should laden 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 mantle background in here click on the likenes and I need to find the idol that I merely downloaded so gives people a second I think should be and download let’s drag that in okay so we’ve got this image let’s slip a and as you can see it’s a primed under cover and midst ideally we might have to remove the size and for the position we might have to do top and then right which then ranks this image postures this background image to the top right and it does the effect that we have on XD design now we can always establish it we can also change the sizing 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 simply keep playing and identify what the hell are you like and what you dislike and so on so this is awesome so far plainly on portable we’re going after really a little bit but yeah so let’s continue and by the way make sure you save your work when “youre working in” Adobe XD sorry in when “youre working in” X squad and exactly evaluation it in the browser to see how it examines so as “youre seeing” the roundabout is a little bit off but that’s okay I can precisely maybe remove the pixels save it and go back only refresh and that looks a little bit better to me but regardless let’s move on you’re probably now wondering well how we’re going to do the buttons because we have flex carton 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 sequence in now and let’s do that so first of all let’s go to segments actually let’s go to layout and inside this row here if you select it you will see the plus signed if we click on this we can now the we can now nest a row and as you can see it it establishes us a good deal options so in this case I’m just gonna go for the full width and then I can really drag my button here let’s try a button now and the first button you know design was red and also in my extreme I’ve already “ve got 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 readily merely by changing the background colors devote a different immensity 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 instantly I’m not gonna going to be linking it now time because this is them we are in fact I haven’t finished the wordpress theme hitherto so let me instantly convert the learn more free download and likewise I require 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 personas if you like and then if you scroll down a little bit more you can change the length a good deal of other options and undoubtedly I miss the emblazon to be set to white on however I wanted to be set to white with a bit of alpha it is therefore just goes like this it vanishes a little bit the opacity conversions a little bit I just wanted to apparently modify 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 it is necessary repeat this button and do the watch each video now but the YouTube one was black so let’s do that if we speedily designated 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 verse 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 article in this case and what we have to do is actually right click and okay let’s select the bro firstly okay so the menu I’m looking for it gonna be wrong here so yeah it’s really hard to click some conclude so perhaps 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 perhaps ex-team will set this at some station but basically what you have to do is right click on this sequence and remove spacing and that should align everything to the left I’m not super happy with the spacing between those points maybe I can make 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 deed which you can always alteration we have the textbook in here we are the buttons we have the phone and we need to move on to the next part which is this section and this section is what you can do with the minimalist topic 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 scheme I can precisely select the first one which is one single article and I can emulate in fact let’s lend a brand-new factor new heading and what I want to do is I don’t know if you can see in now but what I can do is I don’t know the section just for now so it leaves us a little bit more space and for this let’s edit the textbook super soon what you can do with the minimalist topic and maybe I can prepare this as H to a let’s set the width to be let’s actually let’s go for origin and let’s go for perhap formulates I think that’s looking perfect and let’s centre front 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 entitle and then one two three four articles okay let’s copy this verse from here because I wanted to make sure that all the text wordings are similar so I’m just going to repetition this paste it in now and apparently we need to change the emblazon to colors and we need to Center align the verse now I think that the spacing between those two element can be a little bit more so I will give boundary to the Harry instead of pixels out changes to um and that would look okay I speculate and now we need to create another row we go to layout so we have one row now and if you go to the column row then the work requires another we can actually add another column in now or another row maybe another row would be a little bit better let’s have a look so let’s do this so second sequence in here and for the second row as I mentioned the work requires four columns which is super easy to do and by the way you can now you can mess with the size of the towers 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 claim apartment here let’s change this to build a website and undoubtedly I’m gonna change this to be maybe like M typeface width to be 2m and I’m actually happy with this size and let’s computed an icon and for the icon we can have to do three things so for full of typeface length we need to set it to be a lot bigger and we need to make sure that it’s the icon is Center rowed and to do this we may have to go back to the column in now click on the textbook align centre also if we sounds back on the icon I want to add the background coloring this background complexion let’s go back so let’s have a look how to do this and to do pigment 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 exercised and now I envisage I need to make this the background circular and I picture I can do this with border-radius hopefully but also if I do this such a identified which is probably ridiculously huge I picture I’m gonna have to set the height and thicknes 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 pas a circular contour which is exactly what want and patently we want to change the icon and you can select another control now I will use this globe for make a website let’s actually become the icon a little bigger I don’t know perhaps maybe yacon can be six but the wit can be set to 1.4 let’s see 1.4 that’s paints we need to change this to M this is okay the specific characteristics looks a little bit better so we’re gonna have to I suppose 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 articles 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 textbook a little 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 tower text-align: core so like get a1 text-align: midst and so on the second bit was start a blog started pole shed start a blog start a podcast and what was the last shit start a collect maybe we’ve you we’ve exercised that quite a few ages 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 entitle 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 reckon for a podcast we might be able to find an icon yes there is a podcast icon folder builder store maybe we are able to settled a shopping go-cart or or a accumulate like this I recall the accumulation looks a little bit better and we are actually done with the sections so let me double check soon in fact we’re not done with this section we have a white background color and on the next segment we have a great background color which I’m going to emulate now so let’s do the what background hue super rapidly let’s click on the section and vary the background to white and then on the next part I can click on I once and modify the background emblazon to the extremely gray emblazon that I just selected so if we go back to the XD then we can see that the deeds maintain mimicking so I can only mimic and reform the wording and let’s do that and then we have three pieces let’s copy this quickly let’s change the four style as well go down and I’m going to create a new area just so it affords 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 deed and the designation is actually demos or demo whatever and then let’s copy this text in fact I haven’t changed this verse so I’m gonna have to change in a sec but let’s drag a emulate of this text and change it okay if I go back to the design I exactly promptly want to change to copy this verse and revise in now okay and now for the demos we have two demos in here two epitomes which I’ve already obtained which I indicated you at the very beginning of this tutorial how to obtain so I’m not gonna recite myself now and simply continue so let’s go to layout and underneath area I will add another sequence row two and I will precisely divide this sequence into two columns and each line will have an image okay let’s contributed an idol part and elect the first one and this is the first one I’m going to use and also I forgot to actually add alt verse in this one but make sure you do that because it’s good for your SEO so something like that would do and but clearly make sure you give you portrait a good age-old textbook 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 largest one in here and I’m not big-hearted follower of the cushion in here yeah maybe we can mess around with the space between but let’s have a look how the website gazes so far okay this is good so far but also I want to live I wishes to a little bit more space between each section so let’s do that super rapidly 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 regrettably 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 modification the margin on the text but you have to be careful with this because mobile things could start looking a little bit creepy so exactly make sure you experiment your portable 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 division what we have here and we have the Gutenberg section so what I’m gonna do now is do a organization with two pillars and inside now I’m gonna supplement an epitome and this image will be the Gutenberg demo image which one I would like to replace to an actual gif persona that moves around and presents a little bit of demo but in this tutorial I’m just convey you how to build stuff with extreme which is fairly easy if “youre asking me” but yeah so let’s reproduction the rapid draw it down here let’s duplicate this textbook and lag it down as well I need to change this to Gutenberg Gutenberg and the textbook needs to be changed to this and also as you can tell I want actually I demand the button and I miss a pitch-black button which then I can mimic 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 crave the icon now perhaps maybe not let’s remove for now let’s find out where it is so graphic setup off and apparently I require everything horizontally and vertically Center ordered and this is where flexbox will help us out a great deal 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 the work requires the background colour to be set to white so let’s hand-picked 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 now maybe the cavity 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 now and in fact we can copy one of the icons really replicate so let’s have a look so in this case we’re gonna have three rows with four editorials let’s go back go to layout so this one is called Gutenberg Gutenberg and this one is called DuBose now we need perhaps I’ll summon this one bulletin and the first one is likely to be undoubtedly the full value let’s duplicate the deed from here reuse this data as well and let’s copy the textbook super soon features and I don’t actually have a different text for this section so at some extent 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 pillars and in fact we can replicate those four line in a second but first let’s repeat one of the microns so imitate drag down and duplicate one of the entitles and drag down and apparently we need to centreline the textbook in this column do the same for the other ones okay and let’s copy repetition this one is well keep on duplicating the work requires four of them let’s do the same for the entitle 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 sequence you can click on the duplicate button now what I have to do is actually start modifying the icons and the textbook so let me swiftly do that when you want to get off their darkest field the severity pushes you straight down you some golf and I visualize 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 personas can be linked to be easily we have the Gutenberg center line and we have the characteristics and in fact I want to live with cavity here now let’s go back and give the cavity of four m and let’s go back to the final part which is need help setting up your website so let’s instantly do that and for this section I will go one big column or sequence its column in such cases and I miss 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 facsimile the name office now duplicate and replicate it here at the bottom merely make sure that is remove the BR from here and I want to Center align the textbook and I too don’t want it to be doubled something like this would be let’s change the actual verse need aid setting up your website your locate excuse me and I can replication 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 time use this for now but plainly because I can actually use an H ref which is male 2 and the hello at chum Caleb ek someone is I don’t know if the pitch-black acts now well that need to close the link as well and likewise let’s lent 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 utilizing next team I can add a lot more aspects 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 gap on this one so if I click on the section here let’s computed the 80 pics of seat 80 pixels of gap at the bottom and now you probably wondering well how does this look or mobile reservoir for mobile we’re gonna have to do a little bit more work so if we scrutinize this click on the little portable in now you will see that on portable it’s not looking too bad the leaders and verse is actually looking really good the buttons can do can be changed to full weight that image can be removed or perhaps threw behind now 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 creation and to do for example if you want to remove this telephone 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 machine now and let’s go to portable and if I click on this column now 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 makes when we go on mobile this will secrete but let me actually included this and what I want to do is actually want to do this for the actual column so let me go to customize and disguise this column so yeah disguise this column everything inside this line during this break point and patently 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 seminars on extreme or XD let me know in the comments below don’t forget to subscribe to my path because that enables you to me a lot I’m trying to grow my gathering share my videos if you like them and as ever thank you for watching my name is ready a new watching my channel ruddy the brand

As found on YouTube

Share this article

Leave a comment

Related Posts