Learn Wix Studio for Beginners in 2024 | Wix Studio Tutorial

so the other week I jumped into Wick Studios to see what all the hype was about now after building a very quick website within Wick Studio I realized the platform has definitely taken a unique approach to the tool I think it was pretty strategic and quite a smart move on their behalf you're probably thinking how well to me it seems as though that they have taken the one thing that makes WordPress so powerful which is their massive plugins Marketplace and then combined it with the best parts of the general no code building space making it a super robust platform which really just means that you can go ahead and extend the functionality of your site with apps like e-commerce searching functionality bookings events turning it into a forum and more with just a click of a button making everything really efficient and also hasslefree so in this video I want

was pretty strategic and quite a smart move on their behalf you're probably thinking how well to me it seems as though that they have taken the one thing that makes WordPress so powerful which is their massive plugins Marketplace and then combined it with the best parts of the general no code building space making it a super robust platform which really just means that you can go ahead and extend the functionality of your site with apps like e-commerce searching functionality bookings events turning it into a forum and more with just a click of a button making everything really efficient and also hasslefree so in this video I want to teach you how to get started with Wix studio in three easy steps first an overview of the Wix Studio ecosystem then we'll build a simple homepage with their AI features to give you a sense of what the tool is capable of and then I'll share with you my honest thoughts around Wix Studios all right so if you head to wix. com Studio this is what you'll see to be clear wix. com has been around since 2010 but recently they launched Studio which is a standalone product that was created for web professionals so it's a standalone tool that really focuses on design and web development side there are lots of different places uh under the wick Studio Enterprise and their umbrella of things but we'll focus on a few key things before we dive into the actual product under resources you can see that there is quite a lot of focus in terms of helping them build a community they've got their own Academy they've got templates as well so if you go into the academy this is a great place for you to dive into the world of Wix Studio where you can learn from the tutorials and also the community so you can see that there are lots of events coming up you've also got different tutorials that have been created by the community as well and there are also dedicated Wick Studio tutorials created by the team as you can see over here over at the Top If you see the community section there's also quite a bit of focus put around the community side of things as well you can see that they have just a community of aggregation of events they've also got a forum and you can also become a leader now the Forum is probably a great place for you to head over to ask any questions they there definitely seems to be a lot of activity happening in the Forum as well so you can see that a lot of focus has been put around this beyond that I think the most important thing is to actually take a look at the product so I'm going to head back to Wick studio and I'm going to pop into the actual product itself for you if you want to follow

along you can create an account and once you've created an account and logged in you'll probably land into a part of the website whereever is going to be your dashboard so once you've logged in and you've created an account you'll land into a view that looks like this and this is the Wix Studio dashboard this is the highest level view that you can access and as you can see on the uh header you can access the different workspaces that you might be a part of this could be different teams you can also access all the different sites that you have created you have access to all the resources that I just mentioned the community and more on the right hand side in the left hand panel there's a few things I want to bring attention to you can manage all the different sites you can also see that you can build branded mobile apps part of the Wix Studio umbrella you can also create different templates for their Marketplace and also different apps for their Marketplace as well as you can see very quickly the extent of where Wix studio is trying to focus on you can see that they are actually not just focus on websites but also applications templates and more I think this is where the unique value proposition is for wig studio every tool has their own unique take on the problem I feel like this is the modern take of Wordpress now as you can see underneath youve got a few different settings over here but we won't dive into that because I think the most important thing is to show you how the app actually works so clicking onto sites I'm going to go ahead and create a new site under a studio blank canvas so you probably know we can probably choose

a pre-made template that's really straightforward let's do something from scratch so once that's finished loaded you will land into a workspace just like this workspace is where you will actually be creating the website before I dive into actually creating the website let me go ahead and walk you through the interface so starting at the

top in the header menu you can see in the top left corner hitting the burger menu gives you access to different settings for this project we won't go through every single one in detail but they're quite self-explanatory and they quite common as well right next to that you have the breakdown of the different pages that are part of this website currently we only have a homepage and you can see that's why we've only got a homepage Link in the middle we have the breakdown of break points so you can see that you can see your desktop view your tablet view your mobile view and hitting on the three dots you can also create customized breakpoints on the right hand side clicking on your profile photo will give you access to some of the settings for this project then on the far right we have notifications you can also preview your project and if you want to go back into the edit mode you hit edit site and on the far right you can also hit publish to publish your website so I'm going to go back to my desktop breakpoint then on the left hand side in the side menu we have a suite of different features and

tools so clicking on the first one which is ADD elements you can see that we can add any type of elements everything from images titles paragraph text to buttons and large sections for the website then under sections we have different sections that you can actually click and drag onto your canvas and they are all pre-made pre-designed and also responsive as well as you can see so if you wanted to utilize any types of sections you have all these different sections such as welcome you have your about sections you have Services you have different teams and all that great stuff then under W frames you've got some basic WF frames that you can utilize for your website you've got different containers you also have layout tools you have different types of text buttons menus and searches and so much more Below in this section down here these are more of the application that you can click and activate on your website so let's say you want to add a Blog you can simply just hit add to site and that will generate the entire portion of the site for the blog section you can also add an entire store you can manage online bookings manage events have a members area you can turn on multilingual so you can actually convert your website into multiple languages and you have your CMS and also a menus app as well so as you can see this is what I mean by Wick Studio it's a online no code web dev site and Tool but they also have some really common and popular um apps that you can activate within just one click which is why I think wig studio has a unique take on this problem then underneath we also have your layers so very standard you have a breakdown of all the elements and layers for your project so clicking and dragging will help you reorder different sections of your site underneath that we have the different pages so we currently only have a homepage but clicking on the three dots will give you access to the settings for that page specifically and if you want to add new pages you can hit the plus icon over here then underneath we have Global sections which are really just components that you can use through your site so let's say you have a header which you don't want to have to recreate every single time you can turn this into a component and that will actually pop up in your Global sections then we have your site Styles and this is where you can manage all the topography for all your headings and three different paragraph Styles so if you edit uh your typography over here this will be a global change throughout your website you've also got some color styles as well which you can utilize and update over here and you've got some standard page transitions that you can utilize throughout your site as well now underneath we have the app Marketplace and once again this is what I keep talking about but they've got popular apps as you can see and you can add entire stores booking Management Systems a Blog members areas and so much more within just one click then they also have the app market which is obviously a much more extensive Marketplace and over here you can see you can do a lot of different Integrations and add-ons and extensions for your site which I think is a very powerful thing as this continues to grow down at the bottom we have your CMS which is really just a Content management system and beneath that if you wanted to extend your website with code once again you can definitely extend the website functionality with code as well so wig studio really has a lot to offer when it comes to building websites and for people who have a little bit of experience in utilizing no code tools so let's go ahead and I'm going to close this window I'm going to just delete this section and let's just go ahead and create a very simple homepage for a design portfolio just so you can see how the actual app

works so over here we have a head up that's already being predefined instead of deleting it I might just quickly customize it by double clicking onto the text I might change this to mizco as the name and you know what instead of having a light background I actually want to turn this website black and go dark mode so selecting the header if I open up my layers panel selecting header on the right hand side under the design uh settings and properties under background I'm going to change the color from white to black and then I might actually go ahead and click on open up my header I might go and open up the first the stack that wraps around the logo and also the my mizco text and I might change the color of the logo to White perfect now I can select the text and actually change the color of the text over here but I actually might want to change the actual type Styles so under site Styles I might go to topography and I might go and select the paragraph 1 hit the edit icon and change the text color from black to white and hit apply and just take a look we can see that will automatically change the text over here as I if I double click onto this it's already been changed but because I changed the site Styles over here that is a global change throughout the entire website and that's what I want to do because I want to make sure that we are utilizing dark mode throughout the entire site so we're not going to have text that's going to be black underneath we might want to go ahead and create two sections so on the left we want to have some text that introduces people to what this website is about and then on the right hand side we might want to have an image so I can go ahead and actually go under sections we could go and click and drag a section over but maybe we want to go and do this ourselves so instead of utilizing a pre-made template I might go ahead and select the two column grid and that will create two columns might open up my layers I'm going to select a section and I'm going to give this entire section a black background now on the left side I can click on the left cell I can hit on plus I can go down to text and I might put down a heading one by clicking dragging and just placing it down inside and because the text is currently black I can head over to my site Styles under

heading one click the edit icon change the color from black to white hit apply and I might just say double click into here and I might say ux designer from Sydney all right looking pretty good I might want to make the size a little bit smaller so just for now I'm just doing a little bit of exploring so changing the font size from 71 to 60 pixels that's looking pretty good and then I might go and hit plus under text under let's just see maybe we can grab a paragraph in the mid scale so click on this one bring that over and I might change the color so under site Styles under the paragraph 2 hit the edit icon change it from black to maybe we could do a mid gray hit apply just to give it a little bit of hierarchy in the design and if I don't know what to put

in the description I can utilize the AI tool so create AI text and I might say what's the business type we are going to be a online ux design portfolio and what's the business name it's mizco it's going to be a paragraph It's what's the topic of this text it's maybe a about and what's important to mention so for me for my online portfolio I want to mention that I have 14 years of experience I've worked with well over 50 plus uh clients uh worldwide I've also helped them raise over 400 million in venture capital and maybe that's good enough for me for now so I can click create text and this is going to give me quite a large summary So based on what I would like to add with 14 years of experience as a ux designer with 14 years maybe I will go with the first one I can use text or I can actually just go ahead and click copy I can go ahead and paste that in and I might just remove the second chunk just because I think the first sentence is probably enough for me and that's looking pretty good then I might go ahead and add two buttons underneath so under plus under buttons I might use the light gray button as my main core to action so this might be to view case studies when I do add my case studies I can go ahead and hit plus again click drag hit that and this could be uh get in touch so we have the primary button that's going to be the main focus and then we have a secondary button uh next to it as you can see if I wanted to go ahead and center and align this text and these buttons currently they're all in different groups so if I open up my layers you can see that inside the cell they are all in separate groups so in wig studio they've got a very similar feature to Auto layout that you probably are familiar with in figma so if I wanted to group them and have the ability to systematically set the spacing I can click on the button hold down shift click on the other button and you'll notice this model will pop up I can hit stack and this will actually turn it into a group where on the right hand side if I scroll further down you can see that under layout under direction we can change this to vertical and it would vertically stack our items or elements we do horizontal and the most important thing is I can actually set the item spacing systematically over here so 16 pixels fits within the fourpoint grid system that I personally like to use which means that all my measurements are divisible by four and then I actually want to go ahead and create a stack for this entire component so clicking on my heading holding down shift select the paragraph text and then selecting the actual stack for the buttons making sure that these are all selected then I'm going to go ahead and hit stack to turn them into a stack and I want to make sure on the far right hand side under layout item spacing let's go maybe 24 pixels and that will automatically set the perfect spacing in between so you can obviously adjust that individually if you wanted to but I think 24 looks pretty good and the great thing is as long as you click and you drag you can automatically snap this component or this group of elements perfectly centered vertically and horizontally there we go that's looking pretty good then on the right hand side we might want to go ahead and add an image to this cell so under if you select the cell on the right hand side making sure it's selected from the layers panel we can go ahead and hit add media and we might go ux design in the search we might look for something that's simple easy on the eyes and makes our designs look pretty good I might go ahead and even maybe pick this I want to see what this looks like add to page and as you can see it's currently cropped off at the top so what I do like about Wick studio is if you hit under this um popup hit focal point you can click and drag based on where you want the image to be showing so very quickly and very easily you can actually adjust and show the exact part that you want to showcase so this looks pretty good and it looks exactly what I wanted I didn't want the top to be cropped off I just wanted the bottom and we can showcase the top of the phone that's looking perfect so the last thing we want to do is select the footer we want to go to background change the background to Black and then we just want to make sure that the text select the text head over to color change it to White we might want to rename this to 2024 business name is mizco and we might just remove the last section just to keep it pretty simple and there we have it so we can go ahead collapse the right menu up in the top right corner hit preview and we have a very basic very simple website for our homepage now here's another great feature that Wick Studio does have so heading back into edit site I can closing this select any section and in the little tool tip that pops up I can

hover on the responsive AI icon if I click that it will ask me to go ahead and create responsive sections with AI for all devices and all custom breakpoints so if I hit generate now this will turn the current design into responsive views all right so that took just a couple of seconds so I'm going to go ahead and close this uh little model and we can whoops let me just close that for now and let me just go ahead and let me minimize that show you the preview of this responsive view so I had not created any of the views for responsive uh tablet and also mobile but based on that very quick action you can see that we can actually go ahead and extend the uh width of the button over here but you can see that actual uh feature will automatically create the responsiveness for your entire website so that saves you a lot of time and obviously you can jump in to tweak any of the designs a little bit but let me go ahead and actually apply it so let's go ahead apply design close that and let's just quickly go over to the mobile view we can select the button we can go ahead and select the mobile head to focal point and on the mobile we just want to bring that up a little bit so that looks pretty good fits into the frame close that and then we might want to just adjust the button so we might head to tablet just to make sure it's looking good on that side that looks good and then on mobile we can double click onto the button itself and just simply click and drag out the button and that we should automatically align our two buttons and go ahead and just select the container make sure that comes back out and we can just align the items to the center and that's looking pretty good so based on my desktop we can do a final preview of the website making sure that everything is looking good snaps to responsive break points and there we have it now there is no doubt that there are a number of different tools in the noode web development space but I genuinely believe each one has their own unique take on solving a problem Wick studio to me is coming in as that modernday solution for building complex apps and websites that requires minimal code knowledge but most importantly has a powerful app Marketplace that allows you to extend the functionality of the website pretty easily and you're not waiting on their team to launch new features once again taking the best part of what has already worked in the past and just giving it a modern spin I really do hope to see that wig studio pushes the boundaries with their apps because I think that would really help them secure a position in the marketplace so I really do hope that this video gave you a better understanding of how wig studio works and how it differs from other tools and if you are interested in launching a site with them you should definitely check them out now if you enjoy this video make sure to gently smash that like button subscribe for the Die Hard fans and if you want to continue learning you should definitely check out this video