On this page

What is SiteGUI Layout?

Layouts are important for creating visually appealing and functional user interfaces. They allow developers to organize the components of an application in a logical and intuitive way. A SiteGUI Layout is an arrangement of BlockHolders that can be displayed at a relative position of a view, such as main, top, bottom, left or right (to view these blocks visually, add "nam=sgblock" to the URL of the webpage  e.g: https://sitegui.com/store/hosting-plans?nam=sgblock). SiteGUI supports the following BlockHolders by default:

  • block_head: should be attached to <head> tag, should contain non-visible content such as scripts or CSS (inline or URLs)
  • block_header: should be displayed at the header of the page (where logo and menu are displayed)
  • block_spotlight: should be displayed where attracts most attention from viewers
  • block_left: should be displayed to the left of the page
  • block_right: should be displayed to the right of the page
  • block_top: should be displayed at the top of the page
  • block_bottom: should be displayed at the bottom of the page
  • block_main: should be displayed as the main content
  • block_footnote: should be displayed near the end of a page but before the footer area
  • block_footer: should be displayed at the end of a page

  • content_header: should be displayed at the header of the main content
  • content_spotlight: should be displayed at the spotlight of the main content
  • content_left: should be displayed to the left of the main content
  • content_right: should be displayed to the right of the main content
  • content_top: should be displayed at the top of the main content
  • content_bottom: should be displayed at the bottom of the main content
  • content_footnote: should be displayed near the end of the main content but before the footer area
  • content_footer: should be displayed at the end of the main content

A layout may add more custom BlockHolders (should start with block_) but should support as many default BlockHolders as it could to make the layout usable with different applications which may attach ViewBlocks to those default BlockHolders. 

As a layout focuses more on the structure of a page, it should contain mostly BlockHolders to help moving them around easier using SiteGUI Layout editor. We can provide content (HTML/CSS) for those BlockHolders staticly through header.tpl and footer.tpl or dynamically through ViewBlocks defined in each app. Please note that using header.tpl/footer.tpl is not mandatory, HTML can be present in the layout file by wrapping around BlockHolders or being placed inside BlockHolders but the advantage of using header.tpl/footer.tpl is that they can provide content for different layout files, making designing a new layout a lot easier.

Sample Layout

  {block name='block_head'}<html><head>{$block_head}</head>{/block}
{block name='block_body'}
<body class="sg-{if $api.page.subtype}{$api.page.subtype|replace:'App::':''|lower}__{/if}{$api.page.type|lower}">
 <div class='container-fluid'>
   <div class='row'>
     <div class='col-sm-12'>
       <div class='row'>
         <div id='block_logo' class='col-sm-6'>
           <div class="sg-block-content">{block name='block_logo'}{$block_logo}{/block}</div>
         </div>
         <div class='col-12'>
           <div id="block_header" class="sg-block-content">
          {block name='block_header'}{$block_header}{/block}
        </div>
         </div>
       </div>
     </div>
     <div class='col-12'>
       <div id="block_spotlight" class="sg-block-content">
          {block name='block_spotlight'}{$block_spotlight}{/block}
        </div>
     </div>
   </div>
 </div>
 <div class='container-fluid'>
   <div class='row'>
     <div id='block_left' class='col-auto'>
       <div class="sg-block-content">{block name='block_left'} {$block_left} {/block}</div>
     </div>
     <div class='col top-main-bottom'>
       <div class='row'>
         <div class='col-12'>
          <div id="block_top" class="sg-block-content">
            {block name='block_top'}{$block_top}{/block}
          </div>
         </div>
         <div class='col-12'>
           <div id="block_main" class="sg-block-content">
            {block name='block_main'}{$block_main}{/block}
            {* You can place everything before this line into header.tpl and anything after this line to footer.tpl *}
           </div>
         </div>
         <div class='col-12'>
           <div id="block_bottom" class="sg-block-content">
            {block name='block_bottom'}{$block_bottom}{/block}
           </div>
         </div>
       </div>
     </div>
     <div id="block_right" class='col-auto'>
       <div class="sg-block-content">
          {block name='block_right'}{$smarty.block.child}{$block_right}{/block}
        </div>
     </div>
   </div>
 </div>
 <div class='container-fluid'>
   <div class='row'>
     <div class='col-12 px-0'>
       <div id="block_footer" class="sg-block-content">
          {block name='block_footer'}{$block_footer}{/block}
        </div>
     </div>
   </div>
 </div>
</body>
{/block}
{block name='block_script'} {$block_script} {/block}
</html>

In the sample layout above, {block name='block_logo'} {$block_logo} {/block} can be replaced by the content specified for block_logo in header.tpl while the content for {block name='block_body'} is already present (but it can be replaced if header.tpl has content for block_body)

Layout Editor

The Layout Editor lets you create a new layout or edit an existing layout visually. You can drag and drop layout components into the editor, resize or arrange them as you desire.

Previous
Template Overview
Next
Template Variables
The all-in-one digital platform you ever need is here!