How To Use & Understand Page Sections

Page Sections are an extremely powerful tool that allows you to organize content and create sophisticated feature-rich multi-page Web Apps.  

When you create your first Apps they will be based on the MyPhotoApp default template and will consist of a single home screen with the most commonly used sections; logo; gallery; contact buttons; sharing buttons and copyright.   By default, all the section will be visible in the finished App.

Think of this like your home Screen on your mobile device or the desktop on your computer.  You can add, rearrange, duplicate or delete sections in the layout sections column.  When you publish the App all the sections will be visible when the App is opened on a device, unless of course, you have chosen to hide any.    When you start creating Apps this is great and for many simple Photo Apps a single home screen, with everything on it, is usually all that is required.    But as you begin to explore the different section you can add to an App and create more complex Apps it can begin to look a little crowded and you can end up with a long home screen that requires a lot of scrolling which can be a problem.  Too much information or the need to scroll to find what you are looking for can put clients off using your Apps.   Pages are one of the tools you can use to solve this problem.  

By adding page sections to an App you gain the ability to organize the content and decide what is visible on the Apps Home Screen.   Any section added to the home screen will ALWAYS be visible (unless the section is hidden).   Adding page sections allows you to create different pages for different topics or types of content such as forms; about pages; price guides; multiple galleries or whatever you want.    Pages have many uses and you can add any type of section to a page just as you would on the home screen.  Many of the Templates available in the builder make use of pages for a variety of different purposes from additional information to enhanced forms. One of the most common uses for a page section is to hold a contact or request information form that is only visible when the client clicks on a button together with a dialog success message for when they have submitted it.  An example of this is the Portfolio App Template.  Here is a link to an example App using this template.

Portfolio App Example

When you add sections to an App they are visible on the home screen unless you have chosen section settings that will hide the information or you have added more than one-page section.  There are 4 basic ways to hide information from the initial Home Screen on an App:

• Change the display type to Accordion – information appears when the user clicks on the accordion > to open and display the content and hides it when clicked again
• Change the display type to Dialog – information appears in a pop-up box when the condition you define has been met, such as pressing a button or submitting a form
• Add Page sections – Information for the sections contained on the page appears when the user clicks something to navigate to the page
• Change the Display to Hidden - Information appears when either a button or a show:link link is clicked

 

Page Sections

Page sections behave a little differently to other sections, they are only visible ONE page at a time. By default, ONLY the first-page section in your app, the topmost one in layout sections column, will be visible on the home screen when you open the app and any sections you add to this page will therefore also be visible.  Additional page sections that are added below this in the Layout Sections column will NOT appear on the home screen when the app is opened.   

Tip: To create an App so that content in all your page sections is only visible when you navigate to them add a blank page section as the topmost page in the layout sections column. 

When creating Apps with pages there are several things to consider: 

1. If you add a single page to an App the sections, it contains will be visible on the Home screen. Unless you have changed the section settings to a dialog or accordion display type to hide them.
2. When creating a multi-page App to organize a variety of content.
   1. Remember that any section you add to the top most page will be visible on the App home screen when the App is opened and will be visible until another page is selected. 
   2. If you do not want any of your pages and content to be visible on the home screen simply leave the top most page section blank.
   3. Use the Home screen to add content you wish to be displayed on each page. This is useful for creating header and footer information, for example, using your logo as a header and contact buttons and copyright as a footer for your pages.
3. Just like a traditional web page you need to add a means of navigating the pages in an App.

There are four ways to open a page in an App

• Menu Section
• Button
• Image and
• Text Link

4. Multi-page apps also need a means of returning to the main home screen so It’s a good idea to add a RETURN button to each page so clients can easily navigate back to the home screen or home page of the App. Not everyone will think to use the browser back button.

 

Here is a basic App showing these options   -     displaying pages 

TIP: You can now move sections from the App home screen to any page by right clicking on the section in the Layout Sections column and simply choosing the page you wish to move the section to. This is great if you decide to add pages to reorganize an App you have already created. 

 

The menu Section

The quickest and easiest way to add navigation is to add a menu section to your App to direct people to content on different pages. The menu section automatically creates links to your page sections using the labels you have defined in the page settings and appear at the top of the home screen of the App.   You should only add one menu section in an app

You can exclude pages from the menu, such as a blank top page section or those you want to add a different means of navigating to, by specifying the page labels of any pages you do not want to appear on the menu separated by commas.

In the Menu Settings you can choose:

• To display the label (only when menu is on the left)
• To show the menu as a bar
• To make the menu always Visible
• The position of the menu – on the left or right
• Set the background to transparent
• Change the menu icon color and
• Specify excluded pages.

By default, the menu is displayed as a Menu Icon at the top of the App on left – regardless of the position of the menu section in the layout sections.

If you have chosen to display the menu as a Menu Bar the menu icon and a horizontal bar will appear in the App where the menu section is located in the layout sections, clicking the menu bar opens a menu panel on the left and displays the page labels.

If you have ticked always visible the menu icon or bar will always be visible even if you scroll to the bottom of the App.

By default, the menu display type setting is normal and you should leave it as this as the display types accordion and dialog should not be used for a menu setting, they just don’t work on a menu section.

 

The Menu Link Section

This section allows you to add other items to a menu Section. You will need a menu link section for each additional item you wish to add. The link section serves two purposes:

1. To be a link to an external page or resource. For example, this could even be your terms and conditions page on your website, your FB page or Instagram page.
2. To be a link to a section. This can be a visible or hidden section. For example, you may have a pricing section at the bottom of a long page to make it easier to find just this information quickly you can add a link to it so that the pricing section also appears in the menu at the top of the App.   This is useful if you don’t want to have a separate page with just this information on.