Button/Product Button element

If you're that picky crafter who wants every single element on your site look exactly the way you prefer and now wondering how to edit the Buttons to match your taste, you'll apparently find this article helpful!

Please pay close attention that you're able to use 2 different types of button elements on Subbly 👇

  • Regular button element which enables you to add a button which you can make redirect to any internal or external link. Remember that you can create inner pages on your Subbly site by adding pages as explained here. You can subsequently use these pages to redirect from the button 😉

  • Another type of button is a so-called Subbly product button (you can easily recognize this one as it has Subbly zap logo over it âš¡). This one can only be used to initiate the checkout of a product or to simply act as an Add to Cart button for a product. This one is not to be used to redirect to any other type of page (internal or external).

Technicalities of both of these buttons are practically the same and can be found in the section below 👇

Settings

Edit Icon - Start editing the Button Element by simply clicking on it and choosing the desired option from the Settings. You'll notice a new window appear with a list of button settings ready to be changed.

Style - Change the font of your button's text, click on the Fonts and play around with the pointers  to change the font size, weight or letter spacing, you can also customize the button borders and size including Height, Width and Padding using the pointers.

Pay attention to the lock, if it's closed, then all corners will be changed in the same way. As long as  the lock is open, you can change every button corner and side separately!

Color - Change the Color of the button and its text by just clicking on Colors and choosing the shade you need. You can change the color of  the Background, Border and Text as well, choose a necessary field and move the pointers.

Type a text for your Button, then pick the desired button from the ones you've created from Edit Button section.

 

Link - Click on the edit Link icon and decide where you want your visitors to be redirected to an Internal, External or an Anchor page, add the link or select an inner page, enable the switcher below if you want the page to open in a New Tab.

Alignment - To change the alignment settings of the Button, click on the Alignment icon you’ll have three options available: top, center or bottom, so just choose the one you prefer.

Visibility Settings - This setting enables making a certain Element/Block appear on Desktop, Mobile only, or everywhere by default. Simply hit Visibility Settings and choose the desired option from the drop down menu to get full control over the visibility of the elements on your page.

Next comes Location visibility. Include or exclude specific cities or countries or set the appropriate Custom IP.

Trash Icon - If you don't need the Element anymore, Click on the Trash icon to remove it from your page.

You can also check out the UI Kit section for more insight on how to create powerful CTAs.

How did we do?

Accordion element

Sharing Buttons element

Contact