Information for: DEVELOPERS   PARTNERS

Site Studio

Site Studio provides a visual user interface through which you can build the majority of the theme layer (front-end) of a Drupal website. Site Studio comes pre-installed with Acquia CMS.

Site Studio consists of the following modules in Acquia CMS:

  • Configuration
  • Developer tools
  • Website settings
  • Styles
  • Components
  • Helpers
  • Templates
  • Style guides
  • Sync packages

Configuration

With this module, you can manage your API keys and other global system settings.

To use this module:

  1. Sign in to Acquia CMS.
  2. On the Acquia CMS administrative interface, click Manage > Site Studio > Configuration.

Acquia CMS leverages the configuration capabilities from Site Studio. For more information, go to https://sitestudiodocs.acquia.com/user-guide/configuration.

This module includes the following settings:

For more information on using a Google Maps API key, go to https://sitestudiodocs.acquia.com/6.4/user-guide/google-maps-api-key.

Developer tools

With this module, you can rebuild your CSS styles for your sites and content types.

To use this module:

  1. Sign in to Acquia CMS.
  2. On the Acquia CMS administrative interface, click Manage > Site Studio > Developer tools.

By rebuilding your CSS styles, you can:

  • Re-save website settings and rebuild the CSS styles for them
  • Re-save base styles and rebuild the CSS styles for them
  • Re-save custom styles and rebuild the CSS styles for them
  • Re-save templates and rebuild twig files and inline CSS styles for them

Website settings

With this module, you can define website settings that are applied globally to all pages and templates.

To use this module:

  1. Sign in to Acquia CMS.
  2. On the Acquia CMS administrative interface, click Manage > Site Studio > Website settings.

Acquia CMS leverages the website settings capabilities from Site Studio. For more information, go to https://sitestudiodocs.acquia.com/user-guide/define-your-website-settings.

This module includes the following settings:

  • Base unit settings: Provides a base font size and default unit conversion.
  • Color palette: Allows you to manage colors across your website with a globally managed color palette. You can select the color from Edit color Palette.
  • Default font settings: Allows you to manage the default font and default font color used by your website.
  • Font libraries: Allows you to manage font libraries and font stacks used by your website.
  • Icon libraries: Allows you to manage the icon font libraries to use on your website. Icomoon is a popular icon font generator and icon font hosting provider. For more information on Icomoon, go to https://icomoon.io/.
  • Responsive grid settings: Allows you to configure your website grid and your responsive breakpoint widths.
  • SCSS variables: Allows you to create and manage SCSS variables, which can be used within your CSS styles.

Styles

With this module, you can create CSS styles using a visual interface.

To use this module:

  1. Sign in to Acquia CMS.
  2. On the Acquia CMS administrative interface, click Manage > Site Studio > Styles.

Acquia CMS applies default styling to sites created using this install profile. For more information about how to manage styles in Site Studio, go to https://sitestudiodocs.acquia.com/6.4/user-guide/creating-styles-style-builder.

Components

Components provide a flexible layout system for editors and site builders. Components are mini templates with custom edit forms. They can be added and combined on the Layout canvas to create new layouts. Editors can use them to create pages where the content and layout requirements don’t fit within a fixed template structure.

To access Site Studio’s component library:

  1. Sign in to Acquia CMS.
  2. On the Acquia CMS administrative interface, click Manage > Site Studio > Components.

Acquia CMS leverages the components capabilities from Site Studio’s UI Kit. For more information, go to https://sitestudiodocs.acquia.com/user-guide/components.

The following table lists the components of the Site Studio’s UI Kit:

Name Description
Color palette The UI Kit includes a basic color palette with a limited set of colors and tones. You can update and add to the color palette included with the UI Kit by navigating to Manage > Site Studio > Website settings > Color palette.
Text color styles The UI Kit includes text styling for different colored backgrounds. These include styles for light, dark, and colored backgrounds. Text themes are applied automatically when a color is selected for the background color of a component. When a color isn’t selected, content authors can manually apply the text styling.
Site header component The UI Kit includes a Header component, which is placed at the top of the site templates. The header includes a site logo, search field, main navigation, utilities navigation, and social network links.
Site footer component The UI Kit includes a Footer component, which is placed at the bottom of the site templates. The footer includes footer navigation, social network links, and two text fields that can be used for additional information.
Layout components

The UI Kit includes the following layout components for structuring pages and containing content.

  • 1-column layout
  • 2-column layout
  • 3-column layout
  • 4-column layout
  • Row for columns and column components
  • Container
  • Divider line
  • Modal
  • Spacer
  • Breadcrumb
Basic components

The UI Kit includes the following basic components for adding content to layouts.

  • Heading component
  • Text component
  • Button(s) component
  • Image component
  • Video component
  • Video background component
  • Audio component
  • Blockquote
Interactive components

The UI Kit includes the following interactive components to display content.

  • Quick start with helpers
  • Creating layouts with layout components
  • Adding basic content to layouts
  • Adding cards to layouts
  • Adding interactivity to layouts
Card components

The UI Kit includes the following card components.

  • Feature Card
  • Content Card
  • Horizontal Content Card
  • Impact Card
  • Price Card
  • Profile Card
  • Block Quote Card
  • Testimonial Card
  • Logo Card
  • Stat Card
  • Social Links Card

For more information about Card components in Site Studio, go to https://sitestudiodocs.acquia.com/user-guide/uikit-card-components.

Helpers

Site Studio’s UI Kit comes with layout helpers, which combine components into common layouts. To learn more about Site Studio’s helpers, go to https://sitestudiodocs.acquia.com/user-guide/uikit-helpers-common-layouts.

Templates

You can use the Acquia Site Studio Layout builder to create templates for different areas of your website.

To access templates:

  1. Sign in to Acquia CMS.
  2. On the Acquia CMS administrative interface, click Manage > Site Studio > Templates.

Acquia CMS leverages the templates capabilities from Site Studio’s UI Kit. For more information, go to https://sitestudiodocs.acquia.com/6.3/user-guide/creating-templates.

The following table lists the templates:

Name Description
Master templates

A Master template is the outermost template that houses your Content template. Master templates are commonly used for the website header, footer and navigation systems. You can add the following master templates:

  • Master template
  • Master template-Boxed

For information about how to use Master templates in Site Studio, go to https://sitestudiodocs.acquia.com/user-guide/master-templates.

Content templates

You can manage your content templates, including Global, Full content, and View mode templates. You can add the following content templates:

  • Media
    • Global
    • Document
    • Image
    • Video
  • Content
    • Global
    • Article
    • Event
    • Place
    • Person
    • Page
  • Taxonomy term
    • Global
    • Article Type
    • Categories
    • Event Type
    • Person Type
    • Place Type
    • Tags
  • User

For information about how to use Content templates in Site Studio, go to https://sitestudiodocs.acquia.com/user-guide/content-templates.

View templates

You can use views to create, manage, and display lists of content. For example, a list of blog posts, a list of upcoming events, or a list of users. You can add the following view templates:

  • Articles
  • Events
  • Event Cards with Featured
  • People
  • Places
  • Search
  • Recent Articles with Featured

For information about how to use View templates in Site Studio, go to https://sitestudiodocs.acquia.com/6.3/user-guide/view-templates.

Menu templates

You can create menu templates for simple list menus, expandable tree menus, drop-down mega menus, mobile menus, and other menus you may require.

It consists of following modules:

  • Footer: You can use this template for adding footers in your pages.
  • Main Navigation: You can use this template for main navigation.

For information about how to use Menu templates in Site Studio, go to https://sitestudiodocs.acquia.com/6.3/user-guide/menu-templates.

Style guides

The style guides provide you with the tools to create a set of styles that are theme-specific.

To use this module:

  1. Sign in to Acquia CMS.
  2. On the Acquia CMS administrative interface, click Manage > Site Studio > Style guides.

For information about how to use Menu templates in Site Studio, go to https://sitestudiodocs.acquia.com/user-guide/creating-styles-style-builder.

Sync packages

You can export Site Studio configuration in full or in part as a package that can be imported into a different website. This provides a way for you to share styles, components, templates, and other Acquia Site Studio configuration with other websites. This capability is provided by the Site Studio sync module.

To use this module:

  1. Sign in to Acquia CMS.
  2. On the Acquia CMS administrative interface, click Manage > Site Studio > Sync packages.

You can also:

  • Manage packages
  • Import packages
  • Export the full package

For information about how to use Menu templates in Site Studio, go to https://sitestudiodocs.acquia.com/user-guide/sync-package-export-and-import.