Layouts - Examples

Owned by James Yeoh
Last updated: Aug 08, 2024
7 min read

Here are the most commonly used Layouts used on NexSigns.  Containers are placeholders that are used for screen segmentation and the unit of measurement for Ratios is in percentages.  Channels and Templates are used to display your content.  Publishing a Layout will update the media on your NexSigns device.

Optimal 1080p (FHD) Resolutions

Optimal 1080p (FHD) resolutions for each Container are displayed in pixels [Width x Height]

Topics Covered

Example #1 - Full Screen

This is the most common Layout for NexSigns digital signage clients.  

Complete Tutorials

Create and Publish a Multimedia Playlist - quickly upload images and videos to your Nano-PC
Create and Publish a NexSigns Template - quickly add and publish a Template to your Nano-PC

  

Example #1 - Full Screen - Sample Screen Capture (YouTube)


This example assumes a Full HD resolution of 1920 by 1080px (Width x Height)

  1. Find the desired Layout and select Edit Layout
  2. Select New Vertical Container

     

  3. Connect the Container (My New Container) to a Channel / Template
    (See steps 5 & 6 from the section "Create a Container and Connect it to a Channel or Template" above)



  4. Publish the Layout to view it on your NexSigns digital signage device.
  5. You are done!

Example #2 - Split Screen (Left / Right)

This Layout allows users to have 2 different areas to display different media on the Left and Right side of the screen.

 


Example #2 - Split Screen (Left / Right) - Sample Screen Capture (YouTube)


This example assumes a Full HD resolution of 1920 by 1080px (Width x Height)

  1. Find the desired Layout and select Edit Layout
  2. Select New Vertical Container, name it Left Side, set the Ratio to 50, and select Save Ratio
  3. Select New Vertical Container, name it Right Side, set the Ratio to 50, and select Save Ratio



  4. Connect both Containers (Left Side / Right Side) to a Channel / Template
    (See steps 5 & 6 from the section "Create a Container and Connect it to a Channel or Template" above)



  5. Publish the Layout to view it on your NexSigns digital signage device.
  6. You are done!

Example #3 - Split Screen (Top / Bottom)

This Layout allows users to have 2 different areas to display different media on the Top and Bottom of the screen.

 


Example #3 - Split Screen (Top / Bottom) - Sample Screen Capture (YouTube)


This example assumes a Full HD resolution of 1920 by 1080px (Width x Height)

  1. Find the desired Layout and select Edit Layout
  2. Select New Horizontal Container, name it Top Container, set the Ratio to 87, and select Save Ratio
  3. Select New Horizontal Container, name it Bottom Bar, set the Ratio to 13, and select Save Ratio



  4. Connect both Containers (Top Container / Bottom Bar) to a Channel / Template
    (See steps 5 & 6 from the section "Create a Container and Connect it to a Channel or Template" above)



  5. Publish the Layout to view it on your NexSigns digital signage device.
  6. You are done!

Example #4 - Media Area, Side Bar & Bottom Bar

This is an advanced Layout that displays a lot of media.  The Media Area is recommended to display a Multimedia Channel.  The Sidebar can be used for different Widgets such as Social Media, and Weather.  The bottom bar can be used for text feeds such as RSS, News, or Weather. 

  



Example #4 - Media Area, Side Bar & Bottom Bar - Sample Screen Capture (YouTube)


This example assumes a Full HD resolution of 1920 by 1080px (Width x Height)

  1. Find the desired Layout and select Edit Layout
  2. Select New Horizontal Container, name it Top Container, set the Ratio to 87, and select Save Ratio
  3. Select New Horizontal Container, name it Bottom Bar, set the Ratio to 13, and select Save Ratio

     
     
  4. Click on View Container for Top Container



  5. Select New Vertical Container, name it Media Area, set the Ratio to 80, and select Save Ratio
  6. Select New Vertical Container, name it Sidebar, set the Ratio to 20, and select Save Ratio
    (this will create 2 smaller Containers within Top Container)

     

  7. Connect all three Containers (Media Area / Sidebar / Bottom Bar) to a Channel / Template
    (See steps 5 & 6 from the section "Create a Container and Connect it to a Channel or Template" above)



  8. Publish the Layout to view it on your NexSigns digital signage device.
  9. You are done!

Example #4 - V2 - Media, Weather, & Clock

This is an advanced Layout that displays a lot of media.  The Media Area is recommended to display a Multimedia Channel.  The Bottom Left can be used for different Widgets such as Weather and Scrolling Text.  The bottom right can be used for the /wiki/spaces/KB/pages/1507131393. 

This example assumes a Full HD resolution of 1920 by 1080px (Width x Height)

  1. Find the desired Layout and select Edit Layout
  2. Select New Horizontal Container, name it Top, set the Ratio to 85, and select Save Ratio
    1. Connect the Media - HD Multimedia Channel
  3. Select New Horizontal Container, name it Bottom, set the Ratio to 15, and select Save Ratio
  4. Click on View Container for Bottom
  5. Select New Vertical Container, name it Bottom Left, set the Ratio to 75, and select Save Ratio
    1. Connect the Weather Widget Webscript Channel
  6. Select New Vertical Container, name it Bottom Right, set the Ratio to 25, and select Save Ratio
    1. Connect the /wiki/spaces/KB/pages/1507131393
  7. Publish the Layout to view it on your NexSigns digital signage device.



  8. You are done!

Example #4 - V3 - Media, Side Bar, Weather, & Clock

This is an advanced Layout that displays a lot of media.  The Media Area is recommended to display a Multimedia Channel.  The Sidebar can be used for different Widgets such as Social Media, and Weather.  The Bottom Left can be used for different Widgets such as Weather and Scrolling Text.  The bottom right can be used for the /wiki/spaces/KB/pages/1507131393. 

This example assumes a Full HD resolution of 1920 by 1080px (Width x Height)

  1. Find the desired Layout and select Edit Layout
  2. Select New Horizontal Container, name it Top, set the Ratio to 85, and select Save Ratio
  3. Select New Horizontal Container, name it Bottom, set the Ratio to 15, and select Save Ratio
  4. Click on View Container for Top
  5. Select New Vertical Container, name it Top Left, set the Ratio to 85, and select Save Ratio
    1. Connect the Media - HD Multimedia Channel
  6. Select New Vertical Container, name it Top Right, set the Ratio to 15, and select Save Ratio
    1. Connect the Sidebar - Multimedia Channel
  7. Click on View Container for Bottom
  8. Select New Vertical Container, name it Bottom Left, set the Ratio to 75, and select Save Ratio
    1. Connect the Weather Widget Webscript Channel
  9. Select New Vertical Container, name it Bottom Right, set the Ratio to 25, and select Save Ratio
    1. Connect the /wiki/spaces/KB/pages/1507131393
  10. Publish the Layout to view it on your NexSigns digital signage device.



  11. You are done!

Example #5 - Banner, Media, Weather, Clock, and Side Bar

This is an advanced Layout that has 5 parts.  The Media Area has a 16:9 Aspect Ratio and is recommended to display a Multimedia Channel.  

This example assumes a Full HD resolution of 1920 by 1080px (Width x Height)


Example #5 - Banner, Media, Weather, Clock, and Side Bar - Sample Screen Capture (YouTube)


  1. Find the desired Layout and select Edit Layout
  2. Select New Horizontal Container, name it Top, set the Ratio to 10, and select Save Ratio
    1. Connect the Top Banner Multimedia Channel
  3. Select New Horizontal Container, name it Middle, set the Ratio to 75, and select Save Ratio
  4. Select New Horizontal Container, name it Bottom, set the Ratio to 15, and select Save Ratio
  5. Click on View Container for the Middle Container
  6. Select New Vertical Container, name it Middle Left, set the Ratio to 75, and select Save Ratio
    1. Connect the Media - HD Multimedia Channel
  7. Select New Vertical Container, name it Middle Right, set the Ratio to 25, and select Save Ratio
    1. Connect the Side Bar - HD Multimedia Channel
  8. Click on View Container for the Bottom Container
  9. Select New Vertical Container, name it Bottom Left, set the Ratio to 75, and select Save Ratio
    1. Connect the Weather Widget Webscript Channel
  10. Select New Vertical Container, name it Bottom Right, set the Ratio to 25, and select Save Ratio
    1. Connect the /wiki/spaces/KB/pages/1507131393
  11. Publish the Layout to view it on your NexSigns digital signage device.



  12. You are done!