Button

From the left side, you will see the Button element in the list of elements. Drag and drop it to any position of the selected structure.

1. Add button

From the Basic tab, you can drag and drop the Button element to anywhere that you want to add content.

1. Configure button

2.1. Content

Button

You can set the name, link, ID, and icon for the button here.

• Button Label: Edit button text.
• Button Link: Make a button clickable with a link.
• Button ID: Attach an ID to this button then from the other places, you can quickly navigate to this ID(button).
• Icon: Set the icon for the button along with its position, spacing, and animation of it.

Tracking

Here you can add a tracking ID for the button to track it. This ID will be sent to the Analytics of the app when the button is clicked. You can learn more about EComposer Analytics here.

Below is the result on the Analytic page.

2.2. Design

Button

• Alignment: Set the horizontal alignment of a button text. it can be left or right-aligned or centered.
• Typography: Change the style of the button text.
• Text Shadow: Choose a color > Adjust the position of Shadow using the Horizontal and Vertical attributes.
• Box Shadow: Set the shadow for the button content.

Also, you can set the effect for the button when you Hover over it: You can set up Width, Text color, Background, Border, Border Radius, and Spacing as normal and set a Hover Animation and also Transition Duration. These settings are only applied when hovering.

Please follow this video below for details:

Icon

• Size: Set up the size of the icon for each device.
• Rotate: Allow to set the rotation degree for each device.

You can use different stypes below between normal and hover state.

It includes Color, Background, Border, Box shadow, and Border radius fields that are applicable to icons.

Please follow this video below for details: