Creating Your First Site

This will be you're Site List Page

Once you login, you will be brought to the Site List page where you will see a list of all your created sites. Click `Create New` box to begin.

Create New Site from `Standard Template` or from `Blank Canvas`

New Orgs will only have access to the `Standard Template` or can start fresh from the `Blank Canvas.`

Enter Site Name

You will be prompted to give your new site a name, which will also generate your sites preview URL. This can be changed later in Site Settings

Site Overview Page

Here you will be able to manage and control your site overall by creating Pages and Environments, Invite Attendees, Upload assets and Premium Videos, etc.

Create a Home Page

To create a home page that your visitors will first see, Click the `Create Page` button

You will be prompted to fill out the page's Name, Tile, and Path (leave path as / to make it the first page users will see). Finally you will need to set the pages visibility to Public or Private. These settings can be changed by clicking on properties.

Editing Your Page

To edit you're pages you will need to click the edit button in the page list next to the home page we just created.

This will launch the Layout editor. This editor enables you to construct pages for your website utilizing Backstage Engine's building blocks, known as modules. These modules serve as the foundation for Backstage Engine and provide a straightforward means of creating interactive user experiences by integrating with its various sub-systems.

We will add a background for users to see when they visit your site. Use the following steps.

1. From the Side Panel add a Stacked Layout module on to the empty slot on our canvas.

2. In the Properties Panel, give it an orientation of vertical so that it's children will layout in that direction.

3. Set the min Height too 100vh. This will set the stacked layout to fill 100% of the viewport height, making it fill the entire height of the user's window.

4. Enter a URL of a background image we want to use the Background Image field

5. Set Background Size field to cover, so the image will cover the entire page

6. Click the save button at the bottom of the properties panel when you are finished

Once saved you should see a background image on your canvas

Preview Page

To obtain a preview of your webpage and assess its visual appearance and functionality as perceived by users, click on the Preview Page button located in the top right-hand corner of the editor. Upon clicking this button, a preview version of your page will be launched in a new browser tab. This feature is a valuable tool for testing your website's usability and ensuring that it meets the expectations of your target audience prior to publishing it for public consumption.