PDF View

Step-by-Step Tutorial on Using the PDF View Widget of Zyre Addon

With Zyre Addon’s PDF View Widget, you can seamlessly embed PDF files directly into your webpages. It allows visitors to read, scroll, and interact with documents without needing to download them, making it perfect for portfolios, reports, guides, or eBooks.

Learn How To Use PDF View Widget:

Exploring the Features of PDF View Widget

Step 1: Drag the widget

From the left panel, search or choose the PDF View Widget of Zyre Addon and simply drag it into your desired section.

Step 2: Content tab

PDF View:

PDF View Style : Currently, only two style are available.
File Source : Select how the PDF file will be added (upload or external link).
PDF URL : Enter the direct link to the PDF file.
Header Direction : Set the direction of the header.
PDF Title : Set a custom title for the displayed PDF.
PDF Author : Set author name of the pdf file.
Show Icon : Enable or disable the display of an icon with the PDF.
Set Icon/Image : Select a custom icon or image to represent the PDF file.
PDF Icon Text : Set icon text with pdf file.
Show Download : Toggle the option to allow users to download the PDF.
Download Icon : Set download icon of the download button.
Page Number : Show the current page number while viewing.
Show Toolbar : Enable or disable the PDF toolbar for navigation and tools.
Width & Height : Set custom dimensions for the PDF viewer.

Step 3: Style tab

In the Style section, you can customize the Title Bar, Icon, Title, Download Button — but make sure you have added them first.

Title Bar:

Bottom Spacing : Adjust the spacing bottom of the title.
Background Color : Set the background color of the Title bar. Explore full background settings here.
Padding : Control the inner spacing of title bar.
Border Type : Define border style, width, and color for both states.
Border Radius : Apply rounded corners to each item.

Icon / Image:

Margin : Add outer spacing of the item.
Background : Set the background color of the full icon area. Explore full background settings here.
Width & Height : Set custom dimensions for the icon or image.
Padding : Control the inner spacing of icon or image.
Border Radius : Apply rounded corners to each item.

Icon:

Icon Size : Adjust the icon size.
Icon Color : Set the icon color.
Background color : Set the background color of the full icon area. Explore full background settings here.
Width & Height : Set custom dimensions for the icon.
Padding : Control the inner spacing of icon.
Border Radius : Apply rounded corners to each icon.

Title:

Typography : Here you can customize the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing for your text. Explore full typography settings here.
Text Color : Choose colors of the title.
Margin : Control outer spacing of the title.

Download Button:

Typography : Here you can customize the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing for your text. Explore full typography settings here.
Border Type : Define border style, width, and color for both states.
Border Radius : Control corner roundness.
Padding : Control the inner spacing of button.
Icon Size : set the size of the icon.
Icon Spacing : Adjust the spacing of the icon with text.
Border Type : Define border style, width, and color.
Color : Set the color for both normal and hover states.
Background Color : Set background color for both normal and hover state. Explore full background settings here.
Icon Color : Set icon color for both normal and hover states.
Text Color : Set text color for both normal and hover states.

Step 4: Advance tab

If you want to customize the layout, backgrounds, or make your design more engaging, head over to the Advanced section. The Advanced panel is a default Elementor feature. Check out this document to learn more about its features.

Finally, hit the Publish button and watch your stunning PDF View come to life on your webpage!

All configured — enjoy building!