Separator Section

The separator section allows you to add a range of simple line separators between the different section in your App to create a more visually pleasing design and separation.  

Simply adding a separator section without choosing any settings will add a small separation, that will reveal the App background color or App background image if one has been uploaded. The screen shot on the left shows 3 image section on the App home page and the one on the right show the default spacing added when I put separator sections between them.

Click on the settings cog to open the separator settings and choose the options you want.

There are only 5 settings to adjust, the preview area will display the results as you make changes:

1.  Width -   Slide the slider to set the width of the separator, the default is full width at 100%,  slide left to reduce this and see the effect in the preview area. 

2.  Height -  This sets the height of the line separator, from 1 - 100, the default height is 2 which is probably the minimum you can successful use. 

3.  Color -   By default line styles are displayed in dark gray as shown below. Click to select a color from the color picker or enter the hexadecimal number to match your App or Brand colors. 

4.  Style -  Set to solid by default, click to choose from none or 8 different line styles listed on the drop down list. 

None - Specifies no border. This is the default.

Dotted - Specifies a dotted border in the color you have set.  

Dashed - Specifies a dashed border in the color you have set.

Solid - Specifies a solid border in the color you have set.

Double - Specifies a double line border in the color you have set.

Groove - Specifies a 3D grooved border with a two tone effect with the default gray on the top half and the color you have set on the bottom half. 

Ridge - Specifies a 3D ridged border with a two tone effect with the color you have set on the top half and the default gray the bottom half. 

Inset - Specifies a 3D inset border. Produces a border based on the color you have set the final effect depends on the border-color value. 

Outset - Specifies a 3D outset border. Produces a darker border based on the color you have set and the default gray the final effect depends on the border-color value

5. Vertical Padding -   Set to zero by default, this allows you to add vertical padding to the separator, padding is applied equally above and below the line style you have selected and increases the height of the separator section and the separation between the sections.  

When you select None as the line style adding vertical padding will create a blank separator section that will display what ever is set as the App background.

 

Once you have finished making your selections click save to check out your new separator in the visual design.  

Unless you want to use multiple styles of separator use the copy & paste section button to copy your separator section and drag them into the position.  if you regularly use the same style, color and size of separator why not save the section as a custom section ready to add to all your Apps. 

That's it all you need to do now is publish your app and check out your new feature. 

 

TIP - How to add Decorative graphics as separators

If you fancy something a bit more sophisticated with swirls and curls why not create your own graphics to use as your own section separators instead and save as png files to preserve transparency or as a jpg or gif.  Alternatively, there are lots of free resources for vector graphics you can use separators and a simple google search for page separators, page dividers or page ornaments should bring up a great selection, here are just a few that I found.  

Once you have your fancy separator simply add a new image section to your App and upload your image file to get an even more customized look like this:

For special event Apps you could go for even more unusual separators like these lovely Christmas ones.