generating pdfs using dynamic content for elementor

Generate PDFs using Dynamic Content For Elementor

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn
Share on email
Email

Table of Contents

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

new page in elementor

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

section added

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

added first heading

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

added second heading

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.

added token for logged in user

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.

added completion date

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.

logo added to 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.”

pdf button settings

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 “#”.

adding css selector to section

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.

add css selector to html container field

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.

the certificate page

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

final 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.

Filed under:

Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. You will still pay the same amount so there is no extra cost to you. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”  

Elementor Pro

Current Elementor Sales

elementor360

Subscribe to the Newsletter

E360
>
Scroll to Top