Divi Advent Calendar can be used to quickly and easily set up a Christmas advent calendar, perfect for a seasonal promotion, or a bit of festive fun. This post gives a detailed step-by-step walk-through of setting up the calendar.

Here's how it will look once we're done:

First, if you haven't already, install Divi Advent Calendar.

Now open the the visual builder on the page where you'll be placing the advent calendar. Open the "Add a New Module" menu where you'd like the calendar to be and select the "Advent Calendar" module added by Divi Advent Calendar, like so:

Now you should see the basic module and title "Advent Calendar" displayed in your page (and nothing else yet – we'll add the doors soon): 

If you'd like a different title for your advent calendar, you can change it now in the "Title" field, like so:

And style it at "Advent Calendar Settings > Design > Title Text", like so: 

You should hopefully have a more festive looking title now, e.g:

Now we'll set a background for the advent calendar. You can set a plain color, gradient or image using the module's background setting, like so:

Which gives us:

Now it's time for some doors. First, click "Add New Door" at the top of the "Advent Calendar Settings > Content" tab:

For now, just save the door settings, and let's add a few more…

Now we'll temporarily set the start date for our calendar two days into the past, so that we can test all the states of the calendar doors. To do this, go into the main Advent Calendar Settings and set the date back two days, e.g.: 

Now view the calendar on the front end and you should see something like this:

The first two white squares represent doors that are already open, for days that have passed. At the moment they are empty as we haven't added any content… but we will soon. Days 4 and 5 are in the future and can't yet be open. Day 3 is a bit special – that's today's door. If you click on it you should get a little flip animation an the door will reveal it's (also not yet added) content:

Hence your users can see all the previous days' doors already opened, can open the current day's door, and will have to wait for the rest of the doors until the appropriate day.

Before we add any content or any more doors, you may wish to style the front of the doors some more. Return to the advent calendar's settings in the visual builder and you'll find some options for this.

One option is to set an image or color on the door. This is done using the background option in the settings for the individual doors. Go into the settings for the first door and locate the background option at "Advent Calendar Door Settings > Content > Background". Now you can set the image for the door. In this example I'm going to use it as an opportunity to do some branding and place the white with a transparent background Divi Booster logo on a solid green background:

Which gives:

The numbers are a bit hard to see, so switching to the "Door Settings > Design > Door Numbers Text" options for that door, I'll make the numbers a bit more prominent and also update the border slightly. Finally, I'm also setting the logo background to actual size rather than "cover" to reduce the overlap. This gives:

Of course, making these changes individually in each of the five demo doors would be time-consuming enough, let alone setting it on all 24 or 25 final doors. Fortunately, we can simply apply the styles from one door to all the rest using Divi's "Extend Item Styles" option:

Select the "Extend Item Styles" menu option and then choose to extend the styles throughout the row, like so:

Note that there isn't an option to limit the style extension to just the parent Advent Calendar module, so make sure there are no other advent calendars in the same row unless you want the door styles to apply to each advent calendar.

Extending the styles gives:

Now we can finally add some gifts to be revealed when the calendar doors are opened. Conceptually, what is behind the button is a Divi button (sized to the same size as the door). This means you can add a short text describing the gift and a URL at which the user will find the full gift (e.g. a post giving a freebie or promotion).

You can add the text and URL in the settings for each individual door:

Save the module settings on the front end and you'll see the gift link displayed behind the corresponding door, like so:

If you want to style this gift link "button", you'll find the normal button style options in the main Advent Calendar settings (rather than in the settings for an individual door), e.g:

Now a bit of tweaking in there and the setup is complete:

Displaying Images Behind the Doors

Divi Advent Calendar lets you add a background image to be revealed when the doors are opened. You have the option of setting a default image for all doors, or to set custom images for each door (or some combination of the two).

To begin setting a default image across all doors:

1. Navigate through your Divi Builder to the Advent Calendar > Design > Door Content.
2. Enable the "Use Custom Styles for Door Content" option.
3. Select the "Door Content Background" to choose and set your preferred image.

This adjustment mimics the process of applying a background to a Divi Button, giving you the liberty to determine how your image displays within the door frame—opt for 'fit' to show the entire image within the door or 'cover' to fill the entire space for a seamless look.

As of version 1.0.1, you'll find the additional capability to customize the background image for each door within the individual door settings. This granular level of customization ensures that each window can represent a unique aspect of your brand or promotion with ease.

Remember, there are no specific size constraints for your background images—express your creativity freely and make each door reveal a delightful surprise. The flexibility of the Divi Advent Calendar means that the layout will remain responsive and visually appealing at any size or on any device.

Mobile Configuration

As you're setting up your Divi Advent Calendar, you want to make sure it looks just as fantastic on mobile devices as it does on desktop. 

With the release of version 1.0.2, the advent calendar doors have been optimized for mobile screens. Now, instead of one door occupying a row—which can appear stretched and suboptimal—two doors will sit side by side, creating a balanced, symmetrical appearance. This layout is triggered when the module covers a significant portion of the screen width, specifically 96% or more.

Finishing Up

There are now only a couple of things left to do. 

The first is to change the start date for the calendar (using the date selector shown earlier in the post). In most cases, for an advent calendar you'd want to set this to 12am (i.e. first thing in the morning) on the 1st of December. The timezone used for this is the timezone set in your WordPress settings at "WP Dashboard > Settings > General". 

Next, add more doors, which you can do by directly copying the existing ones (or creating new ones and extending the styles as before). 

Finally, add some more gifts. There's no requirement to have all gifts added right from the start. You can add them throughout the month – just be sure to have one ready each day!

Get Divi Advent Calendar Module Today!

Happy holidays!