In onboarding projects, the ability to customize footer buttons is crucial for creating a seamless and engaging user experience. This guide provides an in-depth look at various settings available for tailoring the appearance and functionality of your footer buttons.
Full Width Setting
Purpose: Adjust the button's width to either span the full width of its container or maintain a default width (typically 100 px).
Usage: Check the box in the "Full Width" row to activate. Setting it to true extends the button to full width; false retains the default width.
Button Width Setting
Purpose: Allows for precise control over the button's width.
Usage: Enter a value after checking the box in the "Button Width" row. Larger values increase width, while smaller values decrease it.
Button Height Setting
Purpose: Modifies the button's height.
Usage: Activate this setting by checking the box in the "Button Height" row and specifying a value. Higher values create a thicker button, and lower values a thinner one.
Button Background Color Customization
Purpose: Change the background color of the footer buttons.
Usage: Select a tint on the palette board or Apply the desired HEX color code
Button Border Width
Purpose: Adjust the thickness of the button border.
Usage: Change the value to increase or decrease border thickness. Ensure both the "Button border-width" and "Button border-color" checkboxes are checked for functionality. If the checkbox is disabled - the button border wont be applied.
Button Border-Color
Purpose: Change the color of the button border.
Usage: Select a tint on the palette board or Apply the desired HEX color code
Button Border-Radius
Purpose: Alters the curvature of the button's corners.
Usage: Increase the value for rounder corners and decrease for squarer corners. Adjust even if "Button Border Width" is disabled.
Text Customization Settings
The section includes full customisation of the inside button such as font family, font size, line height, font weight, text color, text backgoround color, text align. Follow the detailed guide about text customization
Positions Customizations
Text Padding: Specify the text location or move it with padding checkboxes.
Footer Button Position: Adjust the 'button-box-paddings' to change the button's position.
Troubleshooting and Tips
No Change in Button Size: If "Full Width" is set to true but no change is observed, ensure "Button Width" is disabled.
Button Border-Radius Issues: If changes to the "Button Border-Radius" are not visible, check that "Button Border Width" and the "button background color" are not set to transparent.
Text Align Functionality: For visible changes in "Text Align," ensure "Full Width" is set to true.
Invalid Data Entry: The system prevents invalid data entry in settings like "Text Line Height" and "Text Font-Weight".
Conclusion
Customizing footer buttons in your onboarding project allows for a tailored and professional appearance that aligns with your brand and enhances user interaction. By understanding and utilizing these settings, you can significantly improve the visual appeal and functionality of your onboarding experience.