Articles in this category

GOOD STUFF!

Designer Tools: UI Kit

If you are a picky crafter who wants to have every single button and field modified according to your taste, this tool is definitely for you!

What's this for?

It's used to manage all the Buttons and Fields on your website. You can find it by clicking the Designer Tools icon on your Dashboard.

To let the magic work, go to the UI Kit section to start making the changes.

Here you can create a new button by simply hitting the Create New Button option.

The tool also enables editing the Button Texts from the bar on the right. Let's check out how it works/

Choose the desired Font Family from the drop down menu or move the pointers to change Font Size, Weight and Letter Spacing.

You may change the Border Radius and Width simply by clicking the Borders and moving the pointers accordingly. If the lock is open, you'll get to change every corner 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 

Changing colors

What about the colors? 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, cool right? Check it out in action:

Tips

Please find some neat tips on how to create an undeniably clickable CTA buttons below

 • 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, and yes, it should also match the overall look and feel of your website!

What's up next?

You can also make use of the UI Kit section to customize all the fields of the Forms on your website to make them match the buttons in design and color and to complete your website's overall look.

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

It's a piece of cake to customize the field Margins and Height as well as choosing the Color and Alignment. You're the one to set the rules here and they will apply on all the Buttons and Fields.

Make sure to let us know if you have any questions, we're listening and are always no more than a click away.

Did you find this resource helpful?
Return to top
Ready to get started
with Subbly?
Try for free