Object Manager
Object Manager lists all objects on the current page. Use it to select objects, change their stacking order, manage breakpoint visibility, and access advanced object options.
It is especially useful when:
- an object is behind another object,
- you cannot select an object on the canvas,
- you need to hide an object at a specific breakpoint,
- you want to lock finished sections,
- you need clearer object IDs for scripts, events, or maintenance.
Drag an object to change its stacking order (z-order). Dropping it on another object moves it after that object in the list; objects later in the list are displayed in front of earlier objects. Double-click an object in the list to select it in the workspace.
Toolbar
Delete
Deletes the selected object from the page. Use this to remove an object that is no longer needed, such as an image, text element, icon, Layout Grid, or section.
Properties
Opens the Properties dialog for the selected object. From here, you can edit the object’s settings, such as its ID, content, appearance, layout, links, behavior, or other available options.
Move to Front / Move to Back / Move Forward / Move Backward
Changes the selected object’s position relative to other objects.
For absolutely positioned objects, these commands control the stacking order. For example, moving an object to the front places it above overlapping objects, while moving it to the back places it behind them.
For floating objects, such as items contained in a Layout Grid, these commands change the object’s actual placement order in the page structure. For example, moving a card forward may place it before another card in the same grid or section.
These commands are useful when objects overlap, or when you want to reorganize the order of items inside a container.
Search
Use the Search field to filter the Object Manager list by ID. As you enter text, the list displays only objects whose names match the search term.
For example, entering header shows objects such as headerLayoutGrid, headerImage, and headerIcon1. This is especially useful on pages with many sections, grids, images, text objects, and nested elements.
Listview
The Object Manager displays all objects on the current page in a tree-style list. Each row represents an object, such as a Layout Grid, image, text object, icon, or section.
Objects that belong to a container are shown as child items beneath that container. For example, objects inside a Layout Grid, form, Flex Container, or other parent object appear indented below the parent in the list. This makes it easier to understand the page structure and quickly locate related objects.
ID
The ID column displays the object’s unique identifier. This name is used to identify the object in the page structure and may also be used when working with events, scripts, or custom code.
Choose meaningful IDs whenever possible. For example, IDs such as headerImage, footerText, or featuresCard1 make objects easier to find in the Object Manager and easier to recognize later.
Visible
The Visible column controls whether an object is displayed in the current view or breakpoint.
Click the checkbox to toggle visibility for an individual object:
- Checked: The object is visible.
- Cleared: The object is hidden.
Visibility can be configured separately for different responsive breakpoints. This makes it possible to show an object on desktop while hiding it on smaller screens, or to use different versions of an element for different device sizes.
Hiding an object does not delete it from the page. It remains available in the Object Manager and can be made visible again at any time.
Lock
The Lock column prevents the selected object from being moved or resized accidentally in the workspace.
When an object is locked, its position and size cannot be changed by dragging or resizing it directly on the page.
Locking is most useful for objects in absolute layouts, where objects can be positioned freely and may overlap. For example, you may lock a background image, header element, or decorative object after placing it correctly.
For objects in flexible containers, such as Layout Grids or Flex Containers, locking has more limited effect. Their position and size are primarily controlled by the parent container, so they may still move or resize automatically when the layout changes, even when locked.
Don’t Publish Assets
The Don’t Publish column controls whether associated assets for an object are included when the website is published.
When this option is enabled, Web Builder does not publish the object’s related files, such as images, scripts, video files, audio files, or other media assets.
For example, enabling this option for a media player prevents its associated media file from being uploaded during publishing. This can be useful when the file already exists on the server, is hosted elsewhere, or does not need to be uploaded again.
This settng only prevents the associated asset files from being published. The object’s HTML and other page code are still included in the published website.
Context Menu
Some commands are only available for compatible object types, inside certain containers, or when Responsive Web Design and breakpoints are enabled.
Visibility and editing safety
Lock/Unlock
Locks the selected objects to prevent accidental moving or resizing.
Hide
Hides the selected object at the current breakpoint.
Hide in Other Breakpoints
Hides the selected object at all other breakpoints while keeping it visible at the current breakpoint.
Unhide in All Breakpoints
Unhides the selected object in all breakpoints, including the current view.
Clone and Hide
Creates a copy of the selected object and hides the original object at the current breakpoint. This is useful when the object needs different size, position, or content at another breakpoint.
Example
You have a wide banner image on the default view, but need a taller version for mobile:
1. Select the desktop banner in Object Manager.
2. Choose Clone and Hide.
3. Switch to the mobile breakpoint.
4. Select the cloned object and replace or resize it.
5. Keep the original visible on desktop and the clone visible only where needed.
Layering and organization
Change the order of the object on the page.
Sort
Sort Ascending and Sort Descending change the order in which objects are displayed in the Object Manager list.
Display All
Displays all (visible and hidden) objects in the Object Manager list.
Display Hidden Only
Displays only hidden objects in the Object Manager list.
Display Visible Only
Displays only visible objects in the Object Manager list.
Remove from Layer
Removes the object from the layer, so it will no longer be part of that layer.
Object naming and publishing
Rename ID
Allows you to modify the ID property of the object. Note that you can also modify the ID in the Property Inspector or by clicking the ID in the statusbar.
Notes about the ID property
The ID property of an object must be unique within a page. By default, Web Builder automatically assigns unique IDs based on the object type (for example, Image1, Image2, etc.). However, you can change this value to give objects more meaningful and descriptive names.
You can rename an ID in several ways:
- Directly through the ID property in the Property Inspector
- Via the Object Manager
- By clicking the ID in the status bar
To rename multiple IDs at once, you can use the Global Replace option in the Tools menu.
Tip:
Do not use spaces, '&', '+', '-', '!', '?', '#', slashes, dots, quotes, brackets or other special (Unicode) characters in the name.
Many objects dynamically generate images. For example, shapes, navigation bars, and images with effects such as shadows, resampling, or filters. In some cases WYSIWYG Web Builder will automatically generate unique filenames for these images. This prevents filename conflicts. The automatically generated names are determined by the settings in the Publish options. The automatically generated names are determined by the settings in the Publish options.
To view or edit the automatically generated filenames for an object you can select Internal Filenames from the context menu.
Note: Not all objects do support this option. It is only useful for objects that dynamically generate images.
Responsive-layout fixes
Reset position
This option can be useful in breakpoints when you have ‘lost’ an object because it’s outside the viewport. ‘Reset Position’ moves the object to the upper left corner of its container.
Restore position
This option resets the size and position of the selected object so it is the same as in the Default viewport.
Scale
When you create a new breakpoint then sometimes it can be a lot of work to scale and reposition objects for smaller (or larger) viewports.
The Scale tool may be useful for optimizing the layout in breakpoints. Basically it takes the size and position of the selected object(s) on the default view and scales it to the current breakpoint width.
See the help (F1 in the application) for more details and known limitations.
In Responsive Web Design, the software will automatically generate code for controlling the position, size and visibility of objects (with CSS3 media queries). However in some cases controlling the visibility can conflict with other features on the page (like events that show or hide objects). This option makes it possible to exclude the visibility attribute from the media query, so it will not affect the state of the object when using events. See the Responsive Web Design FAQ for more details.