How to Delay Element Visibility on Your Enrollment Pages

Want to reveal content gradually on your enrollment pages? You can use custom CSS to control when elements appear — perfect for building suspense, creating progressive reveals, or timing content to match your page flow.

When to Use Delayed Visibility

This technique works well for:

• Creating step-by-step reveals during tours or enrollment walkthroughs
• Building anticipation before showing pricing or availability
• Timing content to appear after parents have scrolled or read key information

Adding the Delay Code

You'll need to add custom CSS to your page. Here's how:

1. Open your enrollment page or landing page in the page builder
2. Select the row or element you want to delay
3. Click the settings icon and go to the Custom CSS section
4. Paste the following code:

#row-7680 {
  opacity: 0;
  animation: fadeIn 1s;
  animation-delay: 900s;
  animation-fill-mode: forwards;
  pointer-events: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    pointer-events: none;
  }
  to {
    opacity: 1;
    pointer-events: auto;
  }
}

Customizing the Timing

In the code above, animation-delay: 900s sets how long the element stays hidden. Change 900s to your preferred delay:

• 3s = 3 seconds
• 10s = 10 seconds
• 0.5s = half a second

The fadeIn 1s controls how quickly the element appears once visible. Adjust this for faster or slower fade-ins.

Finding Your Element ID

The code references #row-7680 — that's the unique ID for the specific row. To find your element's ID:

1. Right-click the element in the page builder
2. Look for the ID in the settings panel, or
3. Use your browser's inspect tool to find the element's ID in the page code

Replace #row-7680 with your actual element ID.

[SCREENSHOT: Page builder showing where to find element ID and add custom CSS]

What This Code Does

Here's the breakdown:

• opacity: 0 — starts the element invisible
• pointer-events: none — prevents clicks while hidden (important for buttons or links)
• animation-fill-mode: forwards — keeps the element visible after it appears
• The @keyframes section defines the fade-in effect

Once the delay finishes, the element fades in smoothly and becomes fully interactive.