Layouts Block

The Layouts block gives you a quick and easy way to build beautiful pages with a library of pre-designed collections, sections, and layouts.

These collections, sections, and layouts are made up of groups of existing blocks where all the settings like backgrounds, margins, padding, colors, etc. have been pre-configured for you. After adding one of them to your page, all you need to do is replace the sample text and images with your own!

Before getting started, watch this video to see a quick demonstration of how to use and customize this block.

Note: For the best results, we recommend using a theme that includes a full-width layout so the sections and layouts will be displayed properly.

Table of Contents:

• Collections
• Sections
• Layouts
• Favorites
• Reusable Blocks
• Customizing the Layouts block
• Adding new Sections and Layouts to the library
  • Code example for adding a section
  • Supported data for creating custom Sections and Layouts
  • Formatting content for custom Sections and Layouts
• Removing Sections and Layouts from the library
  • Code example for controlling which Layouts are shown in the library
  • Blocks included in Genesis Blocks

---

Collections

Collections are groups of pre-designed sections and layouts that share the same theme or design aesthetic. They make it easy to quickly build multiple pages on your site that are cohesive in their look and feel.

Collections are also very flexible because they allow you to easily pick and choose which sections and layouts you’d like to include on your site, as well as rearrange them in any order you like. And you can mix and match sections and layouts from different collections and then customize their appearance so they fit with the design aesthetic of your site.

You can go to Genesis Blocks > Getting Started > Collections to preview all the Collections currently available in Genesis Blocks (free) and Genesis Blocks Pro.

Click image to enlarge

After adding the Layouts block to your page, click the Collections tab to see the available collections. Then click on any collection to access the available sections and layouts within that collection.

Click image to enlarge

Collection: Page Sections

The collection’s individual sections are listed at the top of the Layout Selector window, as shown in the image below:

Click image to enlarge

Collection: Page Layouts

The collection’s full-page layouts are listed at the bottom of the Layout Selector window (scroll down to see them), as shown in the image below:

Click image to enlarge

Sections

Sections are small groups of pre-configured blocks that can be added to a post or page as part of a full-page layout. Think of them as small pieces of a larger design. When you use several sections together, you can build an entire page quickly and easily.

Some of the sections included in the Genesis Blocks Pro version of this block are:

• 
  Unique page headers to hold newsletter signups, author profiles, etc.
  
• 
  A logo list to show “as seen in” proof for your business.
  
• 
  Phone and tablet mockups that can show what your product or service looks like on those devices.
  
• 
  Beautiful pricing tables.
  
• 
  Video embeds paired with attractive text layouts.
  
• 
  and more!
  

After adding the Layouts block to your page, click the Sections tab to see the available sections. Then click on the section you’d like to use to quickly add it to your page.

Click image to enlarge

Layouts

Layouts are groups of pre-designed sections that work together to create a full-page design. They contain several blocks and sections that allow you to quickly create an entire fully designed page with very little effort.

Some of the full page layouts included in the Genesis Blocks Pro version of this block will help you easily create:

• 
  Team pages
  
• 
  Pricing pages
  
• 
  eBook Landing pages
  
• 
  Band/Musician pages
  
• 
  Newsletter pages
  
• 
  and more!
  

After adding the Layouts block to your page, click the Layouts tab to see the available layouts. Then click on the layout you’d like to use to quickly add it to your page.

Click image to enlarge

Favorites

You can save your favorite, or most used, sections and layouts so you can quickly find them in the library.

Click the heart icon (shown in the image below) to add or remove a section or layout in your favorites. Your favorites will be available in the Favorites tab.

Favorites are attached to user accounts so if there are multiple users who have admin access to your site, each user will see their personal favorites only (and not the favorites of others).

Click image to enlarge

Reusable Blocks

This feature requires the Genesis Blocks Pro plugin which is available through a Genesis Pro subscription.

Reusable Blocks (which are only available in Genesis Blocks Pro) allow you to save a block (or a group of blocks) and reuse it in other posts and pages on your site. This feature is useful if you need to insert the same content (such as calls-to-action or pricing information) on multiple posts or pages.

Genesis Blocks Pro makes it easy to work with Reusable Blocks by giving you quick access to them here within the Layouts block.

Learn how to create and edit Reusable Blocks.

Click image to enlarge

Customizing the Layouts block

After adding a section or layout to the page, click directly on the element you’d like to change.

In the example below, we added a Text List and Image section to our page and then clicked on (and highlighted) the paragraph text so we can delete the demo text and add our own. In addition to changing the text, we can adjust the text and color settings in the editor’s sidebar as needed.

Click image to enlarge

Adding new Sections and Layouts to the library

You can add new sections and layouts to the library. For example, if you’ve assembled a collection of blocks to create a unique section or page layout and you’d like to reuse it on another page, you may wish to add it to the library to make it easy to duplicate.

Note: The basic steps for adding content to the library are described below. For a detailed tutorial, see How to create custom Sections, Layouts, and Collections for Genesis Blocks.

Code example for adding a section

This is an example to help you understand how it works and to help you get started. Change the details to suit your needs. This code should be added to a custom plugin. If you need help creating a custom plugin, we recommend using Pluginception to create one for you.

Notes:

• Important: change my_custom_section to a unique name for your software so that it doesn’t collide with the work others do.
• Getting the content portion of this configuration is the trickiest part. See below for detailed instructions on how to format your content.

Supported data for creating custom Sections and Layouts

When creating your own custom sections and layouts, the following data is supported:

• type: Defines the type of component you’re registering. Supported types are ‘section’ and ‘layout’. Required.
• key: A unique identifier for this section/layout. Must be unique and can only contain lowercase letters, numbers, and the underscore character. Required.
• name: The display-friendly name for the section/layout to show in the library. Required.
• content: The block content that makes up the section/layout. Required.
• category: The category or categories the section/layout is assigned to. Required.
• keywords: Keywords are used when searching for sections/layouts in the library. Required.
• image: The thumbnail image that is displayed in the library. Required.
• collection: The collection the section/layout belongs to. Optional.
  
  You can add sections and layouts to a collection by providing the necessary information when registering them with genesis_blocks_register_layout_component(). The collection array you need to add is structured as follows:

Formatting content for custom Sections and Layouts

WordPress® requires the content be formatted in a specific way, and this format isn’t very easy to read for humans.¹ Here’s how you do it:

1. Create the content you want to add to the library.
2. Select the content in the editor. Tip: you can select multiple blocks by holding down the Shift key and click the blocks you want.
3. With the content selected, click the three-dot icon at the top right of the editing screen and select Code editor, shown in the image below.
4. Copy all the content from the Code editor screen.
5. Paste the content in the content key in your code from above.

Click image to enlarge

Now comes the tricky part:

6. Move all the pasted code into a single line.
7. Convert all the " characters to \" except for the first and last ones that enclose the entire line of code.

That’s it. Save your custom code, load up the layout library, and use your custom section or layout.

Removing Sections and Layouts in the library

You can also remove any section or layout from the library, if needed. In other words, you can create a whitelist of allowed sections and/or layouts to give you and your clients more control over the editing and branding experience.

Code example for controlling which layouts are shown in the library

Blocks included in Genesis Blocks

Title: Accordion
Name: genesis-blocks/gb-accordion

Title: Advanced Columns
Name: genesis-blocks/gb-columns

Title: Advanced Column (an individual column inside the parent Advanced Columns block)
Name: genesis-blocks/gb-column

Title: Button
Name: genesis-blocks/gb-button

Title: Call To Action
Name: genesis-blocks/gb-cta

Title: Container
Name: genesis-blocks/gb-container

Title: Device Mockup
Name: genesis-blocks/gb-devices

Title: Drop Cap
Name: genesis-blocks/gb-drop-cap

Title: Email newsletter
Name: genesis-blocks/newsletter

Title: Layouts
Name: genesis-blocks/gb-layouts

Title: Notice
Name: genesis-blocks/gb-notice

Title: Post and Page Grid
Name: genesis-blocks/gb-post-grid

Title: Pricing
Name: genesis-blocks/gb-pricing

Title: Pricing Column
Name: genesis-blocks/gb-pricing-table

Title: Product Price
Name: genesis-blocks/gb-pricing-table-price

Title: Product Features
Name: genesis-blocks/gb-pricing-table-features

Title: Product Title
Name: genesis-blocks/gb-pricing-table-title

Title: Product Subtitle
Name: genesis-blocks/gb-pricing-table-subtitle

Title: Product Button
Name: genesis-blocks/gb-pricing-table-button

Title: Profile Box
Name: genesis-blocks/gb-profile-box

Title: Sharing
Name: genesis-blocks/gb-sharing

Title: Spacer
Name: genesis-blocks/gb-spacer

Title: Testimonial
Name: genesis-blocks/gb-testimonial