Creating a page for mobile devices

After you have created and setup your project, you can start creating pages. To create a page that will display the content in different ways, depending on whether it is displayed on a computer or a mobile device, you must first, create a page, add content to it, then configure how the content will look like on a mobile device, then preview and publish the page.

Follow the procedure below to create your first page for an iPhone:

1. In the main menu, click Pages.
2. Follow procedure Creating a new page.
   In section Template, choose Don’t use template (start from scratch).
   The new page appears in the sitemap.
3. Add the layout element 5 x 20%
   For more information, see Adding layout elements.
4. Add the Content block widget to each of the 5 columns of the layout element.
   To do this follow procedure Adding widgets on your page and add the Content block widget.
5. Configure the Content block widget to display couple of paragraphs in each Content block widget.
   To do this, follow procedure Configuring the Content block widget » Entering content.
6. Click More actions » Preview on Smartphones & Tablets.
7. Click iPhone 4.
8. The columns of the page appear too narrow to read normally on an iPhone 4. It is more convenient to display the columns in rows when the user is using an iPhone 4.
9. To configure to display the columns in rows, in case an iPhone is used, perform procedure Displaying pages on mobile devices.
   In Step 5, select Smartphones and then the iPhone and in Step 6, select Transform the layout and under System settings: Fine tune default layout elements, click 5 rows.
10. Open the page that you have created and click again More actions » Preview on Smartphones & Tablets » iPhone 4.
    The text is displayed in rows.