Studio Layouts

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:

<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:

<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.