How to Create Affiliate Link Boxes Next to Blogs Using Breakdance

Adding an affiliate box alongside your blogs are quite easy in Breakdance. Create two columns of content and place the box as a div somewhere in the right column.

Christy Cañete

Updated September 6, 2023

a magic box with a dollar sign floating above it in the middle of the plains 4k photorealistic

a magic box with a dollar sign floating above it in the middle of the plains 4k photorealistic

Reading Time: 6 minutes

Planning to monetize your blog page but don’t know where to start?

There are many ways to integrate revenue streams into your blog. One effective method I’ve found is using an affiliate link box. It’s a discreet yet practical way to promote products or services related to your niche. Just throw it on the side of the blog and you're good to go.

In this tutorial, I’m going to show you a step-by-step guide on how to create a custom blog page with an affiliate link box using Breakdance.

Why Add an Affiliate Link Box?

Adding an affiliate link box into your blog is a great way to earn commissions. It’s not as intrusive as a pop-up but still compels your audience to take action. It increases the chances of engagement.

When properly placed on your blog page, an affiliate box provides an opportunity for your readers to explore or even purchase the products or services you believe in. You're already selling the product in the article anyways, so it's not intrusive.

Thankfully, affiliate link boxes can be easily done in Breakdance. Everything you need is available in the website builder. Just add some creativity to make the box visually appealing. Then, you’re all set!

How to Create A Blog Page With an Affiliate Link Box in Breakdance

Step 1: Add a Breakdance Template

We’re going to assume that you already have Breakdance installed into your WordPress account.

Let’s start by navigating into your WordPress dashboard. On the side menu, go to Breakdance > Templates. Click Add Template and choose Single Post.

We want to tell WordPress to use this template and override the other existing templates you might have. Make sure you set the priority number higher than the other templates. You can set this on the Settings.

In this example, I’ve set the priority to 20.

Once you’re done, click save.

Step 2: Customize Your Blog Page

There are many ways to customize your blog page in Breakdance. It all depends on your preferences and creativity. 

I’ve actually created a separate tutorial on how to create a custom blog posts in Breakdance.

In this tutorial, let’s say we wanted to build a blog page with post tags on the top, followed by a post title, post excerpt, featured image, post content, and an affiliate link box on the right side of the page.

To do that, let’s first edit the Single Post template. 

a. Click Edit in Breakdance.

b. Click Add on the top left corner of the page (or the ‘+’ symbol at the center of the page). When editing your page for the first time, I highly recommend adding a section first. 

c. Let’s create post tags on the top of our content. There are many ways to do this. One way is to add a Menu Builder. You can then edit the texts and add links later.

d. Adjust the spacing to your liking. In this example, I’ve set the top and bottom paddings to 10px so that the tags won’t take too much space.

e. Add another section for the content. Then click Columns. 

Here, we wanted to create a two-column page. I’ve adjusted the width to 75% and 25% so that there’s more room for the content on the left and a small space for the affiliate link box on the right. 

Note: To adjust the column width, you can simply drag the column or go to Size > Width and enter a value. 

f. Add Headings for the title. We want the post title to appear dynamically. To do this, simply click the little icon you see beside the text. 

When a pop-up window appears, choose Post Title under Post section.

Now, you should see the title of one of your published posts. In this example, we have the ‘Hello world!’ article. Don’t forget to adjust the spacing between elements.

g. Next, we need to add a post excerpt. So go ahead and add Text. Make it dynamic by clicking the little icon beside the text, and choose Post Excerpt.

h. Add a dynamic featured image on your blog page. On the side menu, add Image.

Then, click the dynamic icon and choose Featured Image.

i. Finally, let’s add dynamic post content into the blog template. On the side menu, click Text > dynamic icon > Post Content.

Step 3: Create the Affiliate Link Box

Creating the affiliate link box is actually a straightforward process. And again, there are many ways to do this. There’s no one-size-fits-all approach. 

In this tutorial, let’s just create a simple box with a text and button. Please note on mobile, due to the way the 75/25 category is laid out, the box won't be seen (it'll be under the inner content of the blog).

a. To start, let’s add Div. Set its width to 100%.

Add a background color to the div element to make it standout.

b. Add Headings. In this example, I’ve added the text “Get 20% off using our code.” Style the text headings as you wish. Go to Typography and choose your desired color, alignment, and font size.

c. Add a Button element. Use call-to-action text on the button such as ‘Click Here’ , ‘Sign Up’, ‘Learn More,’ or ‘Buy Now.’

d. Under Style, set the button shape, background color, font color, and alignment that fits to your branding.

3. Adjust the spacing accordingly. You can set the values on the settings, or simply drag the elements as shown in the image below.

Step 4: Make the Affiliate Box Sticky

Keeping your affiliate box visible all the time is a neat way to catch your reader’s attention. And the best way to do this is to make your affiliate link box sticky.

Go to Advanced > Sticky. Here, you can choose a position - top, center, bottom. I recommend the top position so that the box remains on top display as your readers scroll down.

Step 5: Test With Other Posts

I’ve created another post in WordPress using the old-fashioned way. I highly recommend doing this because it’s easier than editing posts in Breakdance.

Here, I’ve added the title, content, post excerpt, and featured image.

Once you’ve published your new post, you should see the content with the affiliate box on the top right.

What’s Next?

Congratulations - you’ve just created a custom blog page with an affiliate link box using Breakdance!

Don’t hesitate to experiment, explore, and make the most out of this website builder. Turn your blog page into an engaging and potentially profitable space. Adjust your style to suit your requirements. Your creativity is the limit!

Want to Learn Even More?

If you enjoyed this article, subscribe to our free newsletter where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.


Written by Christy Cañete

Christy Cañete is a software engineer who's passionate about front-end web design. Not only can she code, but she writes too! She loves breaking down technical topics into super easy tutorials. If you're looking to learn without the jargon, she's your go-to.

Subscribe
Notify of
guest

0 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments