Now, let's try React Bricks visual editor. ✍️
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.
Try to change the "This is an example" text clicking on it and editing. Easy, right?
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.
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.
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.
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.
Use the arrows on a selected block to move the block up or down.
Use the trash bin button to delete a block.
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.
Click on the Save button you see on top right.
Congratulations! You just created your first page! 🎉