Shape Element in Mobile Editor

Table of Contents

• Adding Shape
• Customizing Shape
• Changing the Shape
• Color Settings
• Style Settings
• Moving Shape
• Layering the Shape

Adding Shape

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

Customizing Shape

To edit, move, or layer the Shape in the Mobile Editor, tap on it and switch between the buttons that appear in its toolbar.

Changing the Shape

• Tap the Shape icon in the editing menu and choose the desired shape from a variety of predefined options:

• To resize the Shape element, locate and drag one of the small square 'handles' on the corners or sides of the element box. As you drag, you will see the element resize in real-time:

Color Settings 

• Tap on the Color icon in the editing menu, and select your desired color from the color picker, or enter a specific HEX color value:

• Drag the control to set the Opacity level:

• You can also choose the color from Theme or Page colors: 

Style Settings

• Tap the Style icon in the editing menu to access the Style settings:

Border

The Border allows you to add borders to shapes and change their color settings. 

• To change the border color, click the Square icon on the top left of the slide control. Select the overlay color and drag the control to set the Opacity level for the Border.
• You can change a separate Border Location by tapping a special Icon and choosing a preferred option among Top, Left, Right, Bottom, or All:

• Change the value in the Slide Control to set the border width.

Corner Radius

• Choose a range of radius for all corners, or change a separate range of radius by choosing a preferable option among: Top left, Top right, Bottom right, Bottom left:

• Change the curvature of all corners by using the Curvature slider control:

• You can also select the specific corner to change the curvature manually.

Please Note: The Curvature is calculated as a percentage and is shown as a numeric value in the Slider Control. At 0%, the customer will get a square image at 50% - maximum roundness.

Drop Shadow

• Tap the Square icon on the top left to open the color picker and change the color of the shadow:

• Change the percentage value to set the shadow intensity.
• Blur. Change the Blur intensity with the slider control.
• Position. Change the shadow position with the Left/Right and Top/Bottom slider controls.

Moving Shape

To move an element:

• Select an element you want to move by tapping 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 Shape

To layer elements within Mobile Editor, follow these steps:

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