Building Pages
You stack blocks to make pages.
Let's imagine a website. At the top is a hero section: a large headline sits over a video of a tree branch swaying. Below is a split layout containing a single paragraph next to an image of a small café. Scrolling further down you see a carousel of images highlighting the interior of the café.
The hero, the split, and the carousel are each blocks. Small modular pieces of the web page. Each block has its own set of fields for updating content. The hero has fields to change the headline and video, the split block has a field to edit the paragraph and an image uploader. You'll use many of these blocks multiple times on your site, the fields define what's different in each copy.
Building a page
Let's build a page from scratch. With the "Content" tab selected choose "Pages" in the sidebar. Create a new page with the "Create" button, name it whatever you like. You'll be brought to your new page after creation. It's empty, press the "Add Block" button to add the first block.
If you generated your site the "Add Block Modal" that opens already has a grid of blocks. If you started with an empty site there won't be anything here yet. To add a block from the Geppetto Library click "Site ⌄" in the top left of the modal and choose "Geppetto".
Choose a block to add from here. Use filter and search to narrow it down, the collection is quite large. The block you select will be added to the top of your page (drag and drop blocks in the sidebar to re-arrange them).
Click "Add Block" again. Your site grid now includes the block you added from the library. This is your site's copy of the block. You can add it to the page again if you like, each copy will have its own content.
Your changes to the page aren't saved until you click the green save button in the bottom left. Use the undo button if you want to go back to the last saved state.
Making content edits
To edit a block's content select it in the sidebar or click the text you want to edit in the preview. The block list is replaced by the block content form. Note the breadcrumbs list above, use this to get back to the block list or all the way back to the page list.
The content in the block form is entirely designed by the block author. Some fields will be for updating content and some will control the style or variation present on the block. As you make edits to this form you'll see the preview update.
Editing block code
Blocks are simple HTML snippets, usually only a couple dozen lines of markup. To edit the markup of a block select it and click "Dev Mode" in the upper right. A code editor will pop up below the preview.
You can make code edits to your block directly here. You can also modify the sidebar to add or change content fields. If you don't know HTML you can still make changes by asking the AI Assistant to make them for you. Click the "AI Chat" button on the right side of the code editor to open the AI sidebar.
Changes to the block aren't saved until you press the save button. Your changes to markup here are global. Every copy of this block on your site uses this markup. Content changes in dev mode apply to the page.
Exit dev mode by clicking the button again or pressing the back arrow in breadcrumbs.