Adding page breaks to specific elements

This article discusses creating PDFs in Bubble applications (using the 'Create PDF' plugin action). If you wish to create PDFs based on a template you have designed in our template editor, please see other sections of the documentation.

DocuPotion allows you to add page breaks before any element on your page.

For example, let's say you want to add a page break so that the "Introduction" section in the below PDF starts on a new page.

To do this, follow these steps:

In your Bubble editor, navigate to: Settings -> General -> Advanced Options and add the ability to 'Expose the option to add an ID attribute to HTML elements'
Add an ID attribute to the element where you want to insert the page break. In this example, we're adding the ID attribute 'break-1' to the text element's parent group

Note: it is recommended you add the ID attributes to group elements, rather than individual text elements

Add the ID attribute to the 'Element Page Break' field of your 'Create PDF' workflow action

Now when you create a PDF from your Bubble app, the element you've added a page break to will start on a new page:

Adding Multiple Page Breaks to a Page

You can add multiple page breaks on the same page. In this example, we've added an additional page break ('break-2') to another group on our page. This is how it looks in our 'Create PDF' workflow looks after adding a second element page break:

Please note that you can not add a page break to a child element of an element that you have already added a page break to.