Edit content

Now, let's try React Bricks visual editor. ✍️

Step 1: Edit a block

Click on the first content block (the Hero unit with "Welcome to React Bricks").

You see that it gets a pink border and, on the right side, now you can see the properties for this block.

Content editing is done via direct visual edit on the central panel and property setting via the right sidebar.

Direct visual edit

Try to change the "welcome", text clicking on it and editing. Easy, right?

Sidebar edit

Now, let's use the sidebar controls. You see that controls can be grouped in collapsible groups. Here, for this "Hero unit" block, we decided to have the "Layout" and "Text" groups of controls. In the "Text" group you can find the "Gradient" control. Choose a different gradient and see the result.

Step 2: Add a new block

Click the "+" icon below (or above) a selected block to add a new block in that position. You will see that now in the sidebar, you can choose the type of block to be added.

The content blocks ("bricks") you see are pre-made by us, part of the React Bricks UI package. When you create your own custom bricks, you'll be able to decide to remove completely these example blocks or take inspiration by them (they are open source).

Add a block of type "Testimonial" and edit the quote or person name, as you did before. Now, let's try to change the photo.

Step 3: Upload an image

Click on the person's photo: a popup opens. Click on the photo again and select an image from your computer. You see that you can also write an alternate text and a seo-friendly name for the image URL.

React Bricks will create optimized responsive images and a blur-up placeholder to improve the perceived performance and get a better search engines ranking. After uploading, click the "Close" button.

Step 4: Work with nested blocks

Now, add a block of type "Features". You see that, in this case, the block is a repeater of nested "Feature" blocks. Via the sidebar you can Add / Remove the single features.

If you click on a Feature, you'll see that the "Item" tab appears in the sidebar, to let you change the props for this items via sidebar controls.

Step 5: Reorder / delete blocks

Use the arrows on a selected block to move the block up or down.
Use the trash bin button to delete a block.

Step 6: Save the page

Click on the Save button you see on top right.
Congratulations! You just created your first page! 🎉