Adding CTA buttons in Marketo Landing Page | Community
Skip to main content
D
DeepthiSw
Level 3
February 6, 2023
Solved

Adding CTA buttons in Marketo Landing Page

  • February 6, 2023
  • 3 replies
  • 4482 views

Hi Team,

Need assistance with adding CTA button in Marketo Landing page.

Thanks,

Deepthi.

 

 

 

 

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Dave_Roberts

 

Basic Button Code:

Here's a snippet of HTML that'll create a basic centered black button with white text inside any Rich Text Element on a Guided LP:

 

<div style="text-align: center;"> <a href="#" target="_blank" style="padding: 8px 20px; background-color: #000; color: #fff; text-decoration: none; display: inline-block;">Button Text</a> </div>

 

You can apply this code by clicking into any Rich Text (Editable) area on your Landing Page from within the Landing Page Editor. When you double-click an editable Rich Text area, it'll pop up the Rich Text Editor panel. 
From there, you click the HTML icon in the tool bar which brings up another pop-up with the code view for that section.

Paste the code snippet above wherever you'd like to place the button. Click the SAVE/APPROVE button to get back to the Rich Text Editor dialog popup and then click the SAVE/APPROVE button once again to apply this to your page. 

 

Here's a look at what to expect (just the button, the dotted lines are for context only):

 

To make changes:
To left/right/center align the button, change the "text-align" on the <div> from "center" to: "left", "right" or "center".

To change the background color of the button, update the #000 hexcode set on the "background-color" style.
To change the text color of the button, update the #FFF hexcode set on the "color" style.

To update the padding (top and bottom) change the padding value of 8px to your desired value.
To update the padding (left and right) change the padding value of 20px to your desired value.

 

Things to think about:
This is a REALLY simple button setup, it does not include things like hover, focus and active states.
Normally this kind of thing is handled in combination with CSS -- you'd build a class for your buttons (rather than styling them inline on the element) and then build out the hover, focus and active states in the CSS as well. Here's a link to a w3schools article which explains and demonstrates a CSS button setup for reference: https://www.w3schools.com/css/css3_buttons.asp 

 

3 replies

Darshil_Shah1
Community Advisor and Adobe Champion
Darshil_Shah1Community Advisor and Adobe Champion
Community Advisor and Adobe Champion
February 6, 2023

This seems like an overly broad question. Are you looking for any specific kind of button/button functionality that users here could help with? I bet there would be plenty of threads/documentation around creating a normal button on a Marketo LP.

 

    D
    DeepthiSwAuthor
    Level 3
    February 7, 2023

    A Normal CTA button which is hyperlinked, clicking on button will direct to a webpage.

    SanfordWhiteman
    SanfordWhiteman
    Level 10
    February 7, 2023

    "Normal" is still quite vague, as there are many different ways to create a clickable button on a webpage. (Unlike in an email, where the HTML markup options are limited.)

     

    The <a> and <button> tags are common (and ancient!) parts of HTML, and you most likely are referring to one of those. Darshil and I are both wondering what your specific challenges are and what you've tried so far.

     

     

    Katja_Keesom
    Community Advisor and Adobe Champion
    Katja_KeesomCommunity Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    February 7, 2023

    Let's start at the beginning: Do you have a guided template in place for your landing pages, or are you creating a page from scratch?

      Dave_Roberts
      Dave_RobertsAccepted solution
      Level 10
      February 7, 2023

       

      Basic Button Code:

      Here's a snippet of HTML that'll create a basic centered black button with white text inside any Rich Text Element on a Guided LP:

       

      <div style="text-align: center;"> <a href="#" target="_blank" style="padding: 8px 20px; background-color: #000; color: #fff; text-decoration: none; display: inline-block;">Button Text</a> </div>

       

      You can apply this code by clicking into any Rich Text (Editable) area on your Landing Page from within the Landing Page Editor. When you double-click an editable Rich Text area, it'll pop up the Rich Text Editor panel. 
      From there, you click the HTML icon in the tool bar which brings up another pop-up with the code view for that section.

      Paste the code snippet above wherever you'd like to place the button. Click the SAVE/APPROVE button to get back to the Rich Text Editor dialog popup and then click the SAVE/APPROVE button once again to apply this to your page. 

       

      Here's a look at what to expect (just the button, the dotted lines are for context only):

       

      To make changes:
      To left/right/center align the button, change the "text-align" on the <div> from "center" to: "left", "right" or "center".

      To change the background color of the button, update the #000 hexcode set on the "background-color" style.
      To change the text color of the button, update the #FFF hexcode set on the "color" style.

      To update the padding (top and bottom) change the padding value of 8px to your desired value.
      To update the padding (left and right) change the padding value of 20px to your desired value.

       

      Things to think about:
      This is a REALLY simple button setup, it does not include things like hover, focus and active states.
      Normally this kind of thing is handled in combination with CSS -- you'd build a class for your buttons (rather than styling them inline on the element) and then build out the hover, focus and active states in the CSS as well. Here's a link to a w3schools article which explains and demonstrates a CSS button setup for reference: https://www.w3schools.com/css/css3_buttons.asp 

       

      D
      DeepthiSwAuthor
      Level 3
      February 7, 2023

      Thanks Dave, really helpful.

      Dave_Roberts
      Dave_Roberts
      Level 10
      February 17, 2023

      @deepthisw would you mind helping me out by marking the solution I provided as correct in this post if you found it to be helpful? This helps me in here in the Community to build up my profile. Let me know if there's anything else I could help with on this one if not.

      Terms & ConditionsAccessibility statement

      Loading footer...