Generate PDFs using Dynamic Content For Elementor

Introduction

Dynamic Content for Elementor actually includes two ways to generate a PDF. There is a PDF extension for the Elementor Pro form builder which is useful for creating invoices or receipts. There is also a PDF Button Widget which is useful for creating things like course certificates. In this tutorial we will take a look at this second method.

I have a website using the free version of the Page Builder Framework theme. The content that we will be working with is a course completion certificate for a fictitious WordPress Master Site Builder class. The PDF Button widget can take the content from a section of the page or you can use an Elementor template. I’m going with the first option, so the first step is to create the content that I want to render on the page and then include in the certificate.

Video Version

Creating the Certificate

To start, I created a page with the title “Course Completion Certificate,” By default the page title will be used as the file name for the certificate. I opened it in the Elementor editor.

Creating Certificate Content

I added a section and adjusted the padding of the section and set the background to a light blue.

I then added an inner section, and deleted one of the columns. I added in a Heading widget, entered the heading and styled it.

I added a second heading widget and set it to an H#. I added some text and styled it.

I then added another inner section, but this time kept the two columns. I set the column widths to 50%. In the column on the left I added a text widget, clicked the database icon, and entered a dynamic tag for the logged in user’s display name.

In the right column I added another text widget with some text for the certificate and another dynamic tag for today’s date and styled it. I styled the two text widgets.

Then I added another inner section, but made this one a single column. I added an image widget and added a logo to print on the certificate.

Adding the PDF Button Widget

Finally, below the section I added the Dynamic Content for Elementor PDF Button widget. I centered it and set it to open in a new window. I change the button text to say “Download Your PDF Certificate.”

I then opened the PDF panel and adjusted those settings. I set the page size and orientation. There are four PDF converter options: JS, DomPDF, TCPDF, and Browser. I set it to use the JS converter.

I went to the section settings and on the Advanced tab, in the CSS ID text box, I added “my-pdf-section” without the “#”.

I went back to the PDF Button settings and added “#my-pdf-section” with the “#” into the Html Container field in the PDF settings panel.

I went to preview the page. This is what it looked like. I clicked on the Download PDF button and it opened ready to print.

In the Destination drop down you can select to save it to a PDF.

And we are done!

Discussion and Conclusions

I found the process to be pretty straightforward. There are four PDF Converter options: JS, DomPDF, TCPDF, and Browser. In testing it, the DomPDF and TCPDF gave me an error. That could be due to my local PHP system. Maybe a PHP extension was missing. The help note indicated that the JS method was the most accurate for shorter content and the JS version worked very well for me. The other thing, as we saw, was that it took a little experimentation to get the layout just right.

My overall conclusion is that the PDF Button widget is another unique Dynamic Content for Elementor feature. It is fairly easy to use. It empowers you use Elementor generate a PDF. That feature usually requires a dedicated plugin or linking to an external site.