How to Create Interactive Charts and Graphs for WordPress [Tutorial]

Would you like to add a chart or graph to the home page that looks great and is interactive? In this tutorial, we’ll show you how to create attractive and interactive charts and graphs with ease.

It’s always easier to get users to understand a concept when they can visualize it. But what if the concept is abstract, complex, or multifaceted? How do you choose a single image or illustration that perfectly encapsulates it?

You don’t have to. Data visualizations like charts and graphs can be a highly effective way to attract visitors’ attention and then break a concept down into terms they understand. By taking it a step further and turning that data visualization into an interactive graphic, you’ll increase engagement with your content even more.

In this tutorial, we’re going to show you how to create an interactive chart or graph for your home page using the Charts Template Showcase.

Table of Contents:

How to create hero sections with interactive charts and graphs

It doesn’t take much to make a compelling argument with data. All you need is one powerful chart or graph that looks good and is easy to interact with.

With the Charts Template Showcase, there are four different data visualization templates to choose from:

In this tutorial, we’re going to show you how to customize the orange bar graph template and repurpose it for a SaaS company’s website:

Need an intro to Slider Revolution before we begin? Start with these resources::

Step 1: Delete any slides you won’t be using

There are four slides in this template. While the content differs in each, the layout and components of each are the same.

So if you decide to create an interactive chart instead of a bar graph like we’ll be doing, that’s fine. You can still follow along in this tutorial. Just note that the screenshots may look different from what you’re working on.

With that said, what you want to do in this step is delete any of the slides you don’t need. To do this, go to “Slides” in the toolbar. Then, hover over the slide you want to delete and click on the trash can icon to remove it:

Slider Revolution will show you a thumbnail of the slide to the right of it so you can confirm that you’re deleting the correct one.

Repeat this process for the other two slides you’re eliminating.

Learn more:

Step 2: Update the background

There are three backgrounds to customize in this step.

The first is the slide background. Currently, there is an HTML5 video playing in the background. If you want to see what it looks like without the dark filter over it, click on “Navigation Options” and a preview of it will appear in the canvas:

If you decide to replace this background video with another one, try to keep it as basic and abstract as this one is. Otherwise, you may run into issues with text readability.

Whatever you decide to do, go to “Slide Options” and “Background”. To replace the video, click on the “Media Library” button to upload your own. To change the video to a color background, select Colored from the Type dropdown.

To change the background to a color gradient, click on BG Color, switch to the gradient view, and then apply your colors:

Note: There’s currently a dark overlay on top of the slide, so any video or color changes you make will appear darker than the original. If you decide to remove the overlay, we’ll show you how to do that in the next step.

The second background to edit is under “Module Options” and “Layout”. While this background isn’t visible in the slide, it’ll temporarily be visible when the section first loads on a visitor’s screen.

To create a seamless transition, make the module background and slide background the same color. Scroll down to “Module Background” and then update the BG Color accordingly.

The last background to edit is the block that fills the right-half of the screen. This layer is called Half-Colored-Bg in the timeline.

The editing process is similar to what you did with the other backgrounds. However, you’ll first have to select the layer from the timeline, go to “Layer Options”, and then change the color under “Style”:

Save your changes before moving on.

Learn more:

Step 3: Remove the overlay

If you’d like to let your colors or other background graphics shine through, you can edit the overlay to be lighter or remove it entirely. We’re going to delete it from our slide.

To do this, locate the layer called Overlay in the timeline:

Hit the “delete” key to remove it. If you’d prefer to keep it, undo the change and then edit the radial gradient under “Layer Options” and “Style”.

Learn more:

Step 4: Edit your text and button layers

There are four text layers in Row-9:

  • Caption is the colorful capsule-enclosed text in the top-left
  • Headline is the header text below the caption
  • Description is the paragraph in the top-right
  • Cta-Button is the text link below the description

To edit these layers, select them one at a time in the timeline. Then, use the “Layer Options” settings to customize what they say and how they’re styled:

Use “Content” settings to change the text and alignment.

Use “Style” settings to change the font, size, weight, and color. You can also adjust the background color, border, and spacing for your button here.

Pro tip: You want to create a good contrast between the text and data visualization, so that your visitors’ eyes are drawn to the center of the page. That said, your text should be large enough to be readable at any size, so make small adjustments to the sizing of your text until you find the right balance.

Use “Size & Pos” if you need to resize or reposition any of these layers.

Use “Adv Style” to add a text shadow, text stroke, or other advanced customizations.

The button layer can be edited using the same settings as the text layers. You can also customize its hover state under “Hover” settings. As of now, the only thing that changes when someone hovers over the button is the line underneath grows more prominent.

Learn more:

Step 5: Customize the chart’s content

The Chart layer located in the center of the slide can be edited by going to “Layer Options” and “Charts”. From here, there are eight settings to consider and configure. Let’s go through them one by one:

Source

Here is where you’ll update the data that will create your bar graph or chart:

You can either upload a CSV file with the values or you can copy and paste them in the same format as what’s in there now.

Chart

Since you selected this slide for its data visualization type, skip past the “Basics”. The next section should be named after one of your data labels.

In this section, you’ll update the colors of the main components of the graph:

  • Chart (bar)
  • Fixed labels
  • Hovered labels
  • Hovered background

If you want each of the bars in your graph to use a different color, you can switch the Altern. Colors toggle on to do so:

You don’t need to make every inch of the slide flashy in order for it to be effective. Even a subtle gradient will work as it stands out well against the surroundings.

Grid

While you want to keep the graph in the center of the computer graphic, you can make other changes if you want to give the bars and corresponding labels more room.

You can make changes to the padding and margins under Size & Space:

If you’d like to add vertical lines to the graph or to edit the style of the horizontal ones, use the settings at the bottom to do so.

Labels

Right now, there are no x-axis or y-axis labels for this graph. If you want visitors to understand the data in your graph or chart, labels are a must. To add them, toggle both settings ON.

You can now customize the label text, font, style, size, color, and position for each:

Note: If you made major adjustments to the margin or padding of the graph, you may need to reposition the labels. Just be careful. You don’t want them getting pushed outside the layer as they’ll look cutoff on the frontend of the site. Be sure to preview your work to ensure that the labels look exactly as you want them to — and on all devices, too.

Legend

When activated, this will add a legend to the graphic. This serves as a key so that visitors understand what they’re looking at when there are multiple variables at play. For instance, if we were comparing data and there were two bars for each datapoint, we could use the legend to explain what each color represents.

A legend isn’t needed for what we’re doing here, so we’ll leave this setting deactivated.

Values

Values refer to the data along the axes as well as the interactive data that appears when a user hovers over the graphic. Customizing them is similar to customizing the labels.

First, change the font to match your branding. Then, edit the styles — e.g. size, weight, color, etc.

There are a few other things to edit before we move on:

  • Pre stands for “prefix”
  • Suf stands for “suffix”
  • Decimal sets the rules for how many decimal places to include with each number

For our purposes, we want to remove the decimal places since they’re irrelevant and take up too much room. We’re also going to remove the suffices that were in there from the template. While these can be useful for measurements, our values refer to number of respondents and don’t need them:

Interactions

In this section, you get to dictate what appears when the user hovers over the chart. Test it out in the preview of your slide.

If you want something else to appear — like the data x-axis or a vertical line — make those adjustments via this setting. If you’re fine with how it looks, leave this one be.

Animation

There are two settings here. The first allows you to configure how long the animation lasts for. The other allows you to delay the animation.

If you click on the “Play Animation” button, it’ll show you in the canvas what it currently looks like. Feel free to adjust if you want to see it play out a different way in yours.

Learn more:

Step 6: Edit the computer video content

We removed the video background component from the slide because we wanted to keep the space surrounding the computer as simple as possible. However, we do want to keep a subtle video background behind the chart to draw extra attention to it.

Pro tip: Choose a video file with an abstract concept — one that doesn’t have highly recognizable objects in it. That way, it’ll serve more as a textured background animation instead of something more realistic that could distract from the data.

To replace the existing video file with your own, click on the Change Video layer in the timeline. Go to “Layer Options” and “Content”. Then, upload your new file to the media library:

Open up the slide preview to confirm that the new video adds a dash of character to the data visualization without overwhelming it.

If you’re happy with the update, save your changes. If you feel like it’s not dark enough, consider adding an overlay to the video instead of replacing it. Scroll down to the “Overlay” section and then set the style and colors to be layered over your video.

Learn more:

Step 7: Remove the global layers and navigation

The last thing we have to do is delete the global layers and deactivate the navigation.

To access the Global Layers, go to “Slides” in the toolbar and select Global Layers from the dropdown.

There’s one big component in there called Row-17 and it includes a logo and website menu links. We don’t need any of this stuff since our WordPress theme will add these components for us.

To remove everything at once, click on Row-17 and hit the “delete” key:

Return to your slide and open “Navigation Options”. The only navigation type activated is Arrows:

To deactivate it, select it from the options and then switch off the toggle.

Open the preview of the site and make sure you’re happy with everything. If you need to adjust colors now that all of your components are in place, go ahead and make those changes now. It won’t take you more than a minute or so to tweak everything.

When you’re done, save your changes.

Learn more:

Impress your visitors with beautiful and interactive data visualizations

Want to make a compelling argument on behalf of your brand or product? Data is the way to go. It’s near impossible to ignore the facts, especially when they’re right in front of you in a big, bold, and interactive format.

All you need is the Charts Template Showcase and about an hour to create an interactive chart or graph that visitors will be immediately drawn to on the home page.

How to Create Interactive Charts and Graphs for WordPress [Tutorial]

FREE: Your Go-To Guide For Creating
Awe-Inspiring Websites

Get a complete grip on all aspects of web designing to build high-converting and creativity-oozing websites. Access our list of high-quality articles and elevate your skills.

The Author

Kezz Bracey

Learn everything you can. Teach everything you know.

For further information or clarification on any topic discussed in this blog's posts, feel free to leave a comment on the post or contact me at [email protected].

Liked this Post?
Please Share it!

Leave a Reply

Your email address will not be published. Required fields are marked *