Add second call to action button

Hi all!

Currently I’m building my website with the Moesia theme.
However, I would like to add a second button in the welcome area…

Anybody an idea how I can realize this?

  • Do I have to adjust ‘header.php’?

Thanks a lot!

Hello there,

You don’t need to edit the header.php file and insert a new button element. There is an easier and better alternative. You can use jQuery code to clone the existing CTA button and set new text and link. Please follow these instructions:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

   'use strict'

   if( $('.welcome-button').length ){

      var newButtonText = 'My New Button';
      var newButtonURL  = 'http://yoursite.com/new-page';

      $('.welcome-button').clone().addClass('second-welcome-button').appendTo('.welcome-info');
      $('.second-welcome-button').attr('href', newButtonURL).text(newButtonText);
    
   }
   
})(jQuery);

  1. Update

Regards,
Kharis

Wow great! :slight_smile:

Thanks a lot Kharis!

One more question. Is it possible to adjust to position of this button?

Grts,

Sibren

Hello Sibren,

To what direction the new button should be moved? You can use this CSS code:


.second-welcome-button {
 /* CSS rules go here */ 
}

and add it into Appearance > Customize > Additional CSS to apply it on your site.

Regards,
Kharis

Again, thanks a lot Kharis! :slight_smile:

I used this:

.second-welcome-button {
 	position: relative;
    left: 20px;
    width: 100%;
}

Works great!

Is there a way to make both buttons the same size (so the maximum with of the two?)

Kind regards,
Sibren

Use this code, please.


.welcome-button {
  width: 200px;
}

Adjust the value if needed.

Regards,
Kharis

Thanks again for your great help! :slight_smile:

You’re welcome and best wishes!

Hi, I’ve just posted a new question but it relates to this one - I’d like to have 3 buttons in the welcome page, equally spaced, and of equal width. I’ve been experimenting based on this solution but can’t get it to work.
Thanks,
Asha

Hi Asha,

Thank you for composing a new topic. I’ve replied it. It’ll be much better if we can continue the discussion over there.

Regards,
Kharis