What is an overlay in Frappe Builder?

 


In the context of Frappe Builder (usually referring to the Frappe UI Builder or Page Builder), "overlay" refers to a visual element that appears on top of other elements, usually to indicate that something can be edited, selected, or is in an interactive mode.

Brief Explanation:

An overlay is an additional layer that appears on top of an element when you're editing a page using Frappe’s UI Builder. This overlay does not appear in the end-user (frontend) view; it’s only visible while you're building or configuring the page.

Common Functions of Overlay in Frappe Builder:

  1. Indicates editable areas.

  2. Provides extra controls, such as edit, delete, duplicate, or drag buttons to reposition elements.

  3. Helps organize components like cards, sections, rows, and columns.

Example Use Case:

Let’s say you're building a page using Frappe’s Page Builder and you add a "Card Component." When you hover over the component, an overlay appears with:

  • A border (usually blue or gray)

  • Buttons like "Edit", "Remove", or "Move"

  • A gear icon (⚙️) for advanced settings

Conclusion:

An overlay in Frappe Builder is a helpful visual layer that appears during editing, not part of the public view, and it's very useful for making it easier to design your page layout.

If you’re currently trying something in the builder, feel free to share more details—like whether you’re creating a component, a specific layout, or a custom section—so I can help you more effectively.

Post a Comment

0 Comments