You can use Site Studio on an existing website to take advantage of it's page editing and page layout capabilities. When using Site Studio on an existing website there are a number of important aspects you should understand.
Responsive media queries (breakpoints) and responsive grid
Site Studio allows you to configure your websites responsive media queries (breakpoints) and website grid at Site Studio > Website settings > Responsive grid settings.
When using Site Studio on an existing website it's recommended that you match the settings within the Responsive grid settings to those set within your existing website theme. You can find more information about responsive grid settings here.
CSS styles for base elements
Your existing websites theme may include styles for base elements like <p>, <h1>, <blockquote> etc. For this reason, you should not use Site Studio's style builder found at Site Studio > Styles > Base styles to create base styles. If you do, these will override the base styles you have set in your theme and will affect the appearance of other pages on your website. You can find more information about base styles here.
Important
You will still need to enable the Acquia Site Studio base stylesmodule even if you do not use the base styles functionality.
Custom CSS classes
You can use Site Studio to create custom CSS classes at Site Studio > Styles > Custom styles. All styles created are prefixed with .coh-style to help prevent any clashes with classes in your theme's style sheet.
If you want to apply classes you've already defined within your existing website theme to Site Studio elements, you can apply them directly within the markup tab of the element. You can find more information about adding markup to an element here.
Adding the layout canvas to your content entities
You can use Site Studio's layout canvas on your existing content entities by adding the Layout canvas field. This is added in the same way as any other field within Structure > (Entity type) > (Bundle) > Manage fields. The layout canvas will render within the content region of the website. You can find more information about adding the layout canvas here.
Important
Site Studio uses render placeholders of inline CSS and as these cannot be naturally injected into the HTML template, the site's theme needs to contain <site-studio-placeholder></site-studio-placeholder> within the <head> tag.
Creating and using page components
Site Studio's powerful page creation and editing experience rely on Site Studio components. These provide a flexible layout system for editors and site builders. You can think of them as mini templates that can be added and combined on the Layout canvas to create new layouts. You can create components at Site Studio > Elements > Components. You can find more information about creating and using components here.
Content templates for view modes
Site Studio includes a system for building content templates for View modes. When using Site Studio on an existing website you do not have to use Site Studio templates as your website theme will include these. However, you can create templates using Site Studio if you require at Site Studio > Templates > Content templates.
Any template suggestions created here will override any less specific templates within your website theme. Full view mode templates will render within the Content region of your website and other View mode templates will render where specified For example, within a Drupal view.
Styles, Templates, Components and other "non content" assets created by Site Studio are stored as configuration. This means that they can be deployed to a production environment as configuration and not effect content. However, Site Studio allows you to create configuration with file dependencies. For example, you could create a Component which includes a default image.
For this reason, Site Studio includes the Site Studio sync sub-module that handles the deployment of configuration including file dependencies from one environment to another. You can find more information about Site Studio configuration management & deployment here.
Next steps
Once you've understood the above, you can follow the steps below to install and use Site Studio on an existing website
Using Site Studio on an existing website
You can use Site Studio on an existing website to take advantage of it's page editing and page layout capabilities. When using Site Studio on an existing website there are a number of important aspects you should understand.
Responsive media queries (breakpoints) and responsive grid
Site Studio allows you to configure your websites responsive media queries (breakpoints) and website grid at Site Studio > Website settings > Responsive grid settings.
When using Site Studio on an existing website it's recommended that you match the settings within the Responsive grid settings to those set within your existing website theme. You can find more information about responsive grid settings here.
CSS styles for base elements
Your existing websites theme may include styles for base elements like <p>, <h1>, <blockquote> etc. For this reason, you should not use Site Studio's style builder found at Site Studio > Styles > Base styles to create base styles. If you do, these will override the base styles you have set in your theme and will affect the appearance of other pages on your website. You can find more information about base styles here.
Important
You will still need to enable the Acquia Site Studio base stylesmodule even if you do not use the base styles functionality.
Custom CSS classes
You can use Site Studio to create custom CSS classes at Site Studio > Styles > Custom styles. All styles created are prefixed with .coh-style to help prevent any clashes with classes in your theme's style sheet.
If you want to apply classes you've already defined within your existing website theme to Site Studio elements, you can apply them directly within the markup tab of the element. You can find more information about adding markup to an element here.
Adding the layout canvas to your content entities
You can use Site Studio's layout canvas on your existing content entities by adding the Layout canvas field. This is added in the same way as any other field within Structure > (Entity type) > (Bundle) > Manage fields. The layout canvas will render within the content region of the website. You can find more information about adding the layout canvas here.
Important
Site Studio uses render placeholders of inline CSS and as these cannot be naturally injected into the HTML template, the site's theme needs to contain <site-studio-placeholder></site-studio-placeholder> within the <head> tag.
Creating and using page components
Site Studio's powerful page creation and editing experience rely on Site Studio components. These provide a flexible layout system for editors and site builders. You can think of them as mini templates that can be added and combined on the Layout canvas to create new layouts. You can create components at Site Studio > Elements > Components. You can find more information about creating and using components here.
Content templates for view modes
Site Studio includes a system for building content templates for View modes. When using Site Studio on an existing website you do not have to use Site Studio templates as your website theme will include these. However, you can create templates using Site Studio if you require at Site Studio > Templates > Content templates.
Any template suggestions created here will override any less specific templates within your website theme. Full view mode templates will render within the Content region of your website and other View mode templates will render where specified For example, within a Drupal view.
Styles, Templates, Components and other "non content" assets created by Site Studio are stored as configuration. This means that they can be deployed to a production environment as configuration and not effect content. However, Site Studio allows you to create configuration with file dependencies. For example, you could create a Component which includes a default image.
For this reason, Site Studio includes the Site Studio sync sub-module that handles the deployment of configuration including file dependencies from one environment to another. You can find more information about Site Studio configuration management & deployment here.
Next steps
Once you've understood the above, you can follow the steps below to install and use Site Studio on an existing website
Did not find what you were looking for?
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Did not find what you were looking for?
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Site Studio