Learn to add a Call to Action (CTA) Button to the Header Section of your page.
In this article:
Add a call to action to your header
Include a Call to Action in your Header to encourage your page visitors to open a separate page, purchase an offer, and more.
Learn more about the Call to Action
How to add a Call to Action Block to your Header:
- Open the Website tab from your Dashboard.
- Select the Pages tab.
- Open the page editor for your Page. Learn more
- Navigate to the sidebar and click Header.
- Then, click Add Content.
- From the list, click Call to Action to add it to your Header.
- Customize the Call to Action Text, Button Action, and appearance.
- To change the location of the Call to Action Button, click and drag
=next to the block in the sidebar editor. - Click Save to keep your changes:
Customizing your call to action in your header
Text
Enter your custom text to display on your CTA Button. Use this opportunity to communicate to your users what the button will do.
Button Actions
Select a Button Action:
- Go to a Landing Page
- Go to a Checkout Page
- Download a file
- Go to a URL
- Open a two step optin popup
- Go to a section on the page
Open in New Tab
Enable this setting to trigger your action in a different tab of your user's browser.
Button Background Color
Click the Button background color to select a color from your site color palette.
If you prefer to use a custom color, click the color wheel and then either enter your RGB color code or use the sliders to choose your color:
- The vertical bar allows you to select the hue.
- The square box allows you to select a color.
- The horizontal bar allows you to select the transparency of your color.
Button Text Color
Complement your Button Background Color with a different Button Text Color.
Click Button Text Color to select a color from your site color palette.
If you prefer to use a custom color, click the color wheel and then either enter your RGB color code or use the sliders to choose your color:
- The vertical bar allows you to select the hue.
- The square box allows you to select a color.
- The horizontal bar allows you to select the transparency of your color.
Button Width
Adjust the width of your Button:
- Full: fill the width of the button area
- Auto: automatically adjust the width to fit the text
Button style
Change the style of the Button to display:
- Solid colored button
- Outline of your Button Background Color
Button Size
Adjust the size of your Call to Action Button:
- Small
- Medium
- Large
Changing the size of your Call to Action will change both the button background and text size.
Border Radius
Customize your Call to Action Border to appear more rounded or squared.
Stretch Block
Enable the Stretch Block setting to fill the remaining space of the Header section.
A good rule for using the Stretch Block feature is to enable the Stretch Block feature for the Block on the far left of your Header section.
For example, if you want to have your Logo on the far left side of your Header and a Menu and User Menu on the far right side, select Stretch Block for your Logo:
Control the alignment and positioning of your Blocks by adjusting the Stretch Block and Block Alignment for the Blocks in your Header.
Text Alignment
Adjust the horizontal alignment of your Block in the Header to appear more left, centered, or right-aligned.
Keep in mind, this setting will be impacted by surrounding Blocks and their positioning and alignment.
And that's how to add a Call to Action to your Header! Please vote below and let us know if you found this article helpful. We value your feedback. Thanks for being the best part of Kajabi!
