Home / Designer Tools

How to Edit Buttons and Forms using the UI Kit

Customer Success Team

Last updated on Jul 10, 2024

The UI Kit tool is used to manage all the Buttons and Fields on your website. You can find it by going to the Designer Tools App on your Dashboard to start making changes**.**

You can create a new button by simply hitting the 'New Button' option.\ ​\ To start editing, select a button and choose the Font Family from the dropdown menu. You can then move the pointers to change the Font Size, Weight and Letter Spacing.

You can also change the Border Radius and Width simply by clicking the borders and moving the pointers accordingly. If the lock is open, every corner can be adjusted separately. While when it's closed, all corners are changed simultaneously.

You'll also find options to set the Height, Width and Padding of the button using the Sizes Arrow pointers respectively.

Please mind the position of the locks here!

If you want to change the Background, Border and Text Colors, you can do that with ease using the Colors tool.

All you need to do is choose the desired option and pick the color shade and opacity level you prefer from the color palette.

Same with the Hover Colors. Check it out in action:

Be it a 'Buy now' or 'Book an appointment', here are some bonus tips you should consider to cross creating CTAs off your to-do list!\ ​\  • The text on the Buttons should be short and comprehensive.

• Make sure to leave some text around the Buttons to visually emphasize it.

• When picking the color, mind that it stands out from the page's color theme and is vivid enough to be noticed, it should also match the overall look and feel of your website!\ ​\ Moreover, you can also make use of the UI Kit section to customize all the fields of the Forms. This allows you to match the buttons in design and color to complete your website's overall look.

You can set the Label/Text font size for the Form and Subscription elements throughout your whole website along with the Borders and Padding using the controllers.

Customize field Margins and Height as well as the Color and Alignment to be applied on all Buttons and Fields of your website.

That's it. As you're reading this, our enthusiastic team is already working on implementing new great features to make your experience with Ucraft better, so stay tuned!

Have more questions? We recommend checking our Help Articles for a bigger view of Ucraft.

And always remember, we're just a step away! Hit the Chat box in the lower right corner and our Support Team will be glad to assist you!