Wix Website Tutorial 2025 - Complete Guide for Beginners

hi there my name is Simon and in this

video I'm going to show you step by step

how to create a website using Wix now if

you have never done this before then the

idea of creating your own website might

seem a bit overwhelming but don't worry

it's easier than you might think

especially using this tutorial because I

will guide you through every single step

to create your own website and I'll make

sure not to skip anything along the way

so by the end you'll walk away with a

beautiful and professional website and

I've listed all the steps we're going to

cover Down Below in the video

description so if you're looking for a

specific part feel free to jump ahead so

let's not waste any time and dive

straight into the tutorial all right so

we're going to start right here on the

sign up page to get to this page simply

click on the first link Down Below in

the description or go to madx

media.com Wix once you're on the this

page simply type in your email address

and click on start now then choose a

password and click on sign up now we're

getting to the onboarding process so

here let's say I'm building a website

for myself my business or a friend and

click on continue and this takes us to

this Wix AI chat interface which should

help Wix to personalize your website

dashboard based on your needs how

however in this video we're going to do

everything manually and set everything

up without this chat to keep full

control over our dashboard so let's

click on setup without chat and here we

want to tell Wix what kind of website we

want to create now in this video I'm

going to create a restaurant website for

an Italian restaurant so I'm just going

to type that in here and as we can see

they even have this as a choice so I'm

going to click on Italian restaurant and

then click on on continue here on the

second step we want to enter our brand

or business name and I've chosen a nice

Italian name for this restaurant which

is Bella cuchina which means beautiful

Kitchen in Italian and then we also want

to enter a description of what our

business is about so I've quickly

written down something here with the

help of Chad GPT so once that's done

let's click on continue next we can

choose different goals for our web

website and by default there is already

a few options checked based on our

information we have entered so I do want

to show the menu items on the website so

I'm going to leave this checked but I do

not need to take orders online so I'm

going to uncheck this option but I do

want to manage table reservations on the

website so I'm going to leave this

checked and everything else right here I

don't need right now so I'm going to

leave this unchecked and click on

continue and here the only thing I'm

going to check is run your site on

mobile because I also want the website

to look good on mobile phones then let's

click finish all right now we are in the

Wix dashboard which is basically the

back end of your website in the top left

corner we can see the name of the

website we have just created and we can

also create any new website by clicking

on create new website at any time and

here on the left side we have the

navigation menu of your website Dash

board which gives us all kinds of

information and also settings for our

website now by default you'll be on this

homepage right here where you can see

some specific metrics for your website

traffic and your sales if you're selling

stuff on your website you have also

different options like managing your

invoices you can manage your orders

right here you can manage your

restaurant menu if you have a restaurant

website your table reservations down

here we can also manage our inbox our

contacts we have different marketing

features we have different analytic

reports we can check out and then we

also have

automations but for now we don't need to

worry about any of these settings right

here because first we need to set up our

website and then we can always come back

to the dashboard and look at all these

different options so let's get started

setting up our website by clicking on

design side right here at the top now

here we have two options we can either

use Wix AI to generate a website design

based on the info we have given about

our business or brand or we can use a

professionally designed template and

then customize that template based on

our needs so I've tested out both of

these options and to be honest with you

I prefer just choosing a template and

then customizing it based on my needs

whenever I try to use the AI to create a

website the result just didn't look and

feel as professional compared to just

using a professionally designed template

I do think that they will improve this

feature and then at some point it might

be better to just go with this option to

get something completely customized but

as of right now I do think the better

option is to choose a template and then

just customize it to have a professional

result and the great thing about Wix is

that they have a lot of different

templates to choose from so the chances

are pretty good that you're going to

find one that you actually like so let's

move on and click on pick a template so

now it's time to choose your website

template this is going to give your

website the basic structure and design

and it's going to make it a lot easier

for us to create a professional website

now you do want to spend some time

browsing these templates and find the

one that you like because once you've

chosen your template you can't change it

afterwards the easiest way to find the

right template for you is to just browse

these categories right here or you can

just come to the search bar up here and

type in the type of website you're

trying to build so in my case this would

be Italian restaurant so I'll type that

in right here and hit enter and now it

will show me all of the website

templates that would work for a Italian

restaurant so here we have Italian

restaurant pizza restaurant Mexican

restaurant

and then all kinds of different

restaurant website templates uh that I

can choose from so I pretty much like

the first one right here so to check it

out I can just click on view and then I

can just just browse this website

template and see if it kind of looks

like a website that I would want to use

for my own website you can change all

the colors you can replace the images

the text and you can also change the

fonts but I do recommend to choose one

where you already like the structure

because this will save us a lot of time

when actually customizing the website we

can also click on the mobile phone icon

here at the top to see what this website

looks like on a mobile phone and once we

decide that this is the website template

we want to use we can just click on edit

this site at the top right now this

takes us into the Wix website editor

where we can start designing our website

the first first thing I like to do is

click on this zoom out button here at

the top right to get a better overview

of what our website currently looks like

as you can see we are on the homepage

right now to go to any of the other

pages of the website we want to come up

here and under page we can switch from

the homepage to any of the other pages

of our website like for example the our

story page we can then also check out

what this page looks like on a mobile

phone by clicking on the mobile phone

icon here at the top and this will show

us the mobile phone layout but for now

let's go back to the desktop view and

then let's also go back to the homepage

and here on the left side of this editor

we have all the tools we need to

customize the design of our website and

throughout the video we're going to

cover most of these now every page on

your website consists of one or multiple

sections so here we have this first

section at the top then we have this

about section here we have like a

gallery section then we have a section

to reserve a table and then we have this

contact us section you can also move

around these sections very easily so for

example if you want to move this Reserve

table section to the bottom we can just

hover over it and then click on the

Arrow to move it down below this section

here here whenever we want to undo a

change we simply click on the undo icon

here at the top and this will undo the

recent change and inside of all of these

sections we have multiple elements that

make up the content of our page and to

customize these elements we have to zoom

in again and go back to the initial view

by clicking on this button

here and here we can see all the

different elements in this section with

a blue outline and to edit any of the

text inside of this section we can

simply click on this element and then we

can see the menu here at the top so

let's click on edit text and then we can

just type in the text that we want to

use so I'm just going to add the name of

the restaurant and then on the right

side we can see a menu to change the

design of this text so here we can

change the heading style the font style

we can also change the font size by

dragging this slider to the right or to

the left we can make this italic or make

this underlined whatever we need and

when we're done we can simply click

anywhere on the page to leave the text

settings and if you want to change the

position of this text element we can

simply click hold and then drag it to

any other position on the page however

make sure that your text is always line

nicely to the other elements and you can

use the grid lines to do that so if I

were to place that back in its original

position on top of this graphic right

here I would use these grid lines to

make sure it's aligned perfectly so

changing any text element on your page

works pretty much the same you can just

click on the text element and then click

add a text to make your changes now

because this is a template some text

paragraphs will just be dummy text so

you're going to have to come in here and

add your own text now if you find it

hard to come up with your own content

what I can recommend is to use this AI

feature you can just click on this AI

tools icon and then here we can click on

generate new text now here we can create

like an about section for this Italian

restaurant so I would add something like

please create a short paragraph talking

about how we prepare our dishes at our

Italian restaurant Bella cuchina so we

can just click on the uh icon here and

then it will start creating a text for

us and if you like the text you can just

click on use text and then it will

automatically replace the dummy text

with the new one that we have just

created now another very important type

of element that we want to use across

our website are buttons that people can

click on like this one right here

buttons basically help us to guide

somebody to another place of the website

where we want them to go and to edit

these buttons we can just click on them

and then we can change the text here and

we can also change where this button

links to So currently it links to

another page of our website which is the

r story page so we could either change

the page that we want people to go or we

can also send them to a different

website we can send them to a different

section on the homepage and we have some

more options down here and to replace

the images on your website it works

exactly the same way you just click on

the image element then click on change

image and then here you can either drag

in your own image file or you can also

use the media from Wix by clicking right

here and then type in what kind of image

you're looking for so in my case I'm

looking for an Italian chef so I'm going

to type that into the search bar and

then I get all kinds of images I can

basically use for free and I'm going to

choose this one right here so I'm going

to click choose image and now the image

has been replaced now if you want to get

rid of any element on your website you

simply hover over the element right

click and then you just click on delete

and it works the same way with an entire

section you just right click on the

section and then click on delete so now

you know how to customize the existing

elements on your page and next we're

going to take a look at how to add new

content to your website so the first

thing we want to do is add a completely

new section and to do that we're going

to come over here through the tools and

click on ADD section then first we want

to scroll to the part we want to add

this new section and I'm going to scroll

all the way down because I want to add

it right here below the reserve a table

section then here on the left side we

can see all kinds of different templates

that we can add to our page if you don't

want to use a template you can click on

blank section and then you can start

from scratch however I want to use one

of these templates to save me some time

I want to add a team section to the

homepage so I'm going to go to Team and

then look at these templates I like this

one here at the top so I'm going to

click on it and now it will

automatically be added to my homepage

and I can edit any of these elements in

this section the same way as we've done

before now let's say I want to add a new

element to this section to do that I

have to come over here and click on the

plus icon where it says add elements

then here I can see all kinds of

different elements I can add to my page

let's say I want to add a button below

these images here so I would have to go

to button and then I want to use these

themed buttons here because I already

have the design of this theme so I'm

going to use this button right here and

this will put it onto my page now I want

to place it below this area so first I

have to make some space inside of this

section so I'm going to have to increase

the section height by dragging the

Border here to the bottom like this and

now I have some space for this new

button so I can just click hold and drag

it to the correct position and now to

edit it let's click on settings then

we're going to change the text and then

also make sure to add a link and I'm

going to link this button to the our

story page and click done and whenever

adding something new to the page I

always like to zoom out by clicking on

this button here at the top to see what

this new section looks like on our page

now I think it looks quite good and it

fits nicely into the rest of the design

the only thing I would want to change is

the style of this button so to do that

I'm going to go back to the initial view

here then click on the button then go to

design and then here I can change the

design of this button and I'm going to

choose this one right here I think that

one looks better so let's zoom out again

and see what it looks like now and I

like this a lot better so now let's take

a look at how to manage the different

pages on your website let's scroll all

the way up to the navigation menu which

we can see up here this is where the

website visitors will be able to

navigate to different pages on your

website now when we come over here and

click on pages and menu this is where we

can manage our Pages now here I notied

that there are some pages that I don't

need on my website like for example this

order online page so to get rid of this

page we can just click on these three

dots and then click on delete and

confirm and then I'm going to do the

same thing to this ordering page one

delete and confirm and then go back to

the pages so now these are the links

that will be shown in the navigation

menu all the way here at the top of the

page now our story is a separate page

menu is also a separate page and then

here next to reservations and contact we

can see this anchor icon this means that

this is just a specific section on the

homepage and when people click on this

link in the navigation menu right here

then they will automatically scroll down

to this specific section on the page now

to edit any of the other pages on your

website you can simply navigate to them

by clicking right here and then you can

navigate to the r story page for example

and then you can make any change right

here but just clicking on the elements

and then changing the text or replacing

the images however you like now to to

add a completely new page to your

website we want to come back to the

pages and menu tool right here and then

we want to click on ADD page here at the

top then we can either start with a

blank page by clicking on this button or

we can use one of the templates for

different types of pages now in my

example I'm going to Simply add a page

talking about the events that have been

held in this Italian restaurant I'm

building a website for so I think a good

template would be here under projects

and then here I'm going to use this

template so I'm going to click on ADD

page and now this page will be added to

our website and we can rename the page

right here so I'm going to name this

events and click done and now this link

was automatically added to the

navigation menu and we can see that

right here in the menu now we can also

rearrange the order so if you want to

have that at the end of the navigation

menu we can just move that all the way

here at the end and then we can just

click into this page and customize the

content next let's take a look at how to

customize the contact form on our

website so first I'm going to go back to

the homepage which is where my contact

form is located here let's scroll down

and look for the contact form so it is

right here below our opening times now

to customize this form let's just click

on on this form element and then click

on edit form and this will open up the

Wix dashboard and open up the form

settings so we first have to create our

form so let's start with the name up

here I'm going to name this form just

contact form

one and then click save and go back to

forms and then here we can see the form

we have just created so let's click on

edit and then we can add different

fields to this form so I'm going to

start with the first name then the last

name then the email address the phone

number and then down here I'm going to

also add a long answer for the message

they want to send I'm going to change

the title for this field to message and

then click on save so now my form is

ready so let's close the dashboard

window and then let's go back to this

form let's click on it then go to

settings and now we want to choose the

form you have just created which is the

contact form one and close this window

and now the form is activated on your

page if you can see it right away just

click on preview here at the top right

and this should make your form visible

on your page and you can then go back to

the editor now when we scroll a bit

further down we can see this map right

here which shows the location of our

business and to change the location we

can just click on this element click on

manage locations and then we can change

the address here and the location will

be automatically changed now if you

don't have this element on your page and

you want to add it as well you can just

click on the plus icon here then go to

contact and forms scroll down to Google

Maps and then add a full width map you

can just basically choose any of these

designs here then you can click on it

and then it will be automatically added

to your page and you can change the

location to your business location next

let's take a look at how to customize

the header of our website which will

always be shown all the way at the top

of every page so here we have the

navigation menu that people use to

navigate through your website and we've

already seen how to manage this

navigation menu which is by going to

pages and menu and then we can rearrange

the menu right here we can add and

remove pages here now we can also play

around with the header layout so we can

maybe add a logo put these links here to

the center and then maybe also add some

social media links now to do that we're

going to first select the header and

then click on the header again to select

a strip with the two columns then we're

going to click on manage columns and

here we can see that current L we have

two columns one on the left and one on

the right and I want to add one more so

let's click on ADD column here and that

gives me three different columns so a

wide one right here and then two narrow

ones here on the right side I actually

want to put this wide one in the center

so I'm going to select it here and then

click on the Arrow to move it here to

the center now let's close these

settings and then click on the layout

icon right here this is where we can

change the column proportions if you

want to change the width of these

columns I'm going to leave them as they

are so I'm going to close these settings

but here I notice that my navigation

menu is cut off on the right side so to

change that I'm going to click on the

menu element and then just drag it here

to the right to make sure my entire menu

is visible here at the top next I want

to add my logo here to the left side of

the header so first I'm going to click

on this login bar element and get rid of

it by right clicking and then clicking

delete and confirm I don't need any

login option on the website then to

upload the logo let's click on this plus

icon add elements then go to image and

click on upload images then I'm going to

Simply drag and drop my logo in here and

click add to page now let's make this a

bit smaller and then drag this to this

left column cool I think I want to make

it a bit smaller maybe like this and

then make sure it's aligned nicely in

the center and then optionally we can

also add some social media icons to the

right side of the header so again we can

click on the plus icon then go to Social

and add some social media links I'm

going to use this design here then drag

this to the right column and I want to

make these a bit smaller so let's go to

layout and then decrease the icon size

like this and close the window make sure

to align them nicely to the center and

then I'm also going to set the links by

clicking set Social Links and I don't

have LinkedIn so I'm going to delete

this here I don't have Tik Tok and I

don't have let's say YouTube and then

for the rest that is still here we can

just click on these icons and then here

you want to add your link to your

Instagram your link to your Facebook

Twitter or or whatever you have added to

your page make sure this is aligned

nicely right here now whenever you want

to change the colors or fonts on your

website you can simply come over here

and click on site design here under

color theme we can change each

individual color of our website simply

click on the color you want to change

then you can change it right here and

you can see the changes happening live

on your website or you can also go back

one step then click on side theme and

then just try out different themes that

will be applied across your entire

website now personally I like the first

one the best so I'm going to go back to

the original one then to change your

website fonts just go back one step here

then go to text theme and here you can

change each of the fonts individually so

currently we have this font for the

headings we can maybe change it to this

one right here and it will be applied

across your entire website and the same

for the paragraph fonts now whenever you

make changes to your website design you

always want to make sure to also check

the mobile phone version and make sure

it looks good on the smaller screen size

as well so let's do that by going to the

mobile phone icon up here and right away

we can see that we have a bit of a

problem here in the header the logo and

the social icons we have added are

overlapping and it doesn't look good so

what I'm going to do is actually fix

this by removing the social icons

because there's just not enough space

for both elements so what I'm going to

do is click on the social icons and then

click on this I icon which will hide

this element on the mobile phone version

and now I can simply increase the size

of my logo just a bit and make sure it's

aligned nicely with the hamburger icon

on and then just decrease the height of

the header and now it looks great now

whenever we make changes here on the

mobile phone version it will not affect

the desktop view so when we go back to

the desktop view by clicking here then

we can see that the social icons are

still here so you always want to start

to make changes on the desktop view and

those will automatically applied on the

mobile phone view but then you want to

make sure to optimize these changes on

the smaller screen size to make sure

it's aligned nicely so we've already

fixed the header right here so now let's

scroll down and see if there's something

else that we need to optimize now most

of these elements are already optimized

for mobile because we're basically using

a template that has been optimized now

we've manually added this section right

here but it looks pretty good

actually maybe we can change the

position of this button and put this a

bit to the bottom and then maybe make

this section a bit larger

maybe like this and I think that looks

better then let's scroll down all the

way to the bottom and everything else

looks pretty good A special feature here

on the mobile phone version is this icon

here at the bottom this is basically a

quick action button where people can

click on and then they can either send

you a message call you send you an email

whatever you have set up so here we can

click on set up quick actions and

currently we just have a chat so you

would be able to chat with people using

Wix using the Wix app but we can also

add more actions like for example we can

add our phone number and then we need to

click on setup here enter our phone

number and once we've done that people

will be able to click here click on this

phone icon and then they will be able to

easily call you and you can do the same

thing with email so more actions email

and then just add your email address all

right now let's go back to the desktop

view so now let's take a look at how to

use apps on your website so whenever you

want to use a special feature for your

website like the ability to reserve a

table or to book phone calls or to sell

something or to chat on your website you

would need a special app added to your

Wix website there are apps made by Wix

and then there are some apps made by

third-party providers so in my example

here I want people to be able to Res

reserve a table on the website so let's

click on this element here and then

let's click on manage

reservations this will take us into the

dashboard where we are on this tab table

reservations and just for a moment let's

click on apps and then click on manage

apps and here we can see all of the apps

that are already installed for our

website so there is Wix forms and

payments there's the members area app

wix's tips wix's forms for our contact

form Wix Pro Gallery table reservations

the menu application where we can show

the restaurant menu and these have

automatically been installed because we

have chosen a restaurant website

template now when we go over here to App

Market this will show us the entire Wix

app market where we can find apps for

all kinds of different things so for

example let's say you're looking for an

app that will enable you to have your

customers book your let's say V

rental place so let's just type in

bookings hit

enter and then let's see what kind of

apps show up so there is the Wix

bookings app made by Wix then we have

the vacation rental booking engine that

you can add to your website we have the

booking.com reviews so we have all

different kinds of apps you can use on

your website now some of them will be

free some of them will be paid but let's

go back to manage apps here at at the

bottom left now what's also worth noting

is that for most apps you actually have

to upgrade to a paid Wix plan because

here we can see all of these business

apps that we have installed we're not

going to be able to use them unless we

click update site and choose a paid plan

for our Wix website so now let's close

this dashboard window and go back to the

Wix editor now once we are done

designing our website and everything is

set up we are ready to publish the site

now first I would actually go and

preview the website by clicking on

preview here at the top and this will

basically show us the version of the

website how visitors will be able to see

it so we can also click on different

links and go to different pages and just

check if everything works now once

you've checked everything all we have to

do to publish our website is come up

here to the top right and click on

publish congratulations now your website

is published and people can go visit it

if you want to visit your own website

simply click on view site right here

which will open up your site in a new

tab now because we are still on the free

Wix plan our site will be published on a

wixsite.com domain and we won't be able

to change this to our custom domain

unless we upgrade to a paid plan and the

other thing that we notice is that we

can always see this advertisement of Wix

at the top of our website and this will

be visible to anybody visiting your

website no matter which page they're on

so if you want to get rid of this ad and

you want to use your own custom domain

we need to upgrade to a paid plan so to

do that we go back to the website editor

which we have still open in the other

tab here we're going to close this

window then go back to the editor and

here let's go to the top and click on

connect your domain and this will take

us to the dashboard where we can choose

choose our domain name so right here it

has already recommended a specific

domain to me you can also change that

and look for a different one but this

looks pretty good to me so I'm just

going to click on get it right here then

we have to choose this option because

only this will allow us to connect our

domain to our website so let's click on

continue here I'm just going to go with

the cheapest plan which is $11 per month

here I'm going to choose the yearly

option and here just enter enter your

payment details and click on continue

once the payment is complete we get to

this page where it says that we can now

connect our domain so let's click on get

it and here I'm just going to go for one

year because this is just for this

tutorial and click on continue and again

we have to enter our information and

click on continue here I actually

recommend to go with the private

registration because otherwise when

people are looking for your domain they

will be able to find your name and

address so I'm going to choose this

option here and click on continue and

again submit purchase and now our custom

domain should be connected to our

website so let's check by opening up a

new tab and then typing in your domain

and there we go now our new website is

connected to our custom domain now if

you found this video helpful please give

it a thumbs up and subscribe to the

channel if you want to see more wig

tutorials in the future thanks for

watching