Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:5Length:40 minutes
  • Overview
  • Transcript

2.2 Building a “Feature”

Welcome to the second lesson of this course, which is all about features. First, we’ll see what exactly a “feature” is with regards to Mason. Then, we’ll create one using the provided templates in the app, before finally integrating it with an existing page.

2.2 Building a “Feature”

Welcome to the second lesson of this course, which is all about features. Now, here's what we'll cover. First, we'll see what exactly is a feature. Then we'll create one using the provided templates in the app. And finally, we'll integrate that with an existing page. Let's go. So what is a feature? Well, before we get there, let me actually show you how Mason organizes these features. And we're going to have a closer look here in the back end, I signed up for an account. You can see I already have an initial project here, but I can create a new one. And we're going to call it I don't know, Tuts+ Demo. And I can hit Create. If I have a team member that I want to invite, I can do that here. No problem. But for now, I'm going to hit Create. This is the first step where you create a project. Now inside this project you create features. So when we click new feature, we find the full list of pre-built templates we can use. And we can filter these features based on the feature kit, or based on their destination. So are they related to maybe authentication? Well, you get all the features related to that. Like sign-in forms, Create Account forms and so on. Maybe we want only the cards. So we can just see the cards. And by doing that I think you can start to understand what a feature is. It's basically a standalone element that does a very specific task. Like for example, this one, it's a card, it's an information card. It shows information about a person and also provides the means to get in touch. Same goes for this one. If we go to CTA, we'll find features that relate to the called action, right? This is what we have here. We have an element that shows information about a specific topic and a call to action button. And that's all there is to it. It's not complicated. Features are basically web design patterns or basically elements or components. You can basically call them however you want. All right, now to see how we can use these features, let's create a custom feature or rather we'll use a template and we'll customize it a little bit. And we're gonna integrate it in an existing project. So let's filter by authentication. And I'm gonna choose maybe this one sign in three, feature name. We're going to call it demo sign in. Okay, now this is the visual editor. And we'll actually cover this in more detail in the next lesson. But this is where you can design your feature and also where you can configure the various things that happened behind the scenes. Like connecting it to the various domains, data sources, you can fine tune the settings for your forms, and so on. Okay, let's go back to the design. What you see here are basically containers, columns, the ones with the dotted lines. And the way to edit is very simple. You just select an element. On the right side you have a sidebar with all of the properties. And it can also double click the element and edit its contents that way. If you want to add a new field to this form, for example, you would open up the elements panel. And under forms just get another input, drag it in. And you would edit that just the way you want by changing its colors, setting its value, its ID and so, for now I'm just going to delete this. All right, so let's say that you made all the necessary modifications to these and now you want to publish it. You want to integrate it into your website. Well, how do you do that? All right. Here is how you do it. The first step is to hit deploy. Next, you have to choose your framework. So how are you embedding. How are you integrating this feature into your code base? Two options here, React or JavaScript. I'm gonna select JavaScript. And then you just follow these steps. First, you have to put this between the head tags. I'm gonna be using a code pen here, just as a quick example. So I'm gonna load it right here, save. Next, you have to initialize Mason in your project right, with your API key and project ID. Okay, so all you gotta do is copy this. And normally, you would put this before the closing body tag. I'm gonna put it right here, because this eventually will end up right before the end of the body tag. And then you can do a quick check to see if the API key was used correctly. And it is. Next, you would basically copy this element, and you would paste it in your page where you want to display it. Save that, and then Next, and hit Done. Now if for some reason you're reloading this page and your font doesn't show up, you have to do some of the solving settings. You would go right here under configure, and under Whitelisted Domains, go ahead and add a domain and put codepen.io. And this will work in my case, okay? Because I have my project on code pen but use or answer your own domain here or the domain you want to deploy this to. So now we go to publish. Publish now and if everything goes right, we should now be able to do a refresh here. And just like that, we have a form in our page. And this form was created here in Mason. We can always go in, edit. Once you make a change, go to publish. It tells me there are unpublished changes in one component, publish. And when I do a refresh here, you will see that change reflected in Code Pen as well. Now you might be asking yourself, okay, well I have a form here. What do I do with it? Well, you control the form and what it's doing from mason, okay? You go to configure, you go to forms and you have a couple of options here. So a submission URL, right? Where are you submitting the form? So you can put a custom URL in here. You can choose your submission method, your submission encoding, and you can also choose what happens when the forum is successfully submitted. Right now, it's set to reset form but I can add another action if I want to, all right. So, what your features are doing Is controlled from Mason. What you see here is just basically a canvas. It just displays that component, you can't actually control much from your own code base. All of the more complex stuff you do from Mason back here. All right, and that's how you can create an embed features with Mason. Now, as I was saying in the introduction, you can build entire websites with this tool. And that's possible thanks to a visual editor. So in the next lesson you will get a tour of this visual editor, sees capabilities and what you can create with it. See you then.

Back to the top