Watch Webinar: Figma - Design to Code in 80% Less Time

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

By locking a group, you can make a layer and its nested layers a single entity, which helps when:

  • Moving parts of a Page or Section around the Visual Editor. Instead of moving a logical section one block at a time, move the whole group by intuitively grabbing the whole section.
  • Protecting layout while permitting content editing. When a group is locked, users can edit the content without inadvertently changing design elements such as color or layout.
  • Preventing unintended edits. Locking a group still lets you edit content, such as images and copy, but locking helps avoid inadvertently dragging and dropping elements within the locked group.

To get the most out of this document, make sure you:

  1. Select the group you'd like to lock.
  2. Click the down arrow.
  3. Select Lock Group.

When a group is locked, the Layers tab displays a pencil icon to the right of the containing element with a tooltip that reads, "This element is locked as an editable group". Additionally, the Lock Group menu option changes to Unlock Group to indicate that the group is currently locked.

The video below shows how to lock a group.

To edit content, such as text and images in a locked group:

  1. Select the locked group.
  2. Open the Options tab to edit the group's contents.

The Options tab also provides controls to:

  • Temporarily access the blocks within the locked group to edit them directly as if they were unlocked
  • Unlock the group. This has the same result as the instructions in Unlocking a group.

The video below shows editing text and an image in a locked group as well as temporarily editing inner content as if the group weren't locked.

Tip: You can also triple-click (or Cmd + click) on an element in the group to make edits to a specific layer.

Locked groups display as one entity on hover. This means that the individual elements within locked groups don't display focus rings or edit buttons when you hover over them.

Because the group behaves as one entity, moving entire groups of content to a different area on the page becomes more intuitive and you can ensure that the contents remain as you intend.

To move a locked group:

  1. Click on the locked group and drag and drop it where you'd like to place it in the Visual Editor.
  1. Select the group you'd like to unlock.
  2. Click the down arrow.
  3. Select Unlock Group.

The video below shows how to unlock a group. You can also unlock a group in the Options tab, as mentioned in Editing content in a locked group.

Parts of a Page or a Section that serve as single entities make ideal candidates for reuse. For more on reusing layouts, visit:

If you'd prefer to grant permissions to users to more specifically tailor their access, visit Roles and Permissions in a Space.

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy