Introduction to the Web Page Builder

This tutorial introduces FlowPaper webpage builder and its basic elements such as blocks, columns and it shows you how to import content from your PDF.

We will also look at:
  • Pages
  • Blocks
  • Columns
  • Elements  

What is the web page builder?

The webpage builder is composed of pages, which you can see by moving your cursor to the right-hand corner and click on the edit pages button. Pages can be rearranged, renamed and added to your publication. When you are ready to edit a page, click the page and the page will appear in your editable window. 


The editable page consists of blocks and a block consists of columns and columns consists of elements. This is the basics of how a page is made up.


To add a block, go to the add block section on the left-hand side, then select the block that best suits your needs and drag it to the page. You can have multiple blocks on your page. 


In the block, you can add columns by clicking the add column tab. You can select how wide each column is by dragging the centre cursor next to the column. 


To add content to your column, head back to the left-hand side and click on the elements section. Select any of the options to import elements from your computer. 


The other option is to import elements from your PDF. To do this, click on the import tab on the left-hand menu. All the pages of your PDF will be visible here. To extract content, just double click the content you want to extract or drag and drop the element on to the page. Images are normally coloured blue, whilst areas, where you have marked for extraction, are coloured red. You can add any element by double-clicking on it and you can extract part of a page or full page.


In order to change the background on a block, as with our example, we want to use the cover image, you need to make sure that the block is selected before you click the “Use background” tab located at the right-hand side at the bottom of the page you want to import from. 


You can style your elements using the right-hand side menu. First, make sure you have your block selected and you can add effects. For this tutorial, we added the parallax scroll effect. Have a look around to see which effect that suits your publication. What will change depends on what you have selected. For example, if you highlight a column you can change the vertical alignment by selecting the start option. This will make your text appear at the beginning of the page. The same thing goes if you select the header. Then you can select things like font size, font family etc.


Once you are happy with your publication, you can test it for different devices by selecting the device emulator at the bottom of the screen.


If you want to preview the publication in the browser, move the cursor up to the right-hand corner of the desktop publisher and click the publish button and once the pop-up window appears select cloud hosting. Once your publication is ready, click the “View in browser’ button.