Lifetime updates on every purchase Support replies within 24 hours Secure checkout via Gumroad 8,500+ sales since 2016

Custom layouts and tiles

Updated 1 min read 3 views

A theme layout type is a folder with layout.php (with Name: and Description: headers) that returns its settings. Each setting is available as the CSS variable --vlt-gb-{key} on the grid and to its script.js.

add_filter( 'vlt_grid_layouts_styles', fn( $types ) => $types + [ 'carousel' => 'Carousel' ] );

// your-theme/vlt-grid-builder/layouts/carousel/layout.php
return [
	'settings' => [
		'row_height' => [ 'type' => 'number', 'label' => 'Row height', 'default' => 240, 'min' => 80, 'max' => 600, 'unit' => 'px', 'responsive' => true ],
		'captions'   => [ 'type' => 'toggle', 'label' => 'Captions', 'default' => true ],
	],
	'columns' => false, // no Columns field
];

Tiles patterns

A pattern is the number of columns, then the tiles as width (columns) and height (in column widths, 1 = square), repeated for the following items:

add_filter( 'vlt_grid_tiles_patterns', fn( $patterns ) => $patterns + [
	// 3 columns: a 2×1 tile, then two half-height tiles stacked beside it
	'my-pattern' => [ 'label' => 'My pattern', 'pattern' => '3|2,1;1,.5;1,.5' ],
] );
Was this article helpful?