Use Site Studio on an existing website to access the page editing and page layout features. Understand the following aspects before you use Site Studio:
Responsive media queries (breakpoints) and responsive grid
Site Studio enables you to configure the responsive media queries (breakpoints) and website grid for your website. Access these settings by navigating to Site Studio > Website settings > Responsive grid settings.
Match the settings in Responsive grid settings with the settings in the existing website theme. For additional information, visit Configuring your responsive grid settings.
CSS styles for base elements
Existing website themes often include styles for base elements such as <p>, <h1>, and <blockquote>. Do not use the Site Studio style builder that you access by navigating to Site Studio > Styles > Base styles to create base styles. These styles override the theme base styles and affect the appearance of other pages. For additional information, visit Creating base styles.
Important
Enable the Acquia Site Studio base styles module even if you do not use the base styles features.
Custom CSS classes
To create custom CSS classes, navigate to Site Studio > Styles > Custom styles. Site Studio prefixes styles with .coh-style to prevent clashes with the theme style sheet. To apply classes defined in the existing website theme to Site Studio elements, apply them in the markup tab of the element. For additional information, visit Adding markup to an element.
Add the layout canvas to your content entities
To use the layout canvas on existing content entities, add the Layout canvas field. To add this field, navigate to Structure > (Entity type) > (Bundle) > Manage fields. The layout canvas renders in the content region of the website. For additional information, visit Adding the layout canvas field to content entities.
Important
Site Studio uses render placeholders for inline CSS. Since these cannot be naturally injected into the HTML template, the site theme must contain <site-studio-placeholder> and </site-studio-placeholder> in the <head> tag.
Create and use page components
Site Studio components provide a flexible layout system for editors and site builders. Components act as mini templates that you can combine on the Layout canvas to create layouts. To create components, navigate to Site Studio > Elements > Components. For additional information, visit Components.
Content templates for view modes
Site Studio includes a system for building content templates for view modes. Use Site Studio templates only if the website theme does not include them. To create templates, navigate to Site Studio > Templates > Content templates. Templates created here override less specific templates in the website theme. For example, full view mode templates render within the content region of your website, and other view mode templates render where specified. For additional information, visit Creating templates.
Deployment
Site Studio stores styles, templates, and components as configuration. This means you can deploy these to a production environment without affecting content.
Site Studio allows you to create configuration with file dependencies. For example, you can create a component that includes a default image. Use the Site Studio sync sub module to deploy configuration that includes file dependencies. For additional information, visit Deploying your website.
Next steps
After you understand the aspects explained in the earlier sections, follow these steps to install and use Site Studio on an existing website:
Use Site Studio on an existing website to access the page editing and page layout features. Understand the following aspects before you use Site Studio:
Responsive media queries (breakpoints) and responsive grid
Site Studio enables you to configure the responsive media queries (breakpoints) and website grid for your website. Access these settings by navigating to Site Studio > Website settings > Responsive grid settings.
Match the settings in Responsive grid settings with the settings in the existing website theme. For additional information, visit Configuring your responsive grid settings.
CSS styles for base elements
Existing website themes often include styles for base elements such as <p>, <h1>, and <blockquote>. Do not use the Site Studio style builder that you access by navigating to Site Studio > Styles > Base styles to create base styles. These styles override the theme base styles and affect the appearance of other pages. For additional information, visit Creating base styles.
Important
Enable the Acquia Site Studio base styles module even if you do not use the base styles features.
Custom CSS classes
To create custom CSS classes, navigate to Site Studio > Styles > Custom styles. Site Studio prefixes styles with .coh-style to prevent clashes with the theme style sheet. To apply classes defined in the existing website theme to Site Studio elements, apply them in the markup tab of the element. For additional information, visit Adding markup to an element.
Add the layout canvas to your content entities
To use the layout canvas on existing content entities, add the Layout canvas field. To add this field, navigate to Structure > (Entity type) > (Bundle) > Manage fields. The layout canvas renders in the content region of the website. For additional information, visit Adding the layout canvas field to content entities.
Important
Site Studio uses render placeholders for inline CSS. Since these cannot be naturally injected into the HTML template, the site theme must contain <site-studio-placeholder> and </site-studio-placeholder> in the <head> tag.
Create and use page components
Site Studio components provide a flexible layout system for editors and site builders. Components act as mini templates that you can combine on the Layout canvas to create layouts. To create components, navigate to Site Studio > Elements > Components. For additional information, visit Components.
Content templates for view modes
Site Studio includes a system for building content templates for view modes. Use Site Studio templates only if the website theme does not include them. To create templates, navigate to Site Studio > Templates > Content templates. Templates created here override less specific templates in the website theme. For example, full view mode templates render within the content region of your website, and other view mode templates render where specified. For additional information, visit Creating templates.
Deployment
Site Studio stores styles, templates, and components as configuration. This means you can deploy these to a production environment without affecting content.
Site Studio allows you to create configuration with file dependencies. For example, you can create a component that includes a default image. Use the Site Studio sync sub module to deploy configuration that includes file dependencies. For additional information, visit Deploying your website.
Next steps
After you understand the aspects explained in the earlier sections, follow these steps to install and use Site Studio on an existing website:
Site Studio