Editor X Masterclass - Build Amazing Websites | No Coding | Stevdza - San | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Editor X Masterclass - Build Amazing Websites | No Coding

teacher avatar Stevdza - San, Android Developer & UX/UI Designer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

52 Lessons (8h 35m)
    • 1. Introduction

      3:52
    • 2. Final Project Preview

      3:36
    • 3. Create account & First Project on Editor X

      5:07
    • 4. Canvas & Interface

      12:16
    • 5. Breakpoints

      6:46
    • 6. Keyboard Shortcuts

      6:35
    • 7. Design Assets

      4:29
    • 8. Compositions

      4:47
    • 9. Empty Boxes

      7:25
    • 10. Stacking/Grouping

      9:02
    • 11. Grids

      12:18
    • 12. Layouters

      10:54
    • 13. Repeaters

      11:05
    • 14. Lightboxes

      8:40
    • 15. Text & Buttons

      12:18
    • 16. Inputs

      10:27
    • 17. Menus

      10:54
    • 18. Media & Pro Gallery

      18:40
    • 19. Decoratives

      4:06
    • 20. Contact & Forms

      16:14
    • 21. Masters

      9:25
    • 22. Theme Manager

      4:28
    • 23. App Market

      8:16
    • 24. Roles, Permissions and Comments

      7:19
    • 25. Interactions (BETA)

      7:41
    • 26. Content Manager - Introduction

      6:58
    • 27. Content Manager - Collections & Repeaters

      8:30
    • 28. Content Manager - Custom Forms & Inputs

      13:17
    • 29. Content Manager - Read & Write Dataset Mode

      3:56
    • 30. Content Manager - Dynamic Pages

      12:55
    • 31. Members

      14:12
    • 32. Forums

      9:25
    • 33. Blog

      9:04
    • 34. Events

      18:16
    • 35. Online Store

      16:41
    • 36. Video

      6:50
    • 37. Groups

      7:46
    • 38. Introducing with the Project

      8:19
    • 39. Design Header

      12:36
    • 40. Design Main Image and Background

      12:49
    • 41. Add Responsiveness on Main Elements

      7:34
    • 42. Design Flavor Elements

      10:04
    • 43. Design Three Steps

      12:51
    • 44. Design Website Achievements

      8:22
    • 45. Design Download App Section

      8:54
    • 46. Design Contact Us Section

      15:19
    • 47. Design Footer

      15:33
    • 48. Add Animations to a Website

      18:33
    • 49. Add Hover Interactions to a Website

      12:42
    • 50. Install Blog & Members Area

      19:29
    • 51. Final Word

      1:52
    • 52. Site Search

      5:21
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

84

Students

--

Projects

About This Class

Hello there and welcome to my new course! This course is sponsored by Editor X.

www.editorx.com/editor-x/stef-course

For those of you who are not familiar with Editor X, Editor X is basically a web application or an advanced creation platform for designers and web professionals. Editor X combines cutting edge responsive design with relatively easy and smooth drag and drop experience. With Editor X you can design and build almost any website you imagine. It's possible to design and build beautiful websites without any experience with Web development whatsoever!

Editor X allows you to build fully responsive websites that automatically scale to any screen size or device they are being viewed on to deliver theĀ  best user experience. Using the latest design technology like flexible grids, layouts, fluid sizing and breakpoint customization, you can ensure that your site looks exactly how you want on various different screen sizes.

Also Editor X has quite clean and intuitive interface which will allow us to easily navigate between many different tools, features, categories, panels and that way keep our focus primarily on building our website.

Now we are going to start this course by completely introducing with almost every Editor X tool and feature. You'll get familiar with it's design interface, canvas, shortcuts, compositions and all other components which are essential for one website to be responsive and good looking.

You'll see in action how Flexbox technology can help us apply responsiveness to our website. Flexbox is a CSS container created around elements to ensure they're automatically arranged depending on screen size. It's a helpful tool in responsive design that prevents things from getting messy, like when elements overlap or change their order. The most useful Flexbox technology tools are Layouters and Repeaters. They will automatically adjust your content to every screen size without even thinking about breakpoints.

After that I will introduce you to the Content Manager. And it's main purpose is to act as a database on the backend. With content manager we can create something that's called a collection, and a collection is basically a data table which can contain different types of information in the form of rows and columns. There we can put images, links, text video, audio, document and many other different types of data.

We can use Content manager to display that data to our website or ever gather some information from our visitors through the forms, where users can write some information and send them directly to our backend inside a collection.

You will learn how to apply beautiful and smooth animations and hover interactions to a website as well. Also we are going to explore an app market where we can search and find many different useful applications which are available on Editor X platform. Those applications can be installed on our website in just a click within a few seconds. And Like I said there you can find many different apps but some of the most popular ones are for building a blog, forum or even an online store on your website. In this course I have explained everything you need to know about it.

And there's more! At the end of this course, when we cover everything you need to know about building websites with Editor X, we are going to start working on a real project, where we are going to design and build our own website from scratch!

So what are you waiting for, let's get started!

Meet Your Teacher

Teacher Profile Image

Stevdza - San

Android Developer & UX/UI Designer

Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hello there and welcome to my new course. This course is sponsored by Editor X, and therefore, those of you who are not familiar with eight or x Editor X is basically a web application or in advanced creation platform for designers and their web professionals. Editor X combines the cutting edge responsive design with relatively easy in the smooth ER, drag-and-drop experience. And with the editor x, you can design and build almost any website you imagine. It's possible to design and build beautiful websites without any experience with web development that whatsoever, Editor X allows you to build a fully responsive websites that automatically scale to any screen size or device they are being viewed on to deliver the best user experience using the latest design technology, like a flexible grids, layouts, following sizing and the breakpoint customization, you can ensure that your site looks exactly how you want it on our various different screen sizes. Also, Editor X has a quite clean and the intuitive interface which allows us to easily navigate between the many different tools, features, categories, battles, and that way keep our focus primarily on the building our website. Now, we're going to start this course by completely introducing with almost every editor x, t2 and future, you'll get familiar with its design interface. Canvas, shortcuts, compositions in all other components which are essential for a one website to be responsive and good-looking. You will see in action how flexbox technology can help us apply responsiveness to our website. And flexbox is CSS container created around elements to ensure that they are automatically arranged depending on our screen size. It's a helpful tool in a responsive design that prevents things for I getting messy, like when elements are overlap or a change their order and that the most useful Flexbox technology tools are all eight outers and repeaters. They will automatically adjust your content to every screen size without even thinking about breakpoints. After that, I will introduce you with a contact manager and its main purpose is to act as a database on the backend and the way their content manager, we can create something that's called the collection. And the collection is a basically a data table which can contain different types of information in the form of rows and columns. There we can put the image link, next, video or the document and many other different types of data. We can use a content manager to display that data to our website or even gather some information from our visitors through the forums where users can write some information and send them directly to our backend. Inside a collection, you will learn how to apply a beautiful and smoother animations and the hover interactions to our website as well. Also, we're going to explore an app market where we can search and find and many different useful applications which available on a Editor X platform. Those applications can be installed on our website in just a clique within a few seconds. And like I said, there you can find many different applications, but some of the most popular ones are for building a blog, forum or even an online store on your website. In this course, I hear explained there everything you need to know about it. And there is more at the end of this course, when we cover everything you need to know about building websites with editor eggs, we are going to start to working on a real project. We are, we are going to design and build our website from scratch. So wow, what are you waiting for? Let's get started. 2. Final Project Preview: Hello there and welcome back. In this video, I'm going to just show you the preview of our project, which we're going to make at the end of the scores. And of course, before we go and create this website from scratch, I'm going to completely introduce you with eight or acts. So don't worry about that. Anyway, this is just a preview of that website. So let me just refresh this page once again so you can see some animations. All right, So there we go. Here as you can see, we have a header, we have our logo, then we have our menu. So here we have our button. And whenever we press this button, we're going to automatically scroll in the navigate to one of our sections down below in here also, we have a login buyer where we can just create an account or just a login on our website, our k. So let me just scroll down below so you can see some more animations are cases you can see here we also have some hover interactions. All right, let's scroll down below. In here as well. We have some a hover interactions and everything looks very nice. So those animations are good-looking and smooth. Okay, so as you can see here, we also have some animations and the down below as well. So those are some a hover interactions which we're going to add on our website at the end of this course. All right, and down below we also have a contact form. So whenever we fill up this contact form and click the Send button, we're going to immediately send that information to our backend where we can read and respond to those messages. And also down below we have our footer right here. We can enter our email and subscribe to our newsletter. Here we have some social icons as well. So whenever we select one of those menu items, we're going to scroll down below to one of our sections. So like there are k here, we also have separate the blog page. In here we can see all our blog posts which we have created. So those are just some examples of the posts which I hear made. And we can open up one of those, for example, maybe this one and we can just read about it. Now, k down below, we also have some social sharing icons. We have a recent posts. We can like each one of those ports. And of course we have a comment section down below, so we can comment that, of course. And finally, We have here a login button, so we can click that and we can login here with Facebook or Google, or by entering our own custom credentials. So here I'm going to just login with my existing account using the Google now k. And after you login, then here you're going to see the icon of your profile. So here we have some options so we can open up our profile. For example, N from here, of course we have some more pages like blog posts, a blog comments, blog likes, my drafts, my account settings, notifications. Of course from here we can update our own information. We can add some more information like that. Firstname, LastName, phone number. We can change here this background image or our profile photo, or even change here our name or this description down below alkane. So that's basically how our project will look like. So it has a lot of great animations and hover interactions as you have already seen. Also on this website, we have installed the blog application along with Members Area application. And with those applications, we can just manage all our users on our backend. And that's basically how our project will look like. 3. Create account & First Project on Editor X: Hello there and welcome back. So before I show you the actual editor xA interface and the explaining some important concepts. First that we need to create an account on eight or x a website. So the first step would be to open their official a website. So Editor X.com. And once you're there, you need to click this button on the top right corner, which says start now. And here we need to create an account. So while there are multiple options, we can create an account using email and password. We can sign up with Facebook or Google account. In this case, I have already created the account owner 8 or x, so I'm going to just login for now. So once you sign up, you need to verify your account using your email address. If you have a signed up using email and password credentials, and now I'm going to login. So once you log in, you're going to get redirected to this page. My sides. Now at this point, I don't have any website created here on my eight or x, say count. And here we have a two options to create a new folder or to create a new website. So now I'm going to click this second button to create a new website. And when you click that button, a new page will appear in here we can choose some categories of our website. So of course you can skip this step if you don't want to choose a category of these points. So I'm going to skip this for now. And the next thing we're going to see a new page where we can select some of the templates from an editor x. So as you can see when we scroll down below, we're going to see many beautiful templates to choose from. And of course, if you don't want to choose any template from this list, then you can select just the first template which is a blank canvas. Also there is an option for you to view some of those templates. So when you hover over one of those items, you're going to see two options, view or edit. In this case, I'm going to select the view so we can see and check out this template. Okay, So as you can see, let's scroll down below to see how will this template actually look like. So as you can see, those are some nice and smooth animations. We see alkane also that there are three options on the top of our template here, so we can choose the desktop version, tablet version, or a mobile version. So let's switch to tablet version for now to check out our case. So this is how this template looks like on a tablet. So all of those are templates are a fully responsive and you can use it basically on each and every device you have. Okay, So let's check out a mobile version as well. All right. So it looks some amazing. As you can see. It's a fully responsive, right? So now we can close this template and here we can choose a blank canvas for now. So let's click edit our case. So now here we can see our editor interface and I'm going to introduce you with this interface later in this course. For now, it is important that you have created account on an eight or x. And also we have created that one website where we're going to test various different tools, elements and so on. So after you open this blank canvas, you can save this website or this project by clicking this save button. So click that. And here we can just use this free weeks domain or you can of course connect to your own customized domain if you want. But at this point I just want to select this free domain. And here I can just type test project. Okay, I'm going to Save and Continue. Okay, Perfect, and click done. So after that, when we get back to our first screen here or first step my sides, and when we refresh that, we should be able to see our test project. Okay, and here we can also create many different websites. And also when you hover over this website, then you have some options. So let's click that here we have option to edit the website, to preview the website, to rename this site, to duplicate this site, to transfer it, to invite people to move it to a different folder, or to move it into trash. Now if I click this move to trash, we're going to see this pop-up window. And if I click Move to Trash, then a new folder will appear here if you don't already have it. So let's open this folder. And from there we can just remove this website permanently or we can restore that. So I'm going to click Restore, click Restore. Okay, so now let's get back to our all sides. And here we have restored our project. So afterwards, if you want to open that product, you would just click this little edit icon so you can open up eight or x or interface like this one. So now you saw how to create eight or x account and how to create your first test project. Later in this course, we're going to use this project to explore some different Editor X tools, resources, elements and so on. And for this video, that'll be all. 4. Canvas & Interface: Hello there and welcome back. So in the previous video, we created an account on our editor eggs, and they're also made there one, a test project where we are going to practice. So here now I'm going to open up this test project. So just hover over this item and click this Edit button. And now a new tab will appear where we're going to see our editor x, say interface in our project. Okay, well in this video I'm going to introduce you with the actual editor interface in the canvas. So first, let's start with this top bar. So here on the top left corner we can see our Editor X logo. And then when we press that, we're going to open up a new tab with our My Sites page so we can close that for now. Next we can see here our account. Then here we have a site option. And when we press that, we should see one or drop-down menu. Here we have a few options like save preview, published, and that those three options are also located on our top right corner right here. So this is more a convenient way to use those three options. Then we have option two, view Published site or to invite people to our site. So well it allows us to actually invite other people to comment our design. So it's kinda useful thing when you're working with the team. Then down below we have a site history. And when I click that and then new tab will appear. And it should navigate us to our dashboard where we can see the history of our design. Next down below, we have some options to create the new side, to duplicate this current site, to transfer this side. And that those options are also available on our mice site's page here, as you can see when I press this site actions drop-down, then those actions or options will be visible here as well. All right, so let's get back to our interface. And down below we have some more options like SEO, dashboard, social share roles and permissions in here also we have some more options to check our mailboxes, payments, notifications, general info and so on. Also, if you click this social share, then a new tab I will appear and it will lead you to your dashboard or a website settings. In from there you can just change this project name. Then down below you can upgrade your account so you can connect your own domain if you share one. And also down below you have a way to change your fav icon. Then you should have an option to select their general social image. And there's some more options as well. So let's close that for now. And next here we have a view section or a View drop-down here we can zoom in or zoom out. So here we don't see any zoom in or zoom out option. But if we press this option one more time, then this button should appear in. From here, we can zoom out and zoom in our website design, or we can just do Reset to default value of 100% of ozone level. Next here we have a tools, we can check some design libraries and media manager of course. Then here we have a dev mode. And dev mode basically allows us to add some custom code to our website. Next here we have our Help Center. We have a forum, then we have academy eggs where we can learn more about the Editor X. Then we have a keyboard shortcuts. We can see some new realist says we can send a feedback or request a new feature or even report a bug. So it's very convenient way of interacting with the editor x. And of course here we have a button to upgrade to a premium plan if we want. Next, the hearer is I already mentioned before, we have our three main options which allow us to basically save the changes which we made to our website here. Then we have a preview option where we can preview our website or we can publish our website and the visit that domain of hours directly. So if I click Publish, then at this pop-up will appear. And this is our actual domain or for this project. So we can click this View Cite button. And after that, we will be able to see our website design on this exact URL, our case. So let's close that for now. All right, so down below we have some more options or more buttons. So here the first button is called the ad elements. And when we press that, then a new panel will appear in. From here, we can choose the various different elements which we can add on our webpage. Of course, we're going to cover those elements in more details in the future videos. Next here we have a layers panel. And basically here we can see all our layers for the specific page. In for now we have only one page and that is a homepage in here. As you can see, we have a three different elements. We have a header, we have this middle section and the footer. So as you can see this header and footer, I have this green icon on the left side. And that means that those two elements or components are actually masters. And the masters are basically some are pre-made components which we can reuse in our project. I'm going to talk more about them in the future as well. And this is the third icon here, masters. And as you can see for now, we have only those two masters, headers and footers. And next here we have pages in here we can manage our site pages. We can add multiple pages if we run it, of course. Then here we have a theme manager. We can customize our typography or our colors as well. In here we have our app market where we can install some applications to our editor x, our website. There are some applications which are available only for a premium users, and there are also some of them which are available for free users as well. You can check those applications here. More details. So for example, here we have this print full application which will let us design in cell or print on demand products. We also can see this visit or analytics where we can see some advanced visitors, debts, and so on. And here we have a content manager which is used to easily manager dynamic site content. So let's close that for now. Next here we can see and select multiple pages from our project. At this moment we have only one page and it is a homepage. Next here we can see those three icons and those are actually breakpoints. And I'm going to talk about the breakpoints in the next video in more details. In here, of course, we have undo and redo options. So for example, when we add some elements here, let's add, for example, one simple paragraph right here. And of course we can press this button undo to remove that, or we can press a redo to place this paragraph back to our website. And here on the right side we have our inspector. So when we select one of those elements from our Canvas here, then this inspector will open up. In here we can see some different kinds of properties which we can change for our selected the element. We have here some alignment options. Then we can change down below the size. For example, here we can choose from those two options, fluid, the end, fixed. And in most cases you're going to use this Floyd as a sizing option because the elements with will automatically resize according to your viewport size, which is amazing and you will see about that later. Down below, we can customize with height, minimum width, and minimum height properties as well. So for example here as you can see, our width for this paragraph is 45 percent. And if I said that to, for example, 50 percent, then you will see that its width will increase. And it will mean that this paragraph will take our 50 percent of the maximum width of our website or our section. And of course, we can increase this to, for example, 80 percent and higher. And as you can see, it will take 80 percent of width of this section. So that's how this is actually working. And down below, we can specify minimum and maximum width if you want. Down below, for example, as you can see, we have something that's called the docking. It's kinda similar to a constraints which we have in Android. And I'm going to talk about docking in details in some of the next videos as well. Down below also, we can change the margins for this element. Then we have some scrolling effects like non-sticky and fixed. And down below we can also see one more or just a section which we can use to change the opacity and the rotation of our element scalings Q and translate also the changes made to these properties, the one shown on the Canvas. So you need to preview your website in order to see them. And also we have something that's called the anchor. And I'm going to talk about that, of course in some of the next videos, in more details as well. Here we have something that's called the interactions, and this option is still in Beta, but I may create a video about that anyway. Okay, so let's close this inspector for now and let's focus on our canvas. So here as you can see on the middle of our editor x interface, we can see our blank canvas. And then when we hover over on this canvas, you can see that this canvas is made out of different kinds of sections. So here I'm going to remove this text. But first let me just show you that you can also edit this text from here. So if you click this edit text and button, then you will be able to change, for example, this alignment, for example, to center, you can change this topography, the font, the font size. You can also apply a baldness Italia can underlying or color as well. So there are various different options which you can use to change your elements. Let me just delete this item so I'm going to just click Delete button now. Okay, so as you can see, this is our middle section, which is actually a blank section. And also, as you can see when I hover over in the middle of this middle section in our header, then this little blue button will show. So this button will allow us to add a new section between those two sections. And of course, when I hover over down below, we're going to see this button as well. Now, are you can add those sections not just vertically, horizontally as well. So as you can see when I click here, we can also add some sections right here. Nevertheless, let me just click this button, for example, right here. And you will see that we have three options to choose from. We can select a blank grid or a layout, and I'm going to talk about each one of those in the future for now. As you can see, our middle section is actually a blank section in here. We can add our various different elements. As you already saw, we can just click this button and it will open up this section. And from here we can select the various different elements to add on this section. And of course, you can just select this section and open up this inspector. And this inspector will allow you to also change some properties of this section. You can also open up this Design tab, and from here you can select some different background. For example, this gray color or other color that you want, you can add here also your own custom colors. For now I'm going to choose just a white color came. And basically that's how our eight or x interface looks like. So now I have introduced you with the actual 8 or x the interface. And you also saw how the structure of the canvas. So it looks like with those different sections, we can add here as many sections as we want. And also we can change the size of those sections easily by opening this inspector in from here, we can just select this layout. And as you can see, its default value for this middle section is 500 height, or 500 pixels in height. And we can of course change that to, for example, 200. Or we can set basically any value here that we want for now I'm going to leave that as it is to 500 pixels. Also one more thing. So I forgot to mention that you can rearrange those sections on your canvas. And the easiest way is to open the Layers panel. And from there you can select, for example, one of those sections or a masters in here you have a three dots, more actions. So just press dead. You can move up and down those sections. So if I click move down, then this header we'll move down. And this middle section, we'll move on the top. And of course we can just open our layers panel again. And now I can select this middle section. I can move that down. And also there is a way to rename those layers. So you can just double-click corner each one of those layers and you can just type a new name, for example, middle section, right? So for this video, I think that would be all. And in the next video I'm going to talk more about the breakpoints, which will allow you to basically create a fully responsive website which will look amazing on each and every device out there. So that'll be all for this video. 5. Breakpoints: Hello there and welcome back. So in the previous video, I have introduced to you with eight or x or interface and their Canvas. And in this video, I'm going to talk more about breakpoints. So we're Editor X lets you build a fully responsive websites that automatically adjust to the screen or device they are being viewed on to deliver the best user experience every time. Now, using the latest design technology like flexible grids, layouts, fluid sizing, end breakpoint customization. You can ensure that your site looks exactly how you want. My wherever it's viewed. And the editor x allows you to create a fully responsive websites which can adapt to every screen size. And the break points are the points at which the design is adjusted. So visitors always see the best possible version of your site from any device. And the here on top of our eight or x interface we can see three buttons. So here we have a three different breakpoints. We have this alarm just breakpoint, which starts from 101 pixel end up. Then we have this middle breakpoint, which starts from 751 pixel, and it ends with one hundred, ten hundred pixels. And we have the smallest break point, which starts from 320 pixels and it ends at 750 pixels. So here we also have an option to create our own custom breakpoint. And here you can have a maximum of six different break points per one page. And in most cases, you're not going to need more than three breakpoints because this is almost enough, the smallest one, and we'll represent a mobile devices. The middle one will represent the tablets, and the largest one will fit perfectly to desktops. So now let's switch back to our largest breakpoint. And here I'm going to add that one element so I can show you how this resizing will work. Different breakpoints. So let's add here one element and I'm going to choose this simple paragraph. So here we can also click edit text to center this text on our screens. So let's center that here are k. Perfect. So now let's select this paragraph and let's open up the inspector on the right side. So here you will see that this text now takes place off 45% of the full width of this section. And now we can increase that for example two, let's say a 70 percent. So this is just an example of course. So basically by using this fluid sizing option, we're going to make our elements fully responsive on each and every screen. And here we are using a relative measurements like a percentage symbol, which will basically allow us to take 70 percent width on each and every screen. And of course we can use pixels, for example, instead of percentage. But in most cases, you want to make your elements be fully responsive. So I'm going to choose percentage. And now let's switch to our tablet version or our middle breakpoint. And this is how this paragraph will look like now. So again, it will take a 70% of its full width in this case, because our tablet is smaller than this paragraph will take three lines of code instead of one end. Also, if we open up this smallest break point for a mobile devices, you will see that it will take five lines of text here. And the Nevertheless, our website and our paragraph is fully responsive. So we can also use this little drag icon to drag our website whenever we want. So as you can see, this is how our text will automatically adapt when we increase its size. So let's drag this all the way to k. So as you can see, it works perfectly fine. And of course, instead of just dragging this breakpoint, you can choose, for example, this one or this one or this one. And you will see that our design will basically be fully responsive. Now, there is one more important thing to remember. So we're Editor X uses cascading concept across some breakpoints, which means that the changes cascade down. So our changes you make on the largest, the breakpoint are applied down to the smaller breakpoints, but changes or smaller breakpoints will not affect the larger breakpoints. So for example, let's select this text or this paragraph on our larger breakpoint, and let's change its text color. For example, to this purple or red. I don't know what this actually is. So let's select this color for example. And now if we select this middle breakpoint, you will see that this text color and will be applied immediately. And on our smallest break point, this text color will also be applied. But what if we tried to change this paragraph text color from our smallest break point? So let's try and change this color too. For example, maybe this blue color. So you will see that on this smallest breakpoint, the color of that text that will be blue now. But if we open up this some middle or the largest breakpoint, then you will see that the text color will not be changed. Also, if we apply a different texts color on our middle breakpoint. So they're choose here, for example, this green color. Then you will see that on our largest breakpoint, this color will not be applied. So this red color will still be visible here on our largest breakpoint. And if we open up our smallest break point, then you will see that this blue color will still be visible. Also, there are two cases when you cannot customize the breakpoints. So the first one, when using a data. So for example, you cannot change the link or a source of an image. And the second one, you cannot change the structure. So for example, you cannot place a button on one side in one breakpoint and place it on other side in other breakpoint. So the structure of your website should stay consistent across different breakpoints. So what that'll be all for our breakpoints. Now you have seen how you can customize a different break points to fully customize your webpage design. Those three breakpoint buttons are a very convenient to switch and you can very easily just switch different breakpoint in see how your website that will look like on a different viewport size. Also, as I already mentioned, you can create a different breakpoints or you can modify existing breakpoints and even delete them. One more important thing to note is that you can have a minimum of one breakpoint per page. So for example, you can delete those two breakpoints, but the last one, I cannot be removed and therefore be all for this video. 6. Keyboard Shortcuts: Hello there and welcome back. So why in this video I'm going to show you how to use shortcuts in editor eggs. And they're shortcuts are very useful and they can save you a lot of time, especially when you're working on bigger projects on and designing your websites. So to see all supported their shortcuts for 8 or x. So you just need to go to this top bar in hearing to open up this help drop-down. And then from here we can select these keyboard shortcuts. Now on this right side, this panel will show up in here we can see some are most common shortcuts which we can use in editor x. So first you can see that we have some common shortcuts like undo, redo, preview, Save and Publish. So undo and redo our most important and the most used there are shortcuts in editor eggs. So the shortcut for undo is Control zed, while for redo is a control shift pluses add. So for example, here in our case, let's try and delete this paragraph and let's say use those two shortcuts. So now I'm going to select this paragraph and I'm going to press the Delete button so I can delete this paragraph. And now I'm going to press our shortcut undo, which is a control plus z. And now this paragraph will be back. And now if I press Control Shift plus the sad, then we're going to use a redo a shortcut R k. And now that the text will disappear, or we can get that text back again by hitting Control zed or undo. And there we go. So those shortcuts are very useful and they can save you a lot of time. You can use a keyboard instead of clicking those two buttons on the top right here. And if you want to open up that keyboard shortcut panel on the right side, there is a shortcut for that and you can just press a Control and slash. All right, then here we can also see those three shortcuts for a preview, save and publish. And you need to be very careful when using a preview and publish your shortcuts because they are a similar. So for example, for purview we have control all the PPE. While on Publish we have Control Shift plus B. Okay, Then down below we have some more useful shortcuts like a copy which is Control C, Control X and paste control V, and the duplicate Control D. So those are the most common shortcuts. And those shortcuts are almost the same on each and every application out there. So let's try out and see how those shortcuts we'll work with our elements. So let's close that for now and let's select our paragraph for example. And let's open up our layers panel. So here as you can see, we have only one paragraph here, and I'm going to press Control C Now to copy this paragraph. And now I'm going to press Control V to paste that again. And now you will see that we have received another paragraph right here. So I can click now Control Z to undo in here, I can select that, and now I can click, for example, Control X to cut that paragraph. So Control X, and now I can press Control V to paste that back. Okay, so as you can see, it works perfectly fine. And also we have a shortcut for a duplicating one of those elements. So of course, those shortcuts for duplicating and coping and so on do not refer only two elements. They also referred to whole sections. So for example, I can just select this whole section, middle section, and now I can press Control D to duplicate that section. So let's press Control D. And now as you can see, we have received another section. So now we have our two middle sections. Okay? So there is those two sections. And if we open up our layers panel and then you will see that there are actually two sections. And now I can press Control Z to undo to remove that section which we have just duplicated now. Okay, so let's hit Control Plus slash so we can open up our keyboard shortcuts panel on the right side. All right, let's scroll down below again. So next we have a delete shortcut, which is just simple Delete button or a Backspace. Then a here we have some shortcuts for us taking in unstack and elements. And I'm going to talk about stacking in some of the next videos for now, we're going to leave that down below. We have shortcuts for bringing some elements to front, moving forward, moving backward, sending to bag. Also we have shortcuts for moving our elements for one big cell. And we can use just the arrows too to do that. Also, we have some shortcuts for moving our elements up to 10 pixels by holding down Shift and the arrow. So now let's try that out. So I'm going to select now this paragraph, and now I'm going to press the up arrow. So we can move that by one pixel or we can hold down shift and now press that arrow up arrow. And now we're going to move that paragraph for a 10 pixels are k. So I'm pressing Shift and up arrow multiple times. And as you can see, we're moving that for a 10 pixels are okay. So now we can get back on the center there. All right, Perfect. Let's again hit Control N slash so we can open up our shortcut on the right side. All right, so let's scroll down below also, we have a shortcut for the selected elements. We can just press Escape for that. We have shortcut for zooming in, zooming out, or resetting to 100% zoom level by hitting Control and 0. Also, there are some useful shortcuts for opening doors or panels, like an inspector panel or a layers panel in here also, you can see that we have a shortcut for opening these keyboard shortcuts panel. And you already know the shortcut for that. So Control plus slash and we can also close net now in our Layers panel as well. So now I can press, for example, control plus L. We can open up our layers panel and I can press control plus L again to close that. Now we can press, for example, Control plus I to open up our Inspector and I can press Control plus I again to close that our case. So as you can see, it works perfectly fine. And I can now press Control plus slash to open up our keyboard shortcuts panel, our right and down below we can scroll to see some more shortcuts, but those are, some are most common and most useful shortcuts which you're going to need when working with an editor x. And you can always access those shortcuts to see and check each and every shortcut by pressing Control plus a slash. So like that now came and if you want to be faster while working with the editor eggs, then you're going to need to use those shortcuts in your project. And for this video, that'll be all. 7. Design Assets: Hello there and welcome back. So in this video, I'm going to show you how to use design acids. So Editor X, Let's use save assets for a future use to make your design process as efficient as it can be. Now, you can save elements, containers, and sections in InDesign library in the reuse them whenever needed, whether it's on another page or a different editor x site you are working on. And you can X's design assets by clicking this plus icon in here, as you can see just below our quick add, we have our design assets. And here as you can see, we have my assets and the design libraries, United library. So this design libraries are available on your website, on your editor x account. While this my assets is available on your current project. And as you can see for now, we have this default asset, which is added here by default. So for example, I can just click and drag that to our Canvas here, n, For example, let's say I want to place this design assets between our header and our middle section. So let's place that for example right here. All right, and as you can see, let's open up our layers panel. And here you will see that we have now a new section named Dai gallery title. In here we have one stack. Stack is something similar to a group. I'm going to talk about that in some of the next videos. And inside this stack we have one paragraph and one title. So basically, we can create our own design assets very easily. And now I'm going to show you how to do that and also design assets are a very useful when you want to reuse one component in a multiple places. And now of course we can remove this gallery title section by selecting it and pressing Delete button. So now I'm going to show you how to create your own design assets and it's very easy, so don't worry about that. So first from here, I'm going to just remove this default paragraph which we have added in the previous video. We don't need that at this moment. Here. Let me just add that one simple empty box, for example, this one r, k. So this is just an example of course. And the inside this container I'm going to add two more texts. So let's add here. Let's see, let's choose one text we can add. For example, some are title, for example, this huge title case, so like that. And here we can also add some are paragraph inside this box, of course, came from our inspector here we can choose, for example, the width can be 80% of the full width of this container. And of course we can center that right here. We can select this title and also set its width to be 80% of the full width of the container. Now I'm going to select both of those texts. So the shortcut for selecting multiple elements is holding down the Shift. So I can select, for example, this text and I can hold down the Shift and select this one. And now I'm going to select both of those. So I'm going to center those two, for example, somewhere right here. Also the option to group and stack them. I'm going to talk about us taking some of the next videos. And for now let's just group them now. Okay? And for example, now we can select this whole container and we can rename this container, for example, to something else, for example, my container. And now we can select the container and we can press those three dots or more actions. And the down below we can press this option Save As design asset. So let's press that. And here let's name our design asset, for example, my container. And here we need to select one of those two options. So we have my assets or a united library. So as I already mentioned, this semi acids will be available only for this project, while this, the United library will be available for all your projects on this account. So this case I'm going to select my assets and click Save, OK. And now we can remove this container for example. And now we can click this Plus icon in from here, let's select our design assets. And here inside our my assets now you will see that we have a new asset, which is my container. And of course from here we can rename this asset. We can say this asset to a library, or we can delete that. So now I'm going to just drag and drop that right here. And now I can just drag and drop that one more time, for example. And you can use this same acid in a multiple places in your project. And that's the whole purpose or for design assets to basically create some are components and the reuse them in a multiple places. So that'll be all for this video. 8. Compositions: Hello there and welcome back. So in this video, I'm going to show you how to add different compositions to your project. And if you're wondering, what are those compositions? Well, they are basically pre-made components or a whole sections which you can use in your existing projects and to access those compositions. So you just need to press this, add the icon. So right here, and then down below you'll see one section named their compositions. So here as you can see, we have a bunch of different categories to choose from. And for example, here we have a welcome pages and the here on the right side we can browse and see kind of welcome pages which we can add in our project the right here. And of course, so we can modify those existing compositions. So for example, we can just import one of those, uh, welcome pages and we can change those images. Those are texts and even add some new elements which we need for our project. Down below, as you can see, we have about categories. So here we can see some great about sections which we can apply to our existing our website. Then I would have a services, then we have a summer theme sections. Then we have our features, and we have our products. So here as you can see, they're very different kinds of compositions which we can use in our project. They all look beautiful. Then we have a testimonials and we have our banners. Then we have some pricing sections. We can of course select, for example, one of those sections and we can change the text here, the colors and the basically everything we want. So there are many different categories for different kinds of compositions. We can also choose those boxes. So as you can see, those are some smaller components which we can reuse in multiple places. Then of course we have some headers, then our footers, sidebars and their wireframes as well. So now I'm going to choose one and composition and we're going to add that composition to our project. So let's choose, for example, these services category. And from here I'm going to select, for example, this one, our case. So as you can see now if we open up our layers panel, then you will see that we have received a new section in our layers. And this section consists of one button name the explorer. Then we have one, a repeater, and I'm going to talk about repeater in some of the next video. So don't worry about that n Here we have one title. So as you can see in this repeater, we have basically one item and that item contains one image, then a title and a paragraph. Also in some of the next videos, I'm going to explain more about the stack here. We can also see that we have some line here between this image and text number low end, that line represents grid. And I'm going to talk about grids in some of the next videos. So for now it is important for you to know that you can add the different kinds of compositions here. And of course you can rename those texts and you can just change these texts, for example, we can just double-click and change this text to something different. So for example, title number 1, now K, and as you can see, it will be automatically applied. We can also change this text by clicking this button edit texts. And we can change the color of this text, for example, to something different. We can even change this image, of course, by clicking that imagery and clicking this button changing image. So are those compositions can save your time a lot. And of course you can customize each and every composition and that there is one more great thing about compositions. So you can use each and every composition out there to reverse engineer and see, for example, how this design was created. There we have already explored this section, so it has one button, it has this repeater. And inside this repeater we have three different items and we can change those items. And each one of those items have a two grid layout inside. So we're going to talk about grids and in some of the next videos for now, let's just select this section and let's just remove that. And of course, you can also add some different kinds of compositions from here. So there are many different categories to choose. Of course, we can choose, for example, some About page, for example, this one. And here we can open up our layers panel to see what items do we have inside this section. So basically here we have this one image. Then on the right side we have our one and stack. And inside the stack we have some text and this button. And of course we can modify the properties of this section so we can change, for example, background color and basically everything we could think of sour. Now you have been introduced with the compositions, so feel free to use them in your projects to modify them, to add some new items inside, or even apply them directly into your project. So for this video, that'll be all. 9. Empty Boxes: Hello there and welcome back. So far in this video I'm going to show you how to use empty boxes in your project. So we're in some of the previous videos. I have already used that one empty box to create our design asset named there, my container. And you can access the empty boxes by clicking this layout tools section. Then our opening this empty boxes. All right, Here on. So here we have various different empty boxes which we can use in our project. And in some of the previous videos, I have used that, this first one. But of course you can use any one of those. And they're now again, I'm going to use this first one. And then I'm going to show you how you can modify some of its properties directly. So let's just click and drag this empty box on our screen in our middle container. Okay, So right there on the center. So you can use those empty boxes to create a different kind of components which you're going to need for your website. So for example, here inside we can add some images, paragraphs, titles, videos, and basically anything we could think of. So Let's select this empty box and now let's open up our inspector panel from the right side here. So from here we can then modify many of its properties. And in some of the previous videos, you have already seen how to modify, for example, width and height of each and every component. So here, for example, we can change the width of our component. And if I say here, for example, 50 percent, then at this box will take the 50 percent width or the full width of this section in which we have added this empty box. Here, we can set its minimum and the maximum height as well. Then down below we can create some overflow content. And now I'm going to show you how this overflow content can be used to actually hide or a scroll different texts. So you will see about that in a second. Then down below, if we scroll down, we can see some are more options to add the margins here to whether Dr. King's. Then down below we have some scrolling effects. Then we have this adjust section so we can change its opacity. We can rotate this empty box. We can scale that, we can skew, we can translate that as well. Also, we can add in, apply a padding to our boss. So for example, here on the left and the right side, I can select engulf a 10 percent. So let's set here percentage in here I can add, for example, 10, so 10 percent padding on the left side. And also I can add a 10 percent padding on the right side as well. Okay, So this is how this box now will look like. And also here we have this Designer tab which we can select. Now in here we can also change the background color off our empty box. Then we have a border. So here we can change the border opacity, the border color and the border with. So here let me just select, for example, the width can be, let's say maybe 20 pixels in here for the color I can select, for example, maybe some gray color. But the opacity of this gray color can be, for example, let's say 20% case or something like that. We can even increase this opacity to, for example, 50 percent to see how it will look like. So there we go, Now k. So let's select this empty box again. And here we can change, for example, the radius. So we can change each and every corner. So now let's say here a value of 15, let's say. So as you can see here, I have applied the 15 pixels corner radius on each and every corner. So it looks like that. And if you want to apply the single corner radius, then you should select this one and click this button in the middle. So now those corners will be unlinked. And here you can just change that to 0 for example, and here to 0 as well. And now we should get look, which will be something like that now. Okay, so there we go. Let's select our empty box again. In here we also have a shadow options so we can enable or disable the shadow. We can choose the angle for our shadow. We can select the distance that psi is the blur effect, the color and the opacity at this moment, I'm not going to customize this shadow anymore. Now, what I wanted to show you, I want to show you how to use this overflow content. So for that, first, I need to add some a paragraph and some title to our empty box. So heel is just adhere huge title inside our k. I'm going to change its width to be, for example, 80 percent of the full width of our container. All right, so I did, and here also I want to add that one paragraph. All right, so let's just drag and drop that right here. And let's set its width to be 80% of the maximum width of this empty box. Perfect. Now K, we can say that for example, to look something like that. So now if you open up our tablet a break point, then you will see that our empty box will again take the 50 percent of the full width of our section. And if we open up our mobile device as well, we're going to see the same thing. So well, let's say that we want to decrease the height of this box on our mobile devices. So we can select that box here and here we can change, for example, the minimum. For example, here for the maximum height I can set. For example, let's say pixels in here, I can write 240. So if I write that value right here, then that box will decrease its size to 240 pixels. But as you can see, the text inside this empty box will cross the border of this empty box. So in order to fix that, what we need to do, we need to select our container or our empty box. And inside our inspector here for the overflow content, we can select the three different options, show Haydn scroll. The show option is selected by default, and it means that it will always show the content inside our antibodies. If we press Hide, then the content which is crossing this empty box border will be hidden. Or we can say that third option, which is a scroll, and in that case we can just scroll our empty box. So let's just preview our website to see how well that actually look like in real, on a real device. So here now as you can see, we can scroll our empty box to see all our texts which we have inside our case. So let's get back to our editing. So edit side. All right, so this is how you can modify the behavior of different containers using this overflow content. And if you don't want to scroll this empty box, you can always select, for example, hide or show. But of course, show is not a good thing if you want to have a smaller components. This is of course, just an example to show you all the possibilities, our case. So now as you can see, you can modify how this container will look like on each and every breakpoint you have. For example, on this first breakpoint you can have a bigger empty box. Then on a tablet you can have a little bit smaller and they're on mobile devices. You can also decrease the size or the height of this container or empty box. But then you will also need to use this overflow content, but also you will need to hide or a scroll. This attacks because as you already know, this text is a little bit longer. So if you don't choose this scroll or content or overflow content, then at this text would overlap and it wouldn't look that good arcane. So of course there are many different empty boxes which you can use and you can change a, they are designed to fit your design needs. Of course, this was just one example of how you can modify and change as some of its properties. And for this video, that'll be all. 10. Stacking/Grouping: Hello there and welcome back. In this video, I'm going to talk more about stacking in the grouping. And also I'm going to show you the difference between those two. And you will learn how to make your components even more responsive by stacking them in one container. Now first, I'm going to start with the groping. So a grouping, as the name suggests, will a group multiple elements in one group? And by grouping them together, we can significantly accelerate the design process, because when elements are grouped together, we don't have to select each element separately. Instead, we can select the whole group and then drag, resize, align, or even add an animation to all the elements inside the group. So here we're going to take this component which we have made in the previous videos. And they were going to make one example by grouping those two elements in one group. So in order to group by multiple elements, you need to select multiple elements. So the shortcut for selecting multiple elements is a shift. So for example, we can select this huge title. Then we can hold down the Shift, and we can select this second paragraph. And now as you can see, we have selected multiple elements. And then from there we have a two options, stack or group. Also there is a shortcut for selecting or a grouping or multiple elements. Shortcut is Control G, So we don't have to click this button every time we can just press Control G, R, k. And now we're going to group those two elements. So as you can see, now this button have changed the name to ungroup. And the shortcut for ungrouping multiple elements is a Control Shift plus and g. Okay, so there we go. And let's say group those two elements together. So Control G, that's a shortcut. And the now as you can see, when we open up our layers panel, when we select this group or one of those elements, then both of those elements that will be selected. So we don't have any special container wrapping those two elements. Instead, when we select one of those elements, this group, so for example, only this one then are all elements inside that group will be selected automatically. And then when we select the one group, we can just move that group and all elements inside that group will be moved together. Okay, so that's kinda very useful things. So we don't have to move element by element separately. We can just move the whole group are came. So now I'm going to show you how you can add more elements into this existing group. So let's say we want to add one more text here, for example, this one. Okay, so let's move that right here. So here we have a one group and then whichever one separate element. So let's open this layers panel. So now if we have a one group already and we want to add this new element inside that existing rope. We can just select this group. Then we can hold down the Shift and we can click on this separate element. Ok, and now as you can see, we can also press this group, and now all of those elements will be inside one group. Okay, So as you can see, it looks very nice and we can just move now all those three elements together, arcane. And if you want to detach or remove one of those elements from this group, you can do that very easily from our layers panel. So here, as you can see, when we select one of those elements from this group, then all elements will be selected. And also on the right side of those elements, we have this one icon. And when we hover over that I call, we should see a message that says that detach from group. So for example, we cannot detach this Celeste text from this group by clicking this button. So let's press that. And now you'll see that this nu or this third item was automatically detached or removed from this first group. So that's how easy it is to actually add and remove multiple items from the existing rope. So let's remove this title. We don't need that. Okay, now with stacking, we are also grouping or multiple elements, but there is a difference. So now you might be wondering what is the difference between a grouping and stacking. Well, stacking ensures that your elements stay in there, a vertical order in every screen size. Whereas grouping is an editing tool that lets you perform actions on a multiple elements. Also, stacking elements that are already in a group will automatically ungroup them and create a transparent containers so they never overlap. And the biggest advantage of stacking multiple items is that those items will not overlap even if we change a different screen size or break point in this case. So we're responsive website, often container elements that the resizing change position depending on a screen size. And this can cause them to overlap or vertically. Or the spacing between the elements might change. Stacking creates a transparent container around your elements, which ensures that they always stay in the vertical order you want with the space between them that you want. So it means that if one element gets larger, then it pushes the other elements in the stack down, keeping the space between them. So as you can see, those two elements are now grouped, but there is one. Huge difference between grouping and stacking. And now I'm going to show you that. So now as you can see, the space between this title in this paragraph is a large. And when we switch to tablet, that space is almost similar or maybe a little smaller. But if we open up our smallest break point, then you will see that the space between those two elements is a very small n. For example, if our title is a little bit larger. So for example, let's add some more text here in this title. And let's open up our mobile or smallest break point. Then. Now you'll see that those two texts are basically overlapping and that's not something that you want to happen. So let's go back to our largest breakpoint. And the now instead of grouping those two elements, we're going to stack them together. So when you stack them together, then those two elements will automatically ungroup. So let's press here a stack. Okay, so now you should see a new container inside your Layers panel. And that stack container contains those two items or elements. So now when we go to our smallest break point, then you will see that those two texts will not overlap because the vertical space between them will be consistent across multiple breakpoints. So here of course, we can even increase the width of this container so we can make more space for that whole text. So here for example, the width of this container can be, let's say maybe 90% of the full width of this section. Okay, so like that, and of course, we can even decrease the space between those two elements. So we can just select this paragraph from this stack and we can move that paragraph for example a little bit here, let's say, okay, and now when we open up our smallest break point, then you will see that that space will be identical. And you will see that this vertical space between those two elements will be the same on each and every breakpoint. So basically that's the most important thing about stacking. When stacking your items together, you don't have to worry about making them overlap because they will not overlap and they will have the consistent in the same identical vertical space between them in each and every breakpoint. And now I'm going to show you how you can add or attach more elements inside an existing stack. So let's add here a new text, for example, this one. So if you want to add this new element inside the stack, you can just click and drag this inside this tank. Ok, So when you hover over this item over data stack, then this Attach button will be shown. And then from here we can just attach that wherever we want. So for example, I can attach that below or maybe between those two. Oh, okay, and then this is how our stack will look like. So let's center that here. So we can of course decrease the space between the first two elements, for example, a dad. And here we can also change that vertical space like that. So now we can open up our other breakpoints in here. For example, we can even change the tablet version. So for example here we can change the padding of this container to maybe 2 percent are k. So this is just an example of course. And I can also set here 100% of width of this element. Okay, so it's gonna see it looks very nice. And now let's open up our mobile in here also, we can change the padding to maybe 2 percent on our left and right side. Ok, and there we go. And that's basically how our stacking in grouping is working. And if you want to remove one of those items from this stack, you can just click and drag this element outside of this stag. So right there. And then you will see that this element will be outside of that stack mat. I'm going to click Control Z to undo that. Are okay. And that will be all for this video. 11. Grids: Hello there and welcome back. In this video we're going to explore grids in an editor eggs. So CSS grids are an advanced layout into all that. Let you take complete control of your design on every device. And grids consists of rows and columns to precisely position your elements inside any container or page section with grids, you can control where elements dark in the grid and how they move in relation to each other. Now, before adding elements to a page or section or even container, it's a good idea to plan the layout first and then apply a grid. This will help you to structure your section in a more organized manner. So now here in our middle section, I'm going to apply a grid. But before that, I want to add one element or one component. So as you can see inside our design assets, we have our container component, but I'm going to remove that component and I'm going to create a new design acid because this current design acid does not use stack inside the container. So here I'm going to modify this container allele little bit. So first thing I'm going to select this group and I'm going to click a stack so I can stack those two elements. And also I'm going to make it just a little space between them, so something like that now. Okay, perfect. Then I'm going to select here the width of this container. I'm going to set its value to 30 percent of the whole section. Then for the minimum width, I'm going to just select a non. Ok, and we're not going to hell the minimum height, sorry. Instead, we're going to add a padding to our container. So when I select this stacking group, you're going to see that here we have some margins and we're going to set those margins to 0, okay, So all margins should be 0 like that. And here it's select our container. Let's scroll down below. And here we're going to apply a padding. So a padding on each and every side should be represented through percentages. And it's easier that way for me personally, of course, you can use pixels as well. So left and right side should have a padding of 10 percent. Now k and top and bottom should have a padding of a 5%. So this is just an example which I wanted to take now came and the here. Now for this stack group, we can set its width to be 100%. Okay? And now we're going to have only the bedding standing between our stack container. Okay, perfect. And let's check out this component on different breakpoints, our case, so no text is overlapping, which is amazing. And of course, we're going to change this design on our tablet and mobile version, but for now I'm going to leave that as it is. And now I'm going to select this whole container. I'm going to click those three dots and I'm going to say this component as design asset. So here I'm going to create the name new asset in here. I'm going to save it to my assets. Are okay, perfect. And from our assets we're going to remove this semi container from before. So let's delete that now. Okay, perfect. And now what I want to do, I want to select our middle section in here. I want to press this button which says apply a grid. So let's press that. And here as you can see, we can choose them many different layouts for our grids. So below each one of those grids, you can see some numbers. For example, here it says 20X1 in the first number refers to column, while second number refers two rows. So here we have a two columns in one row. There are three columns in one row. There are four columns in one row. Then down below we have one column and two rows, one column and three rows, one column and four rows. And down below we have two columns, two rows, three columns, two rows. And also we have an option to choose custom number of rows and columns as well. But in this case I'm going to select this first one, so two cones in one row, and I'm going to click Apply. So now you'll see this dotted line on the middle of our section. And now I'm going to select our container, and I'm going to move that container on the left side inside the first grid. So now as you can see, as soon as I move that component inside is first they agreed or first column, then you will see that the writer docking will be immediately connected to the right side of this column are k in here. We can also center our component, this first column, which is amazing our case. So let's center that. Now I'm going to also use one more design acid. I'm going to basically copy the same acid inside our second grid or column. And here as you can see, the first one has a width of 60% or K. So as you can see, the second component has a width of 30 percent and I'm going to set its value to 60%. So it can be the same as this first one. And we can also center that right here are came so well when you add an element to a grid cell, it is automatically docked to the nearest vertical and the horizontal grid lines. So a docking elements to the grid lines ensures that. And position them exactly as you want and prevents elements from our overlapping between cells. So now let's, for example, selecting this first cell. And this first cell is a centered here on the screen. And we can also check out those margins. We can set the right margin to 0. And for example, the top margin can be in percentages. In here we can set, for example, it's maybe 10 percent or maybe 5%, okay, and for the second component, we can do the same. So let's choose the percentages for this margin, and he'll choose number 5. Alright, so let's check this design on a different breakpoints. So let's choose a tablet. You can see here it looks so very nice. Here we also have a grid. So let's select this middle section and you will see this little line on the center of our section. And that line is a separating two grid cells or two columns. And let's check our mobile version as well. So as you can see, our mobile version does not look that good. So there is a way to change that and you can always adjust agreed to a different break point. So for example, our first tool breakpoints have a two columns and one row in here. We can just select our middle section inside our smallest breakpoint and we can adjust that grid. So here now we can click Edit grid. And there from here we have some options. So first the down below, as you can see, we have a two options to set, vertical and the horizontal gap in-between those two cells. So for example here I can set the horizontal gap between those two cells and let's say, for example, 50 pixels. And now you can see that the 50 pixels gap between those two grid cells has been added. But of course I'm not going to add that right now. And the now eyes you can see when we hover over this vertical element right here, we can see this plus button down below which says Add Row. And for example, we can click this button and we can add one more row, or we can of course, click here until he agreed to delete in the grid. Okay? And now we can also click apply a grid in from here. Let's say we're going to select two rows and one column. So let's apply that. And now as you can see, we have here one horizontal line. And that basically means that we have a two rows and one column. But if we check our middle and allows us to break point, then you will see that those two, we'll still have a two columns in one role, while our smallest one will have a two rows and one column. And then from there we can design our two components are differently. So for example, we can set our component on top of each other. So the first one can be on the top and then the second one can be down below inside the second row. So here I'm going to select this first component, and then I'm going to open up the inspector in here for the minimum height or the maximum height, we can set the value. So here let's say for example, I want to take pixels and I want to set 100, let's say. So this is just an example, of course, I can set it to 250 pixels or maybe 200 k. Then for the overflow content, I can select Hide. I can move this component to this second row, now k. And here I can set its maximum height to be 200 pixels as the first one. Okay, perfect. So let's center that right here. And this component can be centered hearing this first grid. So now we can increase its width to be, for example, it's a 95% of the full width of this first row now, okay, and this second one as well. So 95 percent perfect. And here we can also select the hide or scroll. In this case, I'm going to select Hide. And as you can see, this is just an example how our two components should look like on our smallest break point. And here as you can see, we have applied the different grid then in the rest of our breakpoints. So all our breakpoints or those first two breakpoints, will have two columns and one row, as you can see. And our smallest, the breakpoint will have a one column and two rows. And that's the beauty of our grids. So you can't change the grid layout on a different breakpoints, which is amazing thing and that you can adapt your designed to fit your needs. So now let's get back to our largest breakpoint in here. Let's select our middle section and let's press adjust grid. In here we have option to edit them read, so let's press that so you can set the size of the rows and columns using your percentages, pixels, or fractions. And you can also set the minimum and maximum size of the column and row and even use calculations to create the grid you require. So here you can see that each grid cell or each column, taking the space or 41 far in this FR, stands for a fraction. So you can set the size of your column or row to be a fraction of the size of the page, section or a container. So for example, in the grid off two columns, like we have in this case here, if the left column is settled to fractions. So let's change this to two fractions are came and the right one is set to one fraction. Then the left column, we'll take up to 230 space of this whole section. And here on the left side, you can also select this vertical element which says minimax in here. You can also change the row height, for example, in the minimum and the maximum value. So now I'm going to leave that as it is. So our first greed or first column will take two fractions, while our second column will take one fraction. So let's click done. And also there is an option for you to, for example, stretch one of those containers. So here as you can see, we have one option which says a straight edge. And when I press that, then this whole container will take the space of this whole grid or this column. So now we can check and see how will that look like on our second or middle breakpoint, our k. So again, we can customize this layout as we want. So for example, we can increase its width to be, let's say 95 percent again. So this is just an example. Of course, we can set its margin here to be 0% instead of 50 percent. And let's check this design on our smallest break point. So as you can see, this smallest break point didn't change because this smallest break point here a different grid cells. So here we have a two rows and one column. But still we can just stretch this element to the full grid width and height, and this is how it can look like. So that's an example of how you can use a greets in your design process. And when using grids, then the contents between those two grids. So we'll never overlap and they will resize and be responsive in each and every breakpoint you have. Also, one more important thing to note is that those grid cells or those grids can be applied not only on the sections, but on a components as well. So here as you can see, we have this one component, but when we select that, we can also see a button here or option that says apply grid in here. We can also select a different grid and apply to our component in our case. So I'm not going to apply that at this point, but also you can't do that. And for this video, that'll be all. 12. Layouters: Hello there and welcome back. In this video, I'm going to introduce you with delay outer so we can access a layout is from our Add button on the top right corner. So right here, then open up our layout tools. In here you can see a layout There's just below the grids. Savoir layouts are a smart layout tools that are made up of a collection of a responsive containers using a flex technology, our layout are automatically adjusts and the reorganizes its items when they're resized, means that it will always look good no matter what screen size you have. Sowell a outer is made up of several items that are actually containers. And you can also change the number of items in a layout there. And it will automatically resize the items to fit the available space. So as you can see here, we have some blame Kelly outers, and down below we have some more examples of some more complex layouts as well. But for now, I'm going to just add this one simple layout on from here. So let's just drag and drop that right here on our middle section. All right, so here we can also use this stretch options. So we can stretch this layout or to fit section. So let's press that. So let's open up our layers panel to check out our layout term. So as you can see inside our middle section, now we have our layout and that delay outer, at this moment contains four different items. And of course we can add or remove a multiple items, so don't worry about that. So when you select the CLA outer, we have here an option to add an item. So for example, we can add one extra item, and there we go, the fifth one. And also we have this a button to change the layout. So once we open that, we're going to see this pop-up window where we can select a different display type for our layout there. So at this point we are using this mosaic type, but also we can change two columns, for example, rows and a slider as well. Okay, so I'm going to switch back to our mosaic. All right, so we're here down below, we have some options. So here the first option is item proportions. And then we can click this equalized to give all the layout or items the same size definitions. Then down below we have option of auto wrap items and we can click this toggle button to change the way the items are rearranged when the viewport size changes and when this option is enabled, then the item, so we'll automatically move and the rep under each other as the screen size gets smaller. And my recommendation is to keep this option always turned on. And that way basically this layout or will automatically resize those items as the breakpoint changes. So you're going to have to do it manually. And down below you also have a one option name the item direction. And here you have two options, left to right and right to left. And the width is basically you can select the direction of the items in the layout or the default value is a left or right. So I'm going to leave that as it is here. You can also change the horizontal and the vertical margins. So you can use a pixels or percentages. For example, the default value here is aid, but of course we can increase that. For example, it's a 16 horizontal margins. And we can increase the vertical margins as well to 16, our case. So as you can see, it looks something like that. You can increase or decrease those values. And I'm going to get back to eight or k. So that's the default value. Next, when we select our slider, then we should see some more options. So here we can see a slider direction. And as you can see here, we can slide this slider horizontally because of this option is selected horizontal and also we can choose the vertical so we can scroll this slider vertically, okay, so there are two options, and the down below we have a two new options. So the first one is name the scroll snap. And when we click in the enable this option, it will allow us that when scrolling through the slider of the layout, it will snap to each item or a slide so visitor don't miss it. And down below we have a show scroll bar option, which is enabled by default, and it will show up this scroll bar. So we can actually see if this is a horizontal or a vertical slider now K, So those were some of the options for changing this layout or items. So now I'm going to remove this out there and I'm going to add a new one. But before that I just want to apply a new grid to our middle section. So let's select our middle section and let's press applying grid. So here I'm going to apply this first grids. So what two columns in one row? Click Apply. And now I'm going to add one layout or inside this first grid. So let's click and add one new layout or NCDs first green. So right here, and of course we can stretch this layout or inset is first agreed sell our case. So it looks amazing. Also, when you select one of those items from this layout, you can see that we can select those are two options, minus n plus to increase or decrease in the width of that item. So if we press minus, then you will see that this item will decrease its width and that there will be more space for. Next item to come up in this first row, and then this last item will take its full or within this grid. So of course, we can play with that and change the size of those items. So as we wish, we can also delete those items by selecting it and pressing Delete button. Our case, as you can see, it looks like that. Here. We can also increase the width, for example, this item. And we can increase the width of this site and for example, to 60% are came. So now I'm going to add some dummy elements here to show you how this layout we'll work with the resizing. So here inside this first item, I'm going to add, for example, one, a title. This big title for example, are, okay. Now I'm going to open up the inspector and here I can change the width here to be, for example, 95% of the full width of this first item here for the margin, for the top margin, I can set, for example, 5% or maybe 10 percent, that is point. And the down or bottom margin can be 0, or sorry, right margin can be 0. Then here I can change this text for example, to, let's say a mountain. And inside this second grid of this section, I can add a new element. So let's add, for example, one image here are k and we can stretch this image to fit in the whole grid. All right, it looks very nice. Then I hearing this second item, I can add some more texts. So let's select, for example here. Some are paragraph like this one are, okay, Let's open up our inspector here. We can set the width to be 95 percent as well. The top margin can be in a percentage, so maybe five or 10, let's say 10, and the right margin can be 0. So it can be centered here in our second item, in, for example, in this last or third item inside our layout, Let's add that one button. So I'm going to add, for example, this button now. Okay, so here we can also open up the inspector and we can change the width of this button to be 100% of this item. All right, here we can remove all margins and we can set also our height to be 100% so we can fit the whole item inside our layout or perfect here when we select our button, we can also change some of its properties. For example, we can change its color, Let's say We can also change the text or the text fonts so we can increase the text phone to maybe 24 now k. So it's just an example of course. So now as you can see inside our middle section, we have added the two grids. And instead the first grid we have our layout or with the three different items. And instead the second grid, we have one image. So now let's try and open up our middle or tablet breakpoints so we can see how this design will look like there. And as you can see, basically this layout or a has automatically rearrange the items. So now they are basically on top of each other. And also for this a tablet version, we can select this text and we can edit its font size to reduce the font size so it can look even better. All right, so it looks amazing. Okay, So now we're going to open up our smallest breakpoints to see how it looks like when a mobile devices. So let's click that. And now as you can see here, the content is actually squeezed and we want to change that. So first, we're going to open up our layers panel in here. Let's open up our middle section. Then. Let's select that section and let's press adjust grid. So as you can see at this moment that we have a two columns and one row. And of course, we want to change that. So I'm going to remove this grid. Then I'm going to select the middle section again and select apply grid. And this time I'm going to check two rows and one column. Okay, so now click Apply, perfect. I'm going to drag those handlers little bit so I can move them or those elements here on the better. So now I'm going to decrease the size of this image for a moment. Then I'm going to select this layout. Then I'm going to move this layout or in this second section. So right there. And now I'm going to stretch that layout or in this second grid. And in this first grid, I'm going to stretch this image. All right, okay, so this is how our mobile version now will look like. So now we have changed our grid positions and, and on our mobile devices, we no longer have a two columns. Instead we have a two rows. And of course we can just move this element into a little bit here on the center and this as well. And then now everything looks perfect. So our smallest break point looks good, then our medium looks good, and our largest breakpoint looks good as well. So the last thing that I want to show you, I want to show you how you can rearrange those items inside the layout. So let's say we want to move this third item inside this layout on the left side. In that case, I'm going to select that third item in our layout turn sour right here. Okay? And I'm going to click and drag data item right here on the left side. So here, Okay, So now you'll notice that this button is actually in the first row and not in the second. And that will fix that. We just need to select this first item and increase its width. Okay, and there you go. So now we have successfully rearranged those items. So it's very easy. You can just drag and drop that item wherever you want. And also you can increase and decrease its with as much as you need. And also you can add new items in your layout or you can remove them. So it's up to you. And for this video, that'll be all. 13. Repeaters: Hello there and welcome back. In this video, I'm going to introduce you with repeaters. So our repeater is a list of items that have the same design and layout, but different content in each one of them. So it's a fast and easy way to display your content. So while in editor x, repeaters are arranged in a flex layout that automatically reorganized content when it's a resized, which makes it looks great on each and every screen size, like the layout errors which we have seen in the last video. Now, you can customize the content of each item separately inside the repeater, including the images and text. But the design structure always remains the same for all repeater items. So now let's add one repeater to our design right here. So click this plus icon. Then here we're going to select the repeaters. And also you have some pre-made or pre-designed repeaters which you can use to check out. But in this case I'm going to select this blank one. So now let's select that and let's add it to our middle screen or middle section, our case. So now I'm going to stretch this repeater to the whole section. All right, Now, before I start adding some elements inside those items, you should know that all the items in the repeater needs to have the same structure. So well, when you add an element to one repeater item, it is automatically added to every item in this repeater to keep this design consistent, also removing one element will delete that element from all items as well. So you can customize the individual elements are inside an item, such as the text or image button. The design structure should always stay the same. For example, you can change the text on a button to be different on each item. But if you move that button to a different location inside this repeater item, then it will move the button on all items to the same location. Okay, so enough talk. Let me just show you how you can add elements and use this repeater properly. So first of all, when we select this repeater, we're going to see two options here, manage items and change layout. So when we select this and manage items button, then we should see all items that we have incidents repeater, and it is case we have three different items. So as you can see, those are those three rectangles. And of course we can add more items here. We can just select one of them and click this button which says a duplicate item. And as you can see, it will add one more item. And of course we have an option here to delete or duplicate that same item. So let's delete that for now. Okay, and here we also have an option to change the layout. So here we have a 3D display types cards at least, and the slider. So four cards here we have a one option that says a set items per row. And it means that we can select how the repeater items are going to be displayed per row. Here we can select the automatically or manually. In here we have specified them manually and number of items in one row will be three. Here we can specify horizontal and the vertical margins as well. So for example, for the horizontal margin, I can specify it say 2%, and now the margins between them will be larger. We can also specify here a vertical margins as well. So as you can see like that, then down below we also have an item alignment. We can justify that moved left, make it in center, or move it to the right side. Also down below we have item direction property as well. Then we can change this display type to a list. And here you will see that all those items, so we'll take basically the full width and it will display those items in the list. Here we can also specify the vertical margins. Then we have a slider here as a final display type in here, we can also specify a horizontal or vertical slider direction. For now I'm going to select cards, display type from here and here I'm going to manually add three items. I'm going to specify horizontal margins to 2%, and the vertical margin can be, for example, 1%. So let's select here percentage, so 1%. Okay, perfect. So now that we have selected the display type for our repeater, we can start and add some more elements inside one of those items. So when we start adding an element to this first item, then that item will be automatically added to the rest of those items inside this repeater. And as the name says, repeater will basically repeat multiple elements in each and every item inside. So of course, you can change, for example, the background color of this item. So you can select this item inside the repeater. And from here you can select the background color, you can add a shadow. You can change the corner radius and everything else. For now, I'm going to leave that as it is. Okay, so now we're going to start adding some elements in our item. So the first thing I'm going to select here, one image. So let's drag and drop that image right here. And you'll see that as soon as I put that image in this first item, then at each and every item inside this repeater will get the same element. So basically whatever I do in this first item, all other items, so we'll repeat that. So let's just stretch this image now. Okay, So here also I want to add, for example, it's a, maybe this title came so we can maybe decrease its size to be. 72, for example, or k. Let's open up to our Inspector. Let's change this to be 95 percent of the full width of this item, our case for now, let's move that here in the center. We can also change this text color to white, for example. All right, next let's add the one paragraph down below. So maybe this one. Let's increase this paragraph or width to 95 percent as well. Are calleds for that somewhere here, for example. All right. Let's change the text color again to white and that there is only one more element which I want to add, and that is a button. So let's choose, for example, this button right here. And for the button I'm with, I'm going to select percentage and I'm going to set 60 percent of the full width of this item. Okay, perfect. Now we can open up this Design tab and from here we can, for example, remove this background by changing its opacity to be 0. And also from here we can select, for example, this text and we can change the text color to be white. And we can select now this border and border color can also be wide. Okay, perfect. So now let's go to this layout tab. And here I'm going to remove a top docking and I'm going to dock this a button to the bottom and then went to remove all margins except this a bottom margin. And bottom margin can be, for example, let's say 10% case or something like that. And now as you can see, all items are basically the same. And what we can change inside each one of them is the actual text. So for example, we can change this text to say, let's say maybe a mountain number 1, r, k. And then inside this second one we can just say mount the number 2 and incidence. Third one we can say Mountain number three. And now I'm going to also change some images. So here in a second item, I'm going to change the image. So let's click this to change image, a button in from here. We can select some of the images from weeks or we can upload our own eye. This point I'm going to search here for a mountain image. And let's say for example, I want to choose this one. So let's update this second image, or k. And for the third while it's a change in another image as well. So let's search here for a new image. Let's scroll down below. Okay, I can choose, for example, this one. Let's update that. All right, so it looks amazing. Also, if you want, you can select this repeater and then you can click this and manage items button. And from here you can just rearrange those items as you want. So for example, as you can see, I'm a rearranging them at this point, but I'm going to and just move them Becker as they were in its default position, r, k. So now let's open up our tablet breakpoint here to see how our design will look like they're, so now as you can see, those items in our repeater are actually overlapping. And the reason is very simple. So let's go back to our largest breakpoint. Let's select our repeater and let's press a change layout button. So here you will see that we have used the diesel manually option, which means that it will set three items to be in one row and it will not adjust automatically when we decreases the screen size or change our breakpoint. So what we need to do, we need to change that to automatically, so it can automatically change those items position when we decrease the screen size. So now let's try and open up our tablet breakpoint. And now you'll see that this repeater will look even better and those items will actually not overlap. Also, there is one more thing which I need to do. So now I want to select those three elements in it. I want to stack them. So let's hold down the Shift and let's select those three elements. And now let's press this button. So now those elements are stacked in one container. So now let's open up our tablet version. In here you will see that we are going to have this same spacing between them in each and every breakpoint, of course, so we can change that and we will change that. So for example, let's select this first button and let's open up our inspector. So here for the top margin, I'm going to choose a percentage. And let's set, for example, that to maybe 10%. And bottom margin can be also may be, let's say 20 percent are not the right margin, sorry, let's remove that. But the bottom margin can be 2%. Our case or something like that, for example. Or we can increase that to five maybe. So that's how it will look like on our tablet version. All right, so it looks amazing. Let's open up our smallest break point to see how will that look like they're, so here as you can see, we cannot see all our items. And let's open up our layers panel to see what this is all about. So let's open up our middle section then a repeater, and let's select, for example, this first item or this first one. Okay? So here you can see that the width here is set to a fixed value. And for example, let's change that to something different. So two percentage and we can choose here 100% in width, right? So now it looks even better. And from here we can just, for example, I decrease the font size of this first title. Maybe let's say 48. All right, and there we go. So now our items, so look amazing even on a smallest break point. So let's open up our tablet breakpoint and our largest breakpoint as well. So you can see that it looks amazing and as I already mentioned, you can change the text stands for example, some more properties like the actual image and some different stuff. So you can experiment and see how you can improve your eye repeaters. And they're basically now you have learned everything you need to know about the repeaters. And for this video, that'll be all. 14. Lightboxes: Hello there and welcome back. In this video, I'm going to introduce you with light boxes. So a light boxes are basically pop-ups which main purpose is to grab a visitor's attention. They are a great way to display important messages in the announcements. You can customize their design, setting the triggers, and even choose how they are closed. So where to access a light boxes? Let's click this Add button right here, and then let's choose the layout tools and the down below, Let's select our light boxes. So here we can see a many different templates for a light boxes. And we can see some of the examples which we can use to add those lightbox is to our website. So all those the light boxes are displayed on the top of our webpage design. And whenever we open up one of those light boxes, then the background will basically be dim the black color, and it will reduce the visibility of our content behind their lightbox. And our light box will be the most visible thing out there on our web-page. So here you can also see some are light boxes which can be displayed their own our website whenever a user visits our page, then we can see down below some examples of these playing a simple message. For cookies. We can also display some messages like some, uh, discounts or sales and so on. And also we can have, for example, show one a lightbox to actually grab an e-mail address from our users if they want to subscribe to our newsletters, for example. And now let's add just one light box here so we can actually check it out. So in this case, I'm going to select this one. Okay? So as soon as you add that light box, then you're going to see that the preview here, and as you can see, this is our light box. So let's open up our layers panel. So as you can see when we add this lady bugs, we're not going to see our homepage instead of this satellite box. So we'll create its own page, and that page will be visible on top of our homepage, for example. And you'll see about that in a second. So here we have one light box and inside our light box we have a stack of multiple elements. So here we have our button, go to sale, and then here we have one at texts which says a season sales starts today. And here we have title which says 50% off. And below our stack we have one button which represents that close button. And of course we can modify each one of those, the elements from this light box. We can change their color, their text, we can change the background color here as well. Also, we can add them multiple elements here inside that is current light bulbs. So well when we select our light bulbs, so we're going to see here a multiple options. So the first option is set triggers. So let's press that and then it is a new pop-up will appear here. We can rename our light box and I can, for example, rename that to welcome our light box. Then down below we have a one option, a lightbox page settings. So here you can see two options to automatically display a light box on the page or to trigger that light box whenever you want. So if you select this yes option, then down below you can select on which page you want to display the saliva bogs. And hearing this point, we have only one page and that is a homepage. And down below, we can also specify the number of seconds which will present a delay in which this light box that will be shown. Then down below we have some options to check if we want to close this light box with this X icon or a button, or we can just select all trigger this close button option and then we should get another element here inside close, which is a button. But at this point I'm going to just remove that. I don't need that at this point. So let's select our light box again and let's set triggers say again. So basically now we have a setup that whenever we open up this web page, after two seconds, this light box will be displayed to our users. So let's just close that and then click Done. So now we are currently at our homepage. And if we check our homepage, you will see that here we don't have any element or a light box. So all our light boxes are located inside our pages section. So right here, and then you will see here a new section named the light boxes. And this is our welcome light box which we have just added. So from here we can of course modify this design as we want. And we also here have option to rename this light box to duplicate it or to delete it as well. So we have already specified that we want to trigger this light box after two seconds when a user visits our webpage. So let's just check that out. So let's save that now, okay, and now let's preview that. Okay, so after two seconds, as you can see, this satellite box and became visible. And of course here we can just add some link to this button. So for example, when we click this button, we can open up some different page or basically anything we want. And also there is this close button. So when we press this X button, then this light box will disappear and we will be back to our homepage. So let's click on that. And there you go. So that's basically how light box is working. So let's get back to our edit side. All right, So bottom line, this light box will not be visible inside your layers panel. Instead, it will be visible in the Pages section. And from there you can add more light boxes to your Pages section here and you can modify each and every light box from here, or you can just create your own one. So now I'm going to go back to our Layers panel here and I'm going to add a new button. So let's just add this button here on our middle section. So when we select one of those buttons that we need to click this link option in from there we can select our light box. So here we have a multiple options to choose from. And now we can select a light box. Here we can select our light box, which we have inside our project, and we have already created this well combined box. So let just select that and click Done. So now whenever we click this button, then this satellite box will appear and there is only one more thing which we need to modify. So let's open up our pages panel in here. Let's select our light bulbs. And from here let's select our light box and let's click Set triggers button. So from here now we need to select this option. No. So basically now this light box so will not be shown when we visit our website, instead, our light box. So we'll be shown only when we press our button. Let's press Done. Let's save that. Are okay, and let's preview that. So now when I press this button, this a light box will appear now. Okay, so there we go. It looks very nice. And let's close that. Let's edit site. Okay, so of course, we can modify this light box or furthermore. So as you can see, we can even adjust the agreed, we can add multiple grids to this light box as well. Also the resorption here to set up the overlay. And this option basically means that if we press somewhere else on the screen on this black space around, then it will automatically close our lightbox. And this option is checked by default, which is amazing. Then here we also have an animation for this lady bugs. So this light box that is already animated and we can press that and change a different animation. So for example, we can add this floating animation, maybe gliding animation, expand or basically anything you want from here on. So for example, we can select this float in animation, and then we can customize that animation. So here we can customize the actual directions. So I can just type power select from bottom. And for the duration we can set, for example, maybe 0.8 seconds. Okay, let's get back and let's close that. Let's click Done. Let's save that and let's preview that website so we can check out and see how our light box now will appear with this new animation. So let's click Start now. And as you can see, this light box now appears basically from the bottom. So that's kinda the animation which we have made earlier. And that's basically all you need to know about those light boxes. You can even add some a different light box to your webpage. You can have a basically as many boxes as you need. And this is also a good way to let your users subscribe to a newsletter by choosing, for example, this one. And you can experiment furthermore with those light boxes as well. So well for this video, that'll be all. 15. Text & Buttons: Hello there and welcome back. So in this video, I'm going to show you how to use texts and buttons. So while in some of my previous videos, you've already seen how to add a text and buttons to your webpage. But still, there are few more things which I want to show you about those two elements. So here, when we open up our ad elements panel from here, and when we select the text from our panel, then you will see that here we have two options, theme text and titles. So from this theme texts that we basically here are some different styles or a font size of this text. For example, this is H1 heading, this is maybe H2, H3, H4, and so on. Then down below we have a three paragraphs and also we can access this topography from this theme manager. So from here, when we open up this theme manager panel, we're going to see two options, typography and colors. So when we select typography, we can see a different topography for our current projects. So for example, here we have a heading 1, then a heading to heading 3, 4, 5, 6, and then a paragraph 1, 2, and 3. And we can change each one of those. So for example, I'm going to change this heading one by pressing there. And then from here I can now let say apply this boldness for our H1 typography. And we can apply this typography to our team. So let's press Apply theme RK. And then from here we can choose that heading 1 for example, and we can add that wherever we want. Also, we can change all of its properties from our inspector right here. We can change, for example, the actual width. Then down below we have docking, we have margins, scrolling effects, and some more options as well. So if you're wondering, what is this scroll effect, now I'm going to show you. So here we have a three options, non-sticky and fixed. So let's choose a sticky. So now here for example, I'm going to increase here the height of this whole section. For example two, let's say 1000 pixels or sorry, 2000. So one more 0 cases again, see now this section is, is a lot bigger. So let's just change the background of this whole section so we can see it more clearly now. Okay, now I'm going to select this text and I'm going to click edit text. And here I'm going to center that on the screen. All right, so now you can see that here for our scroll, we have selected scroll effect to a sticky. And we can also specify here that top offset in pixels or in the percentages in here I'm going to type, well, it's a percentage may be 10%, and now let's save that and let's preview to see how this scroll effect will actually work with our element. Okay, so here we have our header, then our middle section. And now when I scroll down below, you're going to see that this ad title will basically stick on top of our screen. Okay, so as you can see, it is basically staying on top of our screen and we cannot scroll that because we have set it's a scholar effect to be sticky. And also we have specified here Data Offset margin. So let's go back to Edit side. Let's go here. Let's select that element again. Let's open up the inspector. Here we have specified offset to be 10 percent, and now we can say that for example to 2%. And now let's save and let's preview that once again. All right, so now let's grow again. And now you will see that the space here between our title at the top, our website will be only 2% in offset. And again, this title will basically stick here on our header even we're going to scroll down below. So that's the whole point of this scroll effect option. Okay, so let's go back and I decide, let's select this element. Now if we select fixed, let's see what will happen. So let's preview that are k. So let's scroll down below, and as you can see, this title will basically stay in its original position no matter where we scroll on this whole section. Okay, so that's kinda the effect which will produce this scroll effect fixed. Okay? And now if we set it to none, then none of that will actually happen. And we should be able to freely just scroll down our section. So let's preview that again. And now as you can see, everything will work just normal. So our texts will basically stay in its position on top of this middle section. And when we scroll down below, we will not be able to see that Xt again. So that's the whole point of this scroll effect. So here we also have this Edit Text option in from there we can change the alignment of this text. We can even add some a link. For example, this link will be activated whenever we press this or click on this text. So for example, we can open up a new webpage. And let's say here, let's type of www.google.com and how does it open? We can say a new window. So click Done, Let's say that and let's preview that. Okay, So now as you can see, this text will have this underscore, and that's basically an indicator that this is actually a link. So now when we press that Can see we have opened a new webpage in a new tab. Okay, so let's close that and get back to editing our site. So let's select that again. Let's click edit text. And now we can now remove this link. We can modify the actual URL. And there are also a bunch of options which we can use with this link option so we can open up our page. And in this moment we only had a one page and that is a homepage. But if we add multiple pages, then we can open up different pages by clicking on our text. Also, there is something called the anchor. And now I'm going to show you what this anchor actually is. We can also just go to the top, to the bottom of our page by clicking on this text, we can open up even some document or even email. So here if we type the actual email and the subject, then whenever we press on that text, then inside our Windows email application or will be launched whenever we press that button or data tags. Also, we can start lightbox and I have already showed you that in the previous video. So now I'm going to show you how you can use the anchors with those links. And for example, here we, as you can see, we have this one section and then I'm going to now add here a new section down below are okay. Inside this new section, I'm going to add, let's say maybe one button. Okay, so like that. And now I'm going to select this button. And inside this inspector, I'm going to scroll down below and I'm going to open up this anchor section down below. And then we will check that option. Okay? So down below now we need to add the anchor name for this element. And now I can just set, for example, button anchor. And you can set whatever name here you want. So press Enter, and now let's scroll up to our text here. Let's go to Edit text. Let's click this link and now let's check this anchor option and hearing cities first option, we need to check the page in which we run to open that anchor. In this case, that anchor is on our button, which is actually inside our homepage. And down below we need to select which anchor we want. So here we have our top of our page anchor, which is the default anchor, and we have our button anchor, which we have created earlier. So let's select that and click Done. So let's save that and let's preview to our webpage here on. So whenever I press this text, it will basically lead us to that second section or two that the button down below. So let's press that. And as you can see here, basically we are a navigated to that second section with that anchor and the link. And of course you can use that anchor to basically navigate different section in your landing page. So that's just one example, of course, our case. So let's go to editing our site. All right, so that's basically everything you need to know about the text. Here we have some other options to change that color to highlight this takes to change the font size, to change the font, to create a numbered list, bulleted list to decrease indent, to increase indent, to change your text direction, to add our character spacing, to add a line spacing and so on. And also when we select that text, we have this little animation icon. And this animation is available on almost every element inside our editor x. So you've already seen this Question button and in some of the previous videos. And when we click that, we're going to open up this pop up in from here, we can select what kind of animation we want to apply to our selected element. So there are many different animations here. And of course, each one of those animations can be customized differently. Okay, So as you can see, we have many different animations. And for example, select this slide in animation, and let's press I customize. So for each animation here you have a different customization options. For example, here we can choose the actual direction in which this animation or these texts we'll sliding. And I can select, for example, from the bottom here we have option a hard medium and soft I can select, for example, medium. The duration of this animation can be 1.2 seconds and delay can be 0. Also, there is one option here that says only enemy the first time. And you can animate this animation only the first time you scroll through this webpage. So that's one of the options, of course, let's close that and now let's say that animation and let's preview our web page. Our case. So now as you can see, so that's how our animation is actually working now. Okay, So let's go back here. And now let's scroll down below to our button. So we can also animate our button with this Marriage Nikon. And also we can select basically any animation we want from that list. Here we have icon for a layout and here we can change the text alignment. For example, left center, and right here on our button. We also have the saline option and we can open up new page, newer webpage, navigate to different tanker using the button, go to the top or bottom of the page, open up a document and basically everything the same as with our text, which we had earlier on. Also, you can customize this text by clicking this change text button in here also there is another link option so you can easier is this a link icon? By clicking that in there, you can also select the water link you want to associate with this button. And of course, we can customize this button with our inspector panel from here, we can change its width and height, margins, scroll effect a incurrence, so on. And also there is this Design tab. And from this design we can customize its background color, It's border, border color, border with a corner radius, a shadow, then our font color, then a font, boldness, font size, and so on. And also there is here another tab named a hover. So this however, is basically just a different button design which will be triggered whenever we hover over Data button with our mouse. So in this case, this is how our Hubbard design will look like. So whenever we cover our button, then the background, we'll change. The text color wheel are basically stay the same because the text color here is white and the background is only changing. But of course we can hear modify a few more elements like the border, color and so on and the text of course. But anyway, this is another useful way of changing in animating your button. So for example, here we can add some animation to our button, for example, fading effect. And then let's just say that. Let's preview to see how will that look like. So let's preview. And as you can see, we have seen that fading effect on our button. And then whenever we hover over that button with our mouse, then this background color wheel are slowly change from black to this purple color. And it looks very nice and the animation is very small. So those were some interesting things which you can do with text and buttons. In some of the previous video, you have already seen those two elements, but still now you hear, saw a few more things which you didn't know about the anchors, links, animations, hovering states, and so on. And for this video, and that'll be all. 16. Inputs: Hello there and welcome back. In this video, I'm going to show you how to use different kinds of inputs in your eight or x. So you can access all those inputs from these elements panels. So let's open that up, and let's open up this input category down below. So here we can see many different inputs like a text input, text box, radio buttons, drop-down checkbox says date pickers, upload buttons, and even selection tags as well. So well first, we're going to start with this text input. So here you can see many different kinds of designs of this text input. And of course, each one of those designs can be customized by yourself. So let's add, for example, this first one. No. Okay, So we can of course increase its width and height and so on. Here are inside euro inspector. You can open up this Design tab and from here you can customize its background, It's border, corner, radius, shadow, and even a text. So well, when you select this element, you're going to see here one option called the settings. So let's open that up to see what settings can we customize with this input field. So the first thing we can change here is the actual type of this text input. So we have different kinds of types like a text password number, email, URL, or a phone number. Our case, we can just switch that and choose whichever you want. Then down below, we can also show this field title, and this is how it will look like if you add that. If you enable that option or k, I can just disable that for now. So down below here, we can also show the initial texts like a placeholder text. We can also choose some default texts which we can customize it by ourselves. Then here we also have a default text, then a placeholder text. So we can add both of those, or we can just select a non so our field that will be empty. So that's on you, of course, in here you can customize this placeholder text as well. So you can check those two options and the read-only. So you can make this info required if everyone needs to fill it in and they read only means that visit or a scan of view and copy for but cannot add or edit it. And down below we can also see some options to set a character limit. And also there is an option to add some pattern validation in a format of a regular expression. So if you have your own or regular expression, you can just write it here and it will be applied to this field. All right, so now let's remove that input and let's select now our textbox. So textbox is basically the same as this text input, but it has a little bit larger height, like you can see here. So let's add, for example, this one. We can of course increase its height line death or K. We can of course, customize this input in our Inspector as well. We can change the colors, text, font and corner radius, and basically everything we want. Here, let's open up those settings to see if there is something new here. So basically it's the same as in our first input which we have, which we have seen a while ago, our case. So that's basically the same here. We just don't have that option to set customer pattern for a regular expression K. Let's close that now and let's remove that. Let's open up our input panel as well. So next we can find them below our radio buttons. So those are some designs which you can choose and of course you can modify each one of those. So let's say for example, this one. Okay, In the very nice, we can customize its colors. It's fill color or text color, and basically anything we want here. Then when we select those are radio buttons here we have option called the many choices. And then when we select that here, we can add some more choices here, or we can add the multiple choices at once. So if we select this other button, then we can just type in your word or new item inside the each line or row here. And then we can just click Save, or we can just add one by one here like that. And of course we can duplicate that item, we can edit its label or we can remove that as well. Okay, perfect. So let's close that for now. Next, let's open up these settings. And here we can also show a field title. So that's how it will look like. And here we can also say that title by ourselves. Then here are the default selection is the first radio button, but we can set it to none and none of those items, so we'll be actually selected. Okay, Then down below we can select an item for your A-list. We can choose our London and basically any item from our radio buttons. Also, we can set this field as required by addressed checking this option. Okay, we can also preview to see how will this look like. Okay, so there we go. It looks very nice. All right, so let's remove this serine group for now. Now let's scroll down. They're also next week, however, drop-downs. And here we can also see many different designs of these drop-downs. So let's set, for example, this one. And of course, so we can increase its height from here. We can just type here, Let's say maybe 50 pixels in height, our case, this is just an example. Then here we can amend it choices. And as with our radio buttons, we can add multiple choices and one choice at a time. We can also remove or edit those are labels and so on. We can open up these settings and here we can also show the title. We can show the initial text like a placeholder. We can set it to none or one item from our drop-down, for example. And here we have our four different drop down menus or items. And we can choose whatever item we want, or we can just set it to none or even as some placeholder text. And also you can set it so field is required as well. Okay, So we can just the preview and see how this drop-down will actually work. So here, as you can see when we hover over with our mouse, this design will change its color a little bit. And here, there we go. We can choose one of those items. Also, we can modify this design. I'm from our inspector, and here we have a different kind of states which we can modify. So we have a regular hover focus and error. So what each one of those states have a different design. So as you can see, now, when we select that item and choose, for example, error, then those border colors will be actually are colored in red. Here we also have a focus, we also have a hover and we can modify and change those styles as well. Okay, so let's delete that for now. Let's open up our input panel as well. So down below we also have some checkboxes. So we have a multi checkboxes and a single checkboxes as well. So let's open up this multi-track box. So this will basically work almost the same as our radial group. So we have those options like manner choices. And here we can add and remove multiple items that here we have our settings and we can just change those settings, say if we want. So that's how it works. So let's remove that for now. Okay, Next number or we also have a date beakers. So those are very useful elements if you have some scheduling on your website. And let's set, for example, this one. So let's say that right here, we can increase its height. For example, our k, We have settings here. So we can see that we have an input field and the calendar. So in this input field, we can adjust the show initial texts like Today's date or some other place holder text as well. And we can set this field is required or a read-only, then we can also change the date format. So we have four different date formats to choose as well. Then hearings at our calendar, we have some other options as well, so we can show past dates as well, or we can just show future dates or both of those. Then here it says that the week starts on Monday and we can change that to Sandy, for example. And all other options are selected here as well. And of course we can modify its design from here. And we also have some different states, like a regular hover, focus and error. Also here we have a design for our calendar. And our calendar also has some different states like a regular n selected, and we can modify those designs as well. So let's preview that to see how will that work on our actual website. So you can see now when we select that, then this calendar will open up. And from here we can just select us some date which we want. Ok, and there we go. All right, so let's delete that for now. Next. After our date pickers, we also can see some upload buttons and even our selection tags as well. So let's add one Upload button here, right? So as you can see, this button contains one icon, this last cycle. And down below there is also one of our texts which says maximum file size is 15 megabytes. So let's open up our settings for these elements so we can see what we can choose here. So there are some supported file types like image, video, document, or audio. We can change that to whatever we want. Also, we can display here a title, for example. Then we can just show this initial text, then a filename, or we can just show the file name only. And this is the place where we can change that I initial texts as well. And of course you can modify this button from this Design tab as well. So that's the same as with other input elements. And finally here we have something that's called a selection tags. So let's just drag and drop that selection tag element here on. Okay, so let's manage those are choices in here. As you already know, we can add them multiple choices or multiple tags and we can delete, duplicate, edit and so on. Then I, when we open up this settings, we're going to see only one settings that says, when submitting as a part of a form requires visitors to select a tag and you can just select this option and we can preview and see how will this actually work with our design, our case, as you can see, we can select one or multiple elements from here. And when we deselect all of them, and this arrow will show alkane. So that's how it actually works. And now you have seen multiple input elements which you can choose from this Editor X. So there are a lot of different kinds of inputs here which you can choose for your website. And each one of those, the element is customizable so you can change its design and there are multiple states as well. And for this video, that'll be all. 17. Menus: Hello there and welcome back. In this video, I'm going to introduce you with menus. So our menu is basically an element which will allow us to navigate between a multiple pages on our website, or even a navigate between the multiple sections in one page. Well, we can find the different kinds of menus inside this air, the button. And then when we open up our menu section down below, okay, so here we have a multiple options to choose from. So we have a horizontal menus, vertical menu, hamburger menus, anchor manuals, and the social barriers as well. So here we can see a different kind of designs for a horizontal menus. And we can also of course, customize them as much as we want. Then down below you can see that we have some verticals, menus as well. Then we have a summer hamburger menus. So this is basically one icon. And when we press that icon, we should open up, for example, this vertical menu or something similar. Then down below we have some anchor manuals, and finally a social barriers as well. So while those social barriers are down below are nothing else but just a simple icons in which you should add the link to your own page, for example, Facebook page or Twitter, YouTube and so on. So now we're going to focus on our menus. So here, when you create one, a default project owner Editor X, you will see that inside this header master, we have a one menu. Okay, Let's open up our layers panel from here on. In here you will see that our Heller master contains this menu and also won a hamburger menu. But this hamburger menu is actually not visible. And we can press this button to make that hamburger menu visible. So as you can see there it is. And the reason why this hamburger menu is invisible, because on our largest breakpoint, we don't actually need to use this hamburger menu. We only need to use this regular horizontal menu because we have a lot of space here to where the different menus on our horizontal menu. And here we also have an option to hide that one of our elements so we can select this option and don't display and this element that will not be displayed on our largest breakpoint. However, if we open up our tablet breakpoint or even a mobile breakpoint, then you will see that here our hamburger menu is actually visible and our horizontal menu is not visible. And by making one of those elements invisible, we can make sure that this hamburger menu is visible only on our smallest or a smaller breakpoint. And this irregular horizontal menu is visible on our largest breakpoint now, okay, So let's get back here to our largest breakpoint, and let's select our menu. So here when we press on our menu, we have one option named the Manage menu, and let's select that. Here you can see that we have only one menu item and that is a home. And here we have option to change the link of this home to rename this menu item. Then we have also Page Settings. And this page settings will basically open up our homepage. And from there we can change some of those settings. Nevertheless, let's just close that pages panel, okay, and heal it again and select our menu and click on Manage manual. So here down below we have a two options. We have a link items and the creator drop-down. So if we press this a Create dropdown, and here we're going to get a new menu item. And here we can rename this menu item to something different, for example, about and press Enter. And here you will see that now we have a new item inside our menu. And also we can add multiple items here as well. And if we press this first button link items, then we can select what link do we want to choose for those menus. And then now let's remove this about menu item. Okay, So now let's select this first button, link items in from here. For example, we can link a different page or a different anchor on our same page. So for example, let me just create here a new section down below k. So now we have a two sections. And I'm going to select this second section and open up our Inspector. And then down below I'm going to add a new anchor. Let's name this anchor section number 2, and let's press Enter. All right, now let's scroll up. Let's select our menu here. Let's click on Manage menu and let's click the suffers the button, the link items. From here we can select the anchor. We can select on which page this anchor actually exist and this is our homepage. Then down below we can select the actual anchor we want to choose, and that is a section tool. So click done, and now our new item and will be automatically generated right here and here we can, for example, type section, tool and click Enter. So now let's say this website and let's preview that as well. So we can actually see our web page will look like now. So as you can see when I press this section to our menu item, then we're willing to automatically scroll down below to our second section. And that's how basically those menu items are actually working. And if we select this home, then it will basically open up our homepage once again, and that's its main purpose. So let's go back to editing our site. So here of course we can click on Manage menu and we can add some new menu item which will have, for example, navigate us to a different page. And we can create here a new item for an About page or a Contact Us page and so on. Or we can just create one or larger landing page and then navigate. Those sections with our manual. Okay, so that's basically how our menu looks like on our largest breakpoint. So now let's open up our middle breakpoint and let's see how will that actually work. So here we have a hamburger menu, okay? And this hamburger menu, here's a one option named the Open Menu. And when we press that, then you'll see that we're going to see here a new menu container, which will contain a vertical menu and the Close Menu button. So this sub-menu container will open up whenever we press our hamburger menu. And now let's just save and preview to see how will that actually look like. So here, as you can see when I press that, then are this new menu, we'll slide from the right side and here we can see all our same menu items, which we already have. So home in Section 2 in here we have a close button. So in order to close this side manual, we can just press this close button or press here on this blank space, and it will automatically slide out on the right side. So this hamburger menu is used on smaller devices, so we can actually save some space on our header. And that way we can open up this side menu only when we need that in from here, of course, we can choose a different kind of sections, pages, and everything else. So let's go back to editing our sight, our case. So when we select this hamburger menu, we can click this Change basic shape option as well. And this will open up a new pop-up window where we can select the different shapes for this closer button, that just one new option which you have. Then here we have our settings and the heel, Let's suppress, open up our menu again. So as you can see, this menu container is also customizable. So here we can basically add whatever we want. And as you can see, this whole menu container is separated into two grids, so one column and two rows. And we can press here, adjust grid and edited grid. And now you'll see that here we have only one column and two rows. So this first row, or a grid cell is reserved for this close button. And this second greed is a reserved for our menu or a vertical menu. Okay, so let's click Done. And let's again open up this menu. So here we can customize this or those elements. Furthermore, for example, we can open up inspectors like this vertical menu. We can increase this width tool, for example, 80 percent. We can do basically everything we need to do to customize those options. Here we also have this Design tab, so we can change the regular NDA selected the colors for those menu items. For example, here we can change the text color of those selected items. So here let's choose, for example, this blue color. Okay? So basically whenever one of those element is selected, it will get this blue or purple color, and you can customize that furthermore, so let's save that and let's preview to see how well that actually look like now, no case. So as you can see, this homepage is now selected because we are currently at our home page. All right, so let's go back to editing our site. Let's open up our menu again. And here you can also add a few more elements. For example, let's say we want to add here a social bar. So let's just drag and drop, for example, this one right here, now k. So now we can dock this social bar down below. We can set the margins on the left and right or 0. And the bottom margin can be, for example, let's say maybe 10 percent. And this is how it will look like. Now when we open up this menu container, we can also change this menu container size. So when we select this menu container, let's open up the inspector layout. In from here, we can change its width to be maybe 50 percent or 50 viewport width. And now our menu container will basically take less space on our tablets, our k. Then here, Let's now open up this smallest break point. And let's open up this hamburger menu once again to see how will that look like they're, so there is, you can see this menu container will basically take the full width of our screen. And that's very nice, responsive design for all our breakpoints. And also you can customize this social bar. So you can select this social bar and click Set social links in here. You can just select one of those items and change its page. So here for Facebook, you can just type your Facebook page or URL and so on. You can also replace the icon and add your own icon, which is amazing. You can even add the new icon here so you can click, Add icon then eyebrows here, different icons or even upload your own icon. For example, for some social medias that are not visible here, for example, you can add here a new tick tock icon and then add this URL to that icon so it's a fully customizable. So that's basically all you need to know about menus and their social bars. So they are very easily customizable. You can customize separately this menu container and the actual menu which will be visible. So it's up to you. Here. You can add more sections and you can even customize those colors of those items you can add here, basically anything you want. So for this video, that will be all. 18. Media & Pro Gallery: Hello there and welcome back. In this video, I'm going to show you how to use media in your editor x project. So while we can access some videos from this Add Elements button, then down below we can open up a media. In here, as you can see, we have different kinds of categories, like upload media, images and video and audio as well. So first, we're going to start with this first category, upload media. And as you can see here, we have a bunch of different options. So the first button here is called the Upload Media. And it will allow us basically to upload our own images, videos, vectors in basically every other resource we have. So let's press this button. And when you press this button, you're going to see a new pop-up here and here on the left side, as you can see, we have a multiple options, so we can upload our own resources from our computer, for example, then from our weeks account from a Google Drive, from a Facebook instagram Dropbox, Google photos, Flickr, Deviant Art, dribble, and even a URL. So here you can just upload the many different file types from your computer. And here we can read more about that to see what extensions are supported here. So down below we can see the media type for images, for background images, for a videos, for transparent videos, for audio, and so on, arcane. So let's close that for now. And now here we're going to see again one, a new window which will allow us basically to upload our own media or to choose some are already existing media from our editor x. So here we have some media from a weeks, and here we can filter by different categories. So here we have images, videos, transparent videos, illustrations, vector art, basic shape, and the social icons. So here we can search for different categories, so we can apply all those resources to our own project. There are different categories here as well for each and every type hero. So while you can use those resources from weeks for free, and then down below, we also have Shutterstock. And I'm not using your Shutterstock that much because I think that their resources are actually paid. And finally here we have Unsplash. So unsplash is one great website where you can find different photos in a high resolutions, all for free. So that's how you can upload the end choose different kinds of media for your editor x projects. So let's close that for now. Let's open up our media panel here again. So you already saw how you can upload the different kinds of resources from many different sources. And now let's scroll down a little bit. So here we have a single images, and those are basically image elements and they are almost the same except this last one which has this circular shape. And let's just drag and drop that right here on our middle section are came. So this is actually an image layer, but as you can see, it has this circular shape. And in order to get this circular shape, you just need to open up the inspector. And from there you need to choose the design tab, then our corners. And from here, as you can see, it has a corner radius of a 100 pixels. But if we remove this corner radius and set its values to 0, then you will see that this image is actually a simple rectangle. Okay, so let's close that for now. So here you can see whenever we select our image layer, we have this button change image, which will allow us to select some different kind of image from our dashboard here. Okay, so let's close that for now. Here we also have some settings for this image, and you will see here a new pop up. So here we have a two buttons. Change, adjust, change will open up that same pop-up window, like we have seen a while ago. Then down below we have some options like when Images clicked, nothing happens or a link opens. So we can even add some links to our image. Then down below we have something that's called the scroll behavior. So here we have three options, non parallax and reveal. So now I'm going to choose a parallax and let me show you how will data actually look like now, okay, and let me just increase the overall height of this image to maybe, let's say in percentage, 50%. Okay, so now let's say that and let's preview to see how this parallax effect will actually look like on our webpage. So as you can see when we scroll down below. Okay, so I don't know if you can see that like I do. So let me just go back to editing the site and let me increase the size of this whole section to maybe 2000 pixels so we can see this effect more clearly. Okay, so let's click Done and let's click Preview. As we scroll down below, you will see that this image is basically moving inside this rectangle, and that's that Parallax effect. Okay, so let's get back here. Let's click on our image, then our settings in here, I want to choose a different scroll behavior reveal. So now let's check how this reveal will actually look like. So let's preview that or kay? Now you will see when we scroll down below, we're going to see a different part of this image inside this rectangle, R, k. So that's kinda reveal effect and it looks very nice and smooth. Okay, So let's get back to editing our site. Let's select our image here. Let's go to settings to see some more settings we have. So here, when we press this adjusts the button. We're going to open up a new pop-up named the photo studio. And this is one amazing application which will allow us to make changes to our current image. So here inside this adjusts the panel. We have many different options like increasing the brightness, contrast, highlights, shadows, color saturations, temperature, exposure, sharpness, grain, and tinnitus and so on. So you can basically add some new colors to your existing image. Then down below, Let's check this filter section. And here we have a different kind of effects which we can apply directly to our image, which is amazing. Then down below we have this cut out a section, and this is amazing tool. So now I'm going to show you how will this actually work. So we need to wait a little bit and now you'll see that the background of this image has been removed and only this person has left inside. So this option will basically automatically removed the blank background. And now we can click this button, refine cutout so we can manually delete or restore some of the parts of this image. So here we have some zoom in and zoom out option so we can zoom into our image right here, that here we have three options, restore arrays and fixed edges. In here, we can increase the size of this brush right here. Now, this Restore will basically restore the parts of this image which we select right here. Okay, So now let's click and hold this Preview Changes button to see how our image will now look like. So as you can see, we can restore this part of this image are okay. Now we can click this arrays to erase some of the parts of this image as well. Okay, so something like that. Perfect. Now we can preview the change as well. So as you can see. Or we can use this third option of fixed edges, which will fix soft edges around the hair. So now we can do something like that. Okay, and there we go. And now we can of course use this restored to restore some of the parts here as well. Okay. So it looks very nice and this is very powerful tool to use on your images now. Okay, so let's click Apply, and there we go. So now we have removed that background and the only left is a person inside our image. Then here also we have some enhance options so we can auto enhance this image or we can use some pre-made effects like a portrait, scenery, or indoors are okay. Then here also we have a crop and resize. So we can resize this image, for example, to show only the phase. So like that. And down below we also have one section add an element in here. We can add the different texts or overlays to our image or even a bare ground. So that's on you, of course now I'm going to click Save, and now our background of this image will be deleted and we are going to see only this person now. Okay, so like that, and of course we can remove this scroll behavior and set that to none. All right, so the next thing here, we also have a shortcut for a cropping this image. And we can just select the part of the image which we want to see, studies a rectangular shape and click apply our case like that here we also have something that's called a focal point. And this focal point will allow you to select the area of the image you want to remain visible when it's resized. So here we can set this a dot, for example, right here. And you will see that it will move that image in cities a rectangle R. Okay, so that's something like that. And that's how you can basically customize your images inside eight or x. So there are plenty of different options, any functionalities which we can use to edit your emerge, It's amazing. So now let me just remove this image and let's go to add elements section. And now let's go to Pro Galleries. So there is something called a Pro Galleries and that is already made components for Editor X, which we can use out of the box. And this component will allow us to basically display different kinds of images, wallpapers, end videos to our users. So let me just first decrease the overall height of this whole section to 500 pixels as before. And let's add here a 10 Pro gallery. Now came. So this is how our product gallery will look like. So here on the center, we're going to have one main element. And down below we are going to have many different images and videos insidiously gallery as well. Also, we are going to have this arrow which will allow us to select different, different item inside this gallery. Or we can just directly select one of those elements from this section down below. So let just a save and preview that on our webpage so we can actually see how that look like. Okay, so as you can see when I hover over, we're going to see this little overlay on top of our video. Here we can click this arrow to select a different item, and so on. We can also select one of those items directly from here. And there is also an option to zoom in or to see this image or item in a fourth screen. So let's clean the ad and this will open up basically a new page where we can check out other items here as well. In each one of those items will have this title and description which are optional in here by default, we also have this one icon which will allow us to see this image or video in a full screen or k. And we can just close that as well. Okay, so as you can see, it looks so very nice. So here also we have 10 video and we can manage that by ourselves. So let's close that and let's go back to editing our side. When we select this gallery here, we're going to see one option named the Manage Media. And when we press that, we're going to see a new pop-up where we can manage our media. So here we can add some more images, videos, and so on from our editor x project, of course, in here when we press that, we can see three options, image, video and text. And a here for example, we can add a different kind of a text and then modify its font size, baldness, and so on. And we can now remove those items from this gallery as well. Then when we select each one of those items here, we're going to see that we can add a title and description for each one of those and even a link, those information that will be visible when we actually select one of those elements from our gallery, our case. So let's click Close button for now. Then on our pro gallery, we also have something called settings. So let's click that. And here we have a bunch of different options to choose from. So here we have a main tab. And when you select that, we're going to open up that window from before. Then let's click on layout. So here we can see many different layouts from our galleries. And here we can chose these thumbnails layout, but you can change, but you can change that layout to something different if you want. So there are many different design presets. Next here we have a settings, and from here, let's see what options do we have. So here it says when clicking on an item, open up and expand mode. Okay, so here we have some other options as well to open up a link to nothing happened and to opening a full screen. So this expanded mode is basically that mode which will show up when we select one of those items in here also, we can customize this expanded mode as well. So now you'll see that this is how our expand mode is locking. So we have this item on the left side and we hear this title and description. We can also remove those items as well to show this item in a full screen or in the full width of this section. And we can just get back those elements and we can show them on the bottom instead or on the side. Then down below we have some more options like allow for screen or we have option to lope images. And it will allow viewers to scroll through images in a continuous loop. Then down below we can select and design settings like a background color of this expand mode or the icon color as well. Then here we can change the text styles as well. We can even use a text alignment to set our text on the left, right, or center. Okay, so let's close that for now. Down below we have something that's called a social settings. So here we have a download social sharing and heart icon, and we can enable all of those options. So this is a download option, will basically show a download option on each and every imager inside our gallery so our users can actually download them. Then this social sharing rule basically put one share icon so users can share those items on their social media. And we also have this heart icon, which will basically show the number of likes if we want our case. So let's close that and let's say that to see how will our page now look like with those options enabled, okay, so as you can see when I hover over, we can see now those three icons. And even when we select one of those items from here, expand mode, we will see those three icons as well. So here we can click, for example, this alike to like this image and so on. We can download, we can share that with other social media as well. So let's get back to editing our site now. Let's select our gallery and let's go to Settings again. Then let's go to Design. Now, in here, we have a bunch of different options so we can customize our pro gallery furthermore, so the first one is the overlay and icons. So here we can apply a gradient to this overlay. So this overlay will be visible only when we hover over this element. And we can even apply a gradient to this, this overlay. So let's say we want to set that to 50 percent, for example, that here we can select different color for this gradient. Then for this second color as well, we can choose maybe this one. We can choose a gradient direction. I can call us on this overlay. We can even increase the size of this navigation arrows and we can change their position as well. So on gallery or outside of the gallery. So like that, then down below we have an overlay effect. So this overlay effect will basically animate this overlay when we hover over one of those items. So here we can then, for example, slide right to animation. And let's open up our page in preview so we can check it out and see how will that look like. Okay, So now when we hover over, you will see that this overlay change the color to this gradient. And also it basically comes from the left side and slides to the right side. And it looks very nice. Okay, so let's go back here. Let's go to Settings again, design. Then down below we have text. So here we can customize our text display so we can add some title and description and add some style to them as well. But I'm going to remove that for now. Then we have a button so we can customize our buttons. We can add some custom button and the change its text diamond, and so on. Then here we have item styles. Then we can add some styles to our items. We can add a corner radius, border hover effect as well, our k. Then here we have a summer slide animation so we can add a slight animation to our items. And here we also hit Expand mode and we can customize that as well. So we have already seen that the window, okay, So this is it. Next we have this advanced settings so we can change the image quality. We can enable image sharpening. We can set some a video settings playback speed. We can look at the videos and show Play button as well. So you can see that our pro gallery is one amazing component which comes out of the box, prepared and ready to use. And we can change the item since it is a gallery, we can add videos, images, and everything that we need. We can also customize a different design or layout design for those galleries. And basically they are fully customizable. So now let's open up our ad elements section and let's open up Media. So next you will see our third dissection videos. So here we can add some single videos. We can upload our own videos on our website, or we can even add them from a YouTube or Vimeo, Facebook and daily motion. So let's delete, for example, this gallery from our section. Now let's add the 10 video, maybe this YouTube. So here we have a change Video Settings. And we can select from which platform we want to import the video, or we can upload our own RK, we can choose the YouTube or we can just and some a URL here. We can also enable some playback options like our auto plays or plays in a loop. And we can add some video description as well. Okay, so let's remove that as well. Let's open up our media. So next we have this video boxes. Then down below we have some transparent videos as well. Or we can of course, create our own and just upload them here. And finally down below we have some mini players. So let's add, for example, this one, r, k. So here we can even expand this player and increase its overall width, for example, 250 percent of this section. And here we have some options to change the track. So we can choose different image for this track. We can choose the audio to upload our own track, or even chooses some external MP3 from a URL. Then down below we can add some track details, playback options and so on. And basically that was all. So now you have seen how to use a different kind of medias in our editor x. So now you have learned how you can upload your own resources, images, videos, and so on. And how you can use a single images Pro Galleries, video players, video box, transparent videos, many players and so on. You also have this option to explore different kinds of medias which I have already shown you. So you can choose different weeks images, week's videos, Shutterstock, images and videos and so on. So it's up to you. And for this video, that'll be all. 19. Decoratives: Hello there and welcome back. In this video, I'm going to show you how to use different kind of decorative as in your project. So when you open up this Add Elements panel down below, you'll see one category called decorated, so you can just select that. And then here we will see different kinds of shapes and vector arts. So here you will find that many and many different kinds of shapes and other vector assets which are you can use in your editor x project. So first, let's start with those basic shapes. Here you can see many different kinds of basic shapes which you can use in your project. And also after each and every category here, you will see this button that says a more basic shapes or for example, more arrows and so on. And when you click that, then a new pop-up will appear. And it will basically open up this media from weeks where you can select a different kind of types like shapes and vectors. In here we can see also I categories like actions, arrows, icons, and typography. In here we can search for a different kind of shapes for our project. So there are many different kinds of shapes. And if you are not a UI designer and you don't know how to design your own vector assets, then are those resources are basically goldmine for you because you can use each one of those shapes to create amazing layout on your webpage. So let's close that for now. Down below, you'll also find some arrows and all those items are actually vectors. So those are vectors will be visible on your webpage without any pixel Asians. And of course, if you are a UI designer and you know how to design your own elements, then you can just import all of those your resources here on your editor x project as well. Down below, we also have something like a horizontal lines or vertical lines. Then also we have some illustrations and we can check other illustrations as well. We also have some icons. We also have some animals in nature. Then we have some logos and badges. Then we have some characters. And all those vector assets are available for you to use them for free in your project. And of course, as I already mentioned, you can use your own vector acid. You can just download some acid from the Internet and you can import them right here without a problem. Also, you can use all of those vector assets. However you want. You just need to use your imagination for that as well. So for example, let's just add here one message box on our middle section or K. So as you can see, this is how it looks like. We can now increase its overall height and width. And now let's me just plays that for example right here. And we can now click Control D to duplicate that vector. We can now bring that, for example, right here. And we can go here to settings or those options. Then we can flip this horizontally and we can make, for example, some kind of a chat on our website. We can change the color of this one. So they're just throws this design and let's select, for example, this gray one. And then now you can select both of those elements and you can center them on your page. And then you can create, for example, some Q&A page by using those shapes. So that's just one example and you can create many different kinds of things using those basic shapes which you already have inside your eight or x. And you can change its design, color, border color, fill color, width, height, and basically anything you want. You can also combine multiple shapes, S21, and create some new shape as well. So all of those shapes are a vector assets, as I already mentioned, and that means that they are not a simple images. So even though you increase the size of those elements to fit the full page, those are shapes will not be pixelated and they will look amazing in every size you choose. So now you have seen what kind of vector assets you'll have available in editor x. And therefore, this video that will be all. 20. Contact & Forms: Hello there and welcome back. In this video, I'm going to show you how to use a different kind of forms in your project. So once you open this Add Elements panel, then down below, you need to select a contact in forum in, from here, as you can see, we have many different categories to choose from. So for example, we have a contact in here. We can find out two different contact forms. And of course, all those forms are highly customizable so you can change their color, their style, and you can even add some new elements in them. Down below, we have some subscribe or forms where we can grab the email address of our user in order to sign up for our newsletter, for example. Then down below we have some sales leads where our clients can get in touch with us. Then down below we can see some are Java applications as well. And finally down below we can see some are Google Maps as well. In first, I'm going to start with those I Google Maps. So here we have a four different styles. So for Google Maps, solid, just add that right here. Okay, And now of course we can expand this Google Map to fit our whole section. So we'll just type here 100% in width and 100% in height of this section or k. So once we select this google map, we can click this button that says Manage locations. And this will open up a one, pop up a window in here. At this point we have only one marker on our map, but we can select, but we can add them multiple markers here, solid, just select this a multiple option in from here we can just click Add Location and we can add them multiple occasions on our map. At this point I'm going to slay just the one in here. For example, we can add some allocation details like address, title, description, and even a link. So we can add here our link to our markers. So whenever a user press or clicks on this marker, we can just open up somehow in your paid for example in something else now case, let's close that for now. Here we also have our settings in here. We can set the default zoom level. So for example, we can set the zoom level of 212, and this is how it will look like, or we can just zoom in a little bit more so that's on you. There is also option here to show map and satellite in those are two options which we can use. So we can show that a satellite image or we can use this nice map style here. We also have a Zoom Controls and there's one controls are available on the bottom right corner. So right here, we can also show this street view. So we can use this street view as well. And here we also have directions selling. And then inside this box, those directions will be visible. And we can also enable or disable the dragging on the map. So this point that everything is enabled. So let's just save that and let's preview our website to see how will that look like. Okay, so there we go. So now we can select this satellite version and this is how it will look like. We can also select this map version as before. We can remove or check this terrain, or we can remove this terrain as well. You can, of course disable. Those are two options and let users only have one style here on Nebula, we have a zoom in and zoom out controls as well. So we can use control and mouse wheel to actually zoom in and zoom out to this map. Okay, So here when we press on this marker, we can see the name of that location. We can also press this directions and then this will open up the actual Google map page where we can search and request directions for that specific location. Okay, so let's close that for now. So let's go back to editing our site. So it's very easy to implement google map to your page. And you can also add some more elements on top of this page and basically modify that however you want. So that's on you are okay. Now I'm going to remove this Google Maps. Let's go to our add elements and let's go to contact in forums. And now what I'm going to do, I'm going to show you how you can implement, for example, one, a contact form in how you can grab those information whenever a user clicks submit button. So for example, I'm going to edit this contact form on our page. So let's say that right here on our case. So there it is. We can even move this, for example, right there. So that's how it looks like for now. So when we select our form, Let's open up our layers panel to see what do we have here. Here we want a custom component name, the weeks forums. And inside we can see many different elements like a text button, and those are input fields as well. We can of course, customize a multiple fields and add the new ones. But now let's select our week's forum. And here we have one option called the Form settings. So let's open that up and here a new pop-up will appear. So the first thing we see here is one option to create a submission table, so we can click that. So here we have a message that the Submission table was created. And to view that submission, we first need to publish our site. So let's publish our site now. Okay, perfect. So now let's click on that form settings and let's click this button View Submissions table. So this will open up our editor x dashboard. And now we have created a table here in our dashboard where we're going to see each and every submission our users send from that exact form. And we're going to get back to that dashboard a little bit later. So let me just close that for now. Down below we have our settings. So here we can name our contact form and we can just leave that as it is for now. Down below we have some or form settings like e-mail notifications. So we can receive an e-mail whenever we get a new submission from this contact form on our website, which is amazing thing in here, we can just edit data settings. At this point, we are going to receive those notifications on our eight or x email account, which in my case is this one. And of course, you can add some other emails here as well. Then down below we have Submission table in here. We can just check it Submission table, which we have already seen, so we don't need to go there again. Then here we have a form submission or limit as well. So we can limit the number of submissions from that form as well. In here, we can type the number of total submissions we want to receive, and also we can eliminate by a specific date and time. So for example, here we can select the last day to submit this information from this contact form. You can select the time and you can select the last hour to submit as well. And you can even add here a custom message that will replace the form after that to limit has been reached. So for example, here you can customize this message and say you are something else or you can just leave that as it is. So these four no longer accept submissions, for example, now k, So let's get back here. And we also have this option subscriber double opt-in, and that this option will basically allow your users to check this option. So if we enable this subscriber double opt-in option, then on this contact form, a new checkbox that will be shown where users can decide if they want to join our mailing list. And to do that first we need to add a subscriber checkbox. Okay, so here in this basic fields category we have down below subscription and we can add this subscriber opt in a box or in our form. So let's click this Add button. And now as you can see, I knew checkbox here appeared in here we can see a text that says, I want to subscribe to the newsletter now. Okay, so let's go back. Let's open up Form settings again, and let's go here as well. So now we can enable this option. So now if a user wants to subscribe to our newsletter and then the user will need to verify it's email address as well. Okay, So now I don't need that, it is points, so I'm going to disable this option, okay? And there also I can remove this field from here, so just click Delete button or K as well. Now let's open up our submit a message panel here. So here we have a multiple options. So when visitors submit a form, we can show a success message, or we can go to site page or a light box, or we can open up a link to external URL, or we can show a link to File Download as well, but this option is available only for an upgraded users. Now we can just show a simple success message which will say, thanks for submitting. In here we can specify how long should this message show after submission, we can set time or we can just choose always our default value here is three seconds, so we can leave that as it is. Next, let's check those conditions. So here we can add some conditions to our form and that makes sure to hide or show a certain fields only if a certain conditions are satisfied. So let's click this button, add a new role. And here we have something that's similar to a programming. So if block, so here we have our if block, then we have our den Blog. And if, for example, let's choose firstName. So if a first name field is filled, then we can, for example, let's say hide the last name. So this field is hidden, or we can say optional, required, or shown. So whenever we feel the firstName, we're going to hide the lastName and we can say this role now, okay? Next we have a contexts. So our contexts are available in our editor x a dashboard in our project. And whenever a user submits this form, we can save that the user to our contacts in our dashboard. And those are contexts from our dashboard are very useful, especially when we have some email campaigns and we need to have a many users email addresses. Also here we can check what fields do we want to save in our contexts. So you can see which one of those fields will be saved. Okay? Then down below we have some eye contact labels. We can leave that as it is. Then down below we have something called the automations. So here you can see that we can send a thank you e-mail, for example, whenever someone submits this form. And we can also create a new task. And I'm going to talk about the tasks a little bit later. And the down below we have an e-mail marketing as well. I'm going to skip that for now. So here we can click this option that says view your automations. And this will open up our dashboard for our project. Okay, So this is our test project, and here we can create a new automations for our forms. We have some predefined automations like Like a thank you email. And we can create our own automation as well. So from here we can choose the week's forum because that's where our contact form that comes from. So here we can target which form or do we want, then we can select any form. We can select the action here. So whenever someone submits the form, we can send an email to contexts. We can get notified by email. We can create a task and other options as well. So for example, I can click this, send email to contexts. And down below we can customize our e-mail template as well. We can set the from name and the replica to email as well. There is option for us to actually edit this e-mail template which we're going to send automatically whenever someone submits the forum. Okay, so to edit this email first add your ascenders detail so people know who you are and where they can reply to. So let's edit it. So from name can be, for example, my name in here, email can be this one. So let's save that are okay, and now let's edit this template, okay, So there are different options which we can use here to edit this email template. And I'm going to leave this to you so you can experiment. I'm going to leave that as it is for now. You can of course, set your own logo and your own social links here as well. So let's just say that and publish our case. So after that, you can also schedule here a timing. So choose a time to send this section. We can send immediately or after a certain period of time. I'm going to leave that to immediately. So whenever a user submits the form, and now I'm going to click this accurate button to activate that and I can rename this to thank you, e-mail automation. So click Save, and now it will create that automation for you. Okay, so create Covey automations. And now we have created this automation for our contact forms, our case. So now I'm going to go back to our main manual, to our dashboard. So when you open up a dashboard for your project, now you need to click this customer management in. From here we have different options like an inbox contact list, form submissions, automations, and so on. Now I'm going to open up this contact list. And I have already mentioned that this contact list. So when the user submits a contact form, that user will be automatically added to our contact list here immediately. And here as you can see, we have some a dummy users. We can delete them as well if we want. So let's just delete those users are okay. And whenever user tries to contact you, he will be added here in your contact list. And from there you can select as many users as you want. And you can, for example, create an invoice or send an email campaign as well. Now here we also have any books where we're going to see all the messages from our submission forums. And then now we note that further ado, let me show you how this contact form will actually work. From here, of course, we can add new fields if we need, and there are many different fields which we can use. We can also add, for example, a recapture to verify our users. We can see and experiment with some other basic fields like those. We can have also some advanced fields like a file upload field. But this field requires you to abrogate your account. And we have down below anti-spam, which is recapture. I had already mentioned that. And the down below we can modify our thanks for submitting message. So for example, we can center this text and we can change its color to maybe something like a green are k. And we can even increase its font size to maybe 24. And we can set that to a board, of course, are. Okay. So you can customize this form as much as you want. So that's on you. And now let me just say this project and let's try and use this iconic form. So let's click publish it. Now I'm going to view this site in a new tab, and now let's try and enter some details here. So when I type my name, as you can see down below, OS named field that will be hidden because we have specified a condition which will mean that whenever this first field is a field, This last name field that will be hidden down below. I'm going to type some random email, for example, Johnny at Gmail here we can add some a number. This is just an example, of course, in the message here as well. So we can type Hello there. And now let's click Submit button. So this is our thanks for submitting message. It will disappear after three seconds, and now let's check our dashboard. So here inside our dashboard, we have immediately received a new message in our inbox with those exact information. Also here we have forms, submissions, and if you recall, we have already created one and submission table name their contact. And we can open this table now to see what do we have here. Let's click View submission table and that There we go. So now we can see all those information from our contact form, as well as the submission date and time. And of course, we can export all those information to our file and save on our computer. So it's a very convenient function. And whenever you receive a new message from the contact forum, you as an admin, will receive an e-mail address that someone has submitted your forearm in here you also see the exact details from that the contact form. And of course, if this was the e-mail address of the user who have said that contact form, then we would receive that thank you e-mail as well. So basically that's how you can Use your contact forms. They are very easy to use. You can customize them as much as you want. Also, there are more things so you need to check out here in your dashboard, incidents, customer management. So you'll have those forms submissions. We have a contact list, the inbox automations. We have also those tasks and the reminders. And I have already mentioned those are tasks and we can create a new task whenever someone has submits a new contact form as well. So be sure to go to this dashboard and check out all of those options from here. Now you have learned how to use those contact forms and the Google map as well. And therefore, this video, that will be all. 21. Masters: Hello there and welcome back. In this video, I'm going to introduce you with masters. So you have already encountered the anestrus in some of the first videos of these squares and masters are easily recognizable by their green outline and color, which you have already seen on our header and footer, the Masters. So make it easy for you to share the same content and maintain consistent design across a multiple pages without having to copy and paste. So while these are sections that show on multiple pages, such as the headers for tourists and sidebars. So while you can create multiple masters of the same type to show on a different pages. So for example, you can design a several menus as master headers and choose where to display them. Also, any changes you make to a master are applied everywhere it appears across your site. So before we continue exploring a masters, so let me first create a new page. Let's open up our pages panel. And here I'm going to create a new page. So the name of this page I can be, for example, about our case. So let's name that and press Enter. So while we can access those pages from our pages panel here, or we can just select those pages from this shortcut as well. Okay. So as you can see, both the home and the about page have the same content. So here we have this header, then this middle section and the footer. So now let's try and open up our homepage are okay in here. Let's select our header. And then when we select one of those masters, we have then add those colors from top here, I will change to green. And that means that currently we are editing our master. So now let's say we want to add some new element to our header. And let me just choose, for example, this simple title are calleds place it here on the center. Let's also centered at text here, and let's rename that to, for example, our website. So now our header contains this new texts. So on our homepage, we have changed that master or shudder. And now if we open up our about page, you will see that these texts also appeared here as well. And that's the main advantage of using masters so well, when you make some changes to your master component, then are those changes will be applied immediately to all pages or places where you have that same master. And that's the main difference between a master's and design assets. So if you recall, we have already covered this design assets in some of the previous videos. And also we have created here a new acid, which is basically one container. But also we can create the assets out of the whole sections. And as you can see here, we have our design asset name, the title section. And for example, let's open up our homepage and let's add here this design asset. Okay, so let's say that for example, right here below our middle section, now k. And also let's open up our about page. And here let's add that same asset as well. Okay, so let's add that right here. Okay, so let's go back here on homepage and scroll down below. So inside this design asset, we're going to add one more component. So let's say here for example, one button inside this stack, okay, so like that. And now when we open up our about page, you will see that the inset, our about page. We don't have that button. So the changes we make to one acid in one place will not apply on other places where we have implemented that same design asset. And that's the main difference between a design assets and their Masters. With Masters, whenever we add some change, then Adele change will be applied to all pages where we have that master implemented. And you already saw that behavior with our About and homepage with this title which we have added our game. So now let's remove this design acid from our about page and from our homepage as well. We don't need that at this point, okay, and we can access our masters from this button. Okay, So this will open up this site masters panel. And there you can find also a definition of masters. So masters are sections that can show on a multiple pages and the changes you make to one apply everywhere it's in use on this site. So at this point we have a two masters, header and footer here also we have some options for those masters. So we have this show on option. And when we select that, we can check her all pages on which we want to display that the same master. In this case, both the header and footer are displayed the owner, both of those are pages home and about here we also have an option to duplicate that same header and modify that other. Or if we want our k here, we also have an edit options. So when we click that, then we're going to basically select our master from this page. And then we can just edit our master and that those changes will be applied. On each page. We have this the same header. So we're now, let's try and create our own master. So for example, I'm going to change the background color of this whole section so we can just see the difference. Okay, and now I'm going to make this whole section a master. So the only thing you need to do, you need to select that her whole sanction than a more actions. And down below you will see a new option that says Set as master. And here we have three options. The first one and the last one are not actually visible, so they are grayed out and that they are not available because our section is and not at the top of our layout here. And our section is also not at the bottom of this whole page. But let's say we want to move this section or down. And now this section is at the bottom of our page. So now when we click More Actions and setters masters, then now this second option will appear on, okay, and now we can save this as a footer, but I'm going to just move that middle as before now. Okay, So right here and now let's click More Actions, then a set as a master. And now let's select a section. Okay, so now you can see that this component became green and that means that we have created a new master. So let's open up our masters panel, and there it is. So now we have this section as a master. And of course we can select this option to click a show on. And it is point. We have this section only in our homepage, but we can add that same section on our about page. So let's check that option R, k, and now let's check our about page as well. Okay, Perfect. So of course, you don't need to place this master in this same place, like we have in our home page. We can move that down or wherever we want. Cocktail. And as you can see now we can move to our homepage. And on our homepage, this section I will be on the middle and on our about page, this section I will be down below. Okay. And that's how you can make your section our master. So masters are a very useful when you have the same information to display in a multiple pages. And you can easily detach this whole section from the masters. So you just need to select that whole section then a more actions in here you'll hear an option name that detached from masters. And when you click that, then at this component or this whole section will not be Nestor anymore. And when we open up our homepage, then here you will see that to this section, I will be a master because we can't detach the only that one section from our about page octet. So as you can see, it works like that and that there is also one more interesting thing which I want to show you. So let's open up, for example, this About page. And now I'm going to select this whole section or a header. And now I'm going to open up the inspector than at this layout tab. And here in this scroll effect, I'm going to select the Sticky option. So now let's save that and let's preview. But before that, let me just select this manual. And here we can also manage our menu and we can add a new item where we can link our page, for example, About page. Oh, okay. All right, so let's save that and let's preview. So this is our about page, and now we have a toolings to our homepage into our about page, our case, so that link is working perfectly fine. And now when we scroll down below, you will see that our header will not move because we have made that header master as Tiki, and it will always be in that same spot. So whenever we scroll down below, we will be able to manage or select one of those options from our Header Menu. And that's one a really useful thing as well. Okay, so let's go back to editing our site. And if we select that section and select None, then at that effect that will not be applied. So let's preview that once more. Our cases, you can see now when we scroll down below, this header will disappear. But you can also make that header stay fixed on that position. So you can always see that Heather on top of your page. And that's basically all you need to know about masters. They are a very useful components which you can reuse or no multiple pages and be sure to use them. So that'll be all for this video. 22. Theme Manager: Hello there and welcome back. In this video, I'm going to introduce you with the theme manager. And theme manager allows you to manage the typography and colors themes of your website in one place. So this is a great way to save time and ensure that your design is consistent. Now, in some of the previous videos of this course, I have already shown you how to modify your, your typography using this theme manager. But nevertheless, here it is. Once again, so well, when you open up this theme manager penalty from the top, you will see here a two options. And the first one is topography. So here you can see that there are many different styles which we can change for our project. So we have a heading 1, 2, 3, 4, 5, and 6. And also we have our three different kinds of paragraphs. So while we can change each one of those items just by clicking on death, and then we can change the boldness, the font size, the actual font, and everything we need. So let's say we want to change this first heading and we want to increase its boldness and maybe even a font size, for example, to 1906. And we can just apply that to our theme. And the next, whenever we open up our ad elements page and text, we will see that this title will actually change. So this is the same topography which we have inside our theme manager and the below our typography, we also have our colors. So here you can see all the colors which we have for this project. And the one we select one of those elements from our web page and open up our inspector. Here, you will see all those same colors which we have in our, in our Earth. The manager, of course here we can add some owner custom colors as well. But still, this is the place where you add your website colors. And here you can change each one of those colors, or you can just change the haller color range. So for example, let's select this one. And now I can select one color. And then you'll see that all other colors here will change as well. And we can apply or cancel death, our case. So here we have our background and text and we have are some action colors in here. We also have some more colors which we can change. And here we have something that's called the design libraries. So when we press that, we're going to see here that we have our default untitled library, which has a default library for our project, which will have a created. Then down below we have some option to say the color is too our library. And there we have option to manage our design libraries as well. And here when we open this design libraries, you will see that we have one default untitled library in here. We can just open this design library. And then you will see that this design library contains a typography, colors, InDesign assets, and we can change the name of this library or we can get back to our design libraries in here we can create a new design library. We know typography, colors, and design assets. So that's another option. I'm going to cancel that right now. Came and basically that's all you need to know about this theme manager. So here you can customize and manager your typography and colors. And if you're wondering, where can you find that some more in colors for your website, then I can recommend you to websites. But still there are many different websites where you can find great color combinations for your project. Those are just two examples. So the first website is called the material dot io. And here we can see some material, our colors from this cemetery pellets. We can select one of those colors. And then down below we can see that schema of those three colors, which we can use, and you can select each one of those colors here. And this application will generate two more colors as well. Or you can adhere your own custom color and then it will generate other colors as well. So that's how it works. And the next website I want to show you is called Color hand. In here you have some different categories like a new trendy popular in the random. In here you have a beautiful color palettes which you can apply to your own website. So be sure to check that of course. Now k Also there are many different other websites where you can find great combinations of colors for your project. Those are just some example websites which I'm using in this moment. And basically, that's all you need to know about this theme manager, Sowell, for this video, that'll be all. 23. App Market: Hello there and welcome back. In this video, I'm going to introduce you with application market or at market. And the app market is filled with over 300 popular web applications, power for services and amazing features to enhance your website and they grow your business. Most of the applications are free to use. They are a mobile optimized and they can be added to your site in just a few clicks, whether you choose NFPA created by weeks or, or one of the many third-party applications. They can help take your website to the next level. And after you add the applications to your website, you can manage your apps by accessing this replication and manager tab. So down below now k, So here you will see all the applications you'll have installed on this same project. And in this market you can browse the different tech categories of applications which you want. And also you can search here a specific app you need. Now, in this application market is I already mentioned there are replication so which you can use for free. There are also applications which are paid and some applications can offer you some extra features for a certain price even though they are free to use. So I highly suggest you to go to the supermarket and they're just Explorer different applications so you can use, I'm definitely sure data you'll be amazed at what kind of applications you can find here nevertheless. And now I'm going to show you one or two applications and early do the rest. So here in this application market, there are also categories which we can select from this panel right here. So you have a marketing sell online services and events, and media and content design elements, communication. Also here you have some to explore like the newest applications, popular applications this month and also weeks or business solutions. So when we select this week's business solution, we're going to find there are many different applications like Wix stores, which will allow us to create online store for our website. Then here we have our booking, then events and blog weeks, a restaurant orders, forums, chat, hotels, music where you can stream and sell your audio, groups, members, Syria and so on. So why in some of the next videos of the squares, I'm going to show you how to add the news blogs or online stores on your website and some other interesting features as well. And now for example, let's open up this week's chat application to see what kind of a function we're going to get with this application. So let's scroll down below to see some more details. And the most important thing that this application is free to use in here we can see that it says that we can get notified every time you hear a visit on your side, the receiver message or make a sale, we can now automatically greed their visitors when they enter our website and their reply today, our first chat and so on. So now let's add this application to our website, and we can do that with just one click. Let's click here, add to side. Now again, let's just wait a little bit. So this app can be added to our website, our case. So here it is, and now at the bottom right corner of our webpage, we can see one and your component. So let's open up our layers panel. And here you can see that now we have a chat. So now let's select that chat and let's select the first option, open inbox. And this will open up our dashboard. And inside this inbox, we will be able to see all our messages which we receive from this live chat. And then now you can also see that our chat here is actually a master. And that means that we can use our chat in a multiple pages very easily. Also, we select our CED. We have these settings option, so let's press that. And here we can see some options with which we can customize our chair. So here we have some quick actions like opening weeks inbox or scheduling online chat hours. And also we can get this week's mobile application, which will allow us to answer to those messages from our visitors using our mobile device on the go. So far in this week's in books, we can view and reply to all our messages in one place so we can open that up. And it will open up this dashboard, our case. So I have already shown you that down below we have the option to schedule an online chat hours, but that is functionality requires you to upgrade your account. Then here you also have option to edit how you appear to your visitors. So you have this nor sender identity option. Then you have this team profiles. You can show each centers image, a name for a personalized experience. And also you have this professional outlook where you can display your business name and logo. And this option again requires you to upgrade your account. Then here we have some e-mail options. Here we can connect our Gmail to send their messages from our weeks e-books. So using your own e-mail address. And then down below we can customize some more options again, also here we have a profile and team. Here we can create our profile, we can upload our own image and change the name or additive and a signature. Then we have here are some automations as well. We can start a chat when a member or login to your website immediately, we can reply to chat messages sent by site visitors, and we can agree new visitors with a chat message as well. There are also some other automations which you can check out our case. So here we have some channels, so we can view in reply messages from a multiple channels in one place. So here we have a week's chat installed. We can even connect our Facebook page and add some forms as well. In here we can download this Wix mobile application. We can chat with our visitors on the go, also hear e-mail notifications are enabled, so we will get notification whenever a visitor or a sends us a message with our live chat. And we can also turn on this desktop notification as well. So there are many different options which we can customize the behavior of this week's chat. So here when we open up this settings, we can see the separate chat forum. And there we can even request some are more information from our visitors using this chat. So we can request name, a message, a phone number, and down below we can show some information or when we are online or offline. So we can show this form when an online here we have some online options as well. Like we can set a default, the intro text message, and a thank you message as well. Okay, here we have our SEM display so we can show where to display this chat on the bottom left or a bottom right corner down below, we can also customize some behavior for a new messages as well. Then here we have some designs so we can update our business logo, then we can customize our chat, then a bag around and messages, then a Hello Design and border style in basically everything else here we can customize the text as well. The response time can be here a set too, as soon as possible, within a few minutes, hours, or a day. So there are many different options which you can customize with this week's chat application and it can be very useful. So let's just preview and see how these are checks that will appear on our red page. So it will be located here on the bottom right corner. And you only press that we should see this pop-up where we can adjust send message to our webpage. And here we can of course, modify those information. And overall it looks very nice. So that was just a one application from our app market. There are also many different applications which you can check out and you uninstalled this jet application by clicking this three dots button and then uninstalled chaired. And it will just remove that chat from our webpage, arcane. So there are many different applications which we can install here and be sure to check this at market and search for different applications. And as I already mentioned that the beginning of this video, in some of the future videos of the squares, I'm going to show you also how to add weeks, stores, blog, and a few more professional and business applications to your web page as well. So well for this video, and that'll be all. 24. Roles, Permissions and Comments: Hello there and welcome back. In this video, I'm going to briefly introduce you with roles and permissions in editor x. So that's not something that's much interesting for you if you're the only person working on a website. However, if there is a little bit more serious and complex project on which you are working as a part of the team. Then at this topic about the roles and permissions will definitely be something to look for. Now, roles and permissions make it easy for you to invite other people to help you work on your website and they're run your business. You can assign a different roles to different people. Depending on their role, they will receive different permissions which you can manage and the editor at anytime. So while when you invite someone to work on your site, that they receive an invitation via e-mail. And if they already have an account, they can simply login and accept that invitation. And if they don't, they can create a free weeks account and get started. So we're the people you invite to your website should always receive a site permissions that are relevant to their role. You can define their permissions by giving them a predefined role, or you can create a custom role to fit exactly your needs. We're now I'm going to open up a dashboard and show you a list of predefined roles which you can find on editor x. So we're hear you can, you can find all your projects and let's select our test product from here to open up a dashboard for that same project. And then after that we need to go to settings. And the after that insert is a general panel. We're going to find their roles and permissions, so well, let's select that. And here you can see that it is point that we have only one user in that is me. So I am the owner of this website and that's my exact role here. So onerous can manage indexes, all aspects of science, including your billing and domains, plus the invite other people and set their permissions. We can of course, that transfer ownership to some a different person or I count. And here on the top we have our two buttons, Manage Roles and invite people. So from here we can just invite other people to join our website here, and that they can easily accept this invitation today or e-mail address. And now let's select this Manage Roles button. So here we're going to see many different roles under different kind of categories. So here we have a general roles. We have our billing roles and the payment roles as well. Also, there are some categories which will appear here once we install some applications on our website. So well, for example, if we install a blog on our website, and then here we're going to get one new category where we can manage roles for our blog, like a blog writer and so on. So you will see about that in some of the next videos of this course when we actually start implementing a blog to our website. So the highest role here is owner, which we have seen earlier. And the site owner is the person who created this website or received the a site ownership. If the site was transferred as a site owner, you can manage your all aspects of your website, including a inviting people and they're managing their permissions. Then we have admin or a co-owner. And the admin can manage most of your site settings and operates very similar to the site owner with some limitations. Then here we have a website manager and they usually give a website manager permission to someone who helps you manage all aspects of your business. And this may be a business partner or an employee. So our website manager can edit your website and their view information in your dashboard. Then down below we have a website designers. So usually give this role to someone who is helping you to create or a redesign your website. And this role are lets the person who invited to edit your website, but the limits what they can access in your website's Dashboard to prevent them are viewing sensitive and their business information. Next queue, we have a back office manager and they usually give this permission to someone who is helping you manage your business, but it does not need to edit your website. So people with this role will be able to view and the manager sensitive and business information. A down below we have our billing manager. So why you should give a building manager role to someone who helps you manage and organize their financial side of your business. Then here we have a domain, a manager, and a domain manager can connect in their manager domains, but I cannot make purchases. They also cannot edit, delete, or duplicate your website. And finally, here we have our payments manager. And a payments manager has a limited access to your website dashboard and the full access to your website payments and the account info. They cannot edit, delete, or duplicate your website either. So while you can check each one of those roles and by yourself, you can just click here to view our case, let's select our website manager, for example. Here we can see the role of title and the role description as well. Down below we can see all the permissions which these are all actually have. So we can check each one of those permissions are K. But there is one important thing here to note, so you cannot edit the doors, the existing predefined roles. You can only duplicate them and then added them. Okay, so now let's go back here. And for example, here we have some options as well. So we can invite other people in this role, or we can duplicate this role and edit data duplicate so we can click this button, Duplicate end at it. In from here we can just name this something else. For example, copy of a website manager. And from here you will be able to basically editor some of those permissions. So that's how you can create your own custom roles. Okay, so I'm going to go Cancel now. And those permissions and roles are very important if you are working with a bigger team or building your website. Also from our editor x say interface, you might notice that we have these comments section or comments panel here on the top right corner. And if we open that up, we can just comment out this design and something is wrong with the design and basically anything related to that, the website. So we can comment every page from here. We can use even this Eta symbol to tag other people so they can receive a notification when we comment or something. A