Website X5 tutorials 2024. Creating a website from scratch (demonstration video)

Creating a website from scratch in Website X5 2024. From idea to upload at hosting. From simple website to responsive multilingual online store with registration https://magazin.aleksius.com/en/website-x5-tutorials-creating-a-website-from-scratch/website-x5-tutorials-creating-a-website-from-scratch-opisanie

---

Closed Caption:

in previous video tutorial we worked
with responsive design and template
structure now let's work with template
content in our case without sidebar I
will work with header and footer but
working with sidebar the same as working
with footer or header first let's add
logo here it will be an
image I already
prepared necessary
image just select
it also it will be nice if we click on
the logo and go back to the homepage
let's set a link it will be homepage
because for now we have no other Pages
just save
it and if we click preview we already
can see our logo of course here is the
link we can click on
it now let's add search toolbar here it
will be search for whole
site let's go to
settings here we can see search on whole
site if we'll add some products in the
next video tutorials we can search just
in products but for now let's leave that
like that we can
change our fonts we can
use these fonts fonts by default or we
can use Google
fonts for
example let's search for oswal
size
table also we'll create page called
Gallery but it will be here in the
future we'll have a Blog a contact page
and page my orders the blog is special
page but to add it here we need to
create a block we will see how we can do
that in next video tutorials now we just
add new page call
contact and my
orders that's just fine for now we have
our
menu we have sub
men so let's move back to template
content and let's go to menu options as
you can see here we have menu options
for this this level menu this is our sub
menu these menu items and H menu let's
see mobile no it doesn't work because we
have no settings for
it first let's go to main menu settings
and now let's change the
settings menu alignment will be
Center hurger menu this menu will be
right the white will be 100 this is the
white of these
elements with no
[Music]
space margins will be something like
that the font will be open SS
so for now just leave it like that go to
next
viewport and change our objects
let's see what we've got this is not
very
good that's more better
but let's change this
also as you can see you have some bug
here let's try to get
it from
here just move it here and now let's
hide it to this View port and this view
Port select this objects hide for this
and sub view
ports here we can see this objects and
here we won't see these
objects once more
okay let's leave this like
this and go
here here we can
[Music]
see our two objects let's try to arrange
them
let's see the
result that's not very
good so I propose to hide
contact
address hide for this
viewport and show just
contacts okay also as you can see here
with some bug
here is our search field
also here also we have some bug so let's
check
it let's go back to
header let's see this can be the
reason we can add
rows and add columns or theet rows theet
columns here you can
select adding rows and columns before or
after the selected cell also you can
change the
size
manually using this
marker as you can see I can delet them
all but for now I need
12 columns now I have two let's add some
more also I need 11 rows now I have two
let's add more
rows okay now we have our greed if we'll
see preview nothing has changed and now
we can add some objects
here first here I will add simple
separator this is free
object here it is this is just for
place the high will be 100 I will copy
this subject past it
here you can extend objects wi to the
full white of the browser
screen for example just click extend and
extend like this here I will add some
text
object I will insert some text here for
example it will be my logo I will insert
for example
image with local file
here it is and I will add a
text it will be
oswal 36
Boldt and around it will be open SS 28
italic
now let's place it in
Center we have our object now let's
let's add
background for this purpose go here
click row
format and look this and this
rows extend it here select not colored
we'll select
image it will be white color add the
background of the
image I will add
background picture do not
repeat it will be at the
bottom okay let's add some background
here in fold wide of the browser
window let's go to row
formats and change the
color Oh no just select image here
select the
color or maybe like
this or
[Music]
this now let's
change we can
see here it is but let's expand
it
okay let's change the color to more
darker
that's
better and here will be one big text
object with this
text and with image the image will be
inside the text object here it is Mo
info
I will add a link to this page for
example let it be delivery that's
doesn't
matter this text will be like this and
for this we will change the
font the color I also will
change this text I will leave without
changes let's increase this
font make it
[Music]
bold change the
color for now it look like this
we will
change row
format here we can need to select image
with white
background do not repeat
Le let's extend it and add parallx
effect there are different types I will
select this
one yes we've got our parallx
effect but let's change the
margins I will increase the high of the
area we will add some products here and
here I'll create two categories and add
some products the first category will be
pants you can create
categories and move them up and down
like you do it with mop with levels and
pages so the levels is categories in
shopping carts and products is Page in
mop so it's very
simple let's add second category
shirts now let's create new product in
general you just need add name and price
all other settings are not necessary but
in my case I will show you almost all
fields and we work almost with all
options I will add just some
text you can add weight the weight can
be used to add discount also for
shipment we will work with it
later just for now you can click okay
and now let's go to
map here we will add our catalog product
catalog here I will add all these
products and we can see some changes we
can see the name of the product category
shot description price now let's go back
to settings shopping
code and for example set product as new
we will see where it display in the next
video tutorial when we will adjust this
page product page for now we won't see
any Marks here but let's go to the
image and you can add local files or
online image I will select cect local
file I will
add
pants with these tools we already work
in previous video tutorial when we work
with Gallery everything the same for
example this image will be main
image here it
is if we change it
for example like this it'll change
here for now I won't work with this and
this options but in next video tutorial
we'll work with them now just add some
details this will be detail description
here we can
select product page nonone or link for
example if if we select
none here I will click and won't go to
any page if we
select product page this product page
will be generated automatically
here we can see some Fields some of them
we can change also as you can see here
we can we can select best payment
method we can see payment price so
everything is working let's see these
options here are some fields for example
you can disable some fields for example
by clicking
[Music]
here or you can add fields for example
just show them or makeing them
mandatory as you can see we have company
field but it's not
mandatory and we won't see a zip code
here because because I dis disable
it let's disable this field let's also
disable City we will leave country we
will leave phone and make it mandatory
also we can leave we will leave email
address and of course we can add new
field for example let's add field how
did you find out about us it won't be
mandatory also you can change the order
for example email bu will be before
phone country will be
lost let's see our
changes yes we can see a mail address
here phone here and our question field
we can see here but it's not
mandatory also here we can enable
request accepting of sales terms of and
conditions and enable option allow
shipment data to different from invoice
data let's
see here we can see shipment address is
different from invoice address and we
can add additional
data and
here we can
see I agree to the terms of and and
condition fields and some text on
condition
field here you can insert just a link
with the page with full text and it will
be more convenient to the
user on the send in order tab we can
change notification email with and
footer text also we can add email for
reserving orders on this email will be
website will be sending letters to the
administrator also we can attach order
data in CSV
format or if you want we can send data
to database of course we can set send
data on the
email but with a data Bas we will work
in next video tutorials for now I'll
just leave like
this and let's go to options here we can
select
currency in previous video tutorial we
create manual user registration and
automatic user registration automatic
user registration cannot work without
database but this is not the only thing
that database can be used
we can use it for digital products let's
go to shopping cart here we can see gift
here we can see a digital product I
already add some card icon like a
digital product for example we will
sell this
image but it won't work because I need
to activate database usage to digital
products let's go here let's go to send
order sent to
database here I'll enter email address
for administrator I won't change
anything here go to product
list let's go to digital
product save it save and let's export
website to internet the site was
uploaded let's go to
shop here we can see our
gift we can add to the
card process with the
order okay the
minimum is
100 let's go here I'll enter some
data the country will be
Ukraine okay without
characters I'll select bank
transfer I agree byy now we'll see this
message go to admin with eCommerce card
commands blog reserved access and
commands rating we already work here we
can see our register user we can send
the recovery password email we can delet
the user with these things we already
work we can manage the
commands year Commerce card we already
saw we can see some low stock products
on hold information processed orders we
can see some charts here