Editing content

👉 As you can see, the visual builder has many basic and advanced content block types. For myStoreLanding, you can drag a section block into your canvas and call it heroSection (or whatever name you come up with) from the layers tab.

Notice that when you add a section block and view your layers, you'll find text blocks added as child elements to your section. You can highlight each content block and use shortcut key functions such as undo, redo, copy, paste and delete to edit the page. In other words, it's like editing a document online without having to save a file. For now, let's delete the text block from our highlighted heroSection.

👉 Go to the Design panel in the upper right corner of the builder. You can press it to expand and close the tray. The design panel is where you visually style your page with CSS. Use CSS properties to design your blocks and add as much styling to your page as needed.

Review design properties and custom CSS

All changes made to the page will autosave. Press Preview to view your page in fullscreen to check your work without leaving the Visual Builder. When you select a content block to edit, notice the blue toolbar above the block component. You will also be able to delete, duplicate, move and navigate from each child block using the ⬆ up arrow from here.

Editing with Javascript 

Notice the symbol beside the three-dotted menu icon in the toolbar? This means you can add Javascript directly to content block component that is selected. If your a pro, try editing the Javascript using the JSX Import feature to add existing React components.

More about Import JSX

👉 Press the script symbol in the blue toolbar, the script editor will display, write your Javascript function and press Save, and the script will be added to the page. You can test your script directly in the Visual Builder. No need to test on a live page just yet.