Compatibility:

WebSite X5 Evo and Pro

The easiest example is the Advent Calendar: every day, you open a box to find out the hidden surprise. Have you ever considered creating an online version to captivate your website visitors or your online shop customers with an engaging countdown to Christmas? And what about applying the same idea and recreating the effect for other occasions throughout the year?


That's what you can do with the Adv Calendar Optional Object: create your calendar, decide how long it will last, choose the gifts for each box and customize it according to the occasion you are preparing it for. Check out some examples on the Preview page, and then start creating your own Calendar: it will be a fantastic promotion and marketing tool for your business. 



How it works

The calendar we are going to create with this Object consists of:

  1. the calendar, namely the grid displayed when accessing the page. It will have a background image, on which are arranged as many cells as there are days for which the calendar is active.
  2. the boxes, namely the contents the user can access to by clicking on the calendar active cells. Each box is closed and opens in popup when you click on it. The cell open in popup can have its own title, image, brief description and link.


You can define the amount of boxes: for the Advent Calendar, they can be 24, but they can also be less or more according to your needs. The way the calendar works can also change so to better suit your wishes: for instance, all boxes can be active at the same time, or you can define a specific date they can be opened on. 


You can also freely choose what to put in the boxes. Of course, it depends on what you want to achieve with your calendar:

  • if you want to entertain your audience, you can simply present or link to curious content: images, GIFs, videos, music tracks, etc...
  • if, on the other hand, you want to retain readers and customers, you could give away something that would be of value to them: don't think of big things right away; tips presented as "Tip of the Day" or online resources such as PDF guides or video tutorials might be enough.
  • finally, if you want to promote sales on your store, you can report a discount or offer a specific product in each box.


You can of course mix these strategies: especially in the case of particularly long calendars, you may want to "mix" promotions and contents, so to make it less repetitive and more interesting. 


Let's now see what steps you need to take to set up your calendar.  


Define the amount of boxes and their contents

Once you defined the kind of calendar you want to create, you can start off by setting up the box contents, namely the cards that will be displayed by clicking on the calendar boxes:

  • Double-click on the Adv Calendar Object you added on the page to access the settings window.
  • Stay in the General section. As you can see, the Box list is empty: click on Add to create a new box. 
  • The new box is added to the Box list: select it and set it up with the available options:
    • First, rename the new box. Remember that the name you define now will be used in the Box list only, and that it won't be displayed on the calendar. Choose a name that can help you identify the box in question.
    • Now import an image, type in a title and add a brief description.
    • If you want to, report a Button text and click on  Link, so the user performs an action you want on click: open a page, download a PDF, start a video, place an order, etc.
    • If you want to highlight this box, you can simply make it bigger: select the Box on two columns option so to make it twice as wide. 
  • Repeat these steps for all the boxes you need.
  • Of course, you can always add new boxes if you need to, as well as remove the old ones and change the box list order using the specific buttons available for the Box list.

Set up the graphic layout

Now you can move on to the calendar graphic layout to be displayed when the boxes are all still closed:

  • Access the Style section and choose a calendar background Color or Image. We suggest going for a themed image of sufficient size to serve as the background for the entire Object.
  • Define how many Boxes per row you want to display.
  • Choose the Box arrangement: you can go for ascending or random order (according to date or the number associated to them)
  • If you choose the random option, you can also define some black spaces to be left between the boxes: just define the amount of Empty boxes you want for each row. 
  • Select the Label format you want, namely the text that must be displayed when the box is still closed. You can choose among:
    • a Sequence number: boxes will report numbers starting from #1 (1, 2, 3, etc.); 
    • the Day: each box will report the number of the current day;
    • Day and Month: each box will report the current date with day and month.


#tip - Cells are numbered or dated according to the order in which they are arranged in the Box List. You can change the arrangement with the arrows displayed next to the list. The day and month for the date depend on the 'Start date' set for the calendar, as well as on the box order. 

Define the way your calendar will work

You can then work with some options to define the way your calendar will work:

  • Report a Start date, namely the date your calendar starts on: for example, report "2024-05-22" if your calendar should start on May 22nd, 2024.
#tip - If you want your users to be able to open any box ant any time, don't report any start date. In all other cases, you need a Start date in order for the calendar to work properly. 


  • Now define the Box opening, namely when the boxes are active and can be clicked on. You can choose among:
    • Always: all boxes will always be active and users will be able to click on them at any time, no matter what date it is. 
    • Only on corresponding day: only the box corresponding to the current day will be active and can be opened, all the others will be disabled. 
    • Corresponding and previous date: users will be able to click on the box corresponding to the current date and the ones active on the previous days. 
#tip - The user's computer calendar is used to determine which boxes can be opened on a certain date.


Set up the graphic style for the boxes

As many boxes are automatically arranged on the color or background image of the calendar as are entered in the Box List. You can define some style parameters for active but closed boxes using the options in the Style > Box section. Basically, you can define:

  • the Border Color;
  • the Font type (kind of font, size and formatting) for the box label;
  • the label Alignment within the box.


#tip - When defining the style of active but closed boxes, consider that some effects are automatically applied for both the 'active' state and the state on mouseover.


You can identify the boxes that are already open from all others, you can work on:

  • Background Color;
  • Opacity.


Set up the style for the open boxes in popups

Now that you've set up the style for the closed boxes, you can define the style for the ones open in popup:

  • First, define the Size is pixel and the Background Color for the popup window which is displayed when the box is clicked on to reveal its content. 
  • As we said, an opened box consists of different elements. Use the drop-down menu to select the one you want to work on and use the available options to define its style. As far as Title and Description go, you can choose the Font Type, Color and Alignment. For the Button you can also define the Background Color, the Margins and the Rounded Corners.

Request the registration

As we mentioned earlier, this kind of calendar can also be used to entertain or retain customers, as well as make them purchase our products by offering discounts and promo codes.  You can however also use it to collect new contacts: you can do this by simply requesting their registration in order for them to be able to access the calendar. 


In this case, you can:

  • Add a new page on Step 3 - Map. In our example, we will call it "Calendar".
  • Add the Adv Calendar Object on this page and set up the calendar by following the above-mentioned steps. 
  • Complete the page with any other element you may need: titles, texts, graphic elements, etc...
  • Go back to Step 3 - Map, select "Calendar" and click on  Locked: activate the Set this Page as Locked option, then select the users that can have access to it. 
  • If you are working with the Pro edition, you can set up the user automatic registration, so that users will be automatically redirected to the Login page when selecting the calendar page: here, they will be able to either register or, if they already have, log in. 
#tip - Please find more information about how to set up and manage one or more locked pages in the Access Management section of our guides.

          


Are you curious to use this Object on your website pages? Install Adv Calendar now


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