# Using the Page Builder

*Article Topics:* [*Blocks*](https://docs.toomuchmedia.com/getting-started/common-topics/blocks)*,* [*Sets*](https://docs.toomuchmedia.com/getting-started/common-topics/sets)

The Block Builder is a powerful tool within the CMS that allows you to customize your web page's layout and design easily. Using a combination of various **blocks**, you can create visually appealing and functional pages without the need for any extensive coding knowledge.

This guide will walk you through the essentials of using the Block Builder, from getting started to mastering advanced features.

***

## What is a Block?

Your Tour and Member Area use **Themes** that contain settings for designing the look of your sites. Themes also contain a collection of **Pages** that are comprised of individual components known as **Blocks.** Blocks serve different purposes, allowing you to customize each page to serve whatever function you would want.

Blocks are incredibly flexible, serving as a visual component of the page they are on, being able to add a single block, save it to your Block Library, and use it on multiple pages.

Blocks can be manipulated and modified using the **Block Builder.** The Block Builder allows you to take any design you have in your head and get immediate feedback on how it may look.

The type of content shown on a block can also be as granular as you want, since individual blocks that list content can source it from different channels.

***

## Getting Started with Block Builder

Depending on which area you would like to customize, navigate to the Tour or Member Area section of Content Management to begin using the Block Builder. Select the specific Tour/Member Area, navigate to the Theme tab, and select the page you would like to customize.

Once there, you'll see a user-friendly interface that provides all the tools you need to start building and customizing your web pages.

<figure><img src="https://2232071635-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWJVne6meHqGT8rzsBdod%2Fuploads%2F3HrHbj46dxIybX9LJLcA%2Fcms-blockbuilder-gettingstartedwithblockbuilder.png?alt=media&#x26;token=75031996-f742-4bd1-8d13-35e93a398953" alt=""><figcaption></figcaption></figure>

## Block Details

Once a block has been selected, you will be presented with details, including its name, description, the type of block it is, whether it is enabled or not, and how many pages it is currently being used on.

<figure><img src="https://2232071635-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWJVne6meHqGT8rzsBdod%2Fuploads%2FVE8WEQNxkFdT40vP7Hwk%2Fcms-blockbuilder-blockdetails.png?alt=media&#x26;token=b9b42df8-0fbe-4d3f-8ac0-c0b7f760af41" alt=""><figcaption></figcaption></figure>

In addition to providing you with Block Details, selecting individual blocks will allow you to manage them in various ways. Below is a list of the 4 settings used to manage your blocks.

* Configure: Allows you to modify block details, including design, settings, metadata, and more.
* Duplicate: Creates a new form with the same settings as the original block, which must be confirmed before a copy is created.
* Disable: Disables the block for the current page and every other page on which it is being used.
* Remove: Removes the block from the current page's block list. Doing this will only affect the current page and has no impact on other pages currently using the same block that was saved in your Block Library.&#x20;

### Block Settings

Every block has similar settings when you configure the block itself. These settings are located on various tabs that serve different functions. Depending on the type of Block, there may be more or fewer customization and functionality options.&#x20;

Below is a list of some important settings to know and their functionality.&#x20;

{% hint style="info" %}
**Please Note:** Some settings, when selected, will display a new list of modifiable fields.&#x20;
{% endhint %}

#### Details

The Details tab for a block presents you with the following:

* Name: The name displayed in the Block Builder.
* Description: The description is displayed in the Block Builder.
* Enabled: Determines whether or not the Block is enabled.

#### Settings

The Settings tab for a block presents you with the following:&#x20;

* Data Source: The type of data that will populate the Block.&#x20;
* Channels: A list of channels the block has access to.
* Search Order: The order in which the data will be displayed to the user.
* Initial Filter: The criteria to filter the content by.&#x20;
* Include Sets With: This setting is exclusive to Set Lists. Determines what type of content is displayed, whether it is videos or images.&#x20;

***

## Types of Blocks

The Block Builder offers a variety of blocks that can be accessed through the Block Manager to serve different content needs.&#x20;

{% content-ref url="../themes/block-types" %}
[block-types](https://docs.toomuchmedia.com/content-management/member-areas-and-tours/themes/block-types)
{% endcontent-ref %}

Each block type comes with its own customization options, allowing you to tailor the appearance and functionality to fit your site's specific needs.&#x20;

***

## The Block Library

Now that we have discussed Block Types, let's talk about where your blocks are located. Your entire collection of Blocks is saved in your Block Library, which can be accessed when you want to add a new block to your page. When a Base Block is added and edited on your Page, it is automatically added to your Block Library. Any changes made to your Block will update the settings in your Library.\
\
This means that changes to a block on your Home page will affect any other page that uses the same block. This feature saves a tremendous amount of time, as you only need to edit a block once and the changes will be reflected throughout your site.

***

## **Adding and Editing New Blocks**

Adding a new block is simple and intuitive. Begin by clicking on the "Add New Block" button, selecting the type of block you want to add, and modifying the details such as the name, description, data source, design, etc.&#x20;

<figure><img src="https://2232071635-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWJVne6meHqGT8rzsBdod%2Fuploads%2FGp7cZicm5jDB0ApEJOMw%2Fcms-blockbuilder-addingnewblock.png?alt=media&#x26;token=326d23dc-9d0c-4778-980b-ddec8488862a" alt="" width="563"><figcaption></figcaption></figure>

The newly added block will appear at the bottom of the list of blocks currently on the page.&#x20;

<figure><img src="https://2232071635-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWJVne6meHqGT8rzsBdod%2Fuploads%2FKOuVYgp8eNfgZDp2jBoe%2Fcms-blockbuilder-bottomoflist.png?alt=media&#x26;token=6319a562-59a9-4093-a1a3-2cd1f4745dc1" alt="" width="563"><figcaption></figcaption></figure>

To edit a Block, click on an existing block and select the configure button to open its settings. Here, you can change content, adjust styling, and configure any specific options related to that block type.

<figure><img src="https://2232071635-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWJVne6meHqGT8rzsBdod%2Fuploads%2Fr1t9QZh6XH42KLdGJpwj%2Fcms-blockbuilder-edit.png?alt=media&#x26;token=e19591ce-83be-4fa6-86cc-fc22165504ea" alt="" width="375"><figcaption></figcaption></figure>

Once changes have been made, clicking Save or Save & Close will automatically reflect the changes on the page you are editing.&#x20;

***

## **Organizing Blocks on a Page**

The Block Builder makes organizing blocks on your page easy by allowing you to drag, drop, and resize blocks. It is as easy as clicking and holding a block to reposition it or clicking the resize handle on the bottom right of the block to resize it.&#x20;

***

## Related Articles

{% content-ref url="../themes" %}
[themes](https://docs.toomuchmedia.com/content-management/member-areas-and-tours/themes)
{% endcontent-ref %}

{% content-ref url="../themes/block-types" %}
[block-types](https://docs.toomuchmedia.com/content-management/member-areas-and-tours/themes/block-types)
{% endcontent-ref %}
