Support Forum

Hi Sara,

Most of this is custom development that falls outside WPSP support, but I can help as much as possible.

1. To center it, you could change your CSS to this:

.ruled-heading {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

I believe in order to give the text a background color, you would need to alter the HTML a little. The site you like is doing this:

<h4 class="mvp-widget-home-title"><span class="mvp-widget-home-title">Entretenimento</span></h4>

h4.mvp-widget-home-title {
    float: left;
    margin-bottom: 20px;
    position: relative;
    text-align: center;
    width: 100%;
}

span.mvp-widget-home-title {
    background: #ff005b;
    color: #fff;
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    padding: 5px 13px;
    position: relative;
    text-transform: uppercase;
    transform: skewX(-15deg);
    z-index: 1;
}

h4.mvp-widget-home-title:before {
    content: '';
    background: #555;
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 50%;
    width: 100%;
    height: 1px;
    z-index: 0;
}

2. First you would need to make it so that list is displaying the necessary meta using its settings. Right now I’m not seeing any meta.

3. This would involve changing the HTML structure of the widget title to something like the above. For example:

add_filter( 'generate_start_widget_title', function() {
    return '<h2 class="mvp-widget-home-title"><span class="mvp-widget-home-title">';
} );

add_filter( 'generate_end_widget_title', function() {
    return '</span></h2>';
} );