Animated Box Object. How to animate boxes

Compatibility:

WebSite X5 Evo and Pro

Finding new ways to attract the users' attention to important sections of a page is a must when building a website, and adding a touch of dynamism is a very good way of getting a more interesting and engaging result.

Animating text boxes with mouseover effects can be an efficient solution for highlighting some pieces of information. This kind of graphic element is extremely versatile: you can use it, for instance, if you want to present your skills in an interesting way, to report users' reviews or list the benefits your product/service can bring. 

With the Animated Box Optional Object, creating animated boxes is really easy: check out some examples on the Preview page and then unleash your creativity.  

What animated boxes looks like

The animated boxes you can create with this Object have a fixed structure and include the following elements:

• background, which defines the box shape and encloses all the contents;
• circle 1, namely a circular graphic element which is visible when the Object is loaded;
• circle 2, namely a second circular graphic element which is only visible on mouseover. 

The box can also include: an image, a title, a brief description text and a button complete with link. On top pf these elements, we have the circular elements that create the animation: on mouseover, circle 1 expands and overlaps the background until this isn't visible anymore; meanwhile, circle 2 appears and takes on circle 1's original position. The effect gets clearer if the colors used for the background and the two circles are different.

How to add contents in the animated boxes

Now that you know how the Animated Box Object works, we can move on and see how to create the animated box. Let's start from adding the contents: 

• Double-click on the Animated Box Object you just added on the page to access the settings window.
• Stay in the Contents section and use the drop-down menu to select the element you want to work on. Each reports the specific customization settings, and you can choose among:
  • Image: if available, it is displayed on the box top section. After importing the Image file you want to use, the Size, the Alignment (left, center, right) and the Outer margin (namely the space between the image and the box margin). 
  • Title: type in and format your text. Again, you can define the horizontal Alignment and the Outer margin, as well as define the title color, both the regular one and the one displayed on mouseover.
  • Description: this text reports the same customization options available for the Title element, except the font size. The description formatting is in fact automatically set according to the title one. 
  • Button: start by adding the label Text (CTA or Call to Action) and by clicking on    in order to open the Link window. Now you can work on the button style and define its formatting, horizontal Alignment, Outer and Inner margins, Rounded corners, Text and Background colors, both the regular ones and the ones displayed on mouseover.

#tip - If you don't want your box to include one or more of the mentioned elements, simply don't define any content. If for instance you don't add any text for the Button, the box won't report any button or link. 

How to define the style for the animated boxes

Apart from the style for each and every element, you can also define the style of the box as a whole, so to better adapt it to your website's layout:

• Open the Style section and start by defining the background, circle 1 and circle 2 Color: as we mentioned, you can set three different colors, but you can also "remove" a circle by making it transparent. 
• Now define the Position of the circles: start by positioning circle one, which can be on the top, on the bottom, on the left, on the right or in the center. Circle 2 takes on the top/bottom position defined for circle 1, but you can freely choose its position on the left, on the right or in the center, both for is starting and its ending point.
• Set the box Margin: you can define its thickness, color even on mouseover as well as the rounded corners. 
• Finally, decide whether to apply a shadow for the whole box.

#tip - As you see, you can reach a lot of possible results by turning elements "on" and "off" and working on colors and positions. By experimenting you will find an original and perfect solution for every occasion.

Are you curious to use this Object on your website pages? Install Animated Box now.

You don't have enough Credits to buy this Object? Check out our Credit Packs