Aesop Chapter Component Demo

The Aesop Chapter Component allows you to present your long form posts with chapter navigations. Do you see the blue DOTS to the side? After you add a Chapter Component, you can enable “Left Dots” or “Right Dots” option.

Chapter 1 Image Background

The Aesop Chapter Component gives you many ways to customize the look of your chapter component. The above is just one example.

Scroll down (or navigate using the Chapter Menu) for different examples.

By default, the scroll animation is enabled. This can be turned off from the Aesop Story Engine customization menu.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque faucibus tortor vitae sapien gravida, non pellentesque massa mattis. In congue tempus laoreet. Donec in ipsum purus. Pellentesque nec sollicitudin arcu. Proin tortor augue, volutpat at tristique ut, sollicitudin eu ante. Vivamus porta et erat non congue. Fusce sit amet ipsum sed diam semper scelerisque sit amet et dui. Donec orci tortor, malesuada in tellus vitae, blandit dapibus felis. Suspendisse at vestibulum mi. In eu libero eu ipsum efficitur condimentum. Duis ultrices nunc vel egestas tincidunt. Donec turpis mauris, euismod id eros id, tempor gravida massa. Duis volutpat cursus tellus sed scelerisque.

Chapter 2

Plain White Background

The above is an example of a Chapter component using the plain color background option. You may choose different colors.

Chapter 3: Video

On a non-mobile browser, the video will play automtically.

As you can see above you can also a use a video as the background for the Chapter Component.

Chapter 4 Image Background Animated

You can also apply a reveal animation effect.

Chapter 5: Overlay Content Option for Chapter Component

Using HTML. You can create your own

visual elements and also animate them.

Lastly, you have an option to design the look of your Chapter component using HTML. The Chapter component has “Overlay” field where you can use HTML codes. When you use this option, the HTML content of the “Overlay” field replaces the regular chapter title and texts.

The above example uses the Overlay Content option with HTML, as well as the Overlay reveal animation option.

Aesop Story Engine