Quick Start
Let us continue building the web page from the previous article.
Step-by-step design
Step 5 — Add another Section to the main area
1. From the Sections tab of Layout Blocks palette drag Section 9 into the main sections’ Container box.
Adding New Block/Component from Layout Blocks palette
There are multiple ways to add a new block/component into an existing container box.
1. Select the block from Layouts Block palette you want to add to a container, then drag it onto the container in which you want it to add.
But some times it is not possible to add the block directly into a container, especially when some other box is between your cursor and the target container.
2. You can add the block into the container by just dropping the block into the breadcrumb representing the target container on the Layout Blocks palette itself.
Screen Shot 2019-07-06 at 2.15.22 PM.png
Screen Shot 2019-07-06 at 2.19.32 PM.png
1
2
3
4
5
Figure (Step 5):  Main section with another row (Section 9)
Step 6 — Design a new section
1. From Layout Blocks palette drag n drop Text (Padded) component from the Basic tab onto the first column ( labeled 1 in the above figure ), add some text like “Escape the Ordinary” into the text box and style it.
2. From Components tab of Layout Blocks palette drag n drop Component 3 into second column  (labeled 2 in the above figure ).
3. Once it is added to the second column, remove the last Text Box from Component 3 , by selecting third box’s Padded Column.
Screen Shot 2019-07-06 at 2.56.48 PM.png
Component 3
Screen Shot 2.png
Component 3 after removing the third component from it
4. Select the Picture box from Component 3 and import an image into it File >Import... — cmd + E (mac)/Ctrl + E (win)
5. Add some text into the text box and style it.
6. Remove the two empty columns of this section i.e. Columns marked as 3 and 4 in the Figure (Step 5)
7. Now select the parent Column of Component 3 that we have just styled, and duplicate Item > Duplicate —cmd + D (mac)/ctrl +D (win)  it two times.
8. Style these two newly duplicated components with appropriate images and text.
9. Drag n drop Component 9 from Components tab of Layout Blocks palette into the column marked 5 in Figure (Step 5)
Screen Shot 2019-07-07 at 3.34.18 PM.png
Button 1
Button 2
Title
Description
Component 9 and it’s text components representing Title, Description, Button 1 and Button 2
10. From Component 9 that we have just dropped, remove Title by selecting its Padded Column . ( To remove a component select the component and press delete, But make sure Item tool is selected while pressing delete )
11. Also, remove Button 2 from Component 9.
12. Now select the Component box of Component 9 and from Container tab of Measurements palette, set the Justify to Center
13. Add some content to the Text box ( marked Description in above figure ) using Utilities > Insert Placeholder Text, and from Flex tab set it’s Max-W to 600px
14. Add some text like “Book now” in the Text box (marked Button 1 in above Figure) and style the box by applying a background color to it from Colors  palette
Screen Shot 2019-07-07 at 5.16.37 PM.png
Figure  (Step 5)  — Layout after Step 5
Step 7 — Add copyright to page footer
1. Drag n drop Text (Padded) block from Layout Blocks palette onto the Column box of footer section and add some text in it e.g. ©2019 Spirits of Adventure. All rights reserved.
2. From the Border tab of Measurements  palette, you can also add a top border to the text box
Step 8 — Preview web page
1. To test the responsive behavior of your page, you can always grab the page dragger handle and try to resize the page. To see your page without guides, you can turn off guides from View >  Guides ( F7 ).
2. To test it with the browser, you can use Layout > Preview HTML 5 Publication > HTML Page Preview. This will open your page with the default browser. In case you want to test it with some other browser, just copy the URL from default browser and paste it into another browser.
Screen Shot 2019-07-08 at 8.05.17 AM.png
Page preview in Safari Browser
Resources
Screen Shot 2019-07-05 at 12.43.10 PM.png
Video recorded tutorial of the layout