Bizagi Sites offers a variety of controls that help you customize your site's pages. These controls are located to the left in the Sites Designer. Every control displays a floating menu when you hover the mouse pointer over it. This menu has the options available to manage or modify the control.
The controls available for your site are grouped in categories:
Control configuration options
Each control has different configuration options. Depending on the control category and type some of these options will be visible. The available options are:
•Manage Content: Define what displays inside the control.
•Settings: Display properties you can customize for each control
•Link Editor: Lets you set navigation to an internal or external page, or start a new case instance of any process hosted in the Automation Project.
•Visible to: Select the stakeholders that will be able to view the controller once the site is published.
•Layout: Select how the control displays content.
•Duplicate: Clone the control and place the copy on the page under the original control.
•Delete: Remove the control from the page. A confirmation message appears when you use this option.
Link Editor lets you set navigation to an internal or external page, or start a new case instance of any process hosted in the Automation Project.
•Static link: Link the control to static URL. When you select this option, you can set the following properties:
oLink: The URL to which the user will be redirected.
oOpen in new tab: Set whether the target page opens in a new tab. The default value is false.
•Internal link: Link the control to a page of the current site.
oSelect a page: Define the page to which the user will be redirected. You can only select a page you have already created.
oOpen in new tab: Set whether the page opens in a new tab. The default value is false.
•Processes: Link the control to a process in the Automation Project.
oSelect a process: Define the process to be started.
These properties let you customize a control. You can return to the default values when you click the Reset button. The following list has the settings you may encounter while editing a control.
•Align: Set the text alignment to left, right or center.
•Arrange: Set the location of the control in relation to other page contents. You can bring the control to the front, send it to the back, or move it forward or backward one layer.
•Background color: Set the background color for the control. The default color depends on the selected theme.
•Bold: Set whether the text on the header is in bold letters.
•Border color: Set the border color of the image.
•Border radius: Set the roundness of the corners of the button.
•Border size: Set the border size of the image in pixels.
•Border type: Set the border type for the control.
•Buttons background color: Set the background color of the buttons inside the control. The default color is defined by the selected theme.
•Buttons container: Switch the buttons' background color with the text color.
•Buttons text color: Set the font color of the buttons inside the control. The default color is defined by the selected theme.
•Button size: Select the size for the button: Small, Medium, or Large.
•Corner radius: Set the roundness of the corners of the controller.
•Display: Set how the control is organized: boxed, basic or minimal.
•Font color: Set the color of the text displayed in the navigation pane. The default color depends on the selected theme.
•Font family: Set the font family for a text element.
•Font size (px): Set the size of the text in the navigation panel.
•Icon Color: Set the color for the icon.
•Image Size: Set how the image fits in the field. Original size keeps the image proportions inside the field. Scale to fill stretches the image, keeping it's original proportions, to fill the field.
•Keep original proportions: Set whether the shape remains a perfect square or circle.
•Left icon: Display the icon on the left side of the button.
•Letter spacing: Increase or decrease the space between characters.
•Opacity: Set the percentage of transparency of a control.
•Pin info color: Define the background color for the location icon.
•Pin info text color: Define the color for the text in the location icon.
•Right icon: Display the icon on the right side of the button.
•Selected image color: Define the color of the line under the selected image. The default value is defined by the selected theme.
•Show button icon: Set whether the icon displays on the button.
•Show logo: Set whether the logo displays. The default value is true (logo displayed).
•Show top bar: Define whether the title displays.
•Show Update button: Define if an update button is displays.
•Stretch to full width: Widen the figure to fit the page width.
•Reset: Reset the default values for all properties.
•Title: Set the title for the control.
•Title container: Switch the title container's background color with the text color.
•Title text color: Define the font color of the title. The default value is defined by the selected theme.
•Title background color: Define the background color for the title.