Setting up a Divi Advent Calendar

|

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.

To create an advent calendar in Divi:

  1. Install Divi Advent Calendar plugin
  2. Insert the "Advent Calendar" module
  3. Customize and style the title
  4. Set a background for the calendar 
  5. Add doors via "Content" tab and style
  6. Add texts/URLs as gifts behind doors
  7. Optionally, set a default or custom image for each door

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:

Now you should see a door added to your calendar like so:

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!

6 Comments

  1. Hi Dan,

    This plugin looks great and I'm looking forward to applying it to all sorts of purposes (in addition to Advent).

    Before I order it, will you please confirm a couple of things:
    1. end dates can be set as desired
    2. are there samples available for seeing how the results appear on mobile devices

    As always, thanks for your ideas and support!

    Reply
    • Hey Alice, you're very welcome and my apologies for the slow reply:

      1. You can set a start date in the plugin, and choose how many doors you add, which effectively lets you dictate the end date.
      2. I've put up my own advent calendar which should give you an idea of how a final calendar would look (and offers up some Christmas-related Divi freebies)

      P.S. I have extended the 20% launch offer on the advent calendar until the end of the month.
      P.P.S. I'd love to hear your ideas on how the calendar can be applied! I've been thinking of a few myself that I'll likely write about in the future.

      Reply
      • Hi Dan,

        This is terrific! I've followed your progress and developments along the way — it's a huge project that keeps getting better, I can't wait to apply it.

        And THANKS for extending the 20% discount through December. :)

        I'm expecting to use the plugin as a "count-up" for all sorts of promos and events, as well as client and follower special offers. It's so much more engaging than a (snore-fest) timer countdown.

        I'm looking forward to creating ideas for behind the doors. Thanks for the templates to get me started!

        Reply
        • You're very welcome, Alice! Thanks for following along with it :)

          I think the Advent Calendar module could also be useful as a progress tracker – i.e. you add a new door each day you make progress towards some goal. So for example, if you set a goal to write a blog post every day for 100 days, you could link to the new post each day that it is done. Perhaps the most random use of it I've thought of so far is for tracking progress in events such as Movember where each day could reveal a selfie of the the moustache-in-progress ;)

          I'm starting to think I need to rename the plugin to reflect these potential uses, but I'm not sure what to yet…!

          Thanks again!

          Reply
  2. can i put images behind the doors rather than text links and if so what restrictions on image size?
    any further considerations for desktop vs mobile?

    Reply
    • Hi Martin. Sorry for the delay in getting back to you—it's been a hectic start to the month over here.

      I've just released an update so that you can now have individual images behind each window of the advent calendar.

      To set a default image for all doors, go to Advent Calendar > Design > Door Content, set "Use Custom Styles for Door Content" to "Yes", then pick your image with the "Door Content Background" option. The recent update adds an equivalent option into the module settings for setting a background image on an individual door.

      This works similarly to setting a background on a standard Divi Button (which is essentially what the inner content of the door is). There aren't strict size limits; using the background image options you can, for example, choose if the image fits within the door or covers it completely, depending on the effect you’re after.

      On the mobile front, the number of doors per row adjusts according to screen width (essentially the doors have a fixed width in px and break onto the next row when there is no more space). With the latest update (v1.0.2), two doors should align side-by-side when the module spans most of the mobile screen width (i.e. 96% or higher), avoiding a single door per row which I think looks a bit stretched out.

      I hope that helps!

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.