How to Add a PDF - Drag & Drop Editor, Instructions, Wordpress Instructions - Vancouver Island Designs - Campbell River graphic and website design

To add a PDF file for users to download:

Click and drag the File Download Module onto the page.
A window will open with the File Download Module Options
In the General tab, click Upload
Choose a PDF from your media library or click Upload files
Click Select
In the Content area below, you can change the word Download, to anything that you want
Click the Style tab to change the colour of the text and background
Click the Typography tab to change the font
Click Save, when done.

The Advanced tab offers nearly identical settings on all Drag & Drop Editor rows, columns, and modules.

Spacing section

For rows and columns, you can change the default margin and padding values. For modules, you can change the default margin values only.

Visibility section

In the Breakpoint field, you can set the row, column, or module to display or hide based on device size. In the Display field, you can choose to display the row, column, or module always, never, or only to logged-in or logged-out users.

Animation section

You can assign an entrance animation, which activates the first time the page is loaded and the row, column, or module comes into view. The default is None. If you choose an entrance animation, set the delay (how long before the animation starts, in seconds) and a duration (how long the animation lasts, in seconds.).

HTML Element section

You can choose a different HTML container element for the row, column, or module (advanced users only).
For example, for reasons of accessibility you might want to use an HTML container tag that has more semantic value than a <div tag, such as <section>.
Add a CSS ID or class value to the row, column, or module.
ID names must be unique on a page, so assign an ID only when you need to reference that unique ID. For example, a link to an anchor on the page requires a unique anchor so it know exactly where to go. Class names are usually intended for reuse and are often used in CSS rules. For example, you might want to assign a different text size to all HTML headings with an fl-heading class.

To add a Button to link a PDF file for users to view:

For this type of button and link, you'll upload the PDF to your Media Library first.

Go to the Dashboard (the backend of your website)
Using the main menu on the left: Choose Media > Add New
Click Select Files or drag and drop file(s) onto the page
Once uploaded, click the Edit button next to the file name
Copy the File URL as shown on the right of the screen
Go to the Page or Post that you want to add the Button/ link
Click to launch the Drag and Drop Editor
Click and drag the Button Module onto the page.
Under the Link heading, Paste the PDF's URL that you copied
Tick the box to open the PDF in a New Window
Under the Text heading, change the Click Here text
Click the Style tab to change the colour of the text and background

The ADVANCED tab

The Advanced tab offers nearly identical settings on all Drag & Drop Editor rows, columns, and modules.

Spacing section

For rows and columns, you can change the default margin and padding values. For modules, you can change the default margin values only.

Visibility section

In the Breakpoint field, you can set the row, column, or module to display or hide based on device size. In the Display field, you can choose to display the row, column, or module always, never, or only to logged-in or logged-out users.

Animation section

You can assign an entrance animation, which activates the first time the page is loaded and the row, column, or module comes into view. The default is None. If you choose an entrance animation, set the delay (how long before the animation starts, in seconds) and a duration (how long the animation lasts, in seconds.).

HTML Element section

You can choose a different HTML container element for the row, column, or module (advanced users only).
For example, for reasons of accessibility you might want to use an HTML container tag that has more semantic value than a <div tag, such as <section>.
Add a CSS ID or class value to the row, column, or module.
ID names must be unique on a page, so assign an ID only when you need to reference that unique ID. For example, a link to an anchor on the page requires a unique anchor so it know exactly where to go. Class names are usually intended for reuse and are often used in CSS rules. For example, you might want to assign a different text size to all HTML headings with an fl-heading class.

To add an image preview of the PDF and make the image link to the PDF:

For this type of link, you'll upload the PDF to your Media Library first and create an image of the PDF.

First create an image of the PDF:

Open the PDF on your computer
Using the Start Menu, search for and open the Snipping Tool
Click and drag a box around the page
Save the image to your computer

Second Upload the PDF and copy the File URL

Go to the Dashboard (the backend of your website)
Using the main menu on the left: Choose Media > Add New
Click Select Files or drag and drop the PDF onto the dotted border box
Once uploaded, click the Edit button next to the file name
Copy the File URL as shown on the right of the screen

Lastly, add the image to the page and create the link

Go to the Page or Post that you want to add the image/ link
Click to launch the Drag and Drop Editor
Click and drag the Photo Module onto the page.
In the General Tab, click Select Photo
Click Upload Files
Type a meaningful Alt Text that describes what the photo
Click the Select Photo
Choose the size you want from the dropdown menu
Under the Link heading, choose URL, and paste the URL
Click Save, to save the Photo Module

The ADVANCED tab

The Advanced tab offers nearly identical settings on all Drag & Drop Editor rows, columns, and modules.

Spacing section

For rows and columns, you can change the default margin and padding values. For modules, you can change the default margin values only.

Visibility section

In the Breakpoint field, you can set the row, column, or module to display or hide based on device size. In the Display field, you can choose to display the row, column, or module always, never, or only to logged-in or logged-out users.

Animation section

You can assign an entrance animation, which activates the first time the page is loaded and the row, column, or module comes into view. The default is None. If you choose an entrance animation, set the delay (how long before the animation starts, in seconds) and a duration (how long the animation lasts, in seconds.).

HTML Element section

You can choose a different HTML container element for the row, column, or module (advanced users only).
For example, for reasons of accessibility you might want to use an HTML container tag that has more semantic value than a <div tag, such as <section>.
Add a CSS ID or class value to the row, column, or module.
ID names must be unique on a page, so assign an ID only when you need to reference that unique ID. For example, a link to an anchor on the page requires a unique anchor so it know exactly where to go. Class names are usually intended for reuse and are often used in CSS rules. For example, you might want to assign a different text size to all HTML headings with an fl-heading class.

FAQ

Drag & Drop Editor

To add a PDF file for users to download:

To add a Button to link a PDF file for users to view:

To add an image preview of the PDF and make the image link to the PDF:

First create an image of the PDF:

Second Upload the PDF and copy the File URL

Lastly, add the image to the page and create the link