Call to Action

  • Unknown's avatar
    kaitlyndoty · Member ·

    I am using the free Edin form and I am having trouble adding a call to action. All my google searches say I need to install a plug in but I do not want to update to the business plan. Thank you for your help!

    The blog I need help with is: (visible only to logged in users)

  • pauloeaquino · Staff ·

    Hi Kaitlyn,

    I recommend starting here if you haven’t already:
    How to Make a Call-to-Action Button
    https://en.support.wordpress.com/beginning-html/how-to-make-a-call-to-action-button/#inline-css-button-styles

    Specifically, the part about inline CSS button styles should be of interest.

    Try it out and see if it’s what you’re looking for. Otherwise, feel free to ask any other questions here.

  • Unknown's avatar
    kaitlyndoty · Member ·

    Hi,
    Unfortunately that did not help me and I am still lost. I’ve switched it to HTML view but am I supposed to copy and paste the coding they have or do I need to write my own? And if so, how do I do that?

    Thank you!

  • pauloeaquino · Staff ·

    am I supposed to copy and paste the coding they have or do I need to write my own? And if so, how do I do that?

    I would recommend you copy & paste the code into your page and then edit the code from there. Here’s an example to show you how to get started:

    This is the example code provided by the support documentation:

    Call to Action

    Copy the code. If copying it from the support doc, be sure to copy all of it by scrolling to the right. (see screenshot)
    https://cloudup.com/cIN6Y7Hcaum

    Paste the code in your editor (HTML view) (see screenshot)
    https://cloudup.com/c71l_xxnwCo

    From here, you can edit the code however you like. Be sure to replace the “YOUR-LINK-HERE” text with an actual link, otherwise your CTA button won’t take your users anywhere.

    Let me know if you need any help with editing the code if you’re still a little lost.

  • pauloeaquino · Staff ·

    sorry, the example code should be this:

    <a style="display: inline-block; padding: 12px 24px; border: 0; border-radius: 6px; font-weight: bold; letter-spacing: 0.0625em; text-transform: uppercase; background: #615f8b; color: #fff; text-decoration: none;" href="YOUR-LINK-HERE">Call to Action</a>

  • Unknown's avatar
    kaitlyndoty · Member ·

    Yay that worked! Thank you so much, one last question; how do you get the call to action to appear on the featured image and above the fold rather than below it?

  • pauloeaquino · Staff ·

    Hi Kaitlyn,

    I just realized that the theme you’re currently using, Edin, has a built-in CTA button feature and the way to use it is much easier than what I had previously mentioned.

    Edin comes with two extra CSS styles, button and button-minimal. You can add these two classes to your links by using the HTML Editor. We recommend creating a “call to action” button on the Front Page, for example:

    <a href="https://yourgroovysite.wordpress.com/about/" class="button">BUTTON</a>

    <a href="https://yourgroovysite.wordpress.com/about/" class="button-minimal">BUTTON MINIMAL</a>

    Reference
    https://wordpress.com/theme/edin/

    So to answer your question:

    how do you get the call to action to appear on the featured image and above the fold rather than below it?

    First you’ll need to set your front page’s template to “Front Page”. You can do this by going to:
    Page Attributes -> Page Template -> Front Page

    See screenshot: https://cloudup.com/cbEY6JwAMrK

    After that, go ahead and copy & paste one of the pieces of code mentioned above and update your page.

    You should now see the CTA button on your featured image.

  • The topic ‘Call to Action’ is closed to new replies.