Layouts

We have provided a bunch of page layouts and menu layouts that can be implemented with just a options change to body!

For creating your dream layout open customizer by click on setting icon

You can change your theme by clicking particular setting

Then you just need to click on configuration button

Configuration popup will be open then just click on copy json button which will copy configuration of theme which you want

Now go to our theme >> src >> data >> layout.json and then just replace with your configuration.

{
 "settings": { 
    {
    "layout_type": "ltr", 
    "sidebar": { 
       "type": "default", 
       "body_type": "default" 
    }, 
    "sidebar_setting": "default-sidebar", 
    },
 }, 
 "color": { 
    "layout_version": "light", 
    "color": "color-1", 
    "primary_color": "#7366ff", 
    "secondary_color": "#f73164", 
    "mix_layout": "default", 
 }
}

Please refer the below table for corresponding classes. it is just for your inforamation you do not need to bother about this it's dynamically take particular classes according to your needs.

Theme options

We have some inbuilt themes for sidebar that can be switched with just a class change

Header Structured

General HTML structure is the same throughout the template. Here is the header structure.

<div class="page-header">
    <div class="header-wrapper row m-0">
            ........
    </div>
</div>

Content Structured

Generate cuba content area using following structure.

<div class="page-body-wrapper">

  <div class="container-fluid">

    ........

  </div>

  <!-- Container-fluid starts-->

  <div class="container-fluid">

    .......

  </div>

  <!-- Container-fluid Ends-->

</div>

Footer Structured

Footer structure to complete cuba structure.

<footer class="footer">


  <div class="container-fluid">

    .............

  </div>


</footer>