The components of an Inception Story

The title of your story.

Note: When publishing a Story as a Facebook Instant Article, the Title component is translated to a H1 header.

A simple subtitle.

Note: When publishing a Story as a Facebook Instant Article, the Title component is translated to a H2 header.

A Standfirst component consists of a Section, Title and Subtitle.

Note: This component cannot be used in a Story that is published as a Facebook Instant Article.

Figure: The Standfirst component before text is added.

Figure: The Standfirst component after text is added.

The Hero component is typically used as the first component of a Story as a way of setting the tone of the story and its content.

It consists of a background image, a title, subtitle and author. You can set the focus point for the image, crop the image and define if the background should scroll or should be fixed in place.

See this demonstrated in this short video:

Figure: The Hero component before text and an image is added.

Figure: The Hero component after text and an image is added.

Scrolling or fixed background

By default the Hero component scrolls over the image until it is out of view. To fix the image so that it moves together with the Hero component, set the Fixed Background property. (See the difference between these 2 settings in the video above.)

Setting the image focus point or cropping the image

Click Edit Image to crop the image or set the focus point (for details, see the Image component).

Note: When publishing a Story as a Facebook Instant Article, the Hero component is translated as follows: The image is used as an image to represent the article. The title is translated as a H1 header. The subtitle is translated as a H2 header. The author is translated as author.

The introduction of your story.

Note: When publishing a Story as a Facebook Instant Article, the Intro component is translated to a paragraph.

The main text of your Story.

Use the "Drop Cap" properties to set a drop cap for your text.

Figure: To set the drop cap, click the Component Properties icon (A) enable the "Drop Cap" option (B) and set the properties.

Figure: A Body component with drop cap set.

Note: When publishing a Story as a Facebook Instant Article, the Intro component is translated to a paragraph.

The footer of your Story.

Note: When publishing a Story as a Facebook Instant Article, the Intro component is translated to a paragraph.

A quote consists of a quote field and an author field.

Figure: The Quote component before content is added.

Figure: The Quote component after content is added.

Note: This component cannot be used in a Story that is published as a Facebook Instant Article.

Positioning the quote

Use the Position property to position the quote to the left, middle or right of the screen.

Figure: To set the position of the quote, click the Properties icon (A) and choose a position from the list (B).

A simple line to separate different sections in your Story.

Note: This component cannot be used in a Story that is published as a Facebook Instant Article.

A crosshead.

Note: This component cannot be used in a Story that is published as a Facebook Instant Article.

Component for showing the author of the story consisting of an author image, a name, location and link (for example to Twitter or a Web site).

Figure: The Author component before content is added.

Figure: The Author component after content is added.

Create a slideshow with optional captions and filmstrip. You can let the slideshow play horizontally or vertically and set it to play automatically.

For publishing to Adobe DPS, fullscreen mode can be disabled.

Note: This component cannot be used in a Story that is published as a Facebook Instant Article.

Figure: A slideshow and its properties.

Adding images

Add images by dropping them in the component or in the drop area of the Slideshow properties.

Removing images

Remove an image from the slideshow by removing it from the Slideshow properties.

Changing the order of the images

To change the order of the images in the slideshow, rearrange them in the Properties properties.

Setting the image focus point or cropping the image

Click Edit Image to crop the image or set the focus point (for details, see the Image component).

Using the image fitting options

Use the image fitting options to fit the image to the frame, the frame to the image, and so on.

Note: The options are applied to the first (leading) image; you might therefore see the slideshow jump to that image when any of the other images are in view. The setting affects all images though.

Add an image with an optional caption. Control how the content should fit the frame, how the image should be positioned in relation to the text, and how to position the caption.

You can also set the focus point of the image and crop the image.

For publishing to Adobe DPS, fullscreen mode can be disabled.

Show me how to set the focus point

Setting the focus point

When adding an image it is automatically positioned to best fit the frame. Sometimes this position needs to be adjusted so that the image better fits the design. This can be done by changing the focus point.

Tip: If you also want to crop the image, do this first (see below).

Cropping the image

If you only want to show part of an image, you can crop it using the cropping tool. Note that the original file is left intact, so if you want to crop a larger area at a later stage or show the full image again, you can do so.

Embed content from an external source such as YouTube video or a Google map. Obtain the code and copy it in the Embed Code field in the properties.

Figure: The iframe code of Google Maps is used to display a map.

Notes: The way code is interpreted can vary between Web browsers. As a result, code that is used in the Embed component of Inception may work in some browsers while it may not work in others. The Embed component cannot be used in a Story that is published as a Facebook Instant Article. Previewing an embedded .m3u8 file in Inception is only supported in Safari, not in Chrome or Internet Explorer.

Promote a product by displaying an image, the product name, a short description, the price and a Web site. Control the position on the page through the properties.

Figure: An empty Product component and its properties.

Figure: The Product component filled.

The Container component can be used to create a story within a story (such as a sidebar). All types of other components can be added to it.

Use the Properties panel to control the position, opacity and background color of the container.

Figure: Here a Container component has been used to add a quote and an image to the right of some text.

Notes: You can also place a container within a container (but not within a container that is already placed in a container). A container cannot be used in a Story that is published as a Facebook Instant Article.