Writers Building Websites

Writers Building Websites

Add a Primary CTA Button to Your Author Website

Create a single primary CTA button to direct visitors, boosting engagement and conversions on your author website with a clear, compelling action.

Last Updated: 10 December 2024

Introduction

In this lesson, you’ll learn how to add a primary call-to-action button to your Breakdance-powered author website, guiding visitors toward a single, purposeful step. We’ll cover mapping the button text and link, customizing its design for maximum impact, and assigning a unique ID for anchor linking. By integrating a well-placed, compelling CTA, you’ll improve visitor engagement, increase conversions, and build a more effective online presence as an author.

Add the Primary Call to Action Button

  • Click on the Book Details column
  • Add a Button
  • Map the Button text to the PRIMARY CTA BUTTON TEXT 

My naming conventions are not exciting but they do make life easier when setting up a website.

  • Map the Button link to the PRIMARY CTA BUTTON URL Custom Field
  • Go to the Design TAB
  • Set the button style to primary.

Just like in the previous lesson I know I’ll want extra breathing space between the primary CTA button and the element we are going to build in the next couple of lesson.

  • Staying in the design tab go to SPACING
  • Add 3 rem

This 3 rem will be added to the default 3 rem gap for the column giving us a 6 rem gap between this button and the next element.

Add element ID

Before we finish this lesson and move on to the next element in the Book Details COlumn we’re also going to add an element ID to our PRIMARY CTA button. When we add an ID to an element in Breakdance we can use it as an anchor link meaning instead of sending someone to dirkvolcano.com/books/adventure-danger and hoping they go to the primary cta button or other element we can use the element ID in a link and send the visitor right there.

Let’s set up the ID and I’ll show you an anchor link in action.

  • From the PRIMARY BUTTON ELEMENT click on the SETTINGS TAB
  • Go to ADVANCED
  • Enter primecta in the ID field
  • Save

Now I can link to https://dirkvolcano.com/books/adventure-danger/#primecta

The visitor is taken to the page which then scrolls direct to the button.

This isn’t a great link to verbally share with others BUT it is a great tool for internal linking that you’ll see in practical action in a later lesson.

Summary

You’ve now mastered creating and styling a primary CTA button within your author website’s custom Breakdance template. By mapping the text and URL, adjusting spacing, and assigning an element ID for direct linking, you’ve set the stage for a more focused visitor experience. With this single, powerful prompt, you’ll streamline decision-making for your readers, enhance your site’s usability, and ultimately boost the conversion potential of your author platform.

Next Lesson

Now I’m going to exit out of the Breakdance Editor as we need to go back to the WordPress Admin Dashboard for the next lesson where we are going to create our first global block.

Stephen Gordon
Stephen is the founder of Writers Building Websites and brings over a decade of experience as a freelance marketer specialising in publishing. He is also an author.

Index

Copyright © 2024 Writers Building Websites | All Rights Reserved.