website logo
⌘K
Introduction
PORTAL
Agency Whitelabelling
PAGES
Pages - Accessing Page Data
Pagination Layouts
Page Templates
FORMS
Form Confirmation Pages
Adding a Progress Bar
Adding Custom CSS To Show Form Submit Process
Dynamic Content in Workflow and Autoresponder Emails
How to output Custom Field Set fields in a Form's Custom Layout
Custom JavaScript Validation for Forms
File Upload Previews
FAQ
CATEGORIES
Filtering WebApps and Modules by Categories
Outputting Categories on WebApp / Module / eCommerce Layouts
Outputting Category Fields in any Location
Category Detail Layouts
FAQ
COMPANY INFORMATION
Company Information
SITE SEARCH
Site Search
PUBLIC API/ZAPIER
Zapier - Formatting arrays correctly
Public API/Zapier Changelog
MODULES
Module Marketplace
Building Custom Modules
Siteglide Modules
Front-end Submit Modules
DATA STRUCTURES
Automations
Creating WebApps from the CLI
Field Types
WEBAPPS
Front-end Submit WebApps
Layouts
Search and Filtering
Understanding Custom Field Names and IDs
FAQ
CRM
User Details
User Secure Zones
Storing User's Favourite WebApp / Module Items
User's Form Submissions (Cases)
How Users Edit their Email and Password Front End
Editing a User's CRM record Front End with Custom Field Sets
CLI
Introducing Siteglide CLI
CLI Changelog
Secure Zones with CLI
Page Templates with Siteglide CLI
Pages with Siteglide CLI
Includes with Siteglide CLI
Managing Email Templates
Migrate - Manual Form setup
Migrate - Convert existing Forms
Liquid
Accessing Assets
Liquid Dot Notation
Using WebApp Collections- Tutorial
Using the current_user object with Secure Zones
Preventing Duplicate Content with Query Parameters- Canonical URL and Robots.txt
FAQ
GraphQL
Tutorial Overview
About GraphQL
Tutorial 1- Your First Query
Tutorial 2 - Pagination
Tutorial 3 - Filtering the Results
Tutorial 3 - Answers to the First Filtering Challenge
Tutorial 4 - Advanced Filtering
Tutorial 4 - Challenge Answers
Tutorial 5 - Using Liquid to run GraphQL queries on your Site
Tutorial 6 - Variables
Tutorial 6 - Answers to the Variables Challenge
Tutorial 7 - Sorting
Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
Best Practice and Performance
Module/WebApp Caching
Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
Includes
ecommerce/checkout_standard
Frequently Asked Questions
Using Liquid Logic to Check if a field exists, or is empty on the Front End
How do I learn more about Liquid?
How to setup a multi domain start page
Docs powered by archbee 
12min

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:

HTML
|

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
|

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 14 Jun 2021
Did this page help you?
Yes
No
UP NEXT
Testimonials
Docs powered by archbee 
TABLE OF CONTENTS
Setup
Creating/Editing
Layout Recommendations