Components
Components 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.
- Getting started Getting started
- Requirements Requirements
- What you can build using Site Studio What you can build using Site Studio
- Typical project phases and skills required Typical project phases and skills required
- Using the inline help Using the inline help
- Creating a new website with Site Studio Creating a new website with Site Studio
- Step 1a. Install the Site Studio modules with composer Step 1a. Install the Site Studio modules with composer
- Step 1b. Install the Site Studio modules manually Step 1b. Install the Site Studio modules manually
- Step 2. Connect to the Site Studio API Step 2. Connect to the Site Studio API
- Step 3. Enable the Site Studio minimal theme Step 3. Enable the Site Studio minimal theme
- Step 4. Configure image and media browsers Step 4. Configure image and media browsers
- Step 5. Using Site Studio Step 5. Using Site Studio
- Using Site Studio on an existing website Using Site Studio on an existing website
- Step 1a. Installing the Site Studio modules on your website with composer Step 1a. Installing the Site Studio modules on your website with composer
- Step 1b. Installing the Site Studio modules on your website manually Step 1b. Installing the Site Studio modules on your website manually
- Step 2. Connecting your existing website to the Site Studio API Step 2. Connecting your existing website to the Site Studio API
- Step 3. Modify your website theme Step 3. Modify your website theme
- Step 4. Configure image and media browsers Step 4. Configure image and media browsers
- Step 5. Using Site Studio Step 5. Using Site Studio
- Settings configuration Settings configuration
- Website settings Website settings
- Configuring your base unit settings Configuring your base unit settings
- Set up font libraries and font stacks Set up font libraries and font stacks
- Set up icon font libraries Set up icon font libraries
- Creating your color palette Creating your color palette
- Defining your default font settings Defining your default font settings
- Configuring your responsive grid settings Configuring your responsive grid settings
- Creating SCSS variables Creating SCSS variables
- Style builder Style builder
- Creating base styles Creating base styles
- Creating custom styles Creating custom styles
- Using the style builder Using the style builder
- Using the style preview Using the style preview
- Applying CSS properties Applying CSS properties
- Font properties Font properties
- Background properties Background properties
- Layout properties Layout properties
- Height properties Height properties
- Width properties Width properties
- Padding properties Padding properties
- Margin properties Margin properties
- Float properties Float properties
- Position properties Position properties
- Display properties Display properties
- Opacity properties Opacity properties
- Vertical alignment properties Vertical alignment properties
- Multi column layout properties Multi column layout properties
- Flex container properties Flex container properties
- Flex item properties Flex item properties
- Box shadow properties Box shadow properties
- Border and outline properties Border and outline properties
- Transform and transition properties Transform and transition properties
- Content properties Content properties
- List style properties List style properties
- Applying custom CSS properties Applying custom CSS properties
- Applying CSS3 filters Applying CSS3 filters
- Using CSS selectors Using CSS selectors
- Applying styles to elements Applying styles to elements
- Style helpers Style helpers
- Layout canvas for editing content Layout canvas for editing content
- Adding the layout canvas field Adding the layout canvas field
- Creating content with components Creating content with components
- Editing content inline Editing content inline
- Editing content with the WYSIWYG Editing content with the WYSIWYG
- Setting permissions for editors Setting permissions for editors
- Visual page builder for editing content Visual page builder for editing content
- Adding components to your page Adding components to your page
- Editing components on your page Editing components on your page
- In-place Editing In-place Editing
- Moving components around your page Moving components around your page
- Duplicating a component on your page Duplicating a component on your page
- Deleting a component from your page Deleting a component from your page
- Show component and drop zone borders Show component and drop zone borders
- Saving layouts as reusable helpers Saving layouts as reusable helpers
- Creating and editing sliders Creating and editing sliders
- Creating and editing tabbed content Creating and editing tabbed content
- Saving your page Saving your page
- Closing the visual page builder Closing the visual page builder
- Additional information for developers Additional information for developers
- Layout canvas for site building Layout canvas for site building
- Using the layout canvas Using the layout canvas
- Using the layout canvas preview Using the layout canvas preview
- Drag and drop elements Drag and drop elements
- Content elements Content elements
- Layout elements Layout elements
- Media elements Media elements
- Interactive elements Interactive elements
- View elements View elements
- Menu elements Menu elements
- Drupal core elements Drupal core elements
- Adding markup to an element Adding markup to an element
- Hide element if no data Hide element if no data
- Match the heights of elements Match the heights of elements
- Adding comments to an element Adding comments to an element
- Layout helpers Layout helpers
- Animation and interaction Animation and interaction
- Context based visibility Context based visibility
- SEO SEO
- Google Analytics Google Analytics
- Adding data layer event attributes Adding data layer event attributes
- Templates Templates
- Master templates Master templates
- Content templates Content templates
- Understanding view modes Understanding view modes
- Creating full content templates Creating full content templates
- Creating templates for other view modes Creating templates for other view modes
- Connecting your templates to fields Connecting your templates to fields
- Adding a template selection field for editors Adding a template selection field for editors
- Hiding field titles on templates Hiding field titles on templates
- View templates View templates
- Creating view templates Creating view templates
- Selecting a view template Selecting a view template
- Selecting a view mode for view content Selecting a view mode for view content
- Using master templates with view templates Using master templates with view templates
- Duplicating view templates Duplicating view templates
- Managing your view templates Managing your view templates
- Menu templates Menu templates
- Creating menu templates Creating menu templates
- Creating multi-level menus with interactivity Creating multi-level menus with interactivity
- Adding interactivity to your menu Adding interactivity to your menu
- Creating styles for menus Creating styles for menus
- Menu list container element Menu list container element
- Menu list item element Menu list item element
- Menu link element Menu link element
- Menu button element Menu button element
- Duplicating menu templates Duplicating menu templates
- Managing your menu templates Managing your menu templates
- Creating menu templates Creating menu templates
- Templates Drush command Templates Drush command
- Components Components
- What are components? What are components?
- Create a component Create a component
- Component form field elements Component form field elements
- Group accordion form element Group accordion form element
- Tab container form element Tab container form element
- Tab item form element Tab item form element
- Field group form element Field group form element
- Field repeater form element Field repeater form element
- Help text form element Help text form element
- Input form element Input form element
- Plain text area form element Plain text area form element
- WYSIWYG form element WYSIWYG form element
- Select form element Select form element
- Toggle form element Toggle form element
- Link to page form element Link to page form element
- Image uploader form element Image uploader form element
- Color picker form element Color picker form element
- Icon picker form element Icon picker form element
- Youtube URL form element Youtube URL form element
- Video URL form element Video URL form element
- Google map marker form element Google map marker form element
- Entity reference form element Entity reference form element
- Entity browser form element Entity browser form element
- Range slider form element Range slider form element
- Hidden input form element Hidden input form element
- Adding drop zones to a component Adding drop zones to a component
- Adding repeatable fields to a component Adding repeatable fields to a component
- Component fields conditional visibility Component fields conditional visibility
- Component field machine name Component field machine name
- Component field default value Component field default value
- Component field validation Component field validation
- Component field escape HTML Component field escape HTML
- Component field tooltips Component field tooltips
- Deleting fields from your component Deleting fields from your component
- Component form helpers Component form helpers
- Component form field elements Component form field elements
- Duplicating components Duplicating components
- Managing your components Managing your components
- Reusable component content Reusable component content
- Style guide manager Style guide manager
- Accessibility Accessibility
- Translation Translation
- Configuring translations for Acquia Cohesion Configuring translations for Acquia Cohesion
- Translations and component content Translations and component content
- Translating templates Translating templates
- Translations using TMGMT Translations using TMGMT
- Display elements on specific languages Display elements on specific languages
- Right-to-left (RTL) languages Right-to-left (RTL) languages
- Configuration management and deployment Configuration management and deployment
- Package management quick start guide Package management quick start guide
- Config workflow with sync packages Config workflow with sync packages
- Drupal config vs Site Studio packages Drupal config vs Site Studio packages
- User interface vs command line interface User interface vs command line interface
- How to export your packages How to export your packages
- How to import your packages How to import your packages
- Advanced package management Advanced package management
- Site Studio drush commands Site Studio drush commands
- Upgrading Upgrading
- Custom development Custom development
- CSS variables CSS variables
- Custom components Custom components
- How to define a custom component (file structure) How to define a custom component (file structure)
- Custom component definition file Custom component definition file
- Custom component definition reference Custom component definition reference
- Custom Component - Step-by-step guides Custom Component - Step-by-step guides
- How to create a custom element How to create a custom element
- Template inheritance Template inheritance
- Implementing hooks for custom content entities Implementing hooks for custom content entities
- Generating a static version of your website Generating a static version of your website
- Additional modules Additional modules
- Compatibility Compatibility
- AMP compatibility AMP compatibility
- Acquia Content Hub compatibility Acquia Content Hub compatibility
- Acquia Personalization compatibility Acquia Personalization compatibility
- Acquia Site Factory compatibility Acquia Site Factory compatibility
- Acquia Lightning compatibility Acquia Lightning compatibility
- Acquia DAM compatibility Acquia DAM compatibility
- Acquia BLT compatibility Acquia BLT compatibility
- Focal point module compatibility Focal point module compatibility
- Contributed module compatibility Contributed module compatibility
- Accelerated mobile pages module Accelerated mobile pages module
- Better exposed filters module Better exposed filters module
- BigPipe Module BigPipe Module
- Chosen module Chosen module
- Commerce module Commerce module
- Configuration translation module Configuration translation module
- Contact storage module Contact storage module
- Content sync module Content sync module
- Diff module Diff module
- ECA: Event - Condition - Action module ECA: Event - Condition - Action module
- Entity browser module Entity browser module
- Entity block module Entity block module
- Entity clone module Entity clone module
- Entity embed module Entity embed module
- Entity reference revisions module Entity reference revisions module
- Focal point module Focal point module
- Inline entity form module Inline entity form module
- Linkit module Linkit module
- Media: Acquia DAM Media: Acquia DAM
- Menu breadcrumb module Menu breadcrumb module
- Menu item extras module Menu item extras module
- Menu link attributes module Menu link attributes module
- Metatag module Metatag module
- Moderation dashboard module Moderation dashboard module
- Moderation sidebar module Moderation sidebar module
- Pathauto module Pathauto module
- Search API module Search API module
- Slick carousel module Slick carousel module
- Slick entity reference module Slick entity reference module
- Tablefield module Tablefield module
- Token module Token module
- Twig tweak module Twig tweak module
- Video embed module Video embed module
- View infinite scroll module View infinite scroll module
- Webform module Webform module
- Workspaces module Workspaces module
- Yoast SEO module Yoast SEO module
- Managing revisions Managing revisions
- Global settings and config options Global settings and config options
- Site Studio JSON:API Site Studio JSON:API
- Setup Setup
- Schema Schema
- Input Input
- Plain text area Plain text area
- WYSIWYG WYSIWYG
- Select Select
- Toggle Toggle
- Link to page Link to page
- Image uploader Image uploader
- Range slider Range slider
- Color picker Color picker
- Icon picker Icon picker
- Youtube URL Youtube URL
- Video Video
- Google map marker Google map marker
- Entity reference Entity reference
- Entity browser Entity browser
- Hidden input Hidden input
- Component Component
- Component Content Component Content
- Custom component Custom component
- Known issues Known issues
- Releases Releases
- Version 8.0.1 release details Version 8.0.1 release details
- Version 8.0.0 release details Version 8.0.0 release details
- Version 7.5.2 release details Version 7.5.2 release details
- Version 7.5.1 release details Version 7.5.1 release details
- Version 7.5.0 release details Version 7.5.0 release details
- Version 7.4.3 release details Version 7.4.3 release details
- Version 7.4.2 release details Version 7.4.2 release details
- Version 7.4.1 release details Version 7.4.1 release details
- Version 7.4.0 release details Version 7.4.0 release details
- Version 7.3.2 release details Version 7.3.2 release details
- Version 7.3.1 release details Version 7.3.1 release details
- Version 7.3.0 release details Version 7.3.0 release details
- Version 7.2.3 release details Version 7.2.3 release details
- Version 7.2.2 release details Version 7.2.2 release details
- Version 7.2.1 release details Version 7.2.1 release details
- Version 7.2.0 release details Version 7.2.0 release details
- Version 7.1.2 release details Version 7.1.2 release details
- Version 7.1.1 release details Version 7.1.1 release details
- Version 7.1.0 release details Version 7.1.0 release details
- Version 7.0.5 release details Version 7.0.5 release details
- Version 7.0.4 release details Version 7.0.4 release details
- Version 7.0.3 release details Version 7.0.3 release details
- Version 7.0.2 release details Version 7.0.2 release details
- Version 6.9.5 release details Version 6.9.5 release details
- Version 7.0.1 release details Version 7.0.1 release details
- Version 7.0.0 release details Version 7.0.0 release details
- Version 6.9.4 release details Version 6.9.4 release details
- Version 6.9.3 release details Version 6.9.3 release details
- Version 6.9.2 release details Version 6.9.2 release details
- Version 6.9.1 release details Version 6.9.1 release details
- Version 6.9.0 release details Version 6.9.0 release details
- Version 6.8.2 release details Version 6.8.2 release details
- Version 6.8.1 release details Version 6.8.1 release details
- Version 6.8.0 release details Version 6.8.0 release details
- Version 6.7.0 release details Version 6.7.0 release details
- Version 6.6.1 release details Version 6.6.1 release details
- Version 6.6.0 release details Version 6.6.0 release details
- Version 6.5.1 release details Version 6.5.1 release details
- Version 6.5.0 release details Version 6.5.0 release details
- Version 6.4.3 release details Version 6.4.3 release details
- Version 6.4.2 release details Version 6.4.2 release details
- Version 6.4.1 release details Version 6.4.1 release details
- Version 6.4.0 release details Version 6.4.0 release details
- Version 6.3.5 release details Version 6.3.5 release details
- Version 6.3.4 release details Version 6.3.4 release details
- Version 6.3.3 release details Version 6.3.3 release details
- Version 6.3.2 release details Version 6.3.2 release details
- Version 6.3.1 release details Version 6.3.1 release details
- Version 6.3.0 release details Version 6.3.0 release details
- Version 6.2.1 release details Version 6.2.1 release details
- Version 6.2.0 release details Version 6.2.0 release details
- Version 6.1.4 release details Version 6.1.4 release details
- Version 6.1.3 release details Version 6.1.3 release details
- Version 6.1.2 release details Version 6.1.2 release details
- Version 6.1.1 release details Version 6.1.1 release details
- Version 6.1.0 release details Version 6.1.0 release details
- Version 6.0.3 release details Version 6.0.3 release details
- Version 6.0.2 release details Version 6.0.2 release details
- Version 6.0.1 release details Version 6.0.1 release details
- Version 6.0.0 release details Version 6.0.0 release details
Frequently asked questions
Get instant answers to common questions. Available online 24/7.
Raise a support ticket
To raise a ticket, sign into Acquia Cloud and select Help in the top menu.
Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.