Wall Builder
The Wall Builder is the visual editor that allows you to create and customize your AdSentinel without writing code.
Wall Builder Interface
Configuration Panel (Left)
The left panel contains all configuration options organized in sections:
📝 Content
- Title: Main wall title
- Title Size: sm, md, lg, xl, 2xl
- Content Blocks: Text paragraphs
- Main Button: CTA text
- Secondary Button: Optional text
🎨 Style
- Logo: Upload and positioning
- Primary Color: Buttons and accents
- Background Color: Wall background
- Text Color: Main text
- Overlay Opacity: Background behind wall (0-100%)
⚙️ Behavior
- Mode: Hard, Soft or Banner
- Animation: Fade, Slide, Scale, Bounce
- Borders: Corner radius
- Help Guide: Enable/disable
Preview Area (Right)
Real-time preview shows exactly what your users will see.
Preview Controls
- Desktop 🖥️: Desktop view (1200px)
- Tablet 📱: Tablet view (768px)
- Mobile 📱: Mobile view (375px)
Configure Content
Title
🛡️ Ad Blocker Detected
The title appears at the top of the wall. Use an emoji to grab attention.
Size Options:
| Size | Usage |
|---|---|
| sm | Discreet |
| md | Standard |
| lg | Emphasized |
| xl | Strong Impact |
| 2xl | Maximum |
Content Blocks
Add multiple paragraphs to structure your message:
Block 1: "Your blocker prevents our financing."
Block 2: "We need advertising to offer you free content."
Block 3: "Disable it to continue reading."
Each block can have:
- Size: xs, sm, md, lg, xl, 2xl
- Bold: Yes/No
- Italic: Yes/No
Buttons
Primary Button (CTA)
[I've Disabled My Blocker]
Available Styles:
- Filled: Full button (primary color)
- Outline: Outline only
- Ghost: Transparent with hover
Secondary Button (Optional)
[Learn More]
Help Button
❓ How to Disable?
Activates the interactive guide for users.
Configure Style
Logo
- Click "Upload Logo"
- Select an image (PNG, JPG, SVG)
- Configure:
- Position: Top, Left, Right, Center
- Size: Small, Medium, Large, Custom
Colors
| Option | Description | Example |
|---|---|---|
| Primary | Buttons, links | #8b5cf6 (purple) |
| Background | Modal background | #ffffff (white) |
| Text | Text color | #1f2937 (dark gray) |
Overlay
The overlay is the semi-transparent background behind the wall:
- Opacity: 0% (transparent) to 100% (opaque)
- Recommended: 80% for Hard mode, 60% for Soft mode
Animation
| Animation | Effect |
|---|---|
| Fade | Fade-in appearance |
| Slide | Slide from bottom |
| Scale | Zoom from center |
| Bounce | Elastic bounce |
| None | No animation |
Borders
Corner radius of the modal:
- None: Square corners
- sm: Slightly rounded
- md: Medium rounded
- lg: Very rounded
- xl: Extra rounded
- full: Completely rounded
Preview
Desktop Preview
┌────────────────────────────────────────────────────────────────┐
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│
│░░░░░░░░░░┌─ ─────────────────────────────────────┐░░░░░░░░░░░░░░│
│░░░░░░░░░░│ │░░░░░░░░░░░░░░│
│░░░░░░░░░░│ [LOGO] │░░░░░░░░░░░░░░│
│░░░░░░░░░░│ │░░░░░░░░░░░░░░│
│░░░░░░░░░░│ 🛡️ Blocker Detected │░░░░░░░░░░░░░░│
│░░░░░░░░░░│ │░░░░░░░░░░░░░░│
│░░░░░░░░░░│ Your personalized message... │░░░░░░░░░░░░░░│
│░░░░░░░░░░│ │░░░░░░░░░░░░░░│
│░░░░░░░░░░│ [I've Disabled My Blocker] │░░░░░░░░░░░░░░│
│░░░░░░░░░░│ │ ░░░░░░░░░░░░░░│
│░░░░░░░░░░│ ❓ How to Disable? │░░░░░░░░░░░░░░│
│░░░░░░░░░░│ │░░░░░░░░░░░░░░│
│░░░░░░░░░░└──────────────────────────────────────┘░░░░░░░░░░░░░░│
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│
└────────────────────────────────────────────────────────────────┘
Test on Your Site
Use the "Test on My Site" button to see the wall on your real site (with a temporary token).
Save
Save as Draft
Saves your changes without publishing. Useful for working across multiple sessions.
Publish
Publishes your changes. They will be active on your site within 30 seconds.
Cancel
Cancels all unsaved changes.
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
Ctrl + S | Save |
Ctrl + Z | Undo |
Ctrl + Shift + Z | Redo |
Ctrl + P | Preview |
Test different combinations and use A/B testing to find what works best with your audience.