Hello everyone today we are going to
talk about dynamic pages. Dynamic pages is a feature available on a wix.com to
simplify your site and reduce the amount of pages. Let's say that you have a site
with 100 pages and 50 of those pages follow the same structure changing only
the content, in this case you can use a dynamic page to simplify it and reduce
the amount of page on your site. Ok let me show you exactly what I'm talking
about. First of all I created this website, as
you can see I created five pages and I named them as home dogs cats turtles and
ducks, now I'm going to show you what I have on them the first one is the dogs as
you can see it has two photos title and description the second one is the cats
and also follows the same structure two photos title and a paragraph then the
turtles and the ducks following exactly the same structure, so what if I could
have only one page that would personalize itself for what I want to
see, first we need to enable the Corvid, it will allow us to work around our
database, it is located on the top of your screen inside the tab called dev
mode, once you hit enable corvid a screen will appear, you can close it.
You will also notice that a new tab will appear on the left of your screen but we
don't need this tab now you can close it by hitting the arrow left at the bottom
of the screen. Something else was added to the Editor
now also we have the data icon located on the left side of your screen.
Through this icon will be able to manage our content that will be displayed on our
dynamic page, each of those pages created to add photos titles and descriptions of
the animals will be stored inside the database and I am going to show you now
how to do it. Let's click on the data icon and create
a new collection, when you click create new collection a new pop up is going to show
up on the left side you have the option use a present on your right you have
the option start from scratch, let's choose this one. In the next screen you
have to name your database for this example we are going to use animals,
below it you have a question "what is this database collection for?" we are
going to choose "site content" in this space we will tell the database how we
are adding data to the collection and how we are going to use it, let's keep it
simple for now, click on create collection. After that the collection will be
created and you are going to see this screen, on the left you have a sandbox
and live. Sandbox is the database we work while using the editor, the live is the
one available for your published site. On the right you are able to import and
export data, define permission and sync data between the sandbox and live
this is very important, the data you import on your sandbox and live will
only reflect in each other if you use the option sync. We are going to change
the fields the first one is title let's change it for animal name and below the
name we have the field type, let's keep it as text as we are going to input text
on it. Let's create a new field just click on the plus sign in front of the
previous field and then let's name it description, right let's also keep text
as the field type, again let's create a new field and call it image one as we're
going to have two images, another field now called image 2 okay now we have to pay attention to one
detail what type of field are using for all those fields? first one it's only
text we added the text that's fine, okay let's check the second one, description,
description we're going to add only text as well so should be text there, let's
have a look great text now let's check images, oh... we have text and we're going
to add image to it, just let's change it for image and save it and let's repeat
the same thing for image two, choose image, and that's it. We have four animals, first
thing we're gonna do is to add four lines, then we're going to start to add data
into it the first one we're going to call ducks and add the description after
that let's choose the image, now that we have the image that we want,
let's go for image two and do exactly the same thing. Great now we chose the second
image and then we have the first line. I'm gonna finish all of them. Now that I
entered all four animals that we have in our website I'm gonna pay attention to a
message that I have on my left top corner of my screen, and this screen is
saying that all my data on the sandbox is only available for the preview mode, if I
want to see it on my live site, I would have to go to my live database, as you
can see the live database still empty
so let's sync the information between them, on your right corner just click on
sync, the first option says copy all items from the sandbox to the live site and
this is the option we're gonna choose for now. If you are using your database
just collect data from your users online you would have to choose the opposite
side replace all items from live to sandbox but is not the case now, let's keep it
simple if you check now on your live database
you see that it is still empty, it will only show after publishing the site, now let's
go back to the editor and click on the first link on your left of your monitor
that says "Menus and Pages", you're going to see the option dynamic page, if you haven't use dynamic page before, this page will be empty as you can see, what you
have to do is, add to site, you will see a quick explanation about dynamic pages
you just need to click start creating now you have Item page and category
page as options Item page is if you want only one
line of your data being displaying in that page, if you want much more data being
displayed in one page you can use category page in this case we just want to show
one line for the dogs for the ducks or cat, let's use item page. On the top you
have which database do you want to use, as we only have animals let's just click
animals if you had multiples just chose the one. In this space you're gonna
define the URL for your dynamic page let's just use animals that's the name
of the database we're using an animal name to make a filter for that database
and click in the next one, create page, this page will be created and our we
have in the middle of the screen an item call dataset. Dataset is a connection
that you have with items from that page to your database if you go to the
settings of that data set you'll be able to see to which collection is this data
set connected to and the name of it the mode that's read-only in this case
because we just want users to be able to see what we're displaying and the number
of items to display, the data set item is invisible you can add it to any part
of your screen now let's go back to the dogs page and copy the same structure
the that was used in there for our dynamic page, we can use exactly the same
structure title two photos and the description once you paste it on your
dynamic page you can now see that we have two photos a title and description
what you're gonna do is click first on a title and then we gonna have the options at
the top of it, if you notice the last option is connect to data let's choose
this option once I click connect to data this is
this screen you see, at the top you have the name of the data set it's connected and
right below is text connected to, let's choose the text that we want to display
there in this case this is the title so let's choose animal name as a title
let's repeat everything for the other elements the next one is a description
click on it connect to data and choose which data will be connected to this
case description as we had before now let's do exactly the same thing for the
two photos that we have the first one let's call it images now we need to
choose images remember we are storing an image and not a text so you just need to
click image 1 and now we're going to do it for the image two, again click in
connect to data and choose image 2 that's it now that we have connected all
the elements from our dynamic page to one specific section of our database
let's preview it and see how it looks like as you can see when you click in
preview we're going to see the cats first. Wix gives you the option to have this small tab on your right corner on the top so you can change it while in
preview mode and then you can see every time you change all the content change
the structure is the same but the content is different all of it using
only one table as you can see the turtle was cut off
you make sure you edit it so you can fit all the words that will be available for
that element okay if you make it too small the element might not spread
perfectly but in this case you can see that it's fixed. Now let's go back to
our editor and publish our site, now that your database and dynamic page is ready
to go let's try it now on the live site let's go to the dynamic page, but there
is a problem we did not connect anything to our dynamic page so let's use the
fhotos that we have and connect them to our dynamic page because it still works with dogs and cats but if you click on the image that you have on your first screen
they just show up they don't connect to anything so let's connect those photos
to our dynamic pages now let's go back to the editor, click on the photo you
want to edit and click in manage media now choose one of the photos that
you want to set up first let's start with the dog, click on "links" and when
link opened on the left you will have the option to open a new page when that
photo is clicked, on your right you have what page it's going to, so in this
case let's choose animals when you choose animals they're gonna ask you which animal do you want to display when you click in that photo
let's choose dogs and just press done remember to give a name to your photo it
is always important for your SEO and then you click done. I have added a link
to all the photos, let's try it now on our live site, now when you click on the
photo of the dog let's see what happens ok it gets bigger and you have a link on
your right that actually works as your dynamic page but you still have a lot of
work around it by default some galleries could come with these settings but let's
change it back to the editor you have to click on the gallery you
want to change you just need to click on it and choose the option settings inside
settings you will have another option called settings and the first option is
how the photo will behave once you click it let's choose the option a link opens
as we have a link already connected to each a photo let's now
publish and check the live site let's click first on the dog photo and
there you go you have the dog. back to the home page we have the cat let's
click on it there we go we have the same structure different content only one
page. Now all we have to do is to go back to the editor and delete all those extra
pages that we had and keep in mind that if you have different structures you can
just create another dynamic page and connect a different content to it and
you have something different play around and I hope you enjoyed this this lesson
