Wix Content Manager Tutorial 2021 - Create a Database With Wix

all right in this video we're going to get into something a little more complicated a little more advanced in wix and that's the content manager the content manager is essentially a giant spreadsheet that can be used to dynamically create pages and and category pages for information so for example say you're a home remodeler and you have 100 different projects that you've done and you want to display those you can use the content manager to create 100 identical layout layout pages with with customized information for each project say the date of the project and some i guess some gallery images and a cover image and it would also create a main page a directory of all those pages so that people could easily scroll through those and let me show you a few examples of that here's two sites i've built that are currently using the content manager to manage their portfolio of projects or properties so k w is a general contractor in houston texas and so that we've set up the content manager on this page to display a lot of their projects and so this is actually an image that we set in this spreadsheet that i'm about to show you the titles is set in that spreadsheet and it's linked to this portfolio page with a gallery with a title and that's pretty much it and each one of these pages looks identical and is identical it's using the same layout that's all pulling from the content manager and if this is a little confusing it'll make some more sense in a bit okay here's another example jspi properties they rent properties in west texas and here you can see they have listings of homes for rent you can see the address the beds bath square footage the price per month and if you click into these you can see more information about that particular property you can see a little gallery you can see probably description if they have one contact property details or relocation and now let me show you what that looks like in the actual content manager in the back end of wix so here's the backend content manager for k w general contractors this one's pretty simple we just have a few fields and remember this is just a spreadsheet right nothing you haven't seen before probably and so you have a project names column a project image which is the main cover image that we use on the directory page and then we have the gallery of their different pictures of the project and then here's one that's a little more complicated and this one is jspi investment properties and here you can see we have a title of the property the number of bedrooms number bathrooms the address property type house duplex like that the cover image a description if there is one the price the square footage gallery so this can be pretty complicated right you can make these pretty extensive if you want to but they don't have to be so i think hopefully you can see from these two examples why having a content manager is useful if you have a lot of information that's repetitive that you'll need to display in some way some other examples might be if you have a lot of galleries because you're a photographer or you're any kind of designer or creative and you have a large portfolio you want to display the content manager might be your best bet so for our purposes we're creating a travel blog so let's use the content manager to create a group of five to ten identical pages we can use to display some travel photography so then we could have a photography page for all these different countries that this travel photographer might be going to so we might have some a page for pictures from korea and it's a bunch of pictures from korea and we have the date the date range that they were in korea for okay let's get started in the left-hand side under the plus we're going to click content manager and get to this screen and we're going to click add to site and so this is going to create two pages for us it's going to be the main directory page and then the custom page that shows each item in your spreadsheet each piece of that database so let's use let's use this portfolio preset just to make it a little bit easier on ourselves we're going to click add to site okay so it's created a template content manager database for us so the title of the portfolio piece the description the year the gallery and the main project image let's have a client name so we're going to rework this a little bit we're going to customize this for a travel photographer so we can have instead of the title we let's rename this country name we can keep it the description and we will make this year visited we'll have a gallery a main product image will remove the client name delete okay now let's put in some country names now we've got all our country names in here let's also add a field so you can see how that works so if we scroll over to the end of the spreadsheet the database you can click the plus sign and you can add a field there's a few different kinds of fields that we could create a simple text one simple text field an image field like the main project image a boolean which is a yes or no so a checkbox sort of a number a date and time just the time rich text which is text that can be designed with bold building and italics and that kind of thing links documents so like pdf download video a video music a location tags media gallery some coding functions so let's create a new field called country location [Music] and we'll use that map field type the address build type and these can be relocated in they can be reordered the fields can be reordered if that makes it easier for you so now we have the country name then we can put in the country location too and let's create a map that we can add to our website help people out with their geographic knowledge and so now i'm going to go ahead and customize this spreadsheet so that you can see what this is going to look like on the front end so i'm going to probably fast forward to this part and we will reconvene in a second [Music] okay now our content manager database has been completely filled out with the country name country location a description the year visited the gallery the main project image and let's name this main country image let's actually rename this from portfolio to [Music] travel photography save that and so to rename it i just clicked the three dots and i clicked edit settings by the way you can also import items or export from a csv so if you have a actual spreadsheet with some similar content some information you could upload that here and you just need to make a spreadsheet with these same column headings okay so now let's publish this if you hover over this you'll see that we need to actually publish our website to see this information live so let's do that now let's x out of this it's going to auto save so don't worry then we're going to click publish let's be the site if you click portfolio this is the directory for all of that information that we just set up so you can see that each line has its own item china columbia morocco and then if we click in to one of these we can see that main cover image the title and then some of the images so this works our information has been added and we have this directory that's been created with these directory pages but obviously we don't have a client the year date is missing the layout's kind of messed up so now let's work on the actual layout of our pages and how everything connects on the page to the content manager okay in this video we're actually going to design and layout our pages that are being created from the content manager we're going to connect some of those fields from that spreadsheet that database in the content manager to these pages and generally we'll finish these pages that have been created by the content manager so starting on our home screen in the front end wix editor we can click page up here and scroll down in this listing to portfolio all or portfolio title so let's click on portfolio all and this is our main directory page that'll have all of our listings from our database so you'll see a couple interesting things here one you have this little hovering thing this isn't going to show up on the front end this isn't going to show up on the actual design of the website but this is a quick link to manage our content in the content manager which can also be found right here and then if you hover over some of these elements you now you'll see this little squiggly line so this is your data set connector when you click this you can connect different elements to the data in your content manager spreadsheet in your database so if we click the wix pro gallery this gallery right here and we click connected data we can see that the data set is the portfolio that's that's the spreadsheet it's the name of the spreadsheet we're working on we can see the image source for the wix pro gallery is connected to the main country image that field in that spreadsheet the titles connect to the country name which is also in that spreadsheet descriptions here are connected to and now we can actually connect this ourselves so descriptions connect to we can click here we click the arrow and select where this um where this field is connected to so let's add it to description text make sure descriptions remember for each of our countries and so now everything's connected these could be switched um but the only looks will only allow you to connect to fields that match the field in the designer so for example in this gallery the we need a single image source for each picture in the gallery obviously we couldn't connect that to the full gallery in the spreadsheet in our database we couldn't connect to the text we need a single image and the only field in our database that's a single image is the main country image field so we'll click that and the links connect to the portfolio title and portfolio title when it's in parentheses title like that that means it's the specific page that's created for each line each row in the database okay so just stick with me if it's a little confusing just take a stick with it and it'll all make sense after you practice a little bit on your own and you walk through this a couple times i also recommend if you're a little confused just watch the video again and you'll start to get it okay so we can customize the layout of these different items a little bit we already have it set to stretch let's also click on settings layout and we can affect the look of the actual layouts so for me the items are really spaced out i don't think we need nearly this much space so i'm going to go to layout customize layout and reduce the spacing to like let's see what 50 looks like that's a little tighter it still looks a little better to me okay and let's change the strip background to something more interesting maybe just a flat color for now just a gray and we'll switch this to be white and let's get rid of this extra strip here and tighten up the spacing okay so now we have the basic portfolio directory page and now let's customize our actual portfolio pages for each one of our travel locations so this is the main image the main country image that we set in our database let's make this a little smaller stretch it so everything stretches with it we don't have a client so we're going to get rid of this and then we have these two fields here which is a static field it's not connected to a dataset and this is the actual this is the actual field that's connected to a data set our data set so we'll click here we deleted the year visited field and we replaced it with the year visited for a number field so replace that and we'll see now the correct data being pulled in 2017 for china and we'll rename the static field you're visited let's move our description text to be in line with this information and let's make this whole bit smaller and if we scroll down we can see the gallery images that are that we added in our data set so if we click manage media this is just the static these aren't the actual images that will show these are just static placeholders you'll see if we actually preview the site we'll see the correct images and similar to that front page directory i think the spacing's weird so i'm going to fix that go check that out yeah that's better we have these previous and next buttons that are linked to the next previous and next item in our data set so if you click connect to data we'll see let's continue this portfolio and click click action so clicking the button connects to the previous dynamic page these are all dynamic pages they're dynamic because they change it's a layout that changes based on the information in the data set remember a data set just a big spreadsheet so remember we have a field for address so let's add a map that shows where in the world this place is on a map we'll make it a little easier for our visitors so let's get rid of this extra space so in this strip let's add another column to give ourselves some more space to add a map so we'll click there and we'll get rid of the duplicate information and we space all of this then we're going to add a map to this column so if we click plus under contact and forms we can add a full width map or just a map widget a little map square let's add that and we're going to make it fit within the column so nothing gets chopped off remember it needs to hover when you hover over it needs to say turn blue and say attach the column so now it's in that column and then we can connect it to the data sets so if we connect the data set click that squiggly line it's to connect to the right spreadsheet the right database and then the location connects to the country location so now it's added to china and now let's just do one little thing let's zoom out quite a bit so we can see where in the world that is something like that okay so our custom pages for our photo galleries for our travel photography now complete let's go into the menu real quick manage menu and rename the portfolio travel photography and let's add all of our new pages dynamic pages we've got china dynamic pages and i'll add in all these will fast forward and then i'll add them to the menu [Music] okay now our menu is created with all of our sub menu items and our main data set page let's preview the site and check out how everything came together then click photography this will take us that main page with each one of our travel photography locations and if we click in all of our pictures will be there remember we didn't do anything specifically the sweden page right weren't we customizing the china page but you can see that the title is right the main image is right the location on the map of sweden is correct the year is correct description or gallery images so all we have to do is customize one page's layout it affects the look of all the pages in the content manager so hopefully you can see how powerful this is and how useful it would be if you have a lot of information to display like a lot of locations if you've been to 190 countries you don't want to create 190 separate pages you'd use the content manager to show off those images okay so that's the content manager in a nutshell i know it's a complicated topic it can be a little confusing i would recommend just practicing with it trying to set it up yourself and if you need help i'm here to help just leave a comment and we can discuss it further alright thank you

Channel: Parrot Digital

Views: 3,254

Keywords: wix, wix content manager, wix database, database management, content manager, spreadsheet, wix website tutorial, content manager tutorial, wix content manager tutorial, web design tutorial, how to wix, content manager how to, design websites, how to design websites, how to add database to website

Id: cVPt0rOxaCU

Length: 19min 2sec (1142 seconds)

Published: Mon Aug 02 2021