Objects are a great way for you to create a clip out of a specific element of your page and reuse it across pages. Attachment objects are used when you want to recreate a dropdown that is tethered to an element on your screen. Replacement objects are used to replace an element on your screen.
Follow the instructions below to learn how to create an object, use overlay object, and use replacement objects:
Creating an Object:
1. Select the element on your screen where you want to create the object.
2. Select the object icon.
3. Select create object
4. Name your object
Attachment Object:
1. Go to the screen and select the element where you want to attach your object
2. Select object icon again
3. Press attach object
4. Select the object you previously created
5. Your attached object will now appear beneath the element. Note: "Position manually" is relative to the position you have selected. You may need to position elements like modals or side menus in relation to the page instead of relative to an element. Use the "Position relative to browser window" toggle for this.
6. To edit your object, select the pencil object that appears next to the object name.
7. From here, you're able to edit your object or add a secondary nested object if you would like an additional dropdown attached. Follow the steps above to add another object. Press Done when you are finished editing.
8. Select Styling to edit the style of your object including the width, height, background, text, inline CSS, and update object source to match this style. Press Save when you're done editing your object.
Replacement Object:
1. Go to the screen and select the element where you want to attach your replacement object
2. Select the Replacement icon
3. Select Replace with Object
4. Choose your replacement object and press attach object
5. From here, you can use the toggle to show the object by default or use compound actions to trigger your replacement object (see step 8 below).
6. To edit your object, select the pencil icon. You can also use the trash can icon to delete the object.
7. Select Object Styling to edit the style of your object including the width, height, background, text, inline CSS, and update object source to match this style. Press Save when you're done editing your object.
8. You can trigger your replacement object using compound actions. This can be used to recreate the interactivity of intra-screen navigation (i.e. the whole page doesn't refresh, but contents get swapped based on your path).
Note: Objects keep any guides and actions applied to them when carried across screens. If you want to reuse an object on multiple screens without those existing guides or actions, create a new object instead.