Adding bricks to mods

Watch this 23-second video or read the steps below to learn how to add, copy, and delete bricks in your mod.

Adding Bricks to New Mods

You'll add bricks to mods inside Page Editor. Make sure you're comfortable with the Page Editor Components before adding bricks, as it will be helpful to understand what is happening in each of the panels.

1. Open the Page Editor.

Having trouble finding the Page Editor? Check these docs, and make sure your Chrome Dev Tools are docked at the bottom of the page instead of to the right. Your screen should look like this:

2. Add a starter brick.

Every mod must begin with a special type of brick, called a Starter Brick. Before searching for other bricks, you'll need to pick one of the from one of the Starter Bricks, which can be found by clicking the green Add button in the top left of the Page Editor, next to the PixieBrix logo.

If you're curious about which starter brick to choose, you can learn more about the types of starter bricks, but starting with a Context Menu is the simplest.

You're ready to move to the next step when you have a starter brick at the top of the Brick Actions panel. (What's that?)

3. Click the + button below your starter brick

Below the starter brick, you should see a + icon. Click that to open the Add Brick modal.

Skip to Using the Add Brick Modal for next steps.

Adding Bricks to Existing Mods

If you want to add a brick to an existing mod (one that already has at least a starter brick and perhaps other bricks as well), click the + button below any brick to open the Add brick modal.

You can always move the brick up or down later if you need to

Using the Add Brick Modal

1. Search for a brick

Once the Add Brick Modal has appeared, search in the top bar for a brick that serves the purpose you need. If you're using a specific tool, such as Google Sheets, you might search for Google. Or if you need to extract data from a page, you might search extract.

You can also use the categories on the left side to look for bricks by category.

You're ready to move to the next step when you see a brick you'd like to add below the search field.

2. Hover over the desired brick and click +Add

Mouse over the brick you want to add, and you'll see a blue +Add button appear.

Click the +Add button and your new brick will be added to your Brick Actions pipeline, ready for you to configure.

You've successfully added your brick when you see the desired brick in the Brick Actions Pipeline.

Copying Bricks

To copy a brick, make sure the desired brick is selected in the Brick Actions Pipeline (What's that?). You'll know it's selected when the brick is blue.

At the top of the Brick Actions Pipeline, click the copy icon.

You'll notice after each brick there is a paste icon. Click the area you'd like the copied brick to be pasted.

Your copied brick will appear in the location where you clicked the paste icon.

Deleting a Brick

If you want to delete a brick, make sure the desired brick is selected in the Brick Actions Pipeline (What's that?). You'll know it's selected when the brick is blue.

Click the trash can icon at the top of the Brick Actions panel.

Your brick will be removed.

At this time there is no way to undo the Remove Brick action.

Moving a Brick

To move a brick, find the desired brick in the Brick Actions Panel (What's that?) and click the up or down arrow on the brick to move it's location above or below the bricks around it. Keep doing this until the brick is in the position you'd like.