===== Design Menu - Page & Object =====
Design menus are based on either the **page** or the **object** on the page. Each base offers the user a range of features for modifying the visual design.
==== Page Design Menu ====
**To view the Page Design Menu:**
- Enter [[section-basic_editing#to_enter_edit_mode|Edit Mode]]
- Tap ''Edit'' to turn Edit ON
- The screen will display the setup's page(s)
- Tap the page desired
- The Page Design Menu is displayed at the top of the page
**To view the Object Design Menu:**
- Enter [[section-basic_editing#to_enter_edit_mode|Edit Mode]]
- Press and hold the object desired to select it
- The Object Design Menu is displayed at the top and bottom of the page
=== Page Design Menu ===
{{ui:ui-icon_page_design_menu-v4.webp?400|Page Design Menu}}\\
*{{ui:ui-icon_selection-v4.webp?direct&25}} **Selection** - Tap the icon and drag left to partially intersect any object -or- right and fully encompass an object(s) to select it.
* ++See a demo here.|{{:ui:ui-icon_objection_design_menu-selection-video.gif}}++
* {{ui:ui-icon_move_scale-v4.webp?direct&30}} **Move-Scale** - Tap the icon to open a dialog to modify all objects on the page or only pinned objects. This is helpful if selecting a single object is not possible due to its position. Reversing the move-scale is painless.
* ++See a demo here.|{{:ui:ui-icon_page_design_menu-move_scale-video.gif}}++
* {{ui:ui-icon_page_design_menu-redo-v4.webp?direct&100}} **Redo** - Tap to undo or redo any modification history. The icons are available in this Page Design Menu and in the Object Design Menu for individual objects.
* ++See a demo here.|{{:ui:ui-icon_page_design_menu-redo-video.gif}}++
* {{ui:ui-icon_page_design_menu-margin-v4.webp?direct&30}} **Page Margin** - This modifies the distance between the page edge and objects. This can be a positive number (causing a widened internal invisible border) or a negative number (allowing objects to move into a non-viewable page area).
* ++See a demo here.|{{:ui:ui-icon_page_design_menu-page_margin-video.gif}}++
* For users interested in a more detailed discussion of page margins, visit [[ui:ui-edit_on-design_menu-page_margins#design_menu_page_margins|here]].
* {{ui:ui-icon_add-white_on_black-v4.webp?25}} **Add** - Tap to add a new object from a dialog listing •Layout, •Widget, or •Graphic.
* ++See a demo here.|{{:ui:ui-icon_object_design_menu-add-video.gif}}++
=== Object Design Menu ===
**TOP** {{ui:ui-icon_object_design_menu_top-v4.webp?400|Object Design Menu - Top}}\\
*{{ui:ui-icon_selection-v4.webp?direct&25}} **Selection** - Once the selection icon is tapped, the user can drag left to partially intersect any object selected or right to fully select any object.
* ++See a demo here.|{{:ui:ui-icon_objection_design_menu-selection-video.gif}}++
*{{ui:ui-icon_action-v4.webp?direct&25}} **Action** - enables the object's action when tapped or swiped, such as application, folder, or calendar.
* ++See a demo here.|{{:ui:ui-icon_object_design_menu-action-video.gif}}++
*{{ui:ui-icon_option-v4.webp?direct&25}} **Option** - the text elements, such as content, font size & color, built-in time and calendar events, etc.
* //**Click this icon in the above image to navigate to the Edit dialog for the default text element**//.
* ++See a demo here.|{{:ui:ui-icon_object_design_menu-options-video.gif}}++
*{{ui:ui-icon_pin-v4.webp?direct&25}} **Pin** - With an object selected, tap the pin icon to make the object visible at its current location on all pages of the setup.
* ++See a demo here.|{{:ui:ui-icon_object_design_menu-pin-video.gif}}++
*{{ui:ui-icon_copy-v4.webp?direct&25}} **Copy** - Creates a copy of the object which can then be pasted, using the Object Add (+) - Paste option. The new copy will be placed on top of the existing object but can be selected and moved to the desired location.
* ++See a demo here.|{{:ui:ui-icon_object_design_menu-copy-video.gif}}++
*{{ui:ui-icon_cut-v4.webp?direct&25}} **Cut** - Removes the object from the screen location and allows the user to then paste the item to another location (such as another page) using the Object Add (+) - Paste option.
* ++See a demo here.|{{:ui:ui-icon_object_design_menu-cut-video.gif}}++
*{{ui:ui-icon_save-v4.webp?direct&25}} **Save** - places the object in the Resources folder for future access
* ++See a demo here.|{{:ui:ui-icon_object_design_menu-save-video.gif}}++
*{{ui:ui-icon_delete-v4.webp?direct&25}} **Delete** - Removes the object from the page with no saving
* ++See a demo here.|{{:ui:ui-icon_object_design_menu-delete-video.gif}}++
* {{ui:ui-icon_add-white_on_black-v4.webp?25}} **Add** - Tap to add a new object from a dialog listing •Layout, •Widget, or •Graphic.
* ++See a demo here.|{{:ui:ui-icon_object_design_menu-add-video.gif}}++
**BOTTOM** {{:ui:ui-icon_object_design_menu_bottom-v4.webp?400|Object Design Menu - Bottom}}\\
*{{ui:ui-icon_select_back-v4.webp?direct&25}} **Selection - Back** - Grayed out in this image (inactive) since all objects on the page were selected. If multiple unselected objects exist, the user can cycle through all objects by tapping the icon, then proceed to modify the selected object.
* For both the back and forward icons, see a demo ++here|{{:ui:ui-icon_object_design_menu-forward_backward-video.gif}}++.
*{{ui:ui-icon_select_forward-v4.webp?direct&25}} **Selection - Forward** - Grayed out in this image (inactive) since all objects on the page were selected. If multiple unselected objects existed, the user can cycle through all objects by tapping the icon, then proceed with the object's modification.\\
*{{:ui:ui-icon_zorder_front.webp?direct&25}} **Z-order - Front** - Grayed out in this image (inactive) since all objects were selected. If multiple overlapping unselected objects existed, this would bring the selected object to the front "layer" to appear before other objects.
* For both the Z-order Front and Z-order Back icons, see a demo ++here|{{:ui:ui-icon_object_design_menu-front_back-video.gif}}++.
*{{ui:ui-icon_zorder_back-v4.webp?direct&25}} **Z-order - Back** - Grayed out in this image (inactive) since all objects were selected. If multiple overlapping unselected objects existed, this would move the selected object to a "layer" behind other objects.\\
*{{ui:ui-icon_group-v4.webp?direct&25}} **Group** - While the 3 objects in this image //are selected//, they are currently separate objects. Tapping this icon will group the 3 objects into a single object. This is beneficial when moving the group items at the same time.
* ++See a demo here.|{{:ui:ui-icon_object_design_menu-group-video.gif}}++
*{{ui:ui-icon_rotate-transform-v4.webp?direct&25}} **Rotate - Transform** - Grayed out in this image (inactive) since more than 1 object is selected. If only a single object is selected, tapping the icon will open the rotate-transform dialog to rotate the object by its x or y axis; transform the object's rotation, scaling, and translation ... it's complicated, just experiment to learn.
* ++See a demo here.|{{:ui:ui-icon_object_design_menu-rotate_transform-video.gif}}++
*{{:ui:ui-icon_fit_position-top-v4.webp?diect&25}} **Fit content** - This option only appears when the Launcher Option ''Fit content to the screen height ...'' is turned on in the ''Page Background'' option. It sets an anchor for the object's position to the viewable page/screen top {{:ui:ui-icon_fit_position-top-v4.webp?diect&25}} or bottom {{:ui:ui-icon_fit_position-bottom-v4.webp?diect&20}}. Tap the icon to set its position.
*{{ui:ui-icon_align-v4.webp?direct&25}} **Align** - Grayed out in this image (inactive) since all objects in the image were selected. If multiple objects exist, the user would tap the align icon, which would reveal a horizontal or vertical alignment bar when the object intersects another object. This is useful for centering or matching top/bottom areas of objects.
* ++See a demo here.|{{:ui:ui-icon_object_design_menu-align-video.gif}}++
{{page>site:site-footer-comment_feedback_block}}