Inspector

The Inspector panel is your primary tool for styling elements in the builder. It provides visual controls for adjusting spacing, typography, colors, backgrounds, and visual effects without writing any CSS code.

Panel Overview

The Inspector panel is located on the right side of the builder interface. It displays style controls relevant to the currently selected element.

Auto-Expand Behavior

The Inspector panel responds automatically to your selections:

• Auto-expand: When you select an element on the canvas, the Inspector automatically expands to show its style controls
• Auto-collapse: When you deselect all elements (press Escape or click an empty area), the Inspector collapses to give you more canvas space
• Manual toggle: Press I to manually toggle the Inspector panel visibility

Collapsible Sections

The Inspector organizes controls into collapsible sections. Click a section header to expand or collapse it. This keeps your workspace focused on the controls you need.

Common sections include:

• Layout – Width, height, display, position
• Spacing – Margin and padding
• Typography – Font, size, weight, color
• Background – Colors, images, gradients
• Border – Width, style, color, radius
• Effects – Shadows, opacity, animations

Element-Specific Options

Different element types show different controls. For example:

• A Heading element shows typography controls prominently
• An Image element shows source URL, alt text, and object-fit controls
• A Button element shows link URL and hover state options
• A Section element shows theme selection and full-width options

Spacing Controls

The Spacing section provides visual controls for margin (space outside) and padding (space inside) of elements.

Visual Picker Grid

The spacing control uses a visual box model representation:

• The outer ring represents margin (orange/amber colored)
• The inner ring represents padding (green colored)
• Click any side (top, right, bottom, left) to select a value from Tailwind's spacing scale

Setting Values

1. Click a side of the margin or padding ring
2. Select a value from the dropdown showing Tailwind's spacing scale (0, 1, 2, 4, 6, 8, 10, 12, 16, 20, 24, etc.)
3. Preview the change immediately on the canvas

Linked vs Individual Sides

Toggle the link button to switch between:

• Linked: Changes apply to all four sides at once (e.g., p-4 for padding on all sides)
• Individual: Set each side separately (e.g., pt-4 pb-8 for different top and bottom padding)

Typography Controls

The Typography section provides comprehensive text styling options for headings, paragraphs, and other text-containing elements.

Font Family

Select a font family from the dropdown. The list includes:

• Theme fonts – Fonts configured in Settings → Global Styles → Typography appear at the top of the list
• System fonts – Safe fallback fonts like Arial, Georgia, Times New Roman
• Custom fonts – Any fonts added via Global Styles

Font Size

Choose from Tailwind's typography scale:

Font Weight

Select from nine weight options:

• font-thin (100) – Hairline weight
• font-light (300) – Light weight
• font-normal (400) – Regular weight (default)
• font-medium (500) – Medium weight
• font-semibold (600) – Semi-bold weight
• font-bold (700) – Bold weight
• font-extrabold (800) – Extra bold
• font-black (900) – Black (heaviest)

Line Height

Control the vertical spacing between lines of text:

• leading-none (1) – No extra line spacing
• leading-tight (1.25) – Compact spacing
• leading-snug (1.375) – Slightly compact
• leading-normal (1.5) – Default spacing
• leading-relaxed (1.625) – More breathing room
• leading-loose (2) – Double spacing

Text Formatting

Additional typography controls:

• Letter spacing: Adjust tracking with tracking-tight, tracking-normal, tracking-wide
• Text color: Pick from theme colors or enter a custom hex/RGB value
• Text alignment: Left, center, right, or justify using button toggles
• Text decoration: Underline, line-through, or none

Colors and Backgrounds

The Background section controls element background colors, images, and gradients.

Color Picker

Click the color swatch to open the color picker. The picker offers:

• Theme colors: Your site's color palette from Global Styles appears as clickable swatches
• Color spectrum: Click anywhere in the spectrum to choose a custom color
• Hex/RGB input: Enter exact values like #3b82f6 or rgb(59, 130, 246)
• Opacity slider: Adjust transparency from 0% to 100%

Theme Colors vs Custom Colors

The builder supports two approaches:

• Theme colors: Use predefined colors like bg-primary, bg-secondary. These update automatically when you change your theme colors in Global Styles.
• Custom colors: Use Tailwind color classes like bg-blue-500 or arbitrary values like bg-[#ff5733]. These are fixed and don't change with theme settings.

Background Image

Add a background image to any element:

1. Enter image URL or click the media button to select from your WordPress media library
2. Set position using the visual position picker (center, top-left, bottom-right, etc.)
3. Choose size: Cover (fill entire element), Contain (fit without cropping), or Auto
4. Set repeat: No repeat, Repeat, Repeat-X (horizontal only), or Repeat-Y (vertical only)

Gradients

Create gradient backgrounds using Tailwind's gradient utilities:

• Direction: Choose gradient direction (to-t, to-r, to-b, to-l, to-tr, to-br, etc.)
• From color: Starting color of the gradient
• Via color: Optional middle color
• To color: Ending color of the gradient

Effects

The Effects section provides visual enhancements like shadows, borders, rounded corners, and animations.

Box Shadows

Add depth to elements with preset shadow sizes:

Borders

Add and customize borders:

• Border width: 0, 1px, 2px, 4px, or 8px (border, border-2, border-4, border-8)
• Border style: Solid, dashed, dotted, double, or none
• Border color: Pick from theme colors or custom colors
• Border sides: Apply to all sides or specific sides (top, right, bottom, left)

Border Radius (Rounded Corners)

Soften corners with border radius:

• rounded-none – Sharp corners
• rounded-sm – Slight rounding (2px)
• rounded – Default rounding (4px)
• rounded-md – Medium rounding (6px)
• rounded-lg – Large rounding (8px)
• rounded-xl – Extra large (12px)
• rounded-2xl – 16px rounding
• rounded-3xl – 24px rounding
• rounded-full – Fully rounded (circles/pills)

Opacity

Control element transparency with the opacity slider:

• opacity-100 – Fully visible (default)
• opacity-75 – 75% visible
• opacity-50 – Half visible
• opacity-25 – 25% visible
• opacity-0 – Invisible (but still takes up space)

Animations

When animations are enabled in Builder Settings, the Effects section includes an animation picker:

• Animation name: Choose from Animate.css animations (fade, bounce, slide, zoom, etc.)
• Duration: Slower, slow, normal, fast, faster
• Delay: 0s to 5s before animation starts
• Repeat: Play once, twice, three times, or infinite
• Trigger: On page load, on scroll into view, or on hover

Hover States

Some elements like buttons support hover state styling. Look for a "Hover" tab in relevant sections to set:

• Hover background color
• Hover text color
• Hover border color
• Hover shadow
• Hover transform (scale, rotate)

Responsive Styling

The Inspector supports breakpoint-specific styles, letting you create different appearances for mobile, tablet, and desktop.

Breakpoint Selector

Above the Inspector controls, you'll see breakpoint tabs when an element is selected:

• Base (Mobile) – Default styles that apply to all screen sizes
• md: (Tablet) – Styles that apply at 768px and above
• lg: (Desktop) – Styles that apply at 1024px and above

Setting Breakpoint-Specific Values

To set a value for a specific breakpoint:

1. Click the breakpoint tab (md: or lg:)
2. Adjust any control – the change applies only to that breakpoint and larger
3. Preview by switching breakpoints in the canvas toolbar

How Responsive Classes Work

Tailwind uses a mobile-first approach. Responsive prefixes like md: and lg: mean "at this breakpoint and above":

<h2 class="text-xl md:text-2xl lg:text-4xl">...</h2>

This heading is:

• text-xl on mobile (base)
• text-2xl on tablet (768px+)
• text-4xl on desktop (1024px+)

Arbitrary Values

When Tailwind's predefined scale doesn't meet your needs, use arbitrary values for exact measurements.

Syntax

Wrap custom values in square brackets:

• w-[42px] – Exactly 42 pixels wide
• h-[300px] – Exactly 300 pixels tall
• p-[1.5rem] – 1.5rem padding
• text-[22px] – 22px font size
• bg-[#ff5733] – Custom hex color

When to Use Arbitrary Values

Use arbitrary values when:

• You need an exact pixel dimension to match a design spec
• The Tailwind scale doesn't include your desired value
• You're matching external design system measurements

Prefer Tailwind's scale values when possible for consistency and smaller CSS output.

CSS Generation

The builder automatically generates CSS rules for arbitrary values. These are injected into the page so they work correctly in preview and on the frontend.

Next Steps

Now that you understand the Inspector's style controls, explore these related topics:

• Keyboard Shortcuts – Speed up your workflow with keyboard shortcuts
• Layout Elements – Learn about Section, Container, and Grid elements
• Global Styles – Configure theme colors and typography