How to add vc_basic_grid shortcode to widget and get output

This topic has 6 replies, 3 voices, and was last updated 6 years by Radu.

Author
October 19, 2017 at 23:43 #177160

MGPLUC
Participant

Hi there,

I’ve been running around in circles on the below, so I hope you can help me.

On my homepage I have vc_basic_grid element working fine. Now i Want the same element to come back in a sidebar. Thus I thought: add a textfield / or html to a widget and paste the below code.

[vc_basic_grid post_type="post" max_items="10" gap="15" item="7072" initial_loading_animation="none" grid_id="vc_gid:1508444220288-dbc5dd3d-8fa5-9" taxonomies="127, 122"]

However, when doing so the widget doesn’t genereate the expected outcome. As you can see in the marked (yellow) area in the attachement, the only thing I’m getting in the sidebar are the “progress dots” constantly passing from left to right, where I expected a featured image + post title on per row.

What should I change to get the expected outcome here? Your help would be much appreciated.

Attachments:
You must be logged in to view attached files.

October 20, 2017 at 14:53 #177203

Laura
Moderator

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

October 20, 2017 at 18:40 #177236

Radu
Moderator

Hi,

IT works for me, using latest theme version and also latest visual composer and k-elements version.

Check for Visual Composer and K-elements plugin updates in wp-admin -> appearance -> install plugins -> Update it if you see update link for those plugins and check again.

If it’s the same even if you will update, try to de-activate rest of the plugins except visual composer and k-elements

Let me know

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

October 20, 2017 at 19:24 #177248

MGPLUC
Participant

Hi Radu,

Thanks for the quick response! Unfortunately I still can’t get it to work. The Kleo version is up to date as far as I know (4.2.12).

I added three more sceenshots which hopefully give you an idea on whats “wrong” at my end:
1. Overview of the active and up to date plugins
2. The relevant widget which I’m trying to get to work. For testing purposed I added the same code in a HTML element and a text element (just to be sure).
3. Still dots as ouput.

I hope you see something “wrong” in the first two screenshots.

Thanks in advance!

Attachments:
You must be logged in to view attached files.

October 23, 2017 at 14:54 #177485

Radu
Moderator

Hi

I see, can you please provide WP admin credentials + FTP login details to take a closer look ?

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

October 23, 2017 at 15:05 #177488

MGPLUC
Participant

This reply has been set as private.
October 24, 2017 at 15:44 #177667

Radu
Moderator
Hi,

It seems the issue it’s caused by the Visual composer Posts Grid element, also using kleo element there “Kleo Posts” it works.

I’ve made a work around for you ( circle images )

So if you will add this shortcode in the sidebar
COPY CODE
```
[vc_posts_grid loop="size:10|order_by:date|post_type:post" columns="3" show_meta="no" show_excerpt="no" show_footer="no" ajax_post="" ajax_paged="" el_class="round"]
```
It require this css to look similar ( round images )
COPY CODE
```
.kleo-masonry.round .post-image img {
    border-radius: 50% !important;
    max-width:75px;
    max-height:75px;
    height:75px;
    width:75px;
    border:3px solid #fff;
}

.kleo-masonry.round .post-header {
    text-align: center !important;
}

.kleo-masonry.round article .post-content {border:0 !important;}
.kleo-masonry.round article .post-content .hover-element {display:none;}
.kleo-masonry.round .post-title {border:0}
```
The CSS will be added to wp-admin -> theme options -> general settings -> quick css

This is how it will look

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
Author

Posts