# Step by Step to create your first page

Once inside the Page Designer screen for designing web pages, the User can follow the below steps to create a simple web page.

The system redirected the user to the page setup screen where the user can add the content to the page. For creating content, users can simply drag and drop the desired UI elements from the components panel and place them on the page.

![](https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FjNnSnzI7oF8L4WUTRu2A%2Fimage.png?alt=media\&token=a1a89abd-0405-4a57-9152-6a640fc241c6)

To create a sample 'Hello World' page, click ![](https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Fsu7fkx9zJFKTt7bsFGff%2Fimage.png?alt=media\&token=6cc25636-c122-4c44-b4b8-891981c59ace) the icon to upload new images into the application and also to browse through already uploaded images. Drag the image from the images panel on the left side and drop it on the top of the Container.

![](https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Fd3ZedSX3wvdTVIs0oL6z%2Fimage.png?alt=media\&token=522bb635-12b5-4a3f-8533-929642f833d2)

Click on the Template Heading and select ![](https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FlsA9oPdsAHv0jiUNpT03%2Fimage.png?alt=media\&token=849cb45c-037c-49dd-a61a-ff62c4a79593) in the menu bar on top of the heading for edit

<table><thead><tr><th width="182.42857142857142">Symbol </th><th>Description:</th><th data-hidden></th></tr></thead><tbody><tr><td><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FydlAr6Z5w29txqHsjXmp%2Fimage.png?alt=media&#x26;token=2d93cccd-c6bf-4763-bb69-9606b1de306d" alt=""></td><td><p>Drag Handle: Use this to drag the Text to a different row.</p><p></p></td><td></td></tr><tr><td><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FPSRmzMtdhBc3ia30wS0Z%2Fimage.png?alt=media&#x26;token=5fe5e2f5-efb0-4ce0-ad9f-485c455ff8be" alt=""></td><td><p>Select Container: Use this to select the Div., Col., Row or full container.</p><p></p></td><td></td></tr><tr><td><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FX15LDYez66UTYhwGn2qJ%2Fimage.png?alt=media&#x26;token=3f6bc054-d07f-4cb7-991a-c4ce12730b8c" alt=""></td><td><p>Edit: Use this to write, edit or change content font or style of this text box.</p><p></p></td><td></td></tr><tr><td><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FQDIJFKI5sI8sMUUOU8Iu%2Fimage.png?alt=media&#x26;token=2fa34121-d6eb-4de6-8c52-54812fee1004" alt=""></td><td><p>Delete: Remove the text block from your web page.</p><p></p></td><td></td></tr><tr><td><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FuzqHjC5qvhIuQppbmXgJ%2Fimage.png?alt=media&#x26;token=3a00f596-0b90-490e-b2ad-42a238652dc9" alt=""></td><td><p>Duplicate: Copy and duplicate the component selected.</p><p></p></td><td></td></tr><tr><td><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FUu7aspQebefEsAAsE0tt%2Fimage.png?alt=media&#x26;token=c609ac77-0e72-42ed-9c2a-aabe661199ac" alt=""></td><td><p>Connect to Data: Connect to data from Microflow or store or local database to create dynamic contents.</p><p></p></td><td></td></tr><tr><td><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Fs3ldbGud5JjKKiU72ICJ%2Fimage.png?alt=media&#x26;token=a43f2766-7a93-46d1-a6d1-29de44f715c9" alt=""></td><td><p>Translation: To support multiple language in the Pages.</p><p></p></td><td></td></tr></tbody></table>

![](https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Fw470jlXWkffD053TZxAA%2Fimage.png?alt=media\&token=22f60a1f-c8e9-4050-9171-eb36d477c992)

&#x20;     Type "Hello World" instead of Template Heading

![](https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FAdTQbz6owgVWMhFGM3lD%2Fimage.png?alt=media\&token=3bbbc6e3-108a-412f-a7d2-9701a3281a2c)

Save the changes to your page by clicking on the save icon![](https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FhMuPh4ImnqPegS4ZJURs%2Fimage.png?alt=media\&token=5743f6b3-b62b-4292-9789-84ff088328d2)at the top panel.

![](https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Fs9cCuukYDaOdJHucGYn8%2Fimage.png?alt=media\&token=377652c3-4ce2-4259-b254-a21f523542f8)