Play Video

How to Design an Agency Website in Editor X | Wix Fix

In this video, I show you how to design a website for an agency or freelancer.

Check Out the Demo: https://wixfixofficial.editorx.io/agency-v1
Get the Template: https://www.wixfix.com/template/web-design-agency

Editor X Scaling Text: https://www.youtube.com/watch?v=XIvapxQk63o

———————————————————–
Wix Fix Editor X Templates: https://www.wixfix.com/templates
———————————————————–
Important Tutorials:
Top 5 Tips for Wix: https://youtu.be/eaYICBbpGlY
How to Use Strips in Wix: https://youtu.be/MrcvFsQi5zc
Set Up an E-commerce Store: https://youtu.be/Eai-jLLBw04
Custom Forms: https://youtu.be/9AzSLnRtoY0
Wix Basics in 10 Minutes: https://youtu.be/a9FA6MwrFUc
Everything Editor X: https://youtu.be/VcGNuL-0LCQ
Modern Web Design: https://youtu.be/3no4A7JHaI0
———————————————————–

Want to hire us? Let’s connect on our agency site: https://www.wixfix.com

Don’t forget to SUBSCRIBE and COMMENT any questions below!

THANK YOU FOR WATCHING!!

Music by Chillhop
Music: https://chillhop.com

#Wix #EditorX #WebDesign

hey guys welcome back to wix fix i hope you’re having a fantastic day in today’s video we’re going to be designing the homepage for our brand new modern freelancer agency type website now if you are an agency or a freelancer and you do like the design of this website then i will be building out additional pages making sure it’s all responsive and it will be for sale on my website so if you are interested in using this for your own website
then feel free to click the link in the description and grab a copy of it for yourself today but let’s go and get started now for this video i have already designed the header and the footer one because i feel like i’ve already done that a bunch on this channel so if you are interested in seeing that then you can check out some of my other web design videos but two because i just kind of want to skip to the fun part so let’s go ahead and get
started so the first section that we are going to be designing is going to be the hero section so for now i’m going to go ahead and give us a lot more space to work with by bumping up the minimum height of this section to 900 then what i want to do is just go ahead and apply a grid to this section for this we’re just going to do a 2×1 just like that perfect now what i want to do over here on the right is actually add a container now over here on
the right is going to be an image but i do want to do something kind of different for it so we’re going to go ahead and stretch this container to the full width of the screen or this column and then we’re going to apply another 2×1 grid to it however for this grid we’re actually going to go into the advanced settings and we are going to set this right column to maybe like 0.7 fr something like that so we want this to be a little bit more space on
this left column than the right now let’s go ahead and press done now what i want to do before i even add the image is actually just remove the background color from this container box real quick and then now we can go ahead and add the image now for this image i do want to take up the full container box so we’re just going to stretch it right over the line and then we’re going to change the image i have chosen this image for now this might
change but now what i want to do is just go ahead and add a container box on top for this one we’re going to go ahead and make sure it’s in the right column and we’re going to set the color to the same as the background color now what i want to do here is actually set the minimum height to 100 percent then what i want to do is go ahead and align it to the left and top just like that and for the width let’s go ahead and make it like 30 pixels
perfect now what i want to do is just go ahead and copy and paste this container and we’re going to set the height of it to maybe like 60 pixels then what i want to do is send it to the left and top but for the width let’s go ahead and set this one to 100 now let’s go ahead and copy and paste this container box right here we’re going to attach it to the left and we’re going to attach it to the bottom so now we kind of have like this nice little
window effect right here however i don’t think i like how this image is propped up right against this header so i’m going to go ahead and select this section and i’m going to add like 80 pixels of margin to the top and we’ll go ahead and do that to the bottom as well now if you wanted to you could obviously change the image but for now i think i’m just going to try to change the focal point a little bit it might just be better to leave it as like
this i think that does look better now if we scroll down this is what we’re going to see and it looks really cool then on this left side of course we’re going to want to add some text because this is the hero section so let’s add a title let’s add a paragraph and we’re just going to add a simple button just like that okay for this title let’s go ahead and say design ads value and for this we’re going to make it pretty large let’s say like 120
pixels uh maybe 90. i think that looks really good and then let’s also go ahead and change the line height because we don’t need that much spacing typically i see 1.2 i think that typically looks really good now with the paragraph selected i’m just going to copy and paste in some text just like that and then for the button let’s go ahead and move it down here change the text to read more and what we want to do is actually come over here to this
button right here we’re going to click on this button we’re going to right click and we’re going to say copy element design from all breakpoints and we’re going to and you’re going to notice that the mouse changed to like a paintbrush and if we hover over this button and click it it’s going to change the design of this button to look like this one over here which i really do like so now i’m going to go ahead and just select all three of these
elements and press stack now what i want to do in here is just kind of center it up inside of this field right here and then let’s go ahead and dock it to the right that way when we resize the screen it’s always kind of connected to the right side i’m not going to use the scaling text technique for this video however if you are interested in learning more about that i will have a video linked in the description but now the section is kind of
large so maybe we don’t need it to be 900 pixels maybe let’s go ahead and set it to let’s say 700 let’s see what that looks like i think that looks a lot better a lot cleaner it’s not as long and distracting and with that we might be able to fit more of the image in here so let’s just play with the focal point a little bit more i think that looks almost perfect that is almost exactly what i wanted to look like so this is perfect all right now
let’s go ahead and do the next section so we’re going to come over here we’re going to add a new section for this one it is going to be quite large so let’s just go ahead and set it to like 1100 pixels and for the background we’re actually going to choose like a darker color let’s go ahead and choose like just a black for now and then what i want to do is just go ahead and we’re going to add a container we’re going to set the container to like 80
percent width and let’s just for now set the height to 1100 as well and we’ll dock it to the center and the top now for this let’s just go ahead and remove the background color from it we’re going to apply a grid which it’s going to be one by two now i do want to alter the grid a little bit so maybe this left column is like 0.6 i think that looks really good and basically over here we’re going to have some text and then over here we’re going to
have a nice little grid area so let’s just start with the text real quick so we’re going to add a title and we’re going to add a paragraph okay for this title of course let’s go ahead and make it white and i’m just going to go ahead and paste in some text and we’re going to make it quite large let’s say like 45. now let’s go ahead and grab this paragraph text we’re going to paste in some text and of course we want to make it white as well which
if you want it to look a little bit nicer let’s actually go for a little bit darker of a color that way the title kind of pops out more and if the user is interested in learning a little bit more they can read the paragraph underneath it but we’re just going to grab both of these and we’re going to press stack and for now let’s just go ahead and dock this stack to the top and left the next thing i want to do over here in this right column is
actually add a repeater and what we’re going to do is change the setting from cards to grid cells and then what i want to do is just expand this to the full width of this of the column now what i want to do is add a fourth item so i want to do duplicate item and what i want to do is set the gap between them to 20 pixels 20 pixels and for the minimum width let’s go ahead and set it to viewport width and let’s just start playing around let’s do 12.
okay so what we want is a two by two grid cell system basically so we don’t want three on the top so now let’s go up to 15 and just try out that out now let’s try 20. see what that does perfect that i did exactly what we wanted now i’m going to select the repeater item and let’s just go ahead and make this like a little bit darker for this i think i want to do something like this right here and then what i want to do is add an image a small title
and a paragraph text so let’s go ahead and add our images so i’m going to come over to media and go to show more and for this first one let’s just choose this one right here we’re going to stretch it out to be a little bit bigger and we’re just going to stick it right here now what we want to do is just add a title and then we’re also going to add a paragraph for this title let’s go ahead and bring it out just a little bit we’re going to change
it to white obviously but we’re also going to lower the size of the text to maybe like 20 pixels something really small and for this paragraph text let’s bring it out the same width as the as the title i’m going to go ahead and paste in the text and i’m obviously going to make it white which actually let’s go a little bit darker just like we did before and we’ll just bring it down just about there we’ll grab all three items and we’ll press stack
so now we have created a stack with all these three items now for this image we don’t need that much space so let’s go ahead and give it like 50 pixels of space instead of 70. this title let’s go ahead and just set it to an even 30 just like that and i think that looks really good so basically now what i’m going to go ahead and do is go into each one of these other items replace the image the title and the paragraph so let’s go ahead and do that
all right awesome so now with that all done let’s go ahead and try to resize this grid a little bit so what we’re going to do is just go ahead and select this stack and let’s go ahead and give it some margins of like 40 pixels on all sides then we can go ahead and select the repeater and we’re going to set the row minimum height from 300 to 200 and what we’re also going to make sure is keep rows equal is turned on next what we’re going to do is
grab this container from the background we’re going to change grid layout and we are going to set this 1100 to let’s try 900 let’s see what that does so if we take a look at our grid you know everything looks a little squished we’re actually going to set it to minimum content so we’re going to change 1100 to minimum content and we’re going to press done so basically what that’s doing is we basically added margins to our elements here but let’s go
ahead and change but it looks like i forgot to put it on the bottom here so we’re gonna make sure that 40 pixels is on the bottom as well to give it space between the content and the edge of the the item next let’s go ahead and grab this container we’re going to set 80 pixels a margin on the top and the bottom and then what we’re going to do is grab the actual section itself and we set the minimum content to none our minimum height to none which
looking at it now it looks like we might need a little bit more space so let’s go ahead and grab this container and let’s bump up the margins to like 120. i think that looks a lot better so now we have a nice little hero section that kind of gives your users an idea of what you do then down here we have a list of four different services that you would provide but now let’s go ahead and add another section this section is mostly going to just be
for more information so let’s go and add section as usual let’s go ahead and bump up the size so we have room to work with and we’re also going to go ahead and add a container we’re going to make it 80 and we’re going to center it and send it to the top and just for now let’s go ahead and make this 900 pixels high and for this one we also will not need a background so we’re just going to remove that as well and we’re going to apply a 1 by 2 grid
for this one and before we change anything here let’s go ahead and add another container inside this top column or row i guess and we’re just going to stretch it for this one we’re going to apply a three by one grid and we’re going to remove the background now we’re going to go into grid settings and we’re going to set this one the left column to 1.5 fr that way it’s giving us a little bit more space to play with and what i’m going to do is i’m
also just going to grab this title right here we’re going to paste it into this column but we’re also just going to make sure that we change the text to black and for now let’s go ahead and align it to the left and top now what i want to do is kind of do similar something similar to what we have here with this stack so i’m just going to grab this stack come to this column and i’m just going to paste it in now for this one i’m going to remove the
image because we don’t need the image and i’m just going to change all this text to black which for the title right here i’m just going to do like a dark gray and i’m also going to lower the size to maybe something like 16 and then for this text right here let’s just go with something a little bit darker and what i’m going to do is go ahead and grab this top text and make like the margins half the size great so now what i want to do is just go
ahead and add in the content here and then what i’m going to go ahead and do is send it to the left and top just like that and then we’re going to copy and paste this section or this stack we’re going to swing it over here to the right column once again send it to the left and top and now let’s change the content here now that this top column is basically done what i’m going to go ahead and do is select this title i’m going to add like 80 pixels
of margin to the bottom then i’m going to select this container go into the settings and i’m going to make this make the minimum height minimum content just like that and then what we’re going to do is select the background grid go into the settings and we’re going to set this one to minimum content as well and for this one right here this one’s just going to be a simple image i think this size almost kind of works for this so i think i’m going
to leave it at 450 pixels so what we’re going to do is press done we’re going to come over to the add panel and we’re just going to drag out this image and stretch it now we can go ahead and change the image to something else awesome then what i’m going to go ahead and do is select the container and just like we did with this section above we’re going to add 120 pixel margin to the top and bottom then we’re going to grab the background section
and we’re going to remove the minimum height so once again we have a nice hero section that kind of covers the gist of what your company offers then you actually have the services that cover what you offer then you have a little bit more information with a nice little graphic or image that kind of helps separate content with graphics a little bit more but for this next section it’s going to be kind of like a call to action for your about page or
something like that so let’s just go ahead and add a new section this one’s going to be pretty simple let’s just go ahead and make this strip about 900 pixels we’re going to apply a 2×1 grid over here in the right let’s just go ahead and add an image and we’ll stretch it and then over here to the right what i want to do is come up to the hero section and copy this stack we’re going to bring it down here and we’re just going to paste it into this
column now for this one the content is going to be different and i obviously don’t want this title to be this big so let’s just bump it down to like 45 and i’m just going to go ahead and paste in the content right here i’m also going to go ahead and paste in the description as well which if we want the design to be more consistent with the rest of the site i’m going to change the color to something a little lighter for this paragraph text and i’m
also going to go ahead and do that for the hero section as well there we go and then for this section let’s just go ahead and add 120 pixels of margin to this top and bottom of this stack then what we’re going to do is go ahead and grab the section and remove the minimum height and we’re also going to go into the grid and remove the minimum height from here as well personally i think we need to add a little bit more space so maybe we can grab
this stack and bump 120 to like 200 on either on for the top and the bottom then what we’re going to do is go ahead and grab the section and we’re going to add 120 pixels of padding on the bottom just like that and that’s going to provide us with a little separation between this section and the next one which this next one’s actually going to be the last one on the page and basically all it’s going to be is somewhat of a testimonial so what we’re
going to do is actually set this one to be quite large just like everything else and we’re also going to switch back to a nice dark color and what i want to do is actually want to grab this title right here and we’re just going to paste it in now for this let’s go ahead and set it to like 80 percent we’ll make sure it’s centered and just send it to the top for now and what i’m going to go ahead and do is just kind of paste in the review from the
client and now let’s go ahead and add a small container we’re just going to attach it right here we’re gonna make it a lot smaller and we’re going to apply a 1 by 2 grid to it and for now let’s also go ahead and remove the background so now what i want to do is i want to copy this paragraph text i’m going to go ahead and paste it down here what i want to do is just go ahead and paste in a name but i’m also going to kind of make it more bold so
i’m going to do like poppins medium and we’re going to shrink it down quite a bit and let’s go ahead and put it inside of this little container the next thing i want to do is go ahead and just copy and paste it going to bring it out just a little bit so we have more text to play with and i’m going to paste in something that looks like this but we’re actually going to switch back to poppins light and we’re also going to change the color to
something a little darker we are going to bring it in a little bit and we’re going to put it into this right hand side of this or the right column of this box so now what i want to do is actually go ahead and grab this container box and we’re going to go into the grid settings for this left column what we’re going to do is change 1fr to minimum content and basically what that’s going to do is shrink up this section however what we’re going to go
ahead and do is set a minimum width so let’s just do like 200 pixels for now and obviously that’s going to be too much so let’s go ahead and backtrack slowly let’s try like 160 let’s try 140 and i think that that right there might be perfect so now we’re going to go ahead and select this container box and we’re going to select the review and we’re going to stack it so now what i want to do is just go ahead and come over to the inspector panel
we’re going to make sure all the items align to the left are set to 80 width are centered and then what we’re going to do is come down to the margins and just like before we’re going to add like 120 but actually let’s go ahead and do like 150 pixels of margin on the top and bottom then we’re going to grab the section and remove the height so now what we’re left with is a nice little hero section a section that has all your services listed a
little more information something that can drive your users to your about page and a nice testimonial which for this testimonial if you want to make the section a little bit bigger instead of 80 let’s try like 60. and i think that also looks really nice so it just brings it in a little bit more makes the section a little bit taller and that’s basically the design of the home page now in the footer we have a nice little call to action for your
users to subscribe to your website and then below that i am still working on the footer but there will be additional stuff in the main template but that basically wraps it up for the video today guys if you guys did enjoy please consider giving this video a like and subscribing to the channel if you haven’t already and again if you do want this template for yourself feel free to click the link in the description and grab a copy of it for yourself
today thank you all again for watching and i’ll see y’all in the next one