How to create advanced ZUBB designs

This is one of a series of posts in our "Get Started" series to help you get up and running and profiting from ZUBBit.

This guide will teach you how to create advanced ZUBB 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 ZUBB’s look totally unique. If you’ve not checked out the basics yet then we suggest you first read – How to create a basic ZUBB Design.

Do you want a go?

Step 1: Clone or edit an existing design, as described in – How to create a ZUBB design

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.

General Tab: 


The General tab gives you some really cool general settings to get the basic look of your ZUBB looking good.

  1. Style – This gives you a number of different styles of ZUBB’s. 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 ZUBB background and button.
  3. Rotate – This lets you rotate your ZUBB 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 ZUBB with 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 ZUBB 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.

Text Tab:


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.

Padding Tab:


The padding settings let you control the amount of pixel padding you want around all the main elements of your ZUBB, so the padding around the ZUBB itself, the brand image, the brand title, the call-to-action text, the button and also the button text. You can control top, bottom, left and right padding so you have 100% control over all the spacing on your ZUBB. Cool or what?

Border Tab:


Now this tab lets you do some really cool stuff around the borders around the ZUBB 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 – This 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.

Shadow Tab:


On the shadow tab you can set really neat shadow effects around the edge of your ZUBB, 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.

All Done!

I hope you agree the advanced settings give you unique control over how your ZUBB’s will look and are by far the most advanced settings of any tool of this type.

If you haven’t already then check out How to create a basic ZUBB Design.


Written by ZUBBit Team