Displaying a PDF file on your website is easy and quick with the PDF Embed component. This component displays a PDF in a scrollable window on a page of your site. To get started, open your site in the website edit, click the Add Content button and drag the component to a page of your site. Next, click on the component to open the options panel on the side of the editor.
PDF File
To upload a PDF file, click the Upload button found near the top of the options panel. Once the upload completes, you’ll see the filename listed underneath the Upload button. To replace the PDF in the component, simply click the button and upload a new PDF file.
Size & Position
The options within this group provide controls for the size and alignment of the component:
- Width - By default, your PDF will take up the full width of the component. You can set this to a smaller proportion, though. This option can be set separately for different screen sizes by clicking the desktop/mobile icon.
- Height - This option provides a few different preset height options to control how tall the scrollable window is. This can also be set for different screen sizes.
- Align - If you’ve chosen a width smaller than full, you can use this option to align the embedded PDF to the left, right, or center.
Design
This option group controls some general styling for the component:
- Shape - By default, the border around the embedded PDF will use the default set by your site. You can override that with this option. You can also set this separately for different screen sizes by clicking the desktop/mobile icon.
- Border - With this option you can add a border to the PDF, setting the width, color, and style.
Spacing
This group contains options to control space within the component. Both can be set separately for different screen sizes by clicking their respective desktop/mobile icon.
- Margin - This option controls the space around the embedded PDF within the component.
- Padding - With this option you can control the space between the border around the PDF and PDF itself.
Hover
You can control how the border around the PDF looks when a visitor hovers over it with a mouse. To change this, click on Hover at the top of the options panel. You can customize the width, color, and style.