Do you want to display a PDF in Elementor without hassle? THE PDF viewer Widget allows you to transparently incorporate PDF into your website, which allows visitors to more easily view documents, guides or brochures without needing to download them. With this simple method, you can improve the user experience and keep your content accessible, all without touching a single line of code.
Display the demo
Popular use cases to use a PDF viewer in an Elementor website
/ * widget: list * / # UC_List_elementor_d4cea75 {Display: grid; Position: Relative; } # UC_List_elementor_d4cea75 .ue-list-otem {Display: Flex; } # uc_list_elementor_d4cea75 .ue-list-otem-title {Display: Flex; Align-iems: Center; } # UC_List_elementor_d4cea75 .ue-list-otem-Image IMG {Max-Width: 100%; } # UC_List_elementor_d4cea75 .ue-list-ém-temp * {Margin-Bottom: 0px; Transition: inheritance; } # uc_list_elementor_d4cea75 .ue-list-desm-index {flex-grow: 0; Flex-shrink: 0; Display: Flex; Align-iems: Center; Justification-contained: Center; line height: 1em; } # uc_list_elementor_d4cea75 .ue-list-desm-index svg {height: 1em; Width: 1em; } # uc_list_elementor_d4cea75 .ue-list-otem-content {flex-grow: 1; } .ue_badge {font-size: 13px; }
1
Digital products catalogs
Present all of your product range in an elegant PDF format using the PDF Viewer widget. Perfect for electronic commerce, allowing customers to easily browse and download catalogs directly from your site.
2
Online course equipment
Incorporate course equipment such as workheets and electronic books directly into your educational site with the PDF Viewer widget. It is a simple way for students and teachers to easily access and download resources.
3
Restaurant menus
Display the menu of your restaurant in high quality PDF format, which facilitates customer visualization and download, particularly useful for online order and delivery services.
4
Real estate lists
Present the properties of properties, brochures and floor plans in PDF format, allowing potential buyers to easily explore details on your site.
5
Corporate brochures
Integrate your corporate brochures or your business profiles directly on your website. The PDF viewer widget allows visitors to display essential commercial information without leaving the page.
6
Events and programs
Easily view event hours and programs in PDF format. Participants can display, download and share these documents directly from your event website.
7
Travel routes
Presentation of detailed travel packages and routes in a clear and downloadable PDF format, giving customers all the travel information they need in one place.
8
Creative and CVS wallets
Freelands and professionals can use the PDF Viewer widget to present their portfolios and resume directly on their site, which allows jobs to visualize and download easily.
9
Instructions
Offer quick access to product manuals or user guides by integrating them directly on your assistance pages, improving the customer experience with easily accessible PDFs.
Step N ° 1: Install and activate unlimited elements Free version for Elementor
You must install and activate the free version of unlimited elements for Elementor.
Get unlimited elements for free
Step n ° 2: Addition of the PDF WIDF WIDGET to your Elementor website
To display a PDF in Elementor, install the PDF viewer Widget Widget Elements Library Widget.
/ * Widget: List * / # UC_List_elementor_0746de7 {Display: GRID; Position: Relative; } # UC_List_elementor_0746de7 .ue-list-ém {Display: Flex; } # UC_List_elementor_0746de7 .ue-list-otem-title {Display: Flex; Align-iems: Center; } # UC_List_elementor_0746de7 .ue-List-otem-Image IMG {Max-Width: 100%; } # UC_List_elementor_0746de7 .ue-list-ém-temp * {Margin-Bottom: 0px; Transition: inheritance; } # UC_List_elementor_0746de7 .ue-list-desm-Index {flex-grow: 0; Flex-shrink: 0; Display: Flex; Align-iems: Center; Justification-contained: Center; line height: 1em; } # UC_List_elementor_0746de7 .ue-List -ém-Index SVG {Height: 1EM; Width: 1em; } # UC_List_elementor_0746de7 .ue-List-otem-content {Flex-Grow: 1; } .ue_badge {font-size: 13px; }
1
Access unlimited elements in the WordPress dashboard
2
Look for the “viewer pdf”
3
Fly the widget and click Install
Step # 3: Add a pie widget to your Elementor page
Now, in the publisher Elementor, find the PDF viewer Widget and drag it to the desired part of your page.
General parameters
/ * Widget: List * / # UC_List_elementor_F7275FA {Display: GRID; Position: Relative; } # UC_List_elementor_f7275fa .ue-list-otem {Display: Flex; } # uc_list_elementor_f7275fa .ue-list-otem-title {Display: flex; Align-iems: Center; } # UC_List_elementor_f7275fa .ue-list-otem-Image IMG {Max-Width: 100%; } # UC_List_elementor_f7275fa .ue-list-ém-temp * {Margin-Bottom: 0px; Transition: inheritance; } # UC_List_elementor_f7275fa .ue-list -ém-Index {flex-grow: 0; Flex-shrink: 0; Display: Flex; Align-iems: Center; Justification-contained: Center; line height: 1em; } # UC_List_elementor_f7275fa .ue-List -ém-Index SVG {Height: 1EM; Width: 1em; } # uc_list_elementor_f7275fa .ue-list-otem-content {flex-grow: 1; } .ue_badge {font-size: 13px; }
1
Choose the PDF file
Paste the link to the PDF file. It must be loaded in the same area as the current page.
2
Layout type
Select the layout for the PDF viewer.
- Default
- Custom (Pro)
Personalized layout type
/ * widget: list * / # UC_List_elementor_e870ff5 {Display: grid; Position: Relative; } # UC_List_elementor_e870ff5 .ue-list-otem {Display: Flex; } # uc_list_elementor_e870ff5 .ue-list-otem-title {Display: flex; Align-iems: Center; } # UC_List_elementor_e870ff5 .ue-list-otem-Image IMG {Max-Width: 100%; } # UC_List_elementor_e870ff5 .ue-list-desm-temp * {Margin-Bottom: 0px; Transition: inheritance; } # UC_List_elementor_e870ff5 .ue-list -ém-Index {Flex-Grow: 0; Flex-shrink: 0; Display: Flex; Align-iems: Center; Justification-contained: Center; line height: 1em; } # UC_List_elementor_e870ff5 .ue-list-desm-Index SVG {Height: 1EM; Width: 1em; } # uc_list_elementor_e870ff5 .ue-list-otem-content {flex-grow: 1; } .ue_badge {font-size: 13px; }
1
Ladder
Adjust the scale of the page rendered.
2
Rotation
Adjust the rotation according to the arrangement.
3
Start page (page)
Choose which page should appear as the first page.
Layout settings
/ * Widget: List * / # UC_List_elementor_3F8D4BC {Display: grid; Position: Relative; } # uc_list_elementor_3f8d4bc .ue-list-otem {Display: Flex; } # uc_list_elementor_3f8d4bc .ue-list-otem-title {Display: Flex; Align-iems: Center; } # UC_List_elementor_3f8d4bc .ue-list-otem-Image IMG {Max-Width: 100%; } # UC_List_elementor_3f8d4bc .ue-list-otem-temp * {Margin-Bottom: 0px; Transition: inheritance; } # UC_List_elementor_3f8d4bc .ue-list-desm-index {flex-grow: 0; Flex-shrink: 0; Display: Flex; Align-iems: Center; Justification-contained: Center; line height: 1em; } # UC_List_elementor_3f8d4bc .ue-list-desm-index svg {height: 1em; Width: 1em; } # UC_List_elementor_3f8d4bc .ue-list-otem-content {Flex-Grow: 1; } .ue_badge {font-size: 13px; }
1
Show prev / Next arrows
Show or hide the previous / following arrows.
2
Show pages
Show or hide the pages.
3
Previous arrow icon
Choose an icon for the previous button.
4
Previous arrow text
Type text for the previous arrow.
5
Next arrow icon
Choose an icon for the following button.
6
Next arrow text
Type the text for the following button.
7
Show the full screen button
Display / hide the full screen button.
8
Full screen button text
Type the text for the full screen button.
9
Full screen open type
Select the open type type type.
- New window
- Same window
Wrap!
The integration of a PDF into Elementor has never been easier! Using the right tools, you can effortlessly present documents directly to your site, improve both usability and commitment. Whether you share product manuals, reports or wallets, this method guarantees a fluid experience for your visitors while keeping your content well organized. Try it today and raise your Elementor website!
Display the demo
Comments are closed, but trackbacks and pingbacks are open.