--- title: Customize Zone Layouts slug: legacy-docs/customize-zone-layouts docTags: createdAt: 2025-03-11T06:56:07.598Z --- :::hint{type="warning"} This page / section pertains to **BrightAuthor Classic**, our legacy app. **BrightSign Author **is our latest app for managing content and players. Development of BrightAuthor Classic has largely ceased and the app will eventually be deprecated and replaced with BrightSign Author. ::: :::hint{type="success"} See this [tutorial video](http://brightsignbiz.s3.amazonaws.com/videos/step-by-step/Training%203.3.2%20Layout.mp4?custom=true\&width=520\&height=330) for an overview of zone layouts. ::: If the system zone templates do not meet your needs, you can manually edit the zone layout of your presentation. You can then save it as a user-defined template for use with future presentations. Once you have created a presentation project via **File > New Presentation**, click **Layout** (below the **Edit** tab) and customize the zones by doing any of the following: - *Rename the zone* – Enter a new name for the zone in the Name field. - *Add a zone* – Click **Add zone**. Enter a **Zone name**, select the **Zone type**, and then click **OK**. - *Delete a zone* – Click the zone and press the **Delete** key on your keyboard. - *Change the position of a zone manually* – Click and hold a zone. Then drag it to the desired position. - *Change the position of a zone using coordinates* – Enter the **Position** information. The **X** and **Y** values correspond to the horizontal and vertical position (in pixels) of the top-left corner of the zone. Using coordinates to specify the position allows for exact alignment with other zones. - *Resize a zone manually* – Click and hold one of the marks around the edge of a zone. Then drag it to create the desired zone size and shape. - *Resize a zone using pixel values* – Specify the **Size** information. The **W** and **H** values correspond to the width and height of the zone (in pixels). - *Make zones equal in size* – Press **Ctrl** and select the zones you want to resize. On the menu bar, click **Format** > **Make same size** and select a resize option. - *Align multiple zones* – Press **Ctrl** and select the zones you want to align. On the menu bar, click **Format** > **Align** and select an alignment option. - *Center one or more zones* – Select a single zone or press **Ctrl** and select the zones you want to center. On the menu bar, click **Format** > **Center in form** and select **Horizontally** or **Vertically**. ![](https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/DP67ryWPEmeFHqEechKwq_edit-layout.png) :::hint{type="warning"} The preview image is always displayed as landscape. If you're creating a portrait-mode presentation, refer to the portrait image on the left to see a more accurate representation of the screen layout. ::: ## Layering Zones You can place multiple zones in the same screen area and use transparency and z-ordering options to creating layering effects. For example, you can place a Ticker or Clock zone on top of a Video Only zone and then edit the transparency of the Ticker or Clock zone (in the [Zone Properties](docId\:eI52N-OePAwoWfKfYELBq)) to control how much of the underlying video shows through. There can be three layers (or "planes") in a multi-zone presentation. Each of these planes can be ordered in relation to the others: - *Graphics Plane*: This plane includes all Ticker, Clock, and Images zones (as well as the Video or Images zone if it's currently displaying an image or HTML page). Note that the layering of graphics zones with respect to each other can be unpredictable, and may change if the player firmware is updated or some other presentation setting is changed. - *Video Plane 1*: This plane consists of a Video Only or Background Image zone (or a Video or Images zone if it's currently displaying video). The Background Image zone uses the video decoder to display an image, so it counts as a video plane. - *Video Plane 2*: This plane consists of a second Video Only or Video or Images zone (if it's displaying video). :::hint{type="success"} If you want to place an image behind a graphics element, use a Background Image zone to display the image. ::: Use the following options to edit the layering of the three planes: - **Video Position Z**: (XT, XD, and 4K models only): Edit the z-ordering of one video plane in relation to another. - **Front**: Places the zone in front of another Video Only zone or Video or Images zone. - **Back**: Places the zone behind another Video Only zone or Video or Images zone. - **Graphics plane z position**: Edit the z-ordering of the graphics plane in relation to the video plane(s). - **Front**: Places the graphics plane (including all Ticker, Clock and Images zones) in front of the video plane(s). - **Between**: Places the graphics plane between two video planes. If there is only one video plane, the graphics plane will appear behind it. - **Back**: Places the graphics plane behind the video plane(s). ## Adding Mosaic Video Zones  If you set the **Video zone configuration** to **Mosaic** when [creating your presentation](docId:9iUH2AAFoA_CzgFX5bt1V), you will need to perform extra steps when adding Video Only or Video or Images zones: 1. Delete any video zones that were created with the presentation template. 2. Click **Add Zone** and select a Video Only or Video or Images zone. 3. Select a **Maximum Content Resolution**. This will determine the maximum resolution of video files you can add to the zone, as well as the maximum number of video zones you can add to your presentation. The maximum number of zones will also depend on the player model. 4. Use the **Add Zone** button to create additional video zones as desired. For each additional zone, you can select smaller maximum resolutions, but you cannot change the initial maximum resolution unless you remove all video zones from the presentation. ::Image[]{src="https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/4hn-wwbDMHwbmmtftiDRV_new-zone-window-mosaic.png" size="50" width="367" height="488" position="center" showCaption="false"} ### Maximum Usage The maximum allowed number of videos per video decoder are listed below; the limit may be lower depending on a number of factors, including interlacing and frame rate. - 4K decoder: - 1 4K video - 2 HD videos - 4 SD videos - 8 CIF videos - 10 QCIF videos - HD decoder: - 0 4K videos - 1 HD video - 3 SD videos - 4 CIF videos - 5 QCIF videos The capabilities of all video decoders on the player are combined to create a maximum number of available videos. The available video decoders for Mosaic Mode vary by model: - **XTx44**: 2 4K decoders - **XTx43, 4Kx42**: 1 4K and 1 HD decoder - **XDx34, XDx33**: 1 4K decoder *or* 2 HD decoders - **XDx32**: 2 HD decoders - **HDx24, LS424, HDx23, LS423, HO523, HS123, HDx22**: 1 HD decoder ## Saving the Zone Layout as a Template Once you've created a zone layout, you can save it as a user-defined template. To save the layout as a template, click **Save Template** (in the lower-left portion of the screen). Enter a name for the template, and then click **OK**. To use the customer template when creating a new presentation, click the **View** dropdown list in the upper-right corner of the **Template** window and elect **User Defined Templates** to view your templates.