Overview
This article helps you add and manage call to action (CTA) buttons on your careers site. CTAs guide candidates toward important actions such as Search jobs, Apply now, Register, or Upload CV. You can add CTA buttons through editable content areas, Design Studio sections, Admin Area CMS, or Theme Content, and style them using decoration tags to match your brand.
Key benefits
Control where CTA buttons appear across your careers site to guide candidate actions.
Style buttons consistently using decoration tags without requiring developer involvement.
Choose from primary, secondary, and sized button styles to match your brand and show which actions are most important.
Request a visual reference page showing all available button styles and decoration tags for your theme.
Improve candidate experience by making key actions clear, visible, and easy to complete.
Before you start
Before adding or styling CTA buttons, make sure you have:
Admin access to your website.
Knowledge of which pages and content areas you want to add CTAs to.
The destination URLs or internal links your CTAs should use.
Understanding of your brand colours and which actions should be primary (most important) versus secondary.
📌 Note: Availability of styled buttons and decoration tags varies by theme and site configuration. Contact Support via the Digital Assistant if you're unsure which options are available on your site.
Understanding where you can add CTA buttons
Depending on your site setup and theme version, you can add CTA buttons in several areas.
Front-end editable areas
You can add or edit CTA buttons in editable text areas, aka lava boxes, on the front end, such as text blocks you edit in Edit Mode where these are used on your site.
See more detailed steps in the Adding a styled CTA button in an editable area section below.
Admin Area CMS content boxes
Some page types have structured content managed through the Admin Area CMS. Where available, you can add CTA buttons inside these content boxes using the same decoration tag approach as front-end editable areas.
Typical examples include blog pages, consultant pages, and discipline or sector pages, depending on your configuration.
Design Studio sections with built-in CTAs
Many Design Studio section templates include built-in CTA buttons, such as hero or banner sections. These pre-built sections provide consistent CTA placement and layout, with button styling that automatically follows your theme without building a CTA manually in a text area.
Theme Content for text and link management
Some CTA labels and destinations are controlled via Theme Content. This is used to manage theme-level copy such as header links, footer links, sidebar content, and other theme-controlled labels that are not directly editable on the page.
This is particularly useful when CTA text is not directly editable through the front end or Edit Mode.
Understanding related tools and areas
These areas are commonly referenced when working with CTA buttons on your site.
Edit Mode lets admins make live content changes directly on the page using a visual editor, such as updating text, images, and forms.
Design Studio lets you update and customise your site's appearance to match your brand and may include sections with built-in CTAs.
Admin Area CMS lets admins manage structured content such as blogs, consultants, and discipline pages in the backend.
Theme Content lets you update fixed labels and links that form part of your theme, such as header, footer, and sidebar text.
Understanding styled buttons
Depending on your theme and site configuration, the editing toolbar may include support for styled buttons.
Styled buttons are preset styles aligned to your site's theme and brand colours. They combine a label and a link to create clickable elements with consistent styling. This lets you create CTAs without developer changes.
📌 Note: Availability of styled buttons varies by theme and site configuration.
Adding a styled CTA button in an editable area
Follow these steps when adding a CTA button inside an editable text area using Edit Mode or another editor that supports decoration tags.
📌 Note: In editable content areas, you must link the text before you apply the button style using a decoration tag.
Log in to your Admin Area.
Go to the page where you want to add the CTA button.
Click Edit Page.
Click into the editable content area where you want the button, then place your cursor at the desired location.
Enter the button label text, such as Register now.
Highlight the label text.
In the toolbar, click the link option, then add the URL or link you want to use.
Click Submit to confirm the link.
Highlight the linked text again.
In the toolbar, click the Decoration tag icon.
In the Mayon field (the field that controls text decoration styling), enter one of the available button decoration tags such as button.
Click Submit to apply the style.
The linked text is now styled as a button, and changes show immediately after you click Submit.
🤓 Tip: If you are unsure which link to use, follow your internal guidance on link requirements and formats.
Using button decoration tags
When styling a CTA, you apply a decoration tag that controls the appearance of the linked text.
Primary button styles
Use these options when you want the CTA to appear as a primary action on the page:
button
button-outline
Secondary button styles
Use this option when you want a secondary CTA style:
button-inverse
📌 Note: Button decoration commands can vary depending on your theme and when your site was created. Contact Support via the Digital Assistant if you are unsure which commands apply to your site.
Changing button size
To change CTA size, apply one of the following decoration tags in addition to the style tag.
button-large
button-small
Typical sizing values
The values below describe typical size relationships. Your site may use different values if you have a custom design.
Base size (default): 16px
Large: 19px (120% of base)
Small: 13px (80% of base)
Requesting a typescale test page
A typescale test page displays all available decoration tags and button styles for your theme in one visual reference page.
Understanding typescale test pages
A typescale test page is a dedicated page created on your site to display the text styles available, decoration tags including button decoration tags, and how each style appears when applied to content and CTAs on your theme.
This gives you a visual reference when deciding which tags to use for buttons and other text.
Requesting a typescale test page from Support
Contact your Support team via the Digital Assistant through your admin area.
Ask for a typescale test page to be added to your site.
Provide any relevant details, such as which site or environment the page should be added to.
Support will confirm once the page has been created so you can review the available styles and CTA button options.
Best practices
Use specific labels such as Apply now or Search jobs instead of vague wording like Click here.
Use a button colour that contrasts with the surrounding content so CTAs are easy to spot while staying within your brand palette where possible.
Choose a button size that is easy to tap on mobile without feeling intrusive, and use size to show priority when multiple CTAs appear together.
Use familiar button shapes such as rectangles or pill shapes consistently across your site.
Ensure CTA labels are readable with appropriate font and strong contrast between text and button background.
Place CTAs near decision points such as Apply now near job details or Register near search results so the next step is obvious.
Give CTAs enough spacing so they are not crowded and remain easy to tap on mobile devices.
Test changes one at a time when your theme allows, such as only the primary CTA colour, and compare performance metrics before and after the change.
📌 Note: Regular testing and monitoring help maintain optimal performance and user experience across all devices.
FAQs
Q1: I cannot see button options or decoration tags in my editor. Why not?
Answer: Your theme or editor may not support styled buttons in that specific area. Try another editable area or contact Support to confirm which areas support decoration tags on your configuration.
Q2: I applied a decoration tag but it does not work as expected. What should I check?
Answer: Button decoration commands can vary by theme and by the date your site was created. Contact Support with the exact tag you applied and they can advise based on your site setup.
Q3: What is a typescale test page and how do I request one?
Answer: A typescale test page displays all available decoration tags and button styles for your theme in one visual reference. Contact Support and ask for a typescale test page to be added to your site.
Q4: Where should I place CTA buttons for best results?
Answer: Place CTAs near decision points where candidates are ready to take action. For example, place Apply now near job details, Register near search results, and contact CTAs on service or consultant pages.
Q5: Can I use multiple button styles on the same page?
Answer: Yes, you can use different button styles to show hierarchy. Use primary button styles for your main action and secondary styles for supporting actions.
Q6: What information should I provide when contacting Support about CTA issues?
Answer: Include the page URL where you are trying to add or edit the CTA, where you are editing such as Edit Mode or Design Studio, the exact decoration tag you applied, and what you expected versus what actually happened.
Q7: How do I know which button size to use?
Answer: Use button size to indicate priority. Primary actions typically use default or large sizing, while secondary or less important actions use small sizing. Ensure all buttons remain easy to tap on mobile devices.
Q8: Can I change the colours of CTA buttons?
Answer: Button colours are typically controlled by your theme settings and decoration tags. If you need different colours beyond what decoration tags provide, contact Support to discuss theme customisation options.
Q9: My CTA button is not clickable. What should I check?
Answer: Confirm you added the link before applying the decoration tag. Highlight the text, check the link is still present, then reapply the decoration tag if needed. Test the button on the front-end to confirm it works.
Q10: Are there accessibility requirements for CTA buttons?
Answer: Yes, ensure CTA labels are descriptive and readable with strong contrast between text and button background. Buttons should be keyboard-accessible and large enough to tap easily on mobile devices.