How to create an online advent calendar with Divi (without plugin)

The final stretch before the holidays is sometimes marked by an advent calendar. The kiddos love it 😍 What about us? We love it too! In this tutorial, I'm going to teach you how to create an online advent calendar with Divi... and nothing else!

Let's go!

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

Create an online calendar with Divi: video explanation

Before going further in this article, let me give you a video overview of how to build a digital advent calendar with Divi...

If the video does not appear, go here.

Understanding Divi's display requirements

If you watched the video, you realized that it's pretty easy to create an advent calendar with Divi because the page builder offers a must-have feature: display conditions based on date and time.

The whole conception of this calendar is based on this feature, rather unknown.

Indeed, we don't often need them, but here, these visibility options are very appreciated and save us from adding extensions and more extensions!

But then, how does it work? Here are the detailed explanations:

As you know, all modules, lines and sections of the Divi Builder are composed of 3 tabs: Content, Style and Advanced.

The Conditions options are available in the advanced tab of each element, which gives you a wide choice on how to use them: you can add a condition on a module, on a line or on a section.

1. So just go to the Advanced > Conditions tab of the chosen element.
2. Click on the " + " icon
3. Choose the condition you want to use.

In the case of our digital advent calendar, we will mainly need the time-based condition (in the Interaction category), which is named Date & Time.

But I invite you to explore all the other types of conditions, some of which may well be useful to you at some point. To learn all about it, I invite you to see the official article.

Divi's Date & Time condition then gives you other options, such as:

• "if after"
• "if before"
• "if a specific date"
• "if not a specific date"
• "if it is a specific day of the week
• "if it is the first day of the month
• "if it is the last day of the month

For our advent calendar, we will only need the first 3 options, namely:

• "if after"
• "if before"
• "if a specific date"

Now let's get down to business...

Step 1: Create the calendar canvas

To start, you need to create the calendar architecture:

If we consider that the advent calendar starts on December 1st and ends on December 24th, we will have to create 24 boxes to deliver your digital bonuses.

The simplest architecture would then be to create a section (blue) composed of 4 rows/lines (green), cut into 6 columns each. This is the choice I made, but you can put 6 rows/lines cut into 4 columns, that will do the trick too!

Did you know? You can test Divi for free by visiting on this page and clicking on "TRY IT FOR FREE

Step 2: Create Day 1 of your advent calendar

We will first focus on creating the first day of the calendar, when it works properly and has the perfect design, we will duplicate it 23 times (as I did in the video) - hey yes, let's try to save our time!

Each daily box will be composed of 4 modules. Here are the details...

The module 1 that is displayed all the time

In the first column, place a Text module or an Image module. The purpose is to display the title of the day (1st Dec, 2nd Dec, 3rd Dec, etc).

⚠️ This one should always be visible.

Note: in this tutorial, I used a Text module, but in my "real" advent calendarI created small emojis, so I used an Image module. It's up to you to imagine what is the most appropriate for your needs...

The module 2 that appears before the current date arrives

In my example, I simply used a Text module. For example, you can put a text like "Come back on D-Day to open this box". This way, the user who would pass by in advance will understand that this box will be available only from December 1st.

To make sure this is the case, go to the Advanced > Conditions tab and choose the "Is before" option. You will then see a Date Picker: choose the day in question (here, December 1st).

Just below, there is the schedule to define.

For my part, I chose "0h01", so there is no ambiguity, we speak well of December 1st.

Save your changes.

Module 3 which is only displayed on D-Day

You can use the most appropriate module: a video module, an image, a text, a button, etc. For my example, I used a Call to Action module that allows you to add text and a button.

Sample text: "Discover the bonus of the day

Example of a CTA: "Open

You must make sure that this module is displayed only on D-Day. To do this, go to the Advanced > Conditions tab and choose the option "Is on a specific date. You will then access a Date Picker: choose the day in question (here, December 1st) and activate the option All Day (just below).

Module 4 which is displayed once the date has passed

Finally, the 4th module can very well be a text module again. For my example, I have indicated "Too bad, come back next year".

This module should be displayed after the date has passed, so the next day.

The action is quite similar to the previous ones: go to the Advanced > Conditions tab, then choose the "Is after" option , then choose the day in question - here, December 1st - at 11:59 pm (or even starting the next day at 12:01 am - the choice is yours).

Step 3: finishing the calendar & design

You may want to try it with shorter delays, just to check that everything is working properly in terms of displays.

Warning: if you use a caching plugin, configure it to exclude your advent calendar from caching, it could prevent it from working properly.

💡 My advice: polish the design of that first box before duplicating it 23 times!

Some design ideas:

• add a background color to the column
• add an emoji or an image
• add a border or a shadow within the column
• etc.

But above all, check the mobile version and make optimizations if needed.

Once the first square is perfect, duplicate it.

💡 The trick is to do what I did in the video (at minute 5:15): duplicate the entire column, since it's made up of 4 modules, it's more productive that way.

Step 4: Delivery of digital bonuses

Finally, there's one thing we haven't talked about yet: how to deliver the digital advent calendar bonuses?

Well, there are many ways to achieve this, as it depends on what you want to deliver:

• Written content
• An audio
• A video
• A PDF
• A link to external content
• A digital product for download
• A promo code in your store

So, there are thousands of ways to think about your layout!

Option 1: the easiest

We could very well put the bonus directly in the box visible on D-Day (module 3). This would be the easiest way and would require the least amount of work.

⚠️ But be careful, if your content is imposing, it will expand the day's box and that can disrupt the overall design of the calendar.

On the other hand, if it's a simple link to external content (to a drive for example) or to a hidden promo in your store, you can put it directly on the "Open" button.

Option 2: which requires more work

The other option would be to create a section dedicated to the bonus issue. This is the option I showed you in my video.

It's a lot more work, but you can put whatever you want in this part without too much constraint.

The idea would then be to create a new section underneath the calendar and define a CSS ID for it that will create a link that will direct the web user when the "Open" button is clicked (well OK, it's not very clear this explanation 😱).

Step by step, it looks like this:

1. In each calendar box (or preferably before you duplicate your boxes, so you only do the action once), add the link anchor from the Content > Link tab. For my example, since the module is a Call to Action, I put the link on the button of this module.
2. I choose a link anchor, for example #deliver.
3. Under the calendar, add a section that will be used to deliver bonuses. Open its settings and go to the tab Advanced.
4. In the CSS ID field, enter a unique identifier, for example deliver.
5. When the user clicks on the "Open" button, he will be redirected to the section that delivers the bonuses 🤩

Then, in your section that is used to issue bonuses, add 24 rows (in green). Each one will contain a bonus for each day. You can add all the modules you need: text, image, button, video, etc.

However, you should not forget to set the visibility conditions for each of these lines. The bonus line n°1 will have to be visible only on December 1st, the bonus line n°2 will have to be visible on December 2nd, and so on.

I think you know how to do it now, but here's a reminder:

1. In the line settings, go to the Advanced tab
2. Add a Date & Time condition
3. Opt for visibility on a specific date
4. Select the right date
5. If necessary, activate the "All day" option

There you go, your digital advent calendar is all set! Well, not quite, because you're going to have to fill each box with gifts now 🤪.

Divi Advent Calendar in pictures

Finally, it is true that this tutorial is very detailed, but in itself, it is not very complicated!

However, this is still a tedious exercise, as there is not only the design of the advent calendar to plan, but also the work to make the 24 bonuses!

Here is the picture of two different calendars:

The one below is the Divi Tips Advent Calendar At the top of the image, it is the visible part, at the bottom of the image, it is the part when the Divi Builder is active.

In 2019 and 2020, my advent calendar had delighted hundreds of internet users. In 2021, I didn't have time to prepare it. I hesitated for 2022, because you understood it, it is a big block! But I'm happy to announce its return... To remember to visit it every day, I even prepared a reminder to add to your calendar. 👉 It's over here!

Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials! Or learn how to use this theme effectively with my Divi training !