Layout Templates

Layouts are most useful for KioSign installations that do not use a builder like Elementor. To use them, you need to be proficient in HTML & CSS and even JS (if you want to add custom JS).  Copy/paste and edit the code below and apply your own custom css changes to achieve layouts and style them as needed. 

Region Content

Content in each region can be manually added as html, a shortcode, or an iframe to display content in a KioSign slide, or playlist.  To use iframes, replace the src with the URL of your content. For example:

<div class="flex">
<iframe src="https://website.com/directory/post"></iframe>
</div>

Layout 1 – A simple 2-region grid

A simple 50% by 50% layout. 

iframe here
iframe here
<div class="abs l0 r50 t0 b0">
  <div class="flex f-center">
   iframe here
  </div>
</div>
  
<div class="abs l50 r0 t0 b0">
  <div class="flex f-center">
    iframe here
  </div>
</div>

Layout 2 – Adding in a footer

A simple 50% by 50% layout with a footer bar.

iframe here
iframe here
iframe here
<div class="abs l0 r50 t0 b20">
  <div class="flex f-center">
   iframe here
  </div>
</div>
  
<div class="abs l50 r0 t0 b20">
  <div class="flex f-center">
    iframe here
  </div>
</div>

<div class="abs l0 r0 t80 b0">
  <div class="flex f-center">
    iframe here
  </div>
</div>

Layout 3 – Using Flex grid inside regions

A simple 70% by 30% layout with a footer bar. Inside the footer is an example of flex content. Flex grids use the width and height classes to determine their size… or expand automatically if no fixed w/h is applied.

iframe here
iframe here
flex left
flex right
<div class="abs l0 r30 t0 b30">
  <div class="flex f-center">
   iframe here
  </div>
</div>
  
<div class="abs r0 l70 t0 b30">
  <div class="flex f-center">
    iframe here
  </div>
</div>
  
<div class="abs l0 t70 r0 b0">
  <div class="flex f-row">
    <div class="flex f-center w20">
      flex left
    </div>
     <div class="flex f-center w80">
      flex right
    </div>
  </div>
</div>

Layout 4 – Use Absolute or Flex classes

You can use either the absolute or flex classes to create your layout. Note: Flex regions may expand  to content unless you use width and hight classes. Internal content still works best with flex classes.

Example1: Abs grid version

iframe here
iframe here
iframe here
bar content here

Example2: Flex grid version

This same layout can be achieved with flex classes as well.

iframe here
iframe here
iframe here
iframe here

Example1: Abs grid version

<div class="abs l0 r66 t0 b20">
  <div class="flex f-center">
   iframe here
  </div>
</div>
  
<div class="abs l33 r33 t0 b20">
  <div class="flex f-center">
   iframe here
  </div>
</div>

<div class="abs r0 l66 t0 b20">
  <div class="flex f-center">
    iframe here
  </div>
</div>
  
<div class="abs l0 t80 r0 b0">
  <div class="flex f-center">
    bar content here
  </div>
</div>

Ex: Flex grid version

<div class="flex f-row h80 pad0">
  <div class="flex f-center pad0">
      iframe here
  </div>
  <div class="flex f-center pad0">
      iframe here
  </div>
  <div class="flex f-center pad0">
      iframe here
  </div>
</div>

<div class="flex f-row h20 pad0">
  <div class="flex f-grow f-center pad0">
      iframe here
  </div>
</div> 
    

Layout 5 – Borders and overlap

Use borders on regions to spice up the design. to avoid double borders, use borders only on three sides. For example:

style="border:solid red; border-width:5px 0 5px 5px"

Also, since regions are independent, they can be placed on top of others… like the blue one.

iframe1 here
iframe2 here
This is the bottom
on top
<div class="abs l0 r40 t0 b20" style="border:solid red; border-width:5px 0 5px 5px">
  <div class="flex f-center bg-color1" >
   iframe1 here
  </div>
</div>

<div class="abs r0 l60 t0 b20" style="border:solid red; border-width:5px ">
  <div class="flex f-center">
    iframe2 here
  </div>
</div>
  
<div class="abs l0 t80 r0 b0" style="border:solid red; border-width:0px 5px 5px 5px">
  <div class="flex f-center pad0">
   This is the bottom
  </div>
</div>

<div class="abs l65 r5 t10 b80" style="border:blue solid 4px">
  <div class="flex f-center bg-color1">
   on top
  </div>
</div>

Layout 6 – Panels

Use borders on regions to spice up the design. to avoid double borders, use borders only on three sides. For example:

style="border:solid red; border-width:5px 0 5px 5px"

Also, since regions are independent, they can be placed as panels… and titles can be placed inside that can be positioned using margins.

Heading

iframe1 here

Heading

iframe2 here

Heading

This is the bottom
<div class="abs l5 r45 t10 b30" style="border:solid red; border-width:5px">
    <p class="abs" style="margin: -30px 0 0 -5px"><strong>Heading</strong></p>
  <div class="flex f-center bg-color1" >
   iframe1 here
  </div>
</div>

<div class="abs r5 l60 t10 b30" style="border:solid red; border-width:5px">
    <p class="abs" style="margin: -30px 0 0 -5px"><strong>Heading</strong></p>
  <div class="flex f-center">
    iframe2 here
  </div>
</div>
  
<div class="abs l5 t80 r5 b5" style="border:solid red; border-width:5px">
    <p class="abs" style="margin: -30px 0 0 -5px"><strong>Heading</strong></p>
  <div class="flex f-center pad0">
   This is the bottom
  </div>
</div>

Layout 7 – Panels with -+ Margins

Using -+ margins on the regions, you can also achieve panels and have bit more control. Content inside (flex or iframe) will expand to the region size. For example:

style="border:solid red; border-width:5px 0 5px 5px"

Also, since regions are independent, they can be placed as panels… and titles can be placed inside that can be positioned using margins.

Heading

iframe1 here

Heading

iframe2 here

Heading

iframe3 here

Heading

No margins on this region

Show Margins

<div class="abs l0 r66 t0 b30" style="border:solid red; border-width:5px;margin:25px -5px 0 5px">
    <p class="abs" style="margin: -30px 0 0 -5px"><strong>Heading</strong></p>
  <div class="flex f-center" >
   iframe1 here
  </div>
</div>

<div class="abs l33 r33 t0 b30" style="border:solid red; border-width:5px;margin:25px 0px 0 10px">
    <p class="abs" style="margin: -30px 0 0 -5px"><strong>Heading</strong></p>
  <div class="flex f-center" >
   iframe2 here
  </div>
</div>
  
<div class="abs l66 r0 t0 b30" style="border:solid red; border-width:5px;margin:25px 5px 0 5px">
    <p class="abs" style="margin: -30px 0 0 -5px"><strong>Heading</strong></p>
  <div class="flex f-center" >
   iframe3 here
  </div>
</div>

<div class="abs l0 t80 r0 b0" style="border:solid red; border-width:5px">
    <p class="abs" style="margin: -30px 0 0 5px"><strong>Heading</strong></p>
  <div class="flex f-center pad0">
   No margins on this region
  </div>
</div>