Wall Builder

The Wall Builder is the visual editor that allows you to create and customize your Ad Sentinelle 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

1. Click "Upload Logo"
2. Select an image (PNG, JPG, SVG)
3. 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

Tip

Test different combinations and use A/B testing to find what works best with your audience.