Site Studio
Using 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:
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.
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.
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.
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.
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.
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.
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.
After you understand the aspects explained in the earlier sections, follow these steps to install and use Site Studio on an existing website:
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Enable the Acquia Site Studio base styles module even if you do not use the base styles features.
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.
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.
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.
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.
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.
After you understand the aspects explained in the earlier sections, follow these steps to install and use Site Studio on an existing website:
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Site Studio