PDF Viewer

How to use PDF Viewer Widget of Sky Addons for Elementor

The PDF Viewer widget lets you embed PDF files directly into your WordPress website, allowing users to read them without downloading. It’s perfect for sharing brochures, eBooks, reports, or manuals directly on your site. Whether the PDF is hosted locally or accessed via a remote URL, users can view it smoothly with built-in controls. This widget eliminates the need for external apps or plugins, improving user experience and engagement while keeping your site clean and professional.

Features:

1. Embed PDFs from both hosted files or external URLs.
2. Customize dimensions and display options (title, download button, etc.).
3. Set default open page to jump directly to specific content.
4. Minimalist, responsive viewer without needing third-party apps.
5. Customizable button text, icon, and full styling controls.

Insert PDF Viewer Widget

1. Open Elementor Editor. In the Elementor panel, search for “PDF Viewer” under Sky Addons.
2. Drag and Drop the Widget to the desired location on your page / editor.

PDF Viewer Section

1. Select Source – Choose between Hosted file or Remote URL.
2. Hosted – Upload and use a file from your WordPress Media Library.
3. Remote URL – Link to a PDF hosted on an external website.
4. Open Page – Set a specific page to open first (e.g., 1, 5, 33).

Additional Settings Section

1. Width – Set the PDF viewer’s width in pixels or percentage.
2. Height – Set the height of the embedded viewer.
3. Show Title – Toggle to show or hide the PDF document title.
4. Show Download Button – Enable to allow PDF downloads.

Button Section

1. Button Text – Set custom text for the PDF button (e.g., “View PDF”).
2. Icon – Choose an icon to display beside the button text.

Style Customization

Style every section of the PDF viewer to match your brand or layout.

PDF Viewer Section

1. Padding – Control space inside the viewer.
2. Margin – Set spacing around the viewer.
3. Border – Apply border styles.
4. Radius – Round the corners for a soft look.
5. Box Shadow – Add shadow for depth.

Title Section

1. Text Color – Define the color of the title.
2. Typography – Customize font style, weight, size, spacing.
3. Text Shadow – Apply shadows for readability or design.
4. Margin – Adjust spacing around the title.

Button Section

1. Padding – Control spacing inside the button.
2. Typography – Set font style and size.
3. Border – Add and style borders.
4. Radius – Round the corners of the button.
5. Text Color – Define button text color.
6. Background Type – Set solid or gradient background.
7. Text Shadow – Add a shadow to text.
8. Box Shadow – Apply a shadow around the button.
9. Hover Animation – Animate the button on hover.

Save and Preview

1. Once you’ve customized and styled your accordion, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Troubleshooting

1. PDF not displaying? Ensure the file is accessible and not blocked by CORS (for remote URLs).
2. Viewer not resizing properly? Check height/width settings and ensure container responsiveness.
3. Download button missing? Make sure it’s enabled in the Additional Settings section

Conclusion

The PDF Viewer widget makes sharing documents on your website seamless. No downloads, no plugins—just clean, embeddable PDF viewing that enhances user experience while keeping content accessible and professional.