Live webinar | Content manager part 1 | Editor X

okay um so uh first of all welcome welcome to editor x welcome to this webinar um and this is our first in our series of in focus webinars and this time we'll be deep diving on our content management system on our cms and what you're going to see is a live walkthrough of how to create manage and display dynamic content on your site using database collections content collections in the back office of the site so we're going to cover a lot of things in this webinar it's important to note that it's part one there'll be a part two so the things we'll cover today are basically what the cms is and why you need it some of the benefits uh how to model and display content using the cms um how to create content collections and connect them to repeaters which is that one of our layouting tools and how to connect user-generated content like form submissions uh into your collections and also we'll touch on dynamic pages um so there's a lot for us to cover a few notes before we start we'll be recording the session so it will be available afterwards because there's going to be a lot for you to take in i believe tao will send it out to you and you'll be able to watch it back on our our webinars page at editorx.com academy slash webinars uh you'll be able to see it back there and during the session uh joshua will be working on a real live site during the demo and you can find it live at the learndeck.org so you can take a look at the finished product um and and again an important note this is uh the first part in a two-part series so if you've tuned into this one be sure to uh tune in for the next one we'll release when that will be soon um and uh if you haven't done already please join our forum uh some of you are new to editor x some of you uh not hopefully lots of you already there but we've got product managers they're designers experts like joshua they're all active they're answering questions lots of lively discussions so do sign up to join the conversation uh about all things editor x so it's editorexcommunity.com um also if you want to reach the team directly uh you can email hi editorx.com and you'll reach us and to give us feedback uh ask questions there as well okay so i think that's enough from me i'd like to hand you over to joshua a developer advocate for the editor x uh cms and uh hey joshua would you like to tell us a little about yourself hey thank you maria and uh thank you everybody for coming today to our webinar for editor x in the content manager uh so before we get started i'm going to introduce myself and here we go hold on once one moment going to introduce myself my name is joshua alphonse and i am a full stack developer by trade music producer for fun and i'm also a developer advocate so part of my job is to help foster the community around some of our development platforms and also as maria mentioned there's lots of resources and lots of ways for for you guys to get in contact with us so you can reach out to me on twitter at joshuafons or you can also reach out to me on linkedin as well and don't forget to check out our academy x and also the community x as well which is the forum that maria mentioned so you can go in there and chat about release updates uh release and updates community discussions wish list for what you'd like for editor x and also see some showcase projects as well and uh right before we uh dive into some things um i want you guys all to um you know figure out how um to to think about how you want your experience to be and how you want to enhance uh when you what you uh enhanced your your experience when using editor x so let's move on to our live site here and this is the learn deck uh and the learn deck is our website that's not real it's a mock website but it's a website that we're going to be going over that's going to show us how to enhance our our our web applications or our websites that we have built using editor x so uh we have a few different things here we have our different levels and interest um these are our different courses that we have available and remember these are not real courses this is not a real site and we have a few different courses here from ux and mobile typography tap targets product design ux and ux design tips and ui elements and then on the bottom we also do have a section here that allows the users that visit the website to list their name their phone number and the email and then it sends to the content manager to schedule a meeting so it's saved inside of a database and you might be wondering uh you're hearing content manager content manager you might be wondering what that is and the content manager is a tool that provides us the ability to create dynamic content driven sites by without writing a single line of code so you don't need to be a developer to create these dynamic websites so we're going to get to know the content manager a bit more and how to model and display our content that we're saving to these collections so i'll go over some core concepts um and some best and some best practices best practices and some benefits behind using the content manager over using static uh using creating static websites so traditionally before the content manager when you're creating a wix site you'd be creating a static website and a static website um doesn't allow for things to change right so if i have some content that i have inside of a repeater for example and i want to add it i would have to add it individually to each item or each card now with dynamic content driven sites well using the content manager we'll be able to update and change these these items inside of our repeaters and any other ui elements dynamically without having to go to each each item or ui element individually so some of the benefits of the content manager are that it helps enhance your seo it saves you lots of time because again it doesn't require you to code anything to create these these content driven websites you won't have to duplicate many pages so there is that a 100 page limit but with dynamic pages it does allow you to create more and more pages without even touching that limit you'll be able to constantly update your update and design uh your websites with uh without having to affect actually what you've designed on your page so it's easy for collaboration so if you have a designer or developer or someone just working on your content manager in general you guys will all be able to work together without having to interfere with each other's work so it's great for collaboration so as we scroll through our live site here we'll see that there's lots of different elements but we're going to dive in how to actually how to actually use them but before we get started with the content manager and adding all these different items to our page we have to start from from scratch and generally what i like to do i like to start from outside the editor or even just from a from a thought so let's go over here to our content manager i mean to editor x and what we'll do now is we're going to start off by uh creating a data model so a data model helps us organize and structure our content collections um without having to put anything into play first so it's kind of like starting from the drawing board and you generally like to do this before you start jumping into creating these websites or adding the content to the page so you can see the broader picture of things so it's best to take a step back so you don't make any any uh any mistakes so it's kind of future proofing how you want your website and your content to uh to flow so let's start off uh by creating our data model and we'll do it within the editor itself so we can see how we build fields and what the content manager looks like so again the data modeling doesn't necessarily have to be within the editor you can take a step aside and just draw it out whatever you prefer but i think it's a good a good way for us to get introduced to what the content manager looks like so let's just start off by creating a blank collection and what i did here i went to the top of the top bar here next to our ad panel where we would add all of our different ui elements to the page so you see some familiar things like text or repeaters you also have images and paragraphs but let's go over to the right here to our content manager and create a new collection just for fun and this is going to be our uh our data model so let's say courses data model cool so now we have this data model for all of our our courses that we're going to be uh releasing here on the website that you saw on our live site right so with our courses we have a few different fields that we want to add and our data model allows us to just structure what fields that we want so right here inside the content manager we start with our default field which is title and we could use that as the name of the actual uh course that we have and we'll go here to the add button and let's add another one for the level so right now remember we're just structuring how things are we're not adding any content uh to to this uh to the content manager at the moment we're just uh putting together the field so we have a a big idea a bigger picture of what we're trying to put together so we have the level we're going to need the image as well so let's have the image for for what it is and make sure that when you have uh these different fields that you're using that you choose the appropriate field type depending on what that uh that item or that piece of content is so for this example we have uh we're naming this image so let's change the field type to image and we'll save and then we also do have another another field for the difficulty image so we had those courses that were there and our courses had if you go down to the bottom our courses have different images depending on the difficulty so we have different images for intermediate beginners even for the events so let's add another field for the image of the uh of the level so level image and let's add a text save i mean uh add image and then let's see what other fields that we would like to add we also have another field here for like the url if you want to go straight to this page and we'll dive into that a little bit more once we get to dynamic pages uh so for now this should be good just for us to structure uh what it looks like and let's go and create another data model here for our schedule meeting so the scheduling meeting comes here from uh this bottom part here and this is where we'll be sending this same data that we're collecting from a user that's going to be putting their name their phone number and the email and sending it straight to our our content collection so let's go and create another data model for us just for example purposes so say schedule data model and for this data model we'll just add three fields so we'll start with the title default field and we'll leave that as the name and that'll be the name that will connect this field to the name of whoever's scheduling this meeting as and you can always go into the properties and change the field name of what you like just keep in mind that the title field stays default to the field title so i can always come here and type in name if i'd like but just see as you see all the other field the field key hasn't changed and the field type you can always stays the same as text so for now let's just say that it's name and we also have the phone number and phone number we'll leave here as text even though there is a number um a number field type and the reason why we'll leave it as text is just because sometimes when you uh insert a string uh especially for a phone number from different countries you might have some other characters in there that don't qualify as numbers and then lastly we'll have another field here for the email so i didn't have to change the field type for any of these we're just collecting text here great so now that we have our data models all reset and ready to go um let's talk about some of the permissions and uh what's available to work with uh some of these uh for some of these uh content collections so we have um if we go out here to our content manager again we have our data models and if we go into the settings of our data models we'll see what is this collection for right now a default set to site content and what site content allows you to do it allows anyone to view the content from the collection right so anyone that visits our site can go and see exactly what we're trying to display on the on a certain ui element we also have another permission here for form submission so this would be perfect for our scheduling and meeting that we have in the bottom of our page anyone can submit data to this collection and you can also set a custom uh a custom setting to how you want the form submissions and the site content to be viewed on this as well if you scroll to the bottom and then we also do have some other permissions here for site members so if you only want the the content to be seen from members only or for uh the content to be only sent from members you can use the members only form submission but for something like scheduling meeting we would use for the form submission but since this is just a data model let's dive into the real thing um and actually see what this content collection looks like for courses and scheduling a meeting so again i'll just go to the top bar right across right across from the ad panel and we'll go to content manager and we'll leave our data models here since we already know how we want to structure it and we'll go here to create a new collection and we're going to start off with the courses and show you how to display those choruses uh to um to the repeater or to other ui elements you have on the page so now we're stepping into how to create a collection and uh you don't need to um have any other extra steps everything is right in front of you so we have our courses and we'll just name it courses simply like that and we'll leave the permissions as site content and we'll click create collection so wait a few seconds and there we go we have our collection already created so you might have noticed something a bit different here in this collection compared to how we were creating a bare bones collection for the data model there's already content in here so one of the features of the content manager is that it also saves um any content collection that you have deleted as a backup for up to seven days so before we started this webinar i actually had this uh choruses um content collection deleted but because we have that seven days to restore our collections as long as you name the collection the same way the same name just like ah i did you'll get the same content that you had saved beforehand and you can start off where you left where you left off great so now we're going to dive in a little bit more to see what the content manager has to offer now that we've created our content collection so you'll see here inside the content manager it's just a simple table looks like something that you might have used in excel or in microsoft word um and we have fields here for all of our different items that we put together in our data model right so we have our image for what the uh the chorus is just to you know change switch it up and give it some style we have the title which is the name of the course so we have ux and mobile typography tapped targets product design you name it excuse me and we also do have the level right here which is another text field the level images and then you'll see some links here and we'll get to these a little bit later once we dive into uh dynamic pages but you get the point we have all of our fields here that we that we put together in our data model plus a few additional ones so the content managers uh uh has a lot of different features inside of it just to get you started to help you manage how your data is and how what how it displays to you on the back end so if i go here to sort i can add a new sort if i'm looking for something specifically in my collection so i can sort by the title and i can switch the sort to from a to z to maybe z to a so let's add our sort and we'll see the difference between uh what we just saw so now the uh now it's in a backwards uh reverse alphabetical order and i can add a different sort you can add many different sorts and you can change the sort by the field which would be the columns here the field or the columns of each one that you have and if i want to filter i can also filter on the back end as well so if i want to filter by let's say the choruses again the title which would be the name of the choruses i can choose from many different options from contains does not contain is is not and this is all depending on the string the the text the words that are there and if i'm looking to sort something let's say for ux and mobile and i want to see all things that have ux in mobile i'll just add my filter and i'll only see ux and mobile right so there's a lot of different features here just to help you manage your content so you can easily find what you need and there's also a search button so if there if you have a really big collection um you'll be able to search for those keywords and find exactly what you like can always go back here and delete your sorts and your filters so that you can go and bring your collection back to normal again and if you do have some existing collections that existing data that you want to show or existing content that you want to show you can use this ellipses here to import a csv or flat file so that you can import it here and have it on your actual editor x site you can export the csv that you have here as well so that if you have uh an existing excel sheet or google sheets uh somewhere that you want to bring this content to you can also export csv by clicking this button joshua can i interrupt you with a question absolutely great we just have uh one that says can you have it set up so that the form submissions can automatically populate content on the website yes so so if you um if you use uh once we dive into data sets we'll uh dive into the different modes that you can use so we have read only right only read and write only so as long as you set the right setting there you'll be able to display that same content that you're submitting um into your form if you like thank you yep um so and then also back to the content manager here so we also do have a one other feature that i'd like to highlight and this is the difference between sandbox and live mode so right now currently we're in sandbox mode and what sandbox is is just the uh version that we see on the site that we're editing so as we're adding different things to our collections or adding new collections or adding new content we'll only see this in sandbox and you'll have to then sync this to the live version which will help manage the content that that appears on the published website that you've already deployed to the web and you already know from using uh core from using editor x that you can easily publish um your your sites with a click of a button uh so as long as these two things are synced your your content will be aligned from what you're testing out on your site that you're creating to what your users are seeing on the front end and you'll just go here to sync to live cool so now we have our now we've went over the content manager and we have our choruses collection already created let's go into supercharging our repeaters and displaying the dynamic content that we have stored in this content collection so let's close out this content manager panel on the side and we'll scroll down to our repeater so uh to wait to find our repeater we'll go here to the add panel and we will go over here to let's see our layouting tools or compositions let's see click add and we have our repeaters right here so we'll go over to quick add and we'll go to repeaters and you can just easily drag and drop this to the page and get going with the repeater and uh we'll delete this repeater for now since we already have one on the page currently but i'm just showing you where to find these things really quickly and just also keep in mind when you drag and drop a repeater on the page a repeater is a list or a grid of different items that you're listing so and it keeps the same design concept for each each each item sometimes i like to call them cards so if i scroll if i bring this over here all the other repeaters will follow that same design as i'm moving things around so this is great for our dynamic content because then everything will follow the same design and i won't have to go back and change and tweak little things um this is dynamic content that we're working with joshua i'm just going to interrupt you one second to it address everybody um i i know lots of you are asking questions and if the team are not answering you live right now don't worry we're collecting all of your questions and we will get to them in the q a at the end so don't panic if we don't answer you right now thanks so we have our repeater here and our repeater we're going to start by supercharging it uh by connecting it to data so there's a few uh other elements that we have to add to our page here so to get started with our repeater we notice once we click in the middle here or uh like on the top on the corner here we want to select the entire reader that we have uh let's go over to our our menu here on the top so we have manage items change layout and connect to data so usually like manage managing your items you'll be able to go in here and select each item in your repeater so one two and three and then add content to it statically so we want to enhance this so we don't have to keep going into each item and that's just very meticulous so how about we just go and connect it to data and make this way easier for ourselves so as i go here to connect to data i'll start by creating a data set and the data set acts as a bridge between our ui element to our content collection right so now we're or vice versa so now we're bringing that content that we have from our data set to our repeater or any ui element and as i mentioned beforehand our data set does allow us to add different modes but let's see what it looks like before we start talking about it so we'll go over here and we'll choose a collection so remember i told you that the data set acts as a bridge between our content collection to our ui elements here so we'll choose the content collection that we're trying to work with here so we'll choose choruses and automatically this gives us a name for data set for the data set and we can always edit it if you'd like but it gives us a good default name here for course data sets because it's straight to the point so let's create and you might have noticed that we get this little ui element here on our page and let me just bring it up here and this is the data set so don't worry the data set won't show up on your editor the data set itself actually is an invisible ui element just for you to manage this bridge between the content collection and this ui element so let's go over here to settings on our data set so once we select it we'll click settings and we'll see that the course uh the connect the collection is connected to the courses right so we have a few different um different sections here so now we've already connected to the chorus collection we have the data set name that's already set in default and we have our modes so currently right now by default it's set to read only so read only allows us to display the content from the collection and remember that the content the collection that we had for courses the permission is that anyone can see this content so now we have set the mode of the data set so that um so that this this this content that we have in our collection will still be able to be shown using read only there are some other modes as well that we'll be using today uh we also have write only and this is for submitting content to a collection so that's what we'll use when we want to submit uh that scheduling meeting to our scheduled meeting collection that we'll be creating in a bit and then someone asked about um being able to see that content that's being submitted to a collection you can also use our mode for read and write and that will help you modify content that's in the collection and then you'll be able to display it just keep in mind that um you'll have to set some permissions um when you're building the the collection of using custom the custom use just so you can now you know adjust to how you want your content to be collected or shown and joshua just a small interruption uh question here can you only connect data like this to a repeater or are there other elements on the front end that can be connected to a database yeah so there are there are lots of other elements that you can connect um on the front end here to proud to your collection uh so the repeater is really just a combination of a bunch of different ui elements that we have already so you see that we already have an image here we have some text uh we even have another image here and even a button right so it's a combination of all the different ones and as we connect this uh the the ui elements to our content collection you'll see how we're choosing each uh element that we have inside of a repeater and connecting it to a field that has the appropriate field type depending on what the ui element is so if it's an image we want to connect it to the field that has an image field if it's a text we want to make sure that we're connecting it to a field that is of a text field type and um there's lots of different ui elements that you can see here from the add panel so you can keep go here from the quick ad you can connect uh text if i had another text here that i just dragged and dropped um that necessarily isn't the repeater so let me just go back and take this out and i wanted to connect text i can also have this text element here connect to data choose my course data sets already set by default and connect my text to something so you can also play around with that um and if you wanted to like do something else with an api you can also do that with some of our development tools as well by using corvette and turning on dev mode so there's lots of different ways to display data on your page but let's dive back into our repeater again and we'll go over our connecting to data so once that we've already connected our data set to the collection that we needed we now have all of our different components that we have inside a repeater so i just mentioned them as elements they can also be mentioned as components as well so our components here are the image the text for the title the uh image here for the difficulty of the chorus and then also the course name which is a text and a button so let's go here to image so we'll go over here to image right here and click the arrow and we'll see that we're still connected to the course data set and the image source connects to let's change this image source connecting to the image so you notice something here we have a bunch of different idle fields but we have some fields that are highlighted so let's just click image here because this is the same field that we had for the actual image of the chorus itself and for anyone that has any like site uh uh problems with site um or if you have any uh uh visitors to your site that want uh for some things for accessibility or maybe they're using a browser that's not supporting something we can also go here to our alt text so we're able to actually uh see this if the image doesn't show up and we'll change that alt text to the name of the course itself and these other uh these other options here you can leave them blank um you can set them up to whatever fields that you like uh for right now we're not going to approach these we have tooltip connects to we can connect that to something else and we also also have links that you can connect to a dynamic page which i mentioned we'll talk about later and you can add different fields to your collection that collect urls so let's go back here and text which would be the text of the title that's here and this is why naming conventions are really important when you're putting together your collection so you don't get confused uh as to what you're actually uh working with so if i go back here to text again i just remember from my collection that this is the text of the actual uh course itself you could set this to chorus title or chorus text or whatever you'd like to name it so leave that as title and we'll go back to all all connections so we don't have to keep clicking out we'll just go here to all connections and we have another text field here that will take up this text and this will be where we'll put the name of the difficulty actually of the course itself so let's connect this text field over to the uh let's see we'll scroll down and we'll change this to the level back to all all connections and then we have another image here and this image is for our smaller image and this image is going to be for the image of our level so remember how i showed you each level difficulty has a different uh image associated with it let's change it to that and we'll give the alt text the name of the level itself so that in case the image doesn't show it will actually just show the level of the difficulty scrolling back up to our uh our data set here we have also have vector art uh we don't necessarily have anything we need to connect to vector art at the moment and again like you don't have to connect every single field that you have here but it's great to show you that you have the option and you're not locked in and we also have our button which changes a few things our button here is going to be connected to our data set as well and our data in our in our content collection so there might not be a actual field for something for a button but the button has an action that we'll be able to use so our action could be to go to the dynamic page that we'll create towards the end or to either to the all page or to the title page and we'll learn about those in a bit but for now let's set it to the title page because the title page will allow us to click and navigate to the individual page that will have created for each course great so now that our repeater is set and ready to go and we used no code to get this going let's test it out in preview and see what it looks like let's go over here to preview mode and there we go no code at all and we have our repeater already populated with all of our courses great thanks joshua can you also just give those handles a squeeze so we see the responsive behavior absolutely layout too so as i squeeze these a little bit you'll see them down to tablet size as well and even in mobile and let's go look what the repeaters look like and editor x is great for all this responsive design and let's back to tablet size and i'll show you what that looks like as well actually let me just go right here to our tablet size and if i scroll up that's how a repeater looks nice nice and we just had a question now about how to how to view the content without going to the live site it's it's like this in preview mode whoever asked that question just use preview just i would use preview mode uh for sure um so you know definitely use preview mode and it's definitely something that um you know just to look out for in the future um of editor x as well cool so now that we have displayed our content let's go and figure out how to actually submit content to a collection all right so um as i mentioned before there's plenty of different ui elements for you to work with um that connect to data connect to these collections that you have already um and as as you've seen before it's pretty easy to get started um there's no code involved you don't have to be a developer to do these things and it's great for collaboration so to get started here how about we go and create a um a new collection for scheduling a meeting the same way how we built our data model beforehand let's um use our data model that we created right could use our data model or we can even use the same collection again as well because this was just here for for demo purposes but let's go back and show you again how to create a collection so we'll use those same fields so we have the name the phone number and the email address let's create a new collection and we'll change the permissions as well so let's name this schedule oops a meeting so what is this collection for we're going to make this collection for form submissions so anyone that visits this site even though it's a mock site can go here and submit to our schedule a meeting collection so easily we'll just go here to create a collection cool so again um this roof this uh content collection was already created beforehand um you do have seven days um after your uh content collection has been deleted to restore it so it's part of the the backups that we have here and actually how about i show you a bit of what that looks like if i was going to delete or remove this collection it brings up this notification saying that removing this collection will break all the pages that have any connections to it so as i'm connecting these ui elements to data to the data set to our content collection um it will break all those connections that we have so that bridge will be blocked off um but in order to restore things i would just recreate this collection again within seven days and uh we'll have my our things back to normal again so now we have our schedule meeting collection already created with our three fields here just for the name of the person which would be the title field the phone number and the email so now our collection is created and the next thing to do is to create a data set so you can create a data set here from the um from the course collections when you're creating something fresh but when you want to create something for another data set to after you've created your first one we'll go over here to our content manager and we'll scroll over to the side here to add content elements so our content elements here as we've seen already we have our data set that we use oops let me just go back added that by accident um and we'll add a content element for form data set so the only difference here is that it creates a form collection and collects the data for from your visitors so let's use this instead and let's see here we have our settings and let's change our settings to connect to the scheduler meeting content collection and because this knows that it's a form submission data set the mode has already been set to write only right so automatically if you've seen beforehand when we created a regular data set it was just there as read only now we can choose write only it'll be there as default and if you wanted to change it we can go back into mode and we have the freedom to do so and if you notice that we do have a few other filters that were available on the front end for the regular data set that was displaying this content from our collection is now idle when we choose write only so if i wanted to sort something in my front end for this course collection i can just go here and add a filter or add a sort the same way how i did in the back end but when i do write only because we're submitting data or submitting content actually when we're submitting content well these fields for the number that we're displaying or how we want to filter or how we want to sort will be idle because we're just submitting to our collection so we have a few different pieces here so we have the name which is a input field that we have from the um from this add panel for adding an element we have another input here for the phone number and another input for the email and then we also have a button to send this content to our collection so you may be wondering how come you're not using wix forms uh the forms that we have here so let's see we also have our forms let's go to our input we have our inputs that we have that we just drag and dropped and then let's see if we can find our forms that we have here as well so we have contact forms and we have plenty of different forms that are here and these forms can be connected to your collections the difference here is that we want to make sure that these inputs are of a custom design of how we'd like things to to to look um usually with these uh forms that we have here from editor x these forms are already um pre-pre-designed for you to use but now we have the freedom with the content manager to create our own look and feel of how we want things to um to be on the front end for our users and we could still collect that same content and bring it to our collections so let's go back to our data set and let's connect these uh inputs to our data set which will speak to our content collection so we can go to settings oh actually we'll go here to each input so first we'll start with name and we'll go here to this menu and we'll connect to data we'll choose the schedule a meeting data set and now all we'll have to do is connect it to the field that we want to capture this information to so we want to capture this information and send it to the uh title uh the title field that we have here so now anytime a user type something here their name it will go straight to the title field and let's move down to the next to the next input phone number it's the same process schedule a meeting that's the data set that we'll choose which is connected to the schedule meeting content collection and then we'll choose phone number and the last input field we'll choose our data set again for scheduler meeting and we'll choose the email and lastly we have the button and again as i mentioned the button might not be a field that you're working with but this button is connecting to our data set because remember it acts as the bridge between the ui element and our content collection so we'll connect this again to schedule a meeting and we'll fire the action of submit so that once all the content of is already been filled out we'll click submit submit which will fire an action to send straight to our content collection and then we have some other options on the bottom here we can submit a message so we can say add a success message and we already have one that's here your content has been submitted so we can add another one if you'd like so let me just get rid of this here drag this over and we could still have the design freedom to edit some of our text so let's go here and change the size we could change the color and we can display this once that message is sent and to check if your elements are connected to data you just go here and you see that the connected data button is highlighted in blue and you'll always be able to check uh what elements are um a part of uh of are connected to the data set itself so let's go here to preview and let's test it out to see if we're getting these form submissions so go to preview mode and we already have all of our courses here because we connected to the data set which is speaking to our content collection and let's type in our name so i'm joshua let's type in five one six two four one six four five two that's not a real number just typing in random so we say josh alphonse at editor x.com and we'll send and look voila we have our content uh message that's sent here your content has been submitted and let's just go and check our content collection for schedule and meeting to see if uh all the content we just submitted is there so again we'll just go here to the top to the top bar and go over to our content manager and we'll navigate to our scheduling meeting content collection and we'll see here's my name my phone number and my email already submitted so the great thing about this is not once did i code anything um everything that i needed to do was right from the editor i just connected things to our data set created our collections and i was going on from there there's so many different ui elements to go and choose uh to choose from and to work with that allows you to create these these uh dynamic content driven sites um and it doesn't stop there we could even take it a step further with dynamic pages so our dynamic pages um will allow us to enhance um our page or enhance our site even more so because it allows us to save time it allows us to create uh to use the same design concepts that we've that we've been using over and over again uh without having to repeat that same process and dynamic pages are great because it gives each item its own route if you have seo options that you're using you can create your own seo with it and then also it will create its own url for depending on the item that you have in the content manager itself uh so enough talking about it let's get in to see how it actually works and when you're working with dynamic pages just also keep in mind that most of the time when you're working with this it's going to be for something that you're displaying right so make sure that you're using that your permissions are set um and you're using the appropriate collection to that you're going to be using for a dynamic page so to get started with the dynamic page it's really easy you just go over here to the content manager choose the collection that you want to display so choruses is what our main display would be we'll click the ellipses and we'll add a dynamic page so let's click add and we'll see things are already changing here so now i have um on my on my site pages tab here i have my home page that i was just working on for all the cutting edge designs in the world and showing you all the courses and now i have a new page two new pages here i have the all page which will show all of our items that we have in our collection which would be all of our courses so if we want to display everything that we have and then the title page which is the individual page that each course gets and then it also keeps the same design design layout as well so as you're coming in there even if you started from blank um you could still have those from a blank uh dynamic page you can still design things how you'd like and it will never change the way i like to think about it is if you go on on to your favorite uh sneaker store and you're displaying a shoe and you know the designs around are staying the same but the content is changing each page you go to because you're looking at a different shoe it's the same concept here so let's take a look at what these dynamic pages look like by starting with the all page that displays all of our courses so you could still have the the power to create a header here that will help you navigate to different pages that we have on our site it doesn't necessarily change anything the dynamic page just acts as another page acts as a singular page so that's why it's a nice work around around the page the page limits so now we can see all of our different items that we have here in our or or our courses that we have inside of our our collection and if we go here to read more this button uh will bring us already to our title page which shows the each individual course that we have in our collection cool so if we were to start from blank it's really easy to do so as well you just go back to our content manager choose the collection that you want to start with and add a blank dynamic page and it will create it within a few seconds and now you'll see here at the top we still have this dinette uh this data set here but this data set's a little different because we created on a dynamic page this is a dynamic data set and the only difference here is that it's working with um it's created with a dynamic page and it's working with dynamic content that's going to be constantly updating uh on this page uh depending on what we have inside of our collection so i could still drag and drop more elements to our page here and i can get things quickly going and i can design it how i'd like um so let's just go here to quick add and just quickly put together something so we have an image we have a title and why not another title here to show the difficulty of our course so i'm just putting together a quick design of how i'd want a dynamic page to look like from blank and each each course that i have will follow the same design and the content will just change on the image the text and the other text that i have here as well and because this already comes with our data set we don't have to create a new one we can just get going from here and we'll choose the choruses item and we'll choose the title which would be the name of our course we also have this here we'll choose the we already have it as course item and we'll choose the image which would be the image of our course and then lastly we'll have this uh this text here we'll just put the difficulty or the level of our chorus as well and remember i have the design freedom here while working with a blank dynamic page to add as many different elements as i'd like it doesn't just have to be elements that are connecting to data if you wanted to add some other things like a container or a layouter or even an iframe or shape or something like that you could still add you have the design freedom to add as many different elements as you like and still connect things to data so let's look like let's look at what this looks like in preview mode just to show you what it looks like and there we go we have the name of our course we have the image of our course and then also what type of level is recommended for this course so that's uh that's dynamic pages um and that's that's the content manager uh so there's so many uh ways to enhance the way that you're creating websites with editor x plus using the content manager i definitely recommend that you guys go and dive in some more and create these content driven websites um while using what you've learned here today there's lots of different resources to check out as well and videos on our youtube on youtube as well to look at great thank you so much joshua that was that was amazing and i i think we have time to move on uh now to the q a please we have lots of people who are bringing up questions are you all right if i fire a few questions at you absolutely yes great um so before i do i have one update i wanted to mention to you guys that um we also have some new it was released uh it's coming soon sorry uh new coming soon some responsive uh templates for creating these dynamic pages so you don't have to build the whole structure from scratch um uh soon you'll be able to very soon in fact you'll be able to choose a template for example like a team template uh or or something like that connect it to with it's connected to a collection and display it uh on your front end using a template so that will save you a lot of work so watch this space it's on our coming soon page soon to be moved to our updates and releases i believe um okay so i'm gonna move over to the q a and i'd also love to invite uh tal alex guidrius uh and sebby um from the from the product uh team to join us uh because i'm gonna be firing some questions at you if that's all right okay so the first one um okay i think this is for you joshua um you mentioned that after seven days um the columns get completely deleted uh so they're saved there for seven days and then they get deleted so the question is after eight days we can recreate the same column with the same id and it will be empty brand new is that right yes so you have up to seven days to restore uh that collection that you created so after that seventh day then um you'll be able to create something with that same name and will be blank and you won't have that same data that's there great thank you and the next one djs this one is for you it's about the strength of our databases for example can you handle thousands of rows of content easily how is that gitrus are you there yeah thank you for the question so we have customers that have tens of thousands of dynamic pages and they seem to be working just fine we're also looking into releasing some other features that will allow you to tune the performance and the settings of the collections a bit more so definitely yes great uh thank you i hope that answers you and uh a question here joshua this is for you um somebody's confirming and i think incorrectly that images cannot be exported or imported into the database you can right um if you have it inside of a csv um you should you know if you have some image there you should be able to import and export um and even if you even if you have a image that you have that you would like to import and export you can also use something like a url and uh use some of our development tools as well to get going with that but i believe you should still be able to import uh those files from this dsv cool thank you another one key dress i i you sort of answered it in your previous question but people are asking if there's a limit for the number of dynamic pages not just the number of rows but the number of pages i know um joshua mentioned 100 page limit but that doesn't apply to dynamic pages so it doesn't apply to the dynamic pages you can have as many item pages as you want uh one thing to know that the whole database with all the collections are subject to data size limitations by by default it's 10 gigabytes uh but if you get an error in you know in the con manager saying that you're out of data you can feel free to contact big support and will happily increase that limit for you just so we you know prevent abuse at some unfair use great thank you another question this one i think joshua it's for you can you link databases with blog elements um i don't believe that the blog uh has uh any elements that you can connect to but the great thing about the content manager is that you can still create a custom experience just how we created those custom forms uh for scheduling a meeting you could still use the content manager and create a custom type of blog experience and have and connect those different elements depending on how you design it uh to create that but i don't believe that the blog vertical um has connected data abilities okay and anyone else from product want to jump in or correct that that's yeah so you can use blogging in some senses like you can connect some content to repeaters and you can have different like front page layout with your blog posts and so on so the only thing that we don't have today is ability to natively bind the content of the blog but you can sort of work around it by having by using the regular block page uh keeping the block content hiding up all of the other blog elements and then just using data binding to display the rest so it can be done with it with with a bit of a workaround today something that we hope to address in the future uh but today it requires a bit extra work compared to everything else yeah it's cool to use some of the skills that you've learned today and combine it with that same vertical um to create that custom more of a custom enhanced experience with your blog great thank you both and a slightly unrelated question but very related to editor x here um how do i know if my website is responsive and optimized for all devices sebby i think you can take this one hey everyone i'm sevi the product manager for edirex um so it's a great question uh so basically editor x by default we start off with uh three three break points what is the breakpoint in breakpoints basically we're getting uh ranges of widths of a screen size basically and we defined it you know we have one for desktop for tablet for mobile um and you can actually like resize the canvas to go between each one i don't know josh if you if you can show us uh kind of the example of resizing uh the canvas from the site uh between the different break points so we can see how how you can see each individual you know screen size so you can pretty much see beforehand and if you see anything that you want to adjust on mobile or tablet you can go ahead and do that and also you can adjust these numbers these are not fixed numbers you know we just basically put the most common uh you know the the industry standards uh but everyone has their own you can add additional breakpoints as well to your design yeah great thank you um next one alex i'm gonna direct this one to you um how do i mix presenting different medias like sound and pictures and videos um for example this this creator has a section for company and media where sometimes podcasts sometimes videos and sometimes articles is this possible hi sorry so basically you need to check out the media gallery type there is no problem to there is something you can do it basically uh it allows to store different types of media and displaying it in the gallery great thank you um i i i so if you just go and like add if you want to add a different field type there's like plenty of different field types that you'll be able to use so again images and uh videos audio there's lots of different field types that you could use to connect to some different ui elements great thank you um next one uh gdres this one this one's for you can the content on the database be automated for example if i have a database that contains 10 quotes and i'd like to display one quote a day can i automate that process yeah so of course you can but it will require using corvid and writing a bit of code to do that okay great thank you um i'm aware that we're a little bit out of time so i'm gonna answer a couple more and then tell if i'm right in this these guys these all these experts will stay online in this chat if you want to continue answering uh asking questions they'll be available to type you and answer you um for a little while after the webinar so i'll ask a couple more and if you have to dash um then thank you thank you for joining um uh so a quick question here uh joshua um how do you upload images to a collection i believe you covered it can you just do a quick show it again yeah sure so if i want to upload an image to a collection i'll just go here and choose a collection that i would like so start with courses and if i want to upload something let's create a new row for a new course and since this this field type is already an image so remember if i go and added a new field um and i added this new field for the field type to be image now i can add any image that i'd like so we'll use the one that's already existing and we'll just go here to add an image that's there on our new row and it'll bring up the media gallery and i'll be able to upload all these different images that i have that i upload from my from my computer or from other resources like google drive instagram or i can also use the wix media as well to upload an image that i'd like so if i want to use this uh holding a book i could just add an item and now that book is there and i can name this uh book reading class um and then i can go forward and fill out the rest so it's really easy to get started with an image awesome thank you and this one i think is is relevant to lots of you uh who are working with teams and clients uh gidus i i think i'll ask you is it possible um with databases and repeaters like this um to lock the front-end design and only let people touch the database i think the designers on my team do this to me all the time because i'm a content writer so yeah so it's not possible today but to give a sneak peek it's something that is just going to be available soon okay coming soon the designers will be excited about it um and uh i guess i'll i'll fire one more out here and then we'll switch to chat um can i have several different layouts for dynamic pages each showing a different data set from one and the same content collection uh gigi this one might be for you as well yeah sure so you can have as many different layouts and as many different pages from the same collection or different collections as you want amazing um thank you i'm i'm gonna just uh wrap up and sum up the the live uh webinar uh session here um before we move into uh um a chat just to say thank you so much for coming um i i was really excited to see you all here and asking so many great questions it looks like you're really diving into editor x and that makes me very excited um and i know that there was a lot to take in there so as i said before this webinar was recorded joshua gave you so much information so feel free to watch him back pause him replay try it yourself you'll find it on from our home page editor x.com academy slash webinars uh you'll be able to find uh the record it's not up there yet because it's just recording now but it will be there soon uh and also this is just part one there's another um part to this uh webinar where we'll also dive much more into the form builder um and more in about user-generated content and about url structuring uh so we'll get much deeper into it um so do stay tuned uh for that one we'll announce it soon

Channel: Editor X

Views: 5,114

Keywords: Editor X, responsive web design, responsive design, responsive, website builder, create a website, build a responsive website, how to make a website, CSS, CSS grid, layout, graphic design, web design, web development, web design inspiration, fluidity, CMS, content management system, ux, ux design process, flexbox, flexbox technology, web design agency, free responsive website templates, build websites for clients, breakpoint control, advanced web design, responsive layouts

Id: 7HHdSa1HJBs

Length: 64min 40sec (3880 seconds)

Published: Thu Dec 03 2020