Oh I did a merry little dance when I stumbled across Shoelace.io! While you get that picture of your mind, let me explain why this is a great tool for those who want to really go to town on their school website and get stuck in to a little bit of coding.

The Schudio School Website CMS is built entirely from the ground up using, amongst other things, the Bootstrap framework. Bootstrap is the bits of code in your school website that make it responsive and look lovely on all devices.

The structure of the pages is achieved using columns or ‘divs’. When your browser window gets smaller (or you view the website on a phone), the columns cascade beneath one another to make the page work wherever your users are.

Writing this code is a bit tricky (but not that difficult) if you’ve got the time to learn. But most people don’t have the time to learn and so Shoelace works hard to make this really easy.

All you have to do is click to add different block to your page, drag to resize them, creating as many areas for your page as you like. Then simply copy and paste the code in to your Schudio School Website and add content to each of the divs.

The Schudio School Website CMS is flexible enough for you to be able to hide sidebars and other elements to create full width pages and when you couple that with the code you grab from Shoelace you can now create some stunning pages really easily.

We’ll now be covering some of these features and certainly talking through Shoelace in some of our upcoming training sessions so do watch out for those. In the meantime, have a play, and let us know what you think!

EXAMPLE OF THE SHOELACE.io CODE

<div class="container">
    <div class="row">
        <div class="col-xs-10">**INSERT YOUR CONTENT HERE**</div>
    </div>
    <div class="row">
        <div class="col-xs-5">**INSERT YOUR CONTENT HERE**</div>
        <div class="col-xs-5">**INSERT YOUR CONTENT HERE**</div>
    </div>
    <div class="row">
        <div class="col-xs-3">**INSERT YOUR CONTENT HERE**</div>
        <div class="col-xs-4">**INSERT YOUR CONTENT HERE**</div>
        <div class="col-xs-3">**INSERT YOUR CONTENT HERE**</div>
    </div>
</div>