Designing a Download Page

Brian Gardner

A few nights ago I decide to make a change here on the Get Free Content section of my website. I was very unpleased with how I was presenting the resources that I offer, and really wanted them to stand out.

Thankfully, my good friend Rafal Tomal had provided the inspiration I needed for the change, so I didn’t have to look far. He recently made some design resources available where he did an amazing job with the design of his download area.

With his permission, I used his design concept for my own member area and will show you just how easily I did that with CSS and HTML.

Designing the Downloads

There’s only a few simple steps you need to take to present your downloads in an appealing way. The first thing you need to do is use some HTML to wrap the contents of the download block. Below is the code that I’ve used for mine:

Now you need to style the component, and here’s the CSS that was required:

Be sure that you’ve loaded Dashicons through your functions file to get the icons to display. If your theme doesn’t already do that, you can do it with this code:

I hope that you enjoyed this Genesis tutorial. I have also published a list of Genesis code snippets, so feel free to use anything you see there.

If you are interested in building your own membership site, I highly recommend using the Rainmaker Platform. This is what I’m using for my member area.