Logo

Button Styling and Download Settings

Customize colors, borders, typography, filename, loading spinner, and button states.

Last updated on May 18, 2026

The Download PDF button block allows you to add a customizable download button to any page or post. This button triggers PDF generation from a selected PDFDraft project when clicked. You can customize the button's appearance, text, and layout to match your site's design.

Customizing Button Text

You can change the text displayed on the button to match your needs.

In the block settings panel, find the Button Text field

Enter your desired text

The button updates immediately to show your custom text

Common examples include Download PDF, Get Your Certificate, Download Invoice, or Save as PDF.

Button Styling Options

The Download PDF block provides several styling controls to customize the button's appearance.

Border Settings

Control the button's border appearance:

In the block settings panel, locate the Border section

Adjust border width, style, and color as needed

Changes apply immediately to the button preview

Button Width

Control how wide the button appears:

Find the Width control in the block settings

Choose from available width options

The button resizes to match your selection

Button Alignment

Position the button within its container:

Use the Justification controls in the block toolbar or settings panel

Choose left, center, or right alignment

The button repositions immediately

Typography and Colors

The Download PDF button block integrates with WordPress theme styles. Typography and color customization options depend on your active theme's support for block editor styling features.

If your theme supports custom colors and typography for buttons, you can access these controls through:

The block toolbar color picker

The Typography panel in block settings

The Color panel in block settings

Error State

If PDF generation fails, the button displays an error message to inform the user. The button returns to its default state, allowing the user to try again.

PDF Filename

The filename of the downloaded PDF is determined by the selected project's configuration. The filename is set when you create or edit the PDF project in the PDFDraft editor, not in the button block settings.

To customize the PDF filename:

Navigate to PDFDraft in your WordPress admin menu

Open the project you selected for this button

Edit the project settings to configure the filename

Save the project

The updated filename will apply to all Download PDF buttons that use this project.

Testing the Button

After configuring your button, test it to ensure it works correctly.

Save or publish your page

View the page on the frontend

Click the Download PDF button

Verify that the loading spinner appears

Confirm that the PDF downloads successfully

Open the PDF to verify it contains the correct content from your selected project

Common Issues

Button Is Not Appearing In The Frontend

For the button to appear you need to have a published design selected from the block's project dropdown or passed through the shortcode attribute.

Button Does Not Generate PDF

If clicking the button does not trigger PDF generation:

Verify that you have selected a project in the block settings

Ensure the selected project exists and is published

Check your browser console for JavaScript errors

Loading Spinner Never Disappears

If the loading spinner continues indefinitely:

Check that the selected PDF project is properly configured

Review server error logs for PDF generation failures

Styling Does Not Apply

If your styling changes do not appear:

Clear your browser cache and reload the page

Check if your theme overrides button styles

Verify that your theme supports block editor styling features

Managing Multiple Buttons

You can add multiple Download PDF buttons to the same page, each configured to generate different PDF projects.

Insert additional Download PDF blocks as needed

Configure each button with a different project

Customize button text to distinguish between different downloads

Each button operates independently with its own loading state and error handling.