Web Design Magic: Adding Behaviors to your Wix Site

Designing with Wix | August 23rd 2010

In web design behaviors add life to still objects. Say for instance, you are holding a stick. If you let go of it, its automatic behavior is to drop to the ground (you know- gravity and all), but what if you could control this behavior? For instance, next time you drop the stick it will bounce back up or if you throw the stick up in the air it will glow. The stick will very quickly draw attention and transform from a normal stick to a magic stick.

When making a website with Wix, there’s no need to throw sticks up in the air. Behaviors are controlled by the mouse, meaning you control objects’ behaviors by simply mousing over them. Check out the following examples:

The logic behind applying behaviors to your web design is simple: it can add some magic to your objects. It’s Important to remember to apply behaviors to elements only when they can contribute to the design. Applying them randomly can cause visual chaos.

How to Use Behaviors to Control the World, I mean, Control Your Website

  1. Click on “Behaviors”
  2. A menu will pop up; choose the behavior you want to apply
  3. Each behavior has a different box of adjustment settings
  4. To preview the behavior settings, click on “preview” on the top right
  5. In order to readjust the settings click on the chosen behavior (on the top of the behavior box) and readjust the settings.

Some Well Behaving Wix websites:

Notice how Weenaut makes an excellent use of the sound behavior with its buttons:

Weenaut Wix Flash website

Merjasgeorgij Spices up its design using the shadow behavior:


Social Nature uses the shadow behavior to highlight icons:

Social Nature Wix Flash Website

Aymamalamomia applied the emit behavior to add an edge to its design:

Aymamalamomia Wix Flash Website


Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>