Text Elements in MakeStories

Introduction

Hello guys And welcome to lesson Eight of the MakeStories 101 course. In the last lesson, we saw how you can use the pre-made public templates from MakeStories and how you can create your own template sets using MakeStories.

Now, the next thing that we all want to do is add the texts to the stories. We have seen how to set the image as a background.

So now let's do one thing. Let's start to create a story about San Francisco. We would just search for San Francisco and this way we will also get a revision, a small revision of the things that we did till now.

So we’re going to set the image over here as a background of the golden gate bridge. We will double-tap it and keep it this way.

Since San Francisco is all about the orange color, we will try to use it to the maximum. Now, we have the image added as a background.

The next thing that we will do is we would animate this image by doing a small zoom-in animation for 10 seconds. We will just play it again so we can see that the image is zooming.

How to add text elements in web stories using MakeStories

If you want to add the text element to your story, what you will do is you will go to the third tab in the left panel of the editor, which is called the text. It has the T written over there and it's pretty much visual, and you can understand it.

Now over here, you will get six options for the header tags and then one option for the paragraph tag, and then one option for span tag. This is basically an H1, H2, H3, H4, H5, H6, the P tag, and the span tag in HTML.

We are going to use the H2 tag and here, we will write things to do in San Francisco. We will just change the color.

You don't have to worry about this right now because we will do a separate lesson on how to do all the formatting when you use MakeStories. We will just center align the text.

And now Again, we have, now you can see that the text is not that visible. So we will have an overlay. Here what we will do is try to use the orange color that San Francisco has.

Here You can see that there are a few colors. These colors are extractor from the image that you have on your canvas.

Find the same orange color that is on the Goldengate bridge.

We will click on this endpoint, which has the black color, and we will select the same orange color that Goldengate Bridge has.

Now you can see that we have a beautiful orange overlay over here on the bottom of the story canvas. Since we are using the text a little bit higher, we will try to increase the range of this scrim.

You can now see that we have this scrim all the way, going up to the middle of the slider or up to the 40% of this slide from the bottom.

How to add Span tag or Paragraph in the web stories

Now we have added the first text, on top of that, we will add a paragraph text here, and here we will type San Francisco is a beautiful city in the USA's west coast. Again, we will center align this and change the color to white.

You can increase the width with this, and then you can center align these things. To center align, you will click this and you will use the center. We will get into the details in future lessons.

Let's add another supporting span tag over here at the bottom that says the story by Pratik Ghela and we will change the color to white again we will center align this.

Now you can see that we have increased the font size a little bit and make this more visual.

Now you can see that we have this thing done. If you have your own logo, you can edit it at the top left. I will try to pull in the MakeStories logo.

You can add a logo at the top. You can also add an overlay on the top of the canvas. Copy the color from the bottom of the canvas and paste it over here on the overlay point. Then try to balance the opacity and intensity of the top and bottom overlay to get the perfect match.

We have added a header tag, a paragraph tag, and a supporting (span) tag. Now, what, if you want to see the preview, you can just click on save changes, and you can review this over here so you can see the image is zooming in.

You can change the dimension of the canvas to see the real-time story. You will find the dimension tab In the bottom of the right panel.

Font Combinations offered by MakeStories editor

The second thing that you have when you go into the text tab is called font combinations. We have tried to create a few font combinations for you. Maybe you can use them if you don't want to do all the formatting by ourselves.

You can select a choice of your font combinations and start editing to build the story. You can change the font size, font-weight, and text also.

If you don't want to have the formatting applied and you want to keep this formatting, as it is, you will do command shift V.

The formatting of the new text will remain the same as the old text. You can also change the color of your text. So this way you can add the element, text elements from the left panel.

What is a Shortcut to add Text from the tooltip?

There is also a shortcut to add text from the tooltip. So when You do this, you will add a heading tag. If you click it again, it will add a paragraph tag. If you add it again, it will add the paragraph tag.

This is pre-defined over here that the first time it will add a heading to the tag and the next time you click it will add a paragraph tag.

With this, we are done with how to add the text elements to your story.

Please see we are not done with the text formatting. We will dive deep into text formatting. What we’re trying to do in the initial lessons is we’re trying to cover up all the options that we see in the left bar.

We are done with the background, their templates, and the text elements. We will revisit this entire right panel. Don't be worried about it right now, we will get it to it in detail In future lessons.

In the next lesson, we will see more about Layers