How to Create Download and Preview Buttons - P5 - Using Meta Box and Zion

Are you running a WordPress website where you share valuable content like educational materials, documentation, product information, portfolios, or other downloadable files? If so, you’ve probably wondered how to make it easier for users to access your content in a way that suits them best. Giving users the option to preview or download files can make their experience much better. In this practice, we’ll create the Download and Preview buttons for e-books using Meta Box and Zion.

Check out the e-book page I made as an example, which includes two buttons:

Video Version

Before Getting Started

This archive page shows detailed information about the books along with two buttons. The first one is to save the PDF file to your device, and another allows you to view it online.

Each e-book will be a post of a custom post type. The e-book’s image, name, and description are respectively featured images, title, and description of the post. For the PDF file to preview or download, we'll use a custom field provided by Meta Box.

So, we need the Meta Box Lite to have a framework that allows creating custom post types and custom fields.

Besides, we need some Meta Box’s extensions for advanced features:

• MB Custom Post Type: to create a custom post type for e-books;
• MB Builder: to have a UI on the back end to create custom fields visually.

The last one is Zion Builder and its Pro Version to build the page.

Create a Custom Post Type

Go to Meta Box > Post Types to create a new one for the e-book.

After publishing, the created custom post type will be displayed in the admin dashboard.

Create Custom Fields

Go to Meta Box > Custom Fields to create a new field group.

In this practice, I just create one custom field to store the PDF file for the e-book. As usual, you can use File Advanced to select or upload files. However, Zion doesn’t support getting data from it. So, I use File Input to upload a single file.

I’ll keep this field as the default, then there is no special setting for this field.

If you want to store any extra information about the e-book, just add the corresponding field type and set them as you go.

After that, move to the Settings tab. Set the Location as Post type, and select E-book to apply the field to this post type.

Then, go to the post editor, you will see the created custom field.

Just fill in the information, and click on the Select button to upload a file.

These are some posts I had.

Display E-books on the Archive Page

Create a New Page

Create a new archive page for the e-books first.

Go to Pages > Add New to create a new one as usual.

Then, edit the template with Zion.

First, add the Section element to cover all the content of the page.

To set the layout for posts, add a Column element.

In the Advanced tab of the Column, enable the Repeater Provider to display all the posts from the wanted post type.

In the query type section, choose the Query builder, then set the Post type as E-books.

You should also enable Repeater Consumer to display all the posts in the chosen post type.

Now, just add some elements to display the e-book information.

Display E-books Information

First, add an Image element.

There will be an icon for using dynamic data that allows us to get data for this element from a source. Click on it and choose the Featured image.

Next, add a Text element. Use dynamic data and select the Post title.

Continue to add a Text element for the description of the e-book.

Use dynamic data and select the Post content.

Add the Buttons for Download and Preview

To have the Download and Preview buttons, we use the Button elements.

For the Download button, click on Button text and rename it.

To connect the button to the PDF file, move to Link, click on Use dynamic data and choose Meta Box Field. Then you can select the field that you used to store the PDF file.

Click on the Link Attribute feature.

Set the Attribute Key as Download.

For the preview button, do the same. Also add the Button element.

Set the dynamic link for it as the field we used. However, after that, there is no need to add advanced settings to the button since previewing the attached file is the default function of the button. It means that when visitors click on it, the uploaded file will be shown automatically.

Style the Page

Back to the page editor with Zion. Just change some parameters and settings in the Styling and Advanced tab of each block.

Finally, we will have a page with a better look.

Last Words

As you can see, using Meta Box and Zion makes it simple to add download and preview buttons to your website. If you're working with a different page builder or only using Meta Box, feel free to check out other posts in this series for more guidance.

Hopefully, you can create the Download and Preview buttons with Meta Box and Zion easily after reading our tutorial. Don’t hesitate to share your results with us in the comments. And, follow our channel to see more helpful tutorials!

• How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
• How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
• How to Create Download and Preview Buttons - P3 - Using MB Views
• How to Create Download and Preview Buttons - P4 - Using Meta Box and Kadence
• How to Create Download and Preview Buttons - P5 - Using Meta Box and Zion