PDF Viewer (Divi)
A PDF on the page, for Divi 5, drawn with PDF.js — no plug-in, and it looks the same in every browser. Show it as a paged viewer, all pages in a scroll, a cover card that opens a full-screen reader, or the browser’s own viewer. Every example here shows the store’s lookbook from the Media Library; each is labelled with its settings.
1. The viewer
Show As: Viewer — one page at a time · Fit the width · toolbar with page navigation, zoom, fit width / page and fullscreen · selectable text · a title bar with the file size and page count and a Download button.
2. All pages in a scroll
Show As: All pages in a scroll · Zoom 75% · 560 px high (420 px on phones) · 28 px between pages, rounded pages · toolbar at the bottom with a Download button · the title bar below the document with an Open button.
3. Cover cards
Show As: Cover card (first page) — hovering shows a button; clicking opens a full-screen reader, or the file in a new tab · page-count badge · cover width and alignment · colours.
Opens a full-screen reader
Opens the file in a new tab · no title bar
Small, with Open and Download
4. Toolbar options
A floating toolbar over the page (rounded) with only page navigation, fit the whole page, starting at page 2 · a viewer with no toolbar and no title bar, 480 px wide and centred.
Floating toolbar · fit whole page · starts at page 2
No toolbar, no title bar · 480 px wide
5. The browser’s own viewer
Show As: Browser’s own viewer — an iframe of the file (every browser draws it differently, and it works with any link).