Simple Long Form : building stories that scroll

Laurence

14 septembre 2015

A Wordpress plugin to build easily stories that scroll. Un plugin Wordpress pour réaliser des longs formats sans une ligne de code.

The idea of this plugin came from a need that couldn’t be met. Simple Long Form is a new way to set up a #longform in a easy, fast and independent way. The plugin is now available via WP’s plugin directory. Scrollytellers, follow the guide!

Simple Long Form is produced with the (precious) help of WP’s, the front end incorporates Font Awesome and Bootstrap.js. If it is not necessary to know the code to use it, those who wish to go further may get components from Bootstrap to boost their page. For those wishing to put their hands in the code, two interesting stuffs that you should know: the buttons (<button> can receive class « btn ») and links into the page can receive the class « scrollTo ». Example 2 in 1: <a href= »#mydiv » class= »scrollTo »> <button class = « btn »> Button text </ button> </a> FLS is designed to be easy to use. Its activation creates a third type of content (with pages and articles) in the dashboard: Long Form. The plugin is independent of your theme. It includes two templates You can choose the base color in the configuration section (using a color picker) and the font (from 6 font families). For each section (for now, they are 5, plus intro and footer), it is possible to add an image and a title that will lodge in them. These sections are edited as any post or page. You can therefore add embed images and content with a few clicks. The more content, the higher the page « weighs » heavy: a loader was built for this purpose.

A #longform really easy to edit: just fill in the fields you want to appear on the screen. If the sections are not displayed in the wysiwyg editing area, you have to enable it via the options screen (at the top right of the administration screen).

There is one option page for general settings (Twitter ID et Google Analytics code), if you need to use those elements.

When you’re editing the #longform, you can chose among two templates (black or white), chose your custom color (with a color picker), chose your font family, and add the author’s name as well as a subtitle. Warning: this is where you load the intro image (to avoid an intro with a gray background). The image must be large enough to be displayed without pixelation effect, but optimized for the web.

No field is mandatory. A blank field will not be displayed.

Once published, your #longform is set to be added your homepage’s loop (if it has one) and is added to your RSS feed.