Button Advanced

Step by Step

 

1. On the page that you want to add a button and click the “+” on the Layout Canvas;

 

2. Search for the component "Button Advanced" and add it by taking the component and dragging it to the Layout Canvas;

 

3. To position properly the Button Advanced, you can put it inside a component of container type.

 

 

Customizing the Component:

 

1. Click twice on the component, and select your options:

 

• Button label: write a label for the button

• Button icon: click and select an icon on the list, that will be positioned on the right side of the label. You can search or choose one in the lists of Font awesome or Castle Lite.

 

 

• Link to page: paste a link or search by writing the name. If you leave it empty, it will not show the button inside the page

• • Button target: choose where your page will open.

   ◦ New window: When selecting this option, the link will open in a new browser tab. This option is recommended for external links (other sites).

   ◦ Same window: When selecting this option, the link will open in the same tab as the user's browser. This option is recommended for external links (site links);

 

 

• Button layout: choose a layout in the list

• Input Background Color: select a color option for the button background

• Input Text Color: select a color option for the text of the button.

• Padding: choose a size for the paddings top/bottom and left/right.

• Button align: select an option to the button position.

 

 

2. Click on the “Apply”, to save your changes.