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.
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.
If this option is enabled then Web Builder will not publish the assets (images, scripts, movies) for this object. For example, a media player will not publish the associated media file(s).
This can be useful if a file already exists on the server, so it does not need to be published again.
Note that it will still publish the HTML code for the object!
Asset Management -> Internal Filenames
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.