Adding description under services title

Hi there,

I have a question. Is it possible to add a general description under the title of my Services ?

I’ll explain a bit more. See, I have the “Service” title and under that, my 3 services with the icons, text and buttons. But I want to insert a short text inbetween those 2 elements. Is there an "easy " way to do that ? I’ve tried to edit the widget but there is no optionnal text input, just the “title”, “URL”, “button text” etc.

I assume I can add a 4th service full width above the 3 others and edit the CSS to make it look like i want but I want to know if there is a less “aggressive” way. Maybe with a custom JS but I really don’t know how (cause I’m terrible with JS).

Thanks for the reply and for this nice theme.

PS: Is there a way to add the clients name under their logos ? I figure it’s the same kind of problem.

Hello there,

To add a subtitle for service widget, you can use jQuery code solution. The first thing to do is add a custom class name to your active services widget. In the widget settings, expand the Attributes tab under Widget Styles. Then enter add-subtitle class name to the “Widget Class” box. Save and update page. Then do 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
    ;(function($) {

      if( $('.add-subtitle').length ) {

        var subtitle = 'Subtitle goes here';

        $('<div class="widget-subtitle">'+subtitle+'</div>').insertAfter( ".add-subtitle .widget-title" );

      }

    })(jQuery);

4 . Update

To add client names, add the below code to Custom JavaScript.

    ;(function($) {

      $.fn.addClientName = function(pos, name) {

        if( $('.sydney_clients_widget').length ) {

          $('.sydney_clients_widget .client-item:nth-of-type('+pos+')').append('<div class="client-name">'+name+'</div>');

        }

      };

      // Define client names

      $('.client-item').addClientName(1, 'Client 1');
      $('.client-item').addClientName(2, 'Client 2');
      $('.client-item').addClientName(3, 'Client 3');
      $('.client-item').addClientName(4, 'Client 4');
      $('.client-item').addClientName(5, 'Client 5');

    })(jQuery); 

Regards,
Kharis

1 Like

Thanks a lot Kharis it works.

I have an unexpected issue caused by the subtitle for service widget though.
See my 3rd (and last service) is going underneath the 2 others. After somme research, i’ve found the the problem was caused by the CSS :

.service.col-md-4:nth-of-type(3n+1) {
clear: left;
}

I’m assuming it’s because I added another element in the wiget and thus the last service is targeted by the style.
So I’ve override the CSS with this:

.add-subtitle .service.col-md-4:nth-of-type(3n+1) {
clear: none;
}

and it works (btw clear: right is also working), the service is back where it should be, to the right of the other 2. I just wonder if it is a viable solution ?

Otherwise thanks for the help !