Navigating Sections

Sections

A section is used as a whole area of the screen where you can input content.

  • To add a section, navigate to the “Add Section / Row” tab by clicking the “+” icon on the left menu. From this menu, drag the “Section” icon from the left into the app screen.
  • Your section will now appear in the app screen preview.

A created section has many options and settings.

  • To access the options for actions and settings of any section, hover your mouse over the area of the section on the preview screen.

Once hovering in the correct area, you will see "Section" appear in the corner of the section’s outlined area.

Move Section

  • To move a section, click and drag the name of the section when hovering over it. This will pick up the section. Keep holding down your mouse and drag the section to the location on the preview screen you’d like for it to go.

Duplicate Section

  • To duplicate a full section, click the duplicate button that appears when hovering on a section. The duplicate button looks like two little pieces of paper overlapping each other. Once you click duplicate, a clone of the whole section will appear right beneath it in the preview screen.
  • Note – this will exactly duplicate every row and element within the entire section.
  • It is important to note that each section is individual from the other sections. Any created or duplicated section will have its own settings and properties that can be changed individually from the others.

Delete Section

  • To delete a section, click the trash button that appears when hovering on a section.

Section Settings

To access the settings for a section, click the name of the section that appears when hovering on a section. Once clicked, several configurable options for that section will appear.

Within the settings for a section, left and right menus will appear with several configurable options:

Section Name

  • The name of your section. The name is simply used for your reference as the app builder, but it will not appear anywhere to app users. By default, a new section will be named “Section”.
  • To name a section, click the pencil icon in the top of the left menu, and type your new name for the section, and click save.

Sticky

  • Sticky is used to determine whether or not the section sticks in place on the screen as the app user scrolls up and down your screen. 
  • For example, Instagram has a top and bottom bar, which stays on the screen no matter how much you scroll up and down. These top and bottom bars are considered “sticky”.

The Sticky drop-down menu has three options: None, Top, or Bottom.

  • None: the section will scroll up or down in the same spot on the phone screen as the app user scrolls.
  • Top: the section will stick to the top of the phone screen as the app user scrolls.
  • Bottom: the section will stick to the bottom of the screen as the app user scrolls. 

Background Image

  • You may upload an image as the full background of your section. To add a background image to your section, click the pencil icon underneath where it says “Background Image” on the left menu. Upload your image, and click the Save button.
  • Important - Aim to use images with a low file size. We recommend resizing any images to be under 100kb in file size before adding them to your app.
    • This is essential to help your images load faster for app users.
  • To remove an image from a section's background, simply click the trash icon underneath where it says "Background Image".

Fit

  • The fit of a section determines its maximum width across the screen. To edit the width of your section, click the drop-down menu underneath “Fit” on the left menu. Select a section width option to your liking.

Animation

  • Setting an animation for your section will cause the section to load in with a visual effect. 
  • Once the main screen is loaded on a phone, the animation chosen will take place according to your trigger settings. Beneath “Trigger”, you will see a dropdown menu, and an input for for “Minutes” and “Seconds”.
  • To choose an animation for your section, click the drop-down menu below “Trigger" and select an animation.
  • The "Minutes" and Seconds" inputs are used as a timer. Once a screen is loaded on a phone, the timer starts ticking down. When the timer expires, your section’s animation will occur.
  • Note - once the animation has started, it will continue on the same timer, no matter if the user leaves the screen or returns to it later.

Background Color

  • To set a background color for a section, click the color box to the left of where it says “Background Color” on the “Appearance” menu on the right side of the page.
  • As you select and edit your color, you’ll see the preview of it within the screen preview.
  • Once satisfied, simply click anywhere else on the page to set the color.

Opacity

  • Opacity is used to edit your section’s visibility on the screen. To change the opacity, drag the slider under “Opacity” on the “Appearance” menu on the right side of the page.

Align

  • To align your section to the left, center, or right of the screen, click the corresponding icons underneath “Align” in the “Appearance” menu on the right side of the page.
  • Note – The Align settings only make a difference if the section is not full width. If your section’s “Fit” is set to 100% width, alignment will not show a visible change.

Border

  • The visual border around your section is determined by a number of factors:

Style

  • To set your border’s style, enter the drop-down menu beneath “Style” on the “Appearance” menu on the right side of the page. You can then select from a list of several border styles.
  • Note – to remove your section’s border, set the border style to “None”.

Border Color

  • To set the color of your border, click the color box next to “Border Color”. Once satisfied, simply click anywhere else on the page to set the color.

Border Size

  • To set the thickness size of your border, enter the drop-down menu beneath “Border Size” on the “Appearance” menu on the right side of the page. You will see a list of several “Point” options. The higher the number is, the thicker the border will be.

Border Radius

  • The radius of your border is used to determine the roundedness of your section. To change your border’s radius, drag the slider under “Border Radius” on the “Appearance” menu on the right side of the page. The higher the number is, the more round your border’s edges will become.

Spacing

  • Spacing is used to generate space around content, inside of a section. To edit spacing settings, scroll to the bottom of the “Appearance” menu on the right side of the page to where it says "Spacing". You can edit the spacing of the Top, Bottom, Left, and Right of a section by dragging the sliders for each respectively. The higher the spacing is, the more space between the border of the section and the content.

Sections Manager

Once you have added several sections to your screen, it is important to be able to manage and distinguish between each section.

  • To access the Sections Manager tab, click the three horizontal lines icon on the left menu.

In this area, a list of all of your sections will be displayed on the left menu. From here, you have a few things you can do:

Change the order of sections

  • If you click and hold on a section in the left menu, you can drag it. To change the order of your sections, simply click and drag a section to your preferred spot, above or beneath the other section(s). It will update accordingly in the screen preview as well.

Rename a section

  • To rename a section, click on the pencil icon of the section you'd like to change the name of. Type in the name you'd like to give the section, and click save once your changes are complete.

Make a section visible or invisible

  • If you want to make a section disappear from your app’s screen without fully deleting it, you can do that within the Section Manager.
  • Locate the name of the section you wish to edit the visibility of in the Section Manager. Click on the eye icon to edit the visibility of this section. This icon works like a light switch; you can either turn the visibility of a section “on” or “off”.

Duplicate a section

  • Locate the name of the section you wish to duplicate in the Section Manager. To duplicate a full section, click the duplicate icon, which looks like two little pieces of paper overlapping each other. Once you click duplicate, a clone of the whole section will appear right beneath it.
  • Note – this will exactly duplicate every row and element within the entire section.

Delete a section

  • To delete a section, click the trash icon of the section you’d like to delete.

If you have any questions about this article, feel free to reach out to our support team! We're happy to help.