WP Page Builder has a variety of pre-designed blocks and layouts to offer you a complete website.

 

Layouts

When you are choosing a layout, WP Page Builder gives a business-specific layout. This way you are up to date with the most happening layouts for businesses in your industry.
Click on the Layouts option on the left side (right below Blocks). You will get the Layout bundles and choose the one you need.

 

On clicking layout, you will see your options of layouts. Select the one you like best.

Click on the layout bundle and select “Import” to add the layout to your website.

When you import the pages, the layouts can easily be placed in your created web page according to the number of rows you have chosen.

If you are a developer wanting to install a third party developer layout, follow the next section to easily add a custom layout via a third party plugin or theme.

Adding a Custom Layout

Firstly, you need to create a layout using WP Page Builder and export it. Secondly, add this via wppb_add_layout filter.

Example

function prefix_add_layout_callback( $layouts ){
	$layouts[] = array(
		'name' => 'Example', // Name of the Layput
		'category' => array( 'Category Name', 'Creative' ), // Category Must be Array and 
		'preview2x' => 'https://builder.themeum.com/wp-content/uploads/2018/07/Content-1.png', // Preview in Listing 2x
		'preview' => 'https://builder.themeum.com/wp-content/uploads/2018/07/Pricing-table-1.png', // Preview in Listing
		'single' => array(
				array(
					'name' => 'EHome', // Name of the Inner Layout
					'preview' => 'https://builder.themeum.com/wp-content/uploads/2018/07/Content-1.png', // Preview in Inner
					'preview2x' => 'https://builder.themeum.com/wp-content/uploads/2018/07/Pricing-table-1.png', // Preview in Inner 2x
					'file' => plugin_dir_path( __FILE__ ).'template1.json', // File path of the Export JSON
					'liveurl' => 'https://builder.themeum.com/agency-home/'
				),
				array(
					'name' => 'EAbout',
					'preview' => 'https://builder.themeum.com/wp-content/uploads/2018/07/Content-1.png',
					'preview2x' => 'https://builder.themeum.com/wp-content/uploads/2018/07/Pricing-table-1.png',
					'file' => plugin_dir_path( __FILE__ ).'template2.json',
					'liveurl' => 'https://builder.themeum.com/agency-home/'
				)
		)
	);
	return $layouts;
}
add_filter('wppb_add_layout', 'prefix_add_layout_callback');

Note: All the fields are required except liveurl.

Blocks

The blocks have predefined sections that you can easily customize in your own way to build a unique website.
Just like layouts, you can easily create blocks via third party plugin or themes.

Click on these 6 tabs in pre-designed blocks to customize these options:

  • Feature
  • Testimonials
  • Team
  • Call to action
  • Pricing table
  • Content

Adding a Custom Block

Firstly, you need to create a block using WP Page Builder and export it. Secondly, add this via wppb_add_block filter.

Example

function prefix_add_block_callback( $blocks ){
	$blocks[] = array(
		'name' => 'Name of the Blocks', // Name of the Block
		'file' => plugin_dir_path( __FILE__ ).'test.json', // JSON export file directory path
		'banner' => 'https://builder.themeum.com/wp-content/uploads/2018/07/Content-1.png', // Banner Image URL
		'section' => 'Section Name', // Section Name
		'liveurl' => 'https://builder.themeum.com/call-to-action-item-1/' //
	);
	return $blocks;
}
add_filter('wppb_add_block', 'prefix_add_block_callback');

Note: All the fields are required except liveurl.