It’s always a good idea to add a bit of visual interest to your website – and an animated gallery is one great way to do this.  Check out Cubender’s home page as an example.

Please note that this article was written for Cubender V3

In this tutorial, I’ll take take you step-by-step through the process of adding one of these galleries to your Webpage.  You can use it to display a variety of images, but you can also use it to display Text that changes as well.  It’s a fantastic way to showcase your daily promotions, new events about your company, or even customer testimonials.

  • If you are creating an animated TEXT gallery, you can skip this step.  If you’re creating an animated IMAGE gallery, you will need to upload the images that you wish to display into My Files > My Images in the Editor View of Cubender.
  • Next, we are going to place a Stack on your page.  From the widget gallery, select the Stack widget and place it on your page.   You can format the dimensions of the stack by dragging the sides and/or corner of the stack.  I usually like to keep the stack relatively large during the design process, as you can easily format the size later on, once we’ve placed our images into it.
  • Next, we’re going to edit the number of ‘Layers’ the stack has.  For example, if you wish to rotate 6 images, we are going to need a stack that has 6 layers (one layer for each image).  Similarly, if you only want to rotate two images or two boxes of text, then you need two layers in your stack.  Click the Stack’s Action Icon > Manage Layers.  Edit the layers so that you have the correct number that you need.
  • You should now be on the first layer of your stack.  You’re able to change layers by using the arrows in the Stack’s highlighted menu.  In the above example, our stack is entitled, “Untitled Stack 2″ and we are on layer #1 of a 3-layer stack.  We can go to layer 2 of 3 as well as 3 of 3 by clicking on the left or right arrows on the stack.
  • Click the Image Widget (the 4th image on the left in the Widget Gallery) and select your first image.  You should now see your image on the screen.  Be sure to place the image INTO the stack.  You will see the light blue borders of the stack highlight temporarily as you move the image in or out of the stack area.  Be sure that the image fits entirely into your stack.  If you are planning on using text instead of images, click the TEXT Widget (the first one in the Gallery) to add a Text box instead.  Insert and format your text as desired.
  • You’re able to crop / resize your image here by selecting the image (or text box) and adjusting the side or top/bottom handles (to crop) or dragging the corners (to resize).  Get your image to the correct size inside your stack, and then position it either manually (by dragging and dropping it into place), or use the Action Icon on the Image > Position & Size > Horizontal center ON and Vertical center ON.  This will position it exactly in the middle of your stack.
  • Next, highlight your Stack again so that you see the navigation bars at the top/bottom again.  We are going to change layers by clicking the right arrow one time so that you are on Layer #2 of your stack.
  • On layer #2, we’re going to do the same thing as above.  Add either a new Image or a new Text box, format it, and position it inside the next layer of the stack.
  • Repeat this process for as many layers as you have – move to Layer #3 and add a pic, etc.  If you have 10 images (or 10 text boxes) and therefore 10 layers, you’re going to have to do this 10 times – one on each layer of the stack.  It’s also a good time to save everything you’ve just done (Editor view > Webpage > Save).
  • Now, the fun really begins!  Once again, highlight your Stack so that you see the thick light-blue border.  Select the stacks’s Action Icon and go to Style/Animation > Animation.  In the lower portion of the screen you’ll see the option to turn ON animation.  Do so, and you’ll be given a spot to edit the timing.  1000 milliseconds = 1 second.  Thus, you can program the speed at which your gallery flips.
  • You’ll notice that you can also play around with the Style of animation (Type).  With the options provided, you’re able to create literally millions of different effect combinations.  Sit back, and experience some of the possibilities!  This is a great way to add visual interest to your website!