[Resolved] Output view created with WPBakery Page Builder, as a grid.

[Author]

Posts

[paulW-11]

Tell us what you are trying to do?
Output a view layout created with WPBakery Page Builder, as a responsive grid.

On This page:
hidden link (Latest Businesses For Sale).

However, it is now in 1 column. I would like it to display in a responsive 4 column layout, inheriting the responsive behaviour of WPBakery Page Builder 3+3+3+3 col layout. Is there an easy way to do this?

Perhaps assigning a css class from WPBakery Page Builder to the Toolset content template?
The template in use here is ID 500.

Is there any documentation that you are following?
https://toolset.com/documentation/user-guides/view-layouts-101/

Is there a similar example that we can see?
'Latest articles' on the same page, outputs in 3 responsive columns, I would like similar behaviour, but 4 columns.
hidden link

[Christian Cox]

Hi, there's not a way to create a 4-column grid directly in the Page Builder, integrated with Views, so some manual markup is required. The best way to go about this is to use the WPBakery Page Builder to design a 4-column responsive grid like you want, using some dummy data. Then inspect the page source, and copy + paste the resulting HTML into your View's Loop Output editor to recreate the HTML markup structure generated by WPBakery. Replace the content with Views and Types shortcodes as needed. You may find the wpv-item, index, wrap and pad attributes helpful in fine-tuning the loop's output:
https://toolset.com/documentation/user-guides/digging-into-view-outputs/

The Content Template for the Loop can be designed in WPBakery, so each element of the loop has the same format. Let me know if you have questions about this.

[paulW-11]

Hi Christian,

Thanks for your help. I created a 4 column row in WPBakery. I inspected the page, I believe this is the HTML code below. I generated it here: hidden link The first row is created with WPBakery the second row is the test HTML output.

As a designer, not a coder, I am struggling with the Loop output editor. I believe I need to use include wrap, pad and item index, but I am unsure of where to place these short codes. A lot of trial and error is not producing what I want. Are you able to help me with this? Please let me know, thanks! Paul.

Current Loop Output Editor:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-post-body view_template="Loop item in Home Page Businesses Grid"]
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

HTML Code from 4 column WPBakery Row:

<section class="l-section wpb_row height_auto"><div class="l-section-h i-cf"><div class="g-cols vc_row type_default valign_top vc_column-gap-35"><div class="vc_col-sm-3 wpb_column vc_column_container"><div class="vc_column-inner"><div class="wpb_wrapper">

<!-- COLUMN 1 CONTENT -->

Read more: hidden link
</div></div></div><div class="vc_col-sm-3 wpb_column vc_column_container"><div class="vc_column-inner"><div class="wpb_wrapper">

<!-- COLUMN 2 CONTENT -->

</div></div></div><div class="vc_col-sm-3 wpb_column vc_column_container"><div class="vc_column-inner"><div class="wpb_wrapper">

<!-- COLUMN 3 CONTENT -->

</div></div></div><div class="vc_col-sm-3 wpb_column vc_column_container"><div class="vc_column-inner"><div class="wpb_wrapper">

<!-- COLUMN 4 CONTENT -->

</div></div></div></div></div></section>

[Christian Cox]

I've copied your code and added some indentation and line breaks, then marked up the unique code blocks in the screenshot attached. You can see that there is a First column block, an inner column block, and a last column block. The inner column block is repeated for columns 2 and 3. This translates into a loop structure with wrap="4":

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop wrap="4" pad="true">
		[wpv-item index=1]
		   *** add the first column code here and replace the comment with your wpv-post-body shortcode ***

		[wpv-item index=other]
                   *** add the inner column code here and replace the comment with your wpv-post-body shortcode ***

		[wpv-item index=4]
	           *** add the last column code here and replace the comment with your wpv-post-body shortcode ***

		[wpv-item index=pad]
		   *** add the inner column code here but do NOT include the wpv-post-body shortcode ***

		[wpv-item index=pad-last]
		   *** add the last column code here but do NOT include the wpv-post-body shortcode ***
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

[paulW-11]

Thanks for your help. Unfortunately, being more of a designer and not a coder, this solution is too complex for me to understand fully and deploy in different configurations.

So far, I have been very impressed with Toolset and see it as a very powerful tool to develop more complex sites, for non-coders like myself. In my opinion, native integration with WPBakery Grid Builder is needed, in order to enable grid outputs.

I found a different, simpler solution using basic css applied to the standard output, which you can see here. (I used the display: inline-flex property and a couple of media queries)

hidden link

Thanks, Paul.

-Ticket Closed.-

[paulW-11]

See above.