Understanding Layers

Introduction

Hello guys and welcome to lesson Number nine of the MakeStories 101 course. In the last lesson, we saw how you can add the text element and how you can use the font combinations.

If you want to use the combinations and you really don't want to spend time researching on the font and all those things then MakeStories is here to help you out with it.

Now in the next lesson, we will move to the fourth element on our left side, which is called layers.

What are the Layers? How can you use layers in the MakeStories editor?

So If you are a designer and you have used something like Photoshop or Adobe XD, you already are familiar with the concept of layers.

Layers and MakeStories are something like they look something like different portions of the story and they change for every slide. Basically like a hierarchy of the layers from top to bottom in the web story.

Let's say we have this image. You can see this image is at the top and this text is now behind the image. In this case, if you want this text to be above this image, you will have to track this image all the way to the bottom. When you do that, you can see that this image is now behind this text.

The layers are basically used to define the order of your elements on the canvas.

In the Layers part, we can see that we have this paragraph tag, heading tag, and then there is a group and then we have the image.

If you remember Photoshop or Adobe XD, you know that you can group your elements.

Now, remember whenever you will use a font combination offered by MakeStories, this font combination will be added on your canvas or your stories slide as a group element.

you can go in, you can rename this group. These are the layers and in front of the layer, it will show you what kind of element it is. If it is a paragraph tag like this, it will be written P.

If it is a heading tool, it will be written H2. Same way, this is an H4 tag and these are the SVG elements.

Like we said above, each individual part of the canvas is highly framed in layers with specific categories. Though categories help to understand each element of the web story.

You can rename the element. But, remember one thing that you cannot rename the text elements. The moment you change the content of the text, the same thing will come over here in the layers.

How can you create your own Layer groups?

Now you have seen that when you add the font combination, they come up as a group. But your next question will be how you can create your own layer groups.

To do that, let's create a new slide, and let’s add two or three different elements on the canvas. Here we have H1, H2, H3, H4, H5, and paragraph tags.

Now, what we will do is, we create a group for heading one and heading two.

To do that, we will drag-drop the H1 and H2 and select them together. Another way to do this is first we will select the heading one element and press the shift key, and we will select the heading two-element.

You can see that both are selected together and you can move them around.

And then You will see an option over here at the top right side of the story canvas that says group element. We will click on group elements and you can see that a group has been created.

So this way you can create a group.

Again, if you want to rename those groups, you have to go in Layers, you have to double click the group, and then you can rename it.

How to make a group of groups in MakeStories editor?

Yes, you can make a group of groups using layers in MakeStories. To do so, you have to select two groups and Press command plus G and it will create a group or groups.

So here we have one group at the top. Now, if you want to get inside a group, you will double-click the group or the element that you want to get into.

Let’s say we have the H3 plus H5, so we will double-click this. You can see that we’re now in the H3 plus H5 group.

Now, if I want to edit the heading five elements, I would just double-click the heading five. This element is not active and we can start editing the grouping.

So this way you can create groups of the group, groups of elements, of whatever you want. With that, we are done with the layers tab and that's it.