The Paged converter is an experiment still in development. You are welcome to try it and help us by sharing your feedback.

Limitations

  • The only option available for the size of the page is the default size for printing set in the browser accessing the page. This is due to current browser limitations and could be improved in the future.

CSS Customizations

You need Elementor Pro in order to save Custom CSS.

If the PDF is from a template the custom CSS should be added somewhere in the template, otherwise, it can be added to the CSS of this PDF button widget.

Set the page margins

@page {
margin: 20mm 30mm;
}

Set a different margin if the page is on the left or right (like a book)

@page:left {
margin-left: 25mm;
margin-right: 10mm;
}

@page:right {
margin-left: 10mm;
margin-right: 25mm;
}

Add page number on the bottom right

@page {
@bottom-right { content: counter(page); }
}

Add headers and footers

@page {
@top-right { content: "Confidential" }
@bottom-left {
content: "Dynamic Content For Elementor";
width: 50mm
}
}

Break always before a certain selector

some_selector { break-before: page; }

Generic CSS that will be applied only on the PDF but not when the page is loaded in the browser

@media print {
// your rules here.
}

Apply rules only to certain pages:

@page:first { /* ... */ }
@page:nth(2) { /* ... */}

Did this answer your question?