Studio Layouts

4min
Studio Layouts provide a way for you to create re-useable layouts that seamlessly fit into the Studio experience.  After creating your layout, when your clients are editing their pages, the Studio Layouts UI will show your agency layouts alongside our Siteglide layouts.
Setup
To create or edit your layouts, there is a new section in Portal that can be accessed from the left menu called “Studio Layouts”.  From this screen you can view information about your existing layouts and edit them, or create a new layout.
Creating/Editing
While creating and editing a layout, you have the follow fields:
ID: Generated automatically
Create Date: Generated automatically
Name: Appears when a user hovers over a layout to drag it into Studio
Code: The code that gets written to the page when the user drops the selected layout
Image: The image that is displayed in the list of layouts  in Studio.  Please ensure that these images are no large than 600px wide
Categories:
Existing: Pick from a category that one of your existing layouts is in
New: Create a new category
Sites: Limit which sites can access this layout 
Enable: Whether this layout is visible within the selected sites Studio editor
Layout Recommendations
When creating layouts we recommend that you use the following format.  Wrap your your layout in a section that has a class in the following format {agencyName}-{category}-{ID} For example:
HTML
<section class=“siteglide-features-01”>
    //Layout code here
</section>
<section class=“siteglide-features-01”>
    //Layout code here
</section>
﻿
This way if the user has multiple layouts on a page, then you target any specific layouts via CSS by using the section class.

Any CSS that needs to be included specifically for the layout should be included in a style tag along with the layout.  For example:
HTML
<section class=“siteglide-features-01”
	<div class="red">
		<p>I am red</p>
	</div>
</section>

<style>
	.siteglide-features-01 .red {
		color: red;
	}
</style>
<section class=“siteglide-features-01”
	<div class="red">
		<p>I am red</p>
	</div>
</section>

<style>
	.siteglide-features-01 .red {
		color: red;
	}
</style>
﻿
This way, the user does not have to go to another section of Siteglide such as code editor to add in the CSS.  It is integrated into the layout itself.  Any Bootstrap or Sass Variables can continue to be used by applying that class to the layout.
Updated 03 Mar 2023
Did this page help you?
Studio
Testimonials