There are 2 types of ordering when it comes to Image and Text Areas; UI Display Order and Layer Order.
The UI Display Order refers to the way that the options are presented to the end user within the user interface. The Layer Order refers to how the Images and Text are layered on top of one another within the App preview.
Controlling the UI Display Order
Both Text Areas and Image Areas are displayed alphabetically within the App by default, regardless of the order they are created in. It is possible to influence the display order by using the 'UI Display Order' field in the Text Areas menu. You can add a numerical value to this field to control the display order as required.
An alternative option would be to utilise an appropriate naming/numbering convention and make use of the alphabetical sorting.
Lets take a look at an example of a naming convention to control the display order:
The screen shot below shows 3 Text Areas; top, middle and bottom.
If we look at this in the App, we can see how this gets presented to the end user.
To change this Display Order, we can simply precede the names with a numerical value based on how we want them to appear.
Now if we take a look at this in the App, we can see the result:
Controlling the Layer Order (aka Z Order)
Currently there is no intuitive way to influence the Layer Order. It is based on the creation ID of the Image / Text Area. Whatever is created first, always sits on the TOP layer (in front of everything else), therefore anything created afterwards will be positioned underneath. Users should take this into consideration when creating products with multiple input areas and essentially work backwards with the configuration.
Important Note: Changing the Display Order has no affect on the Layer Order.
There is a 'trick' that we utilise internally, and this has proven to be very successful and a huge time saver if the image areas have already been created/configured. Essentially, you just have to duplicate the Image Areas to reflect the Layer Order that is desired, then delete those that are not needed.
Here is an example:
The screenshot below shows that we have 2 image areas configured with an appropriate Display Order. The problem we have is that we want the background to be the bottom layer, and the foreground to be the top layer - but we know that the top most area in the list view is the top layer in the Layer Order. So in this case the Background is the top layer and any image added to the foreground will be covered by it.
To fix this quickly, we can duplicate the Background Image Area by using the Duplicate Icon. This will copy all configuration settings and create an exact duplicate with a newer Image Area ID at the bottom of the Image Area list.
We can now Delete the top most Background Image Area, giving us the correct Layer Order to be used within the App. The screenshot shows the result; an image applied to the background and a logo applied to the foreground layer which sits on top.