The first thing you will need is a box to hold everything. Click the box tool in the toolbar on the left or press X on your keyboard. Then click on the canvas to add a box to your page.

Add a box

Name it "hero-bg".

Add a background color in the right sidebar.

Then use the inner handles to increase the inner spacing to let the content breathe.

To keep your content from expanding to the edges of the screen, you'll need another box inside of this one that has a smaller width. Press X on your keyboard to drop another box. Name this box "hero-content" (this will come in handy later) and resize the width to 1000px.

Now you're ready to add some content. First, drop in an image element from the toolbar. Upload or select an image and then double click to use it.

Add a text element from the toolbar, or press "T" on your keyboard. Watch the purple label above your cursor to make sure to drop it in the "hero-content" box.

Double-clicking any text element will allow you to start editing any text element on the page. Keep in mind that any changes, including these text edits, update in real-time for other users.

Open up the font picker and select any fonts you've added. Make it nice and big by increasing the font size in the right sidebar.

You may want a button or another element to go under your text, but if you simply drop it into the "hero-content" box like this, it'll be on its own row.

Instead, group the text and button into their own box.

Once you move the text and button into that box, you can then select the button and put on the finishing touches. Drag the top handle to add spacing above, and then drag the button itself to snap it to the left.

Lastly, hover over this button's label to quickly select the containing "hero-content" box. Box items are distributed along a 12 column grid which you can easily adjust and add space between.

Did this answer your question?