10 min

What is new in Ampstor | Nov 2020

In the past few months Ampstor got a significant number of upgrades. Given that the Flutter Web becomes more stable, we are able to bring new updates much faster. Thank you Flutter team and community! Those of you who follow us on Twitter, may have seen some of the updates. In this blog post we are going to outline the major changes and features that are available for use. 

Access to your own templates

Now, within the builder you are able to access some of your previous templates that you've built for previous web stories. You can access them by navigating to the "Templates" tab, and playing with the top toggle as shown in the gif bellow.


Branding Colors

If you navigate to the tab "Branding" in the navigation tab on the left you are able to select Global colors that you can use within the story. We've implemented a color picker that lets you do that easily. You'll also be able to write down the color with RGB or HEX values. Then, you'll be able to reuse the same colors from the right action pane under the "Style" component. You are able to change text color and background, border color and background, using these global colors. In the preview bellow we show you how you can set global colors, and reuse them for your text.

Web Story Layers

For better navigation within the elements in your pages within a Web Story, we've implemented the "Layers" tab on the left navigation tab. Within that component you'll be able to look through your pages, and elements within those pages. Within  different layers in every page we've implemented couple of controls that you can use.

Pages

Within every Page element you have the following options:

  1. Move to Right or Left - this will move the position of the page in the Web Story
  2. Add Layer - this will open a preview where you can add different Layers (Background, Top Element, Bottom Element, or Freestyle layers)
  3. Duplicate
  4. Delete

Layers

Layers can be Background, Top Element, Freestyle, Bottom layer. For every Layer element you have the following options:

  1. Move Up or Down - This will move the layer before or after another layer within a page
  2. Add Element - This option will show a popup asking what type of element do you want to add (Image, Video, Text)
  3. Delete

Elements

Elements can be Images, Videos and Text. For every Element you have the following options:

  1. Move Up or Down - This will move the element within the layer
  2. Duplicate
  3. Delete

Updated Meta tags for SEO

In the newest upgrade we've added the SEO tags on two places. One is on the left navigation bar under "SEO", and the other placement is after you click the "Publish" button. These SEO tags enable you to add a Title, Description and a Photo. When you share your Web Story on social media, apps or whenever there is the Web preview, these are the elements that will be displayed. If you don't fill these out chance is that the Web Story will pick up the "Template" fields and show you those instead. These are also important for your SEO, as Google crawlers will try to find your story based on the keywords you'll use there.

Alt Text for Images/Videos

For every image or video that you upload on Ampstor, you'll have the ability to add "Alt Text". With "Alt text" you should describe the image. For example on the photo above, we can use "black-shoes-on-a-white-background" This is an important piece of your Web Story content because of the following reasons:

  1. This text helps screen-reading tools describe images to visually impaired readers; and
  2. Allows search engines to better crawl and rank your website.

AutoPlay feature

As you know Web Story pages are tappable left and right, and to navigate you tap ones on one of the sides of the page. However, sometimes we want to make this experience for the user even better. Some of our pages may have videos in a certain length, or animations that show up later than other content within a page. In that case, the autoplay feature is very useful. Now, if you click on the Page Settings icon, the right Control pan will show an option to add autoplay duration. In the gif bellow we add 5 and 10 seconds to two pages in our Blackilst story, because we know that our videos have that length.

Backups

Backups will show in the bottom of the left navigation pane. They are your tool to retrieve previous versions of your Web Stories. For every time you publish your Web Story, it will take a snapshot of that version - one that you can retrieve at a later date. Within this component you are able to preview previous backups, and move between versions. It will also tell you the time when a Snapshot was created, so you can navigate better.

Trackpad Support

Now, within your canvas you are able to navigate between pages with the use of your Trackpad. Using two finger taps you can move, however you can also position the view with 1 click movement. Thanks to newer updates to Flutter, the trackpad support now works flawlessly. P.S: better than the gif - We promise :)

Letter Spacing and Line Height

For each text now you are able to change the letter spacing and line height. Not a major update, but one that will help you to create even more beautiful stories!

Other updates

There are also many other updates that improve the speed of the tool, and some background events. Once again thanks to the whole Flutter community and the Flutter team part of Google for guiding us in every step of the way.

Other things are coming to Ampstor in the following months as well. Make sure to follow us on twitter.

If you liked this, subscribe to get similar news in your inbox.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Get started with Web Stories

You've probably heard about Web Stories or AMP Stories. A friend told you or you’ve read an article that this is a new and a cool way to write content. Well, your friend may be right...