Skip to main content

Changing a box's image, text, or link also changed the other boxes

Learn why editing a box's image, text, or link can also change other boxes in the same row, how to undo it, and the right way to edit them going forward.

If you're editing in the Design Editor and changing a box's image, text, or link unexpectedly replaces the content of nearby boxes with the same thing, those boxes have been turned into a List.

This article explains why this replacement happens with boxes in a List, how to fix it, and the correct way to edit them.

Point: What is a List?

A List is a feature that lets you manage boxes with the same layout together.

You can manage data such as text and images in one place, and if you connect it to something like Studio CMS, it works as a dynamic List where content updates automatically.

By default, a List works as a static List.

For an overview of the List feature, see the List article.

What's happening and why

Let's walk through the situation and the cause, using a changed image as an example.

  1. As a result, the images in boxes ② and ③ in the same row were also unintentionally replaced with the same image. (Blue arrows in the image below.)

Cause

Boxes ①, ②, and ③ are List items in the same column of a List.

Because you edited the box directly, the image data's property link was removed, and the same content was applied to every box that shared that property.

How to fix it

To restore the content that was replaced unintentionally, you need to reconnect the property to the box. Follow the steps below.

Tips: How to confirm whether a box is part of a List

You can tell whether a box is part of a List by how it appears when selected. If any of the following is true, the selected box is part of a List.

  • The box outline appears light blue.

  • The entire box is highlighted in light blue.

  • A List icon

    or carousel icon

    appears at the top left of the selected box, or before its name in the Layer panel.


Step 1. Restore the boxes that were replaced unintentionally

Reconnect the property to the box to restore the content that was replaced unintentionally.

Lists can work either statically or dynamically, but the steps for fixing property connections are essentially the same in both cases.

  1. Switch the whole List into edit mode, then select the box you want to restore.

  2. Open the tab that matches what you want to fix in the right panel. If the panel is closed, open it first.

    • Image → [Image] tab > [URL] field

    • Text → [Text] tab > [Text] field

    • Link → [Settings] tab > [Link] field

  3. Click the field, then choose the property from the list that appears (the property list, or [Select from CMS properties]) to reconnect it.

    Note: Property names differ from site to site. Check the name of the property you need in the data connected to the List (such as the property table or the CMS dashboard) before you start.

    If you're editing a link, also see the notes on fixing links below.

Notes on fixing links

If you can't find the box with the link

Links can be set on any type of box, so it can be hard to find where one is set. The Layer panel helps you find it quickly.

  1. Open the Design Editor, then open the page you want to work on.

  2. Open the Layer panel and find the layer for the CMS List.

    Elements that are part of a List show a light blue grid icon before their name.

  3. Select an item inside the List.

    • If the CMS List layer is collapsed, click [>] to expand it.

    • Select a layer that shows a light blue List item number before its name.

  4. Select the [Settings] tab in the right panel. If the panel is closed, open the right panel first.

  5. Check the [Link] field. If there's text in it, a link is set on that element.

    If the link field is empty, click [>] in the Layer panel to expand the item, then select a child layer and check its link field.

Note: If you see "This link will be disabled because a link is set on the parent box"

This message appears when a link is set on the CMS List item itself and you have a child box inside that item selected.

Select the List item layer instead — the one with a light blue List item number before its name and a <li> tag on the right.

Link types and setup notes

How you set up a link depends on where it goes. Start by checking the link's destination.

Destination

List type

How to set it up

Link to a detail page (dynamic page)

Dynamic List

  1. Set a Slug property

  2. Click [Link] tab > [Settings] field

  3. Select the detail page (a dynamic page connected to the same CMS model as the List)

External URL (a different external link for each item)

List (standard List)

Dynamic List

  1. Register the external URL as a property

  2. Select the box, then click [Link] tab > [Settings] field in the right panel

  3. Delete any text that's already entered

  4. Click the [+] button and select the property from the list

Fixing a link to a detail page (dynamic page) in a dynamic List

For dynamic pages, the page list that appears when you click [Link] tab > [Settings] shows two pages with the same name as possible destinations.

When setting a link from a dynamic List, choose the page whose link does not end in :slug.

Step 2. Edit the right way going forward

To avoid making the same mistake again, edit your data using the method that matches your List type.

1. Check the List type (List (standard List) or dynamic List)

A List can work either statically or dynamically, depending on the database it's connected to.

For a dynamic List connected to a database outside the Design Editor — such as Studio CMS — you need to edit the data at the source, so start by checking the List type.

  1. Open the [Data] tab in the right panel. If the right panel is closed, open the right panel first.

  2. Check the text in the dropdown at the top of the [Data] tab.

    • If it says [Connect data]:
      The List isn't referencing any data outside the Design Editor, so it's a static List (standard List).

    • If it says [CMS], [API], or similar:
      A data source type is shown, so this is a dynamic List. (A dynamic List connected to Studio CMS is a CMS List.)

2. Edit the data using the method for your List type

The steps differ between a List (standard List) and a dynamic List.

2-1. Editing data in a List (standard List)

Edit the data in the property table on the [Data] tab of the right panel. For detailed steps, see the help articles below.

2-2. For a dynamic List (such as a CMS List)

Edit the data outside the Design Editor — at the source of the connected data, such as the Studio CMS dashboard.

For specific steps on editing a CMS List, see Editing images, text, and links in a CMS List.


per item link URL link settings list

Did this answer your question?