Elements Editing in Mobile Editor: Icon

Please Note: This article applies to Free Trial accounts created on or after 16 December 2024 and Website, Website+Marketing and eCommerce packages created on or after 18 December 2024. If your accounts were created before these dates, please refer to the Elements Management in Mobile Editor article.

This article will showcase how to edit elements in Mobile Editor. For convenience and visibility, we will use the Icon element as an example. Other elements have similar editing flow, although their editing toolkit may vary.

Adding an Icon

Adding elements is currently unavailable within the New Grid functionality on Mobile Editor. You can only edit, move, and delete existing elements. Please switch to a desktop version to be able to add new elements.

Resizing Icon

Please refer to the Elements Management in Mobile Editor (New Grid) article to learn more resizing elements.

Customizing Icon

To edit, duplicate, layer or delete the element, tap on it and switch between the buttons that appears in its toolbar:

Editing Icon

  • Tap on the element and choose the Edit button that appears in its toolbar:

Settings

Click the Settings button on the bottom toolbar to be able to change the following:

  • Icon Color: Click the Square icon on the right of the сolor to open the color picker to change the Icon Color:
  • Replace Icon: Click the icon area to select a different icon from the pop-up.
  • Icon Size: Use the Slider Control to configure the size of the Icon:

Background

Please Note: The default background for the icon is not applied.

Click the Background button on the bottom toolbar to be able to change the following:

Please Note: After clicking, the background for the Icon will be added automatically. The default background for the icon is not applied.

  • Background Shape: Add a background shape to the icon by clicking the area on the left. The color will be added automatically:

  • Remove Background: To Remove the background shape, select the [X] Icon:

  • Background Color: Change the Background Color by clicking the square icon to open the color picker:

  • Background Size: Use the Slider Control to configure the size of the background shape.

To save your changes, click the Done button:

Align Button

Click the Align button to align the icon (with the background) to the Left, Right, or place it in the Center of the placeholder:

Rotate Buttons

Use the Rotate Left or Rotate Right buttons to rotate your icon:

Flip Buttons

Use the Flip Vertically or Flip Horizontally buttons to flip your icon:

Duplicating Icon

  • To duplicate the element, tap on it and choose the Duplicate button that appears in its toolbar:

  • The duplicate of the element will appear immediately:

Moving Icon

To move an element:

  • Select an element you want to move by clicking on it and choose the Move Above or Move Below buttons that appear in its toolbar:

  • The element will be moved to a new place. The component takes on the size of the selected placeholder.

Layering the Icon

To layer elements within Mobile Editor, follow these steps:

  • Add a new element over the existing one. The newly added element will be on the top layer:

  • Click on the element and select Move Forward or Move Backward options:

Please Note: The Move Forward or Move Backward options are available only when one element is added on top of another.

Deleting Icon

  • To delete an element, tap on it and choose the Remove button [Bin] that appears in its toolbar:

  • The element will be immediately removed.