FREE Workshop on June 5th »
Book your seat

Edit content

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

Step 1: Edit a block

Click on the first content block (the Horizontal Hero unit with "This is an example website made with React Bricks").

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

Hint
Content editing is done via direct visual edit on the central panel and by setting values of sidebar controls in the right sidebar.

Direct visual edit

Try to change the "This is an example" 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 "Horizontal Hero" block, we decided to have the "Title" , "Background" and "Padding & Borders" groups of controls. In the "Title" 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 to upload an image from your computer, or from Unsplash, if you prefer. 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: Edit the page title

Click on the SEO button on the right sidebar, under the "Page" tab.
From this interface you can set the slug, the title of the page, meta tags, Open Graph data and Twitter card data. As an add-on you may also activate the "Advanced SEO" feature, to be able to set also the schema.org semantic data.


Step 7: Save the page

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

# Time to get points

How do you edit content?