Wix Tricks: Emphasize Promotions with Color Transitions

September 27th 2010 | Designing with Wix

Adding color movement to your flash website is a great way to spice up your design, and attract visitors attention to specific promotions or focus them on any other relevant content.

Creating basic color transitions with Wix is super simple and these can be applied both to photos and text.

Start with a mini page:

  1. Page parts–> mini page.
  2. Edit size to fit your needs.
  3. Click “Manage” and make sure you have three pages.

Wix Editor Mini Page

Put the mini page aside for a moment.

Edit the graphic elements:

  1. Choose a graphic element.
  2. Duplicate it three times (Ctrl+D or Edit –> Duplicate).
  3. Change each element color (by using the “Tint Effect” for graphic elements, or “Color Adjustment” effect for photos).

*make sure all elements are always the same size

Wix Editor tint

Return to you mini page:

  1. Place the first element right at the center of the mini page.
  2. Open the transform box, Arrange–> Transform.
  3. Copy the “X” and “Y” Settings and apply them to the other elements. This will ensure that they are placed exactly one above the other.
  4. Now place each element on a different page within the “Mini Page”.

Wix Editor transform box

Editing the transitions:

  1. Click on the mini Page.
  2. Go to transitions, The best transitions for color change are either “None” or ” Alpha”.
  3. Go to setting and choose “Auto Play”.
  4. Edit the page duration. The closer to 0 the faster the color change is.

Wix Editor Transitions Settings

And here is the result!


To view your own result click on “Preview”. You can always go back and re-edit according to need.


Enjoy!




1 comment

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>