Web Story Builder: Preparing your content.

Prepare Your Content

A Web Story is a collection of videos, images, text and other features arranged in rows and blocks. Each story should inform, inspire or entertain your audience. 

TIPS

  • Use a spreadsheet to plan how to arrange each element and draft the words for the story.
  • Stock video and image sources can get your started quickly. One of my favorite resources is the Envato Market. Search for videos, images and graphics

Web Story Builder: Start a New Page

Start Building the Page

The first steps in creating a new Web Story page: title, color, layout options, tags, teaser and teaser image.

TIPS

  • The title color is used for the main title and most sub-titles on the page.
  • Remember that the teaser text is used in lists, search engine results and social media sharing. Be descriptive and concise!
  • The teaser image is not required, but highly recommended. Select one of the images being used in a block on the page.

wsb-banner-row-vhd

Create a Video Banner Row

Remember that Web Story pages are built using rows, with blocks inside. Using a full-width background video with a title overlay is a nice technique for creating an attention-getting banner.

TIPS

  • Video file must be less the 6MB. Using typical video encoding settings for a clear picture, that means the video should be less than 15 seconds.
  • The video will loop (replay again and again) so look for videos that are made to be played in a loop, or edit the video to include a blur or fade when the scene starts over.
  • Need help with video prep? Ask us! We'll be glad to help!
  • The title should be descriptive but short, less than six words. Need to say more? Add it as a sub-title.

Web Story Building: Story Row with Text and Image Blocks

Create an Image-and-Text Row

This technique for building a Web Story row places an image (or video) beside a block of text. It's a great way to showcase a product image or demonstration.

TIPS

  • When planning this content, think about the size and portion of the image. Landscape (horizontal) image? Make the block one-third,  one-half or two-thirds width. Portrait (vertical image)? Make the block one-fourth width. (There's another technique for vertical images that we'll explore in later videos.)
  • The size of the image is based on the width of the block.
  • Videos work best in blocks that are half-width.
  • For the best appearance, the length of the text should match the height of the image. Experiment by adding paragraph breaks, using lists or slightly rewriting the text to improve appearance.

Web Story Builder: Create a Row with Four-Block Grid

Create Four-Block Grid

A Web Story row can also contain a grid of four blocks. On wide screens, the blocks display in a single row. On small screens, the four blocks are displayed in a grid. In this example, an icon appears above the title and text.