How to convert your PDFs into interactive brochures using FlowPaper Elements

Share your brochures online as interactive online publications using FlowPaper Elements

This tutorial will explain how the Elements template works and it will go through features such as:

  • How to animate headers
  • How to animate text
  • How to add a video, an image and a link

How to make an interactive online brochure using just a PDF

Moving from a static PDF file to a dynamic HTML5 publication

1. Choosing the right template

As always, start by importing your publication, select the 'Elements' template


2. Pick your page turning style

Then select one of the Elements templates. This tutorial uses the sliding pages template.


3. Select font conversion mode

To keep the original PDF fonts, select the first option in the pop-up window, then click continue to finish the import.


How to edit your PDF and add animations

Because FlowPaper has converted your PDF into editable HTML5, all elements are now accessible and can be edited.

1. Entering edit mode

The main difference between Zine templates and Elements templates is that Elements import each element within your PDF as individual objects.


2. Manipulating an element

You can view this by switching to the edit mode, where you can select each individual element. Here you can also see that FlowPaper has identified the different types of elements, such as headers and body text. Select the header and hover your cursor above the object to see this. For a header, you will see H1 appear in the top right corner of the selected element.


Modifying publication animations

1. Applying animatinos to your headers

To add an animation to the header, go back to the design mode and click the style-setting icon that is visible next to the H1 marker. On the right-hand menu, you can see the H1 text style. The animation drop-down menu is set on none as default. Click on it to see all the different options. For this tutorial, we have selected the 3D rotation option. When you have selected your style settings, click the apply settings button to save the selection.


2. Applying animatinos to your body text

The same method is used to change the body text, just make sure you do the changes under the “body text style” section in the menu.


Adding interactive elements to the PDF

1. Adding links, videos or images

To add a video, image or link to your publication just go to the page/section in the publication that you want the element to appear. Double click the area to switch to edit section. For this tutorial, we have decided to add a video. 


2. Accessing the interactivity tools and adding a video

Select the add video option on the menu. 


3. Entering video source

A pop-up window will appear with the option to choose either to embed the video or to use a self-hosted video. We will select the embed video for the tutorial.

Make sure you have the correct URL and paste into the text field. A preview of your video will appear to make sure you have pasted the correct video.

If you wish the video to display at maximum size when playing, just tick the box under the preview button. Click the ok button and you will get back to the edit screen. 


4. Adding the video to the publication

With your cursor, draw the area where you want to video to appear. You don’t need to worry about not getting the area perfect, FlowPaper will adjust this as you will see in the preview mode.

If you selected the maximise option, you will see this take effect if you click the video play button.

To add an image or link, just switch back to the edit mode and redo the steps you did to add a video.