Here is a quick preview of our video tutorial on how to design bulletproof CTA button from Skillcrush email in BEE email editor: A step-by-step guide to the BEE editor Let 's see how to easily create a stellar CTA button in BEE editor, where we have full customization of width, border radius, border color, padding and color and text style. Bulletproof CTA with BEE To get started, we took a few minutes to recreate the top portion of the Skillcrush email, populating a basic one-column template with the header image and intro content. Now, let's create our button! From the Structure menu on the right, we'll grab a button content block and simply drag it into our email body. Bulletproof CTA with BEE Note that the default button is blue, rectangular, and centered on the page: CTA button But we can do a lot to personalize it !
As we type, the button automatically expands to fit our content: Bulletproof CTA We can keep our default font color (white , font family (Arial), and font size (16px), but we'll make our message bold (and be sure to type all caps). full button width It's easy to stretch the button across the width of the email body . Back in the Content Properties menu , we 'll adjust the width slider to the right, up to 100%. From a design perspective, the full Image Masking Service width makes sense : it mirrors the Skillcrush header at the top of the email, providing aesthetic balance, and it also gives mobile readers more room to click. CTA content width The final touch Under Content Padding , we'll make sure to have 5 px padding at the top and bottom. Let's also not forget to insert a link to the button : in the same Properties menu of the content from which we worked, we will scroll down to the Action section and paste our link. Bulletproof CTA Now we have a fully functional bulletproof CTA button , same as Skillcrush email! Wasn't it easy? Bulletproof CTA - done!
If you want to further customize the CTA button, here are some additional button design settings in the BEE editor: border radius You can adjust the border radius to change the shape of your button . From a design perspective, rectangular elements generally evoke a sense of traditionalism, practicality and balance, while circular elements can be perceived as softer and soothing. border radius Here is a rounded version of our CTA button after adjusting the radius to 25px: Bulletproof CTA with rounded edges Button padding We can also make the button taller (or shorter) : make sure the "More options" button is enabled in the Content Padding section and increase the top and bottom padding.