Elements Editing in Mobile Editor: Icon

Please Note: 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

Option 1

An element can be placed into different blocks. To add the element:

  • Select the section to place the Icon element:

  • Click Add Element (+) icon:

  • In Elements Library, click on the element you would like to add (in our case, Icon):

  • The element will be added to the top of the selected section:

Option 2

  • You can access the library of ready-made elements by clicking Build at the bottom:

  • Select the element from the Elements library:

  • The element will be added to the top of the selected section:

Please Note: If the section is not selected, the element will be added to the top of the page.

Customizing Icon

To customize any element, tap on it to display the editing menu. When customizing the Icon, you will be able to change the following:

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:

  • Left:

Rotate Buttons

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

  • Rotate left:

Flip Buttons

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