Image|Video| Audio| Chapter| Parallax|Gallery| Content|Collection| Map| Sticky Map

Aesop Chapter Component Demo


LEFT DOTS STYLE


DEFAULT STYLE


RIGHT DOTS STYLE

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 enabled “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.
2017-12-23-15_44_09-customize_

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.

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 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.

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.

You can also apply a reveal animation effect.

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.

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.
 

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.