This guide will teach you how to create advanced zubbit CTA link designs (what are zubbit Designs?)
zubbit comes pre-loaded with lots of designs and we are adding new ones all the time but if you want some fun and want to create your own that perhaps matches the look and feel of your own products or branded then we offer great options to create your own designs and in this article we will go through some of the more advanced options to really make your links look totally unique. If you’ve not checked out the basics yet then we suggest you first read – How to create a basic zubbit Design.
Do you want a go?
Step 1: Clone or edit an existing design, as described in – How to create and manage zubbit template designs
This will take you to the Basic Design dialog box where you need to press the Advanced Design button to reveal the advanced controls.
Step 2: This will take you to the Advanced Design view:
This will now give you five additional tabs of advanced settings which we will go through now.
The General tab gives you some really cool general settings to get the basic look of your design looking good.
1. Style – This gives you a number of different styles of links. Try these out and you can see some great different looks you can go with.
2. Background/Button Color – These are your basic colour settings for the link background and button.
3. Rotate – This lets you rotate your link so you can have it slanted.
4. Transparency – This lets you set a transparency level with the website underneath.
5. Delay – This sets how many seconds before the link will display when the web page loads up. It can be instant (0 secs) or you can have it appear x seconds after page loads.
6. Vertical/Horizontal Position – This lets you position the link in any corner or top or bottom of screen.
7. Brand Image Height/Width – This lets you make your brand image bigger or smaller. The ZUBB will stretch to accommodate what brand image size you want.
The Text tab gives you control over any text which is displayed on your ZUBB, so Brand Text, Call-to-Action and Button text. You can control five main elements for each:
1. Font – You can select from a number of fonts.
2. Font Style – This lets you select between normal, italic or oblique font styles.
3. Font Color – This lets you select font colors, you can either enter the hex values of the colours you want or use the palette selectors. You can find how more on how the color selectors work in It’s easy to select your colours
4. Font Size – This lets you select how big or small you want the fonts.
5. Font Weight – Rather than having just normal or bold, we let you set exactly what depth you want to the weight of the font.
Now this tab lets you do some really cool stuff around the borders around the link itself, the brand image and button.
1. Style – This lets you pick from a number of border styles like Solid, Dashed or dotted effects.
2. Color – This lets you pick the color of the borders.
3. Width –This lets you pick the width of your border. So if you want a border visible you must set to at least 1 pixel and if you want no border then set to 0 pixels.
4. Corners – his lets you change the angle of the borders. Have a play with this one its really cool. So you can have right angled or rounded borders.
On the shadow tab you can set really neat shadow effects around the edge of your link, brand image and button.
1. Color – This lets you set the color of your shadow.
2. Spread – This lets you set how wide you want your shadow to be.
3. Blur – This sets a blur depth to your shadow.
4. Transparency – This sets the transparency level between the shadow and the web page below.
I hope you agree the advanced settings give you unique control over how your zubbit CTA links will look and are by far the most advanced settings of any tool of this type.
The best way to learn how to use this design tool is to play with the tool. We can't wait to see some of your designs live!