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

Add a Comment

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