Preloader is a Divi Essential extension that displays a customizable loading animation while your page content loads. It appears instantly when a visitor navigates to a page and fades out once the page is ready — creating a polished, professional first impression and masking any layout shift or delayed content.
Settings are organized into three tabs: Animation (the spinner style and size), Appearance (background, logo, and text), and Behavior (timing, frequency, and exclusions). A live preview panel updates in real time as you make changes.
⚠️ Important: Horizontal Scrolling Card is an Extension, not a module. It does not appear in the Divi Builder module list. It adds a Horizontal Scroll settings group to the Design tab of Divi Sections.
How to Enable
Step 1: Go to WordPress Admin → Divi Essential → Extensions
Step 2: Find Preloader and toggle it On
Step 3: Go to Divi Essential → Preloader Settings to configure Animation, Appearance, and Behavior
Step 4: Click Save Settings — the preloader goes live immediately on your site
Animation Tab
Controls the spinner style, color, and size. The Live Preview panel on the right updates in real time as you adjust these settings.
Animation Type
Type: Dropdown Default: Dual Ring
Choose the style of the loading spinner that appears during page load. The Live Preview updates instantly when you change this setting. Available styles include: Dual Ring, Spinner, Dots, Pulse, Bar, Bounce, Ripple, and more.
Animation Color
Type: Color Picker
Sets the color of the loading spinner animation. Choose any color to match your brand — the default is a purple accent.
Animation Size (px)
Type: Number Field Default: 48
Controls the diameter of the spinner animation in pixels. Increase for a larger, more prominent preloader. Decrease for a subtle, minimal feel.
Appearance Tab
Controls the preloader's full-screen background, optional logo above the animation, and any loading text shown to visitors.
Background
Background Image
Type: Image Upload
Upload an image to use as the full-screen background of the preloader. When set, the image fills the entire screen behind the spinner. Leave empty for a solid or gradient color background.
Overlay Background
Type: Color Picker
Sets a solid color background for the preloader screen. If a Background Image is also set, this color appears on top of the image — adjust opacity to let the image show through.
Gradient Overlay
Type: Gradient Builder
Applies a gradient as the preloader background. Configure using the controls below the gradient bar:
| Control | Description |
|---|---|
| Gradient bar | Click either end circle to set the start and stop colors |
| Type | Linear (directional) or Radial (center-outward) |
| Angle | Rotation angle in degrees — Linear type only |
| Clear | Removes the gradient and reverts to solid color |
Logo & Text
Logo (above animation)
Type: Image Upload
Upload your site logo to display above the spinning animation. Useful for reinforcing brand identity on the loading screen. Leave empty to show only the spinner.
Loading Text
Type: Text Field Default: Empty (no text shown)
Optional text displayed below the spinner. Leave empty for a clean, text-free preloader. Common values: "Loading…", "Please wait", your brand tagline.
Text Color
Type: Color Picker Default: Dark (#1a1916)
Sets the color of the Loading Text. Use white or a light color on dark background preloaders.
Text Size (px)
Type: Number Field Default: 14
Font size of the Loading Text in pixels.
Text Font Family
Type: Dropdown Default: Default
Font family for the Loading Text. "Default" uses your theme's body font. Select any available font to use a different typeface.
Text Font Weight
Type: Dropdown Default: 400
Font weight of the Loading Text. Available options: 100, 200, 300, 400, 500, 600, 700, 800, 900.
Behavior Tab
Controls when the preloader appears, how long it shows, how it exits, and on which pages or post types it should be skipped.
Minimum Display Time (ms)
Type: Number Field Default: 1000
The minimum time in milliseconds the preloader is shown — even if the page has already finished loading. Prevents the preloader from flashing on-screen for just a fraction of a second on fast connections.
💡 1000ms = 1 second. The recommended range is 800–1500ms. Below 800ms the preloader can flash so fast it looks like a glitch. Above 1500ms it starts to feel like the site is slow.
Fade-out Duration (ms)
Type: Number Field Default: 500
How long the preloader takes to fade out once the page is ready. 500ms creates a smooth half-second fade. Lower values (200ms) feel snappier; higher values (800ms) feel more cinematic.
Show Frequency
Type: Dropdown Default: Every page load
Controls how often the preloader is shown to the same visitor:
| Option | Description |
|---|---|
| Every page load | Shows on every single page navigation — default |
| Once per session | Shows only on the first page load of a browser session |
| Once per day | Shows once per visitor per day |
| Once per visit | Shows once per visit regardless of session length |
💡 Once per session is recommended for most sites — first-time visitors get a polished branded experience without the preloader appearing on every page they browse.
Exclude on Post Types
Type: Checkboxes
Select which WordPress post types should never show the preloader. Available options:
- Post — Standard WordPress blog posts
- Page — Standard WordPress pages
- Project — Custom project post type
- Product — WooCommerce products
⚠️ Excluding Product is recommended for WooCommerce stores — preloaders on checkout and cart pages can interrupt the transaction flow and increase abandonment rates.
Exclude on Pages
Type: Checkboxes
Select specific individual pages where the preloader should not appear. All your site's published pages are listed with checkboxes. Common pages to exclude: Shop, Cart, Checkout, My Account.
Quick Reference
| Setting | Tab | Default | Notes |
|---|---|---|---|
| Animation Type | Animation | Dual Ring | Spinner style — live preview available |
| Animation Color | Animation | Purple | Match to your brand accent color |
| Animation Size | Animation | 48px | Diameter of the spinner |
| Background Image | Appearance | — | Full-screen background behind the spinner |
| Overlay Background | Appearance | — | Solid color overlay |
| Gradient Overlay | Appearance | — | Linear or Radial gradient background |
| Logo | Appearance | — | Displayed above the spinner |
| Loading Text | Appearance | — | Optional text below the spinner |
| Text Size | Appearance | 14px | Font size of Loading Text |
| Text Font Weight | Appearance | 400 | Normal weight |
| Minimum Display Time | Behavior | 1000ms | Prevents flash — keep at 800–1500ms |
| Fade-out Duration | Behavior | 500ms | Exit animation speed |
| Show Frequency | Behavior | Every page load | Consider "Once per session" for better UX |
| Exclude on Post Types | Behavior | None excluded | Exclude Product for WooCommerce |
| Exclude on Pages | Behavior | None excluded | Exclude Cart, Checkout, My Account |
Tips & Best Practices
01 — Set Show Frequency to "Once per session" Showing the preloader on every single page load quickly becomes annoying for returning visitors. "Once per session" gives first-time visitors a polished branded experience without pestering people who are browsing multiple pages.
02 — Always exclude Cart, Checkout, and My Account These pages are part of the transaction flow — any delay or interruption here increases abandonment rates. Go to Behavior → Exclude on Pages and check these pages before going live.
03 — Match Animation Color to your primary brand color The spinner is the first thing visitors see. An on-brand color (your primary CTA color or logo accent) immediately reinforces brand identity before the page even loads.
04 — Use a gradient background + logo for a premium feel Set a gradient that transitions between two brand colors, upload your logo above the spinner, and leave Loading Text empty. This creates a branded splash screen that feels intentional and polished.
05 — Keep Minimum Display Time between 800–1500ms Below 800ms the preloader can flash so quickly it looks like a glitch. Above 1500ms it starts to feel like the site is slow even when it isn't. 1000ms (1 second) is the sweet spot for most sites.
FAQ
Q: Does Preloader show in the Divi Builder editor?
A: No. The preloader only appears on the front-end of your site. It has no effect inside the Divi Builder editing interface.
Q: Can I show different preloaders on different pages?
A: The Preloader extension applies a single global configuration site-wide. You can exclude specific pages using the Behavior tab, but per-page customization is not available.
Q: Why does my preloader flash very briefly and disappear?
A: Increase the Minimum Display Time to at least 800ms. On fast connections, the page loads before the minimum time elapses — the preloader shows for the minimum duration regardless.
Q: Will the preloader affect my Google PageSpeed score?
A: The preloader adds a small amount of JavaScript and CSS. The impact on PageSpeed scores is minimal. For best results, use "Once per session" or "Once per visit" frequency so the preloader does not block every page load for returning visitors.
Q: Can I use a video as a preloader background?
A: The Appearance tab supports image and gradient backgrounds only. Video backgrounds are not available in the Preloader extension.