How to hide an element in a panel

Updated by Valeria

You can change the appearance of a skin using the Front End Editor.

To remove an element from the skin, simply delete the code associated with that element from the HTML, and from the CSS/JS if necessary.

Hiding fields of a panel can be useful to keep it loyal to the skin in case we have removed elements from it, and so that the user finds the panel visibly organized in the same way as the skin.

Each skin is associated with a panel with specific fields in which the user can edit the content.

Keep in mind that deleting some elements from a skin does not automatically mean hiding them from the panel.

To hide a field from the panel and prevent this field from being used to insert content, you should follow the following steps:

  1. Open the Page Blocks Panel and click on the block you want to modify
  2. Edit o duplicate and then edit the skin accessing the Front End editor
  3. In the HTML section, at the top, add the following comment to hide a specific field
   {{!-- text hide true --}}

Where 'text' is replaced by the element you want to hide, e.g. text2, text3, image1, etc.

  1. If you want to hide a field within the list, write the comment as follows::
{{!-- list.text hide true --}}

This will hide the field from the panel and prevent the user from adding unused content. Remember to delete the element from the skin design as well.

Let's imagine that we want to hide the TEXT3 of the previous photo, highlighted in orange.

  1. In the Front End Editor we first eliminate the element.
  1. And then add the comment.
  1. The result will be a skin with no TEXT3 in the design and no related field to fill in the edit panel.

You also have the possibility to change the order of the fields in the panel, check this article for more information.

How did we do?