Using the layout canvas for editing content
Site Studio provides new ways for content editors to author pages using the Layout canvas, additions to the WYSIWYG editor for more formatting control, and inline using the Site Studio Inline editor.
- Getting started Getting started
- 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
- 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
- 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
- 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
- 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
- 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 embed module Entity embed module
- Entity reference revisions module Entity reference revisions 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
- 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
- Releases Releases
- 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.1.2 release details Version 7.1.2 release details
- Version 6.8.1 release details Version 6.8.1 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.