====== Beginner's Basic Editing Steps ======

Anxious to begin right now … before reviewing the rest of the manual? Perhaps experimenting just to get a feel for starting the first setup or theme? 
===== To Enter Edit Mode =====
<WRAP group>
<WRAP third column>
<WRAP centeralign>**Edit Mode**</WRAP>
{{  :ui:ui-edit_mode_off-v4.webp?direct&200  }}
</WRAP>
<WRAP third column>
**1.** "Tap and Hold" any "open" area of the screen.\\ 
**2.** Enter the password if the requirement has been set up (see Password Protection).\\ 
**3.** Tap the "Edit Off" {{:ui:ui-icon_edit_off-v4.webp?direct&30}} icon in the lower right screen area to enter "Edit On" mode as shown in the image below.\\ 
**4.** Edit On mode is now displayed.\\ 
**5.** View the image on the right and the descriptions in the table below.\\ 
</WRAP>
<WRAP third column>
<WRAP centeralign>**Edit On**</WRAP>
{{  :ui:ui-edit_on-v4.webp?direct&200  }}
</WRAP>
</WRAP>
^  **ICON TABLE**  ^^^
^  Object  ^  Image  ^  Description  ^
| **Edit**  |  {{:ui:ui-icon_edit_mode-edit_off-v4.webp?direct&25}}  | Edit mode. Note the 'lock' is **//locked!//** |
| **Edit On** |  {{:ui:ui-icon_edit_mode-edit_on.webp?direct&25}}  | Edit On mode. Note the 'lock' is **//unlocked!//** |
| **Home Page** |  {{:ui:ui-icon_page_home-v4.webp?direct&25}}  | Visible in the center of the screen. On either side are additional pages. Scroll left or right to center the desired screen, then tap its home icon to set it as the home page. |
| **New page** |  {{:ui:ui-icon_page-new_page-v4.webp?diect&75}}  | Swipe right to reveal a new page. Tap the "+" to add a new one. |
| **Delete** |  {{:ui:ui-icon_delete_pink-v4.webp?direct&20}}  | The displayed page is removed if tapped. |
| **Background** |  {{:ui:ui-icon_image-v4.webp?direct&25}}  | To place an image or other object as a background, tap here. |
| **Options** |  {{:ui:ui-icon_option-50-v4.webp?direct&25}}  | View the customization features for the page. |
| **Launcher options** |  {{:ui:ui-menu-launcher_options-v4.webp?direct&25}}  | Tap to view launcher features. |
| **Wallpaper** |  {{:ui:ui-icon_wallpaper-v4.webp?direct&30}}  | Set the wallpaper for the layout. |
| **Themes** |  {{:ui:ui-icon_theme-v4.webp?direct&25}}  | The developer has included selected theme collections available from Google Play. |

===== To Add an Object =====

  * An object can be images, text, widgets, icons, clocks, windows, and more. \\ {{:ui:ui-object-sample-v4.webp?direct&200}}
  * Enter Edit mode (see [[section:section-basic_editing|How To Enter Edit Mode]] above)
  * In the upper right corner of the screen, tap the "add" icon
  * The Design Add dialog opens in the lower left screen area listing the 3 categories of objects: \\ {{:ui:ui-object_add-selection-v4.webp?direct&200}}​
        ***Layout** includes the spatial placement of objects in a grid or circular arrangement, with the number of each changeable. Note that layouts (or placing objects on the page) can also be done by adding [[howto:howto-add-app_shortcut|shortcuts.]]
        ***Widgets** are dedicated objects with a specific purpose, such as weather data, media controls, app drawers, and many more. Most special-purpose widgets are built into Total Launcher, while application widgets come from applications the user has installed on the device. For a complete description, see [[section-widget|Widgets.]]
        ***Graphics** can be image-based, text-based, or a combination (grouped) of the two types. Each can be static or dynamic, such as your background wallpaper, calendar event list or next calendar event, app notifications, and many, many more. \\ Tip: During design, if an object is copied for placement elsewhere on the screen(s), a 4th item will be listed in this dialog as "**Paste**". Tapping that selection will place the copied object in the center of the current screen.
          * When added to the screen (page), the objects are placed, centered, and already selected. Being selected (highlighted) means it can be moved and edited. \\ {{ui:ui-object-sample-pasted-v4.webp?direct&200}}
          * The above sample includes an icon, image, and clock as objects, each with a text label that is also an object.
          * The Time object has been selected by a "tap and hold". Selection always results in a highlight or outline of the object. Selection can also be made of multiple objects, such as the text "Clock"; another "tap and hold" of that text would expand the selection
          * Notice the vertical white line which runs through the "colon" and the "G". This is an alignment guideline which will show only when 2 objects are centered. While the sample shows vertical alignment, horizontal alignment is also shown automatically if applicable.

===== To exit Edit mode: =====

  * To turn off Edit Mode, tap the ''Edit On'' button icon in the lower left corner of the screen {{:ui:ui-icon_edit_on-v4.webp?direct&30}} which will toggle to ''Edit Off''.

===== To toggle Edit mode on/off: =====

If frequent editing is required, an object can be added to a page to support this action.

  * Enter Edit mode (see [[section:section-basic_editing|How To Enter Edit Mode]] above)
  * Add an object (see [[section-basic_editing#to_add_an_object|To Add an Object]]). Use an image, text, or even a hidden item/location.
  * After adding the object, a dialog will list possible actions.
{{tablelayout?colwidth="225px,225px"&rowsHeaderSource=auto&float=left}}
|{{:ui:ui-tap_action-tap_selection.webp?direct&200}}|{{:ui:ui-launcher_actions-1of5-toggle_edit-v4.webp?direct&200}}|
<WRAP clear b/>
  * Select Launcher Options
  * Select Toggle Edit Mode
  * The object, when tapped, will now toggle between Edit On and Edit Off

===== Edit an Object Setting & Actions =====
==== Object Edit ====
  * Immediately after selecting an object, 2 edit options will show in the screen center: "pencil" icon for edit and "compass" icon for movement. These icons stay on the screen for less than 2 seconds, but can be reactivated by tapping the object again. \\ {{  :ui:ui-objects-sample_edit-v4.webp?direct&200  }}\\ The "pencil" icon (Edit) opens as shown below \\ {{  :ui:ui-icon_object_edit-dialog-v4.webp?direct&200  }}
  * "X" and "Y" are the x-axis (horizontal) and y-axis (vertical) position values of the object, in pixels, with 0 for each being in the upper left corner. Screen sizes and resolutions vary, but typically, a screen could be an x-axis with 1055 viewable pixels and a y-axis with 2100 viewable pixels.
  * "Width" and "Height" of the object are in pixels and can be modified. Decreasing these from the initial value will result in part of the object being obscured, while increasing the values will be similar (not quite) to adding a border to the object. [Borders will be properly addressed later] However, if "Keep aspect ratio" is checked prior to changing either width or height, the original proportions of the object will be maintained with the object being totally viewable, unless extending off of the screen.
  * Tap OK when finished
  * The "joystick" {{ui:ui-icon_move-v4.webp?direct&30}} icon (Movement) is for more discreet movement of the object than using the x/y-axis. While the "joystick" is viewable, tap and drag in the direction of the desired movement. This action can be repeated while the icon is visible. Select the object again to make the icon reappear.

==== Object Moving ====

While the above 'fine' movement of an object is done using the 'joystick icon when an object is initially selected, a manual move of a greater distance is useful. When the object is selected, drag it to the desired location. Then tap an open area to deselect it.

==== Object Design Menu - Top ====

  * When an object is selected, the Object Design Menu icons will appear at the top of the screen.\\ {{  ui:ui-object_design_menu-top-v4.webp?nolink&400  }}
  * {{::ui:ui-icon_selection-v4.webp?direct&25}} **Select** - Selects and highlights an object by dragging a stylus/mouse/digit:
          * Left-to-right: highlights ONLY objects fully within the boundary
          * Right-to-left: highlights objects partially within the boundary
  * {{:ui:ui-icon_action-v4.webp?direct&25}} **Action** – opens a dialog to specify what the object initiates when selected, including how the object is initiated (such as tap, swiping in a direction)
  * {{:ui:ui-icon_option-v4.webp?direct&25}} **Options** – defines the characteristics of the object, such as image, text, font, spacing, opacity, animations, and much more.
  * {{:ui:ui-icon_pin-v4.webp?direct&25}} **Pin** – The selected object will appear on all pages of the setup
  * {{:ui:ui-icon_copy-v4.webp?direct&25}} **Copy** – The selected object will be copied and available for pasting in another location, window, or page. See "Add" in this section for pasting.
  * {{:ui:ui-icon_cut-v4.webp?direct&25}} **Cut** – The selected object will be copied AND deleted from its current location. It is also available for pasting as the copy action above.
  * {{:ui:ui-icon_save-v4.webp?direct&25}} **Save** – The selected object will be stored in Total Launchers "permanent" memory in 1 of the categories (layout, or graphic [widgets cannot be saved]). It will be available in the future when selecting the Object Design Menu's "Add" icon by then selecting the appropriate category and tapping the page top tab "Saved"
  * {{:ui:ui-icon_save-v4.webp?direct&25}} **Delete** – The selected object is removed only.
  ==== Object Design Menu - Bottom ====
{{  :ui:ui-icon_object_design_menu_bottom-v4.webp?direct&400  }}
  * {{ui:ui-icon_select_back-v4.webp?direct&25}} **Change selection (back)** - cycles "backwards" through all objects on the page
  * {{ui:ui-icon_select_forward-v4.webp?direct&25}} **Change selection (forward)** - cycles "forwards" through all objects on the page
  * {{:ui:ui-icon_z-order-front-v4.webp?direct&25}} **Z-order (to front)** - when object boundaries intersect each other, moves the selected object to the front
  * {{:ui:ui-icon_zorder_back-v4.webp?direct&24}} **Z-order (to back)** - moves the selected object back 1 level
  * {{:ui:ui-icon_group-v4.webp?direct&24}} **Group/Ungroup** - For this icon to be active, more than one object must be selected to be anchored together. The group can then be deleted, moved, rotated, etc with a single action. <WRAP center round important 60%>
Note: Widgets and layouts are non-groupable.
</WRAP>
  * {{ui:ui-icon_rotate-transform-v4.webp?direct&25}} **Rotate/Transform** - Repositions the object to provide a 3-dimensional view
    * Rotate - Bottom slider moves the object on an x-axis and the right slider on a y-axis
    * Transform - Only applies if "Rotate" above has been set. Bottom slider moves the object on an x-axis and the right slider on a y-axis
  * {{:ui:ui-icon_fit_position-top-v4.webp?direct&25}}-{{:ui:ui-icon_fit_position-bottom-v4.webp?direct&25}} **Fit** - A toggle to set the exact distance of the object from the top or bottom of a screen of any aspect ratio.
  * {{:ui:ui-icon_align-v4.webp?direct&25}} **Align** - For selected or grouped objects, provides vertical and/or horizontal full-screen alignment lines outside of the single or grouped objects. Aids for centering, line, or mid-object positioning verification.

<WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP>