Staff / Employee Page

I created a Staff/Employee Page and would like to make some changes - https://snag.gy/NUvjfl.jpg

  1. I’d like to show only 3 people across - not 4
  2. I have the Hyperlink Active when you click on the person’s name - is it possible to have the hyperlink active when you roll over the container?

Thank you.

Andy

Hello Andy,

To wrap the employee block with the specified link, follow the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    jQuery(function($) {

     if( $('.widget_athemes_employees').length ) {
         $('.team-item').each(function(){
           var link = $(this).find('.team-item-name a').attr('href');

           if(link != undefined) {
             $(this).wrapInner('<a href="'+link+'"></a>');
           }

         });
     }

    });
  1. Update

Flush any applied cache as it usually prevents new code addition to take effect in the front end. https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

To change the default coloumns of four to three, add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .widget_athemes_employees .team-item-name p {
      color: #333; /* Avoid color changes as element wrapped with a link */
    }

    @media only screen and (min-width: 992px) {
      .widget_athemes_employees .team-item {
        width: 33%;
      }
      .widget_athemes_employees .team-item-img img {
        border-radius: 50%;
      }
    }

Regards,
Kharis