Skip to main content

Understanding the Interface

The Promptless WP editor is designed to make page building simple and intuitive. This guide will help you understand each part of the interface so you can build pages confidently.

The Big Picture​

When you open the Promptless WP editor, you'll see a clean layout:

  • Left Panel: Content editing and section management
  • Center Panel: Live preview of your page
  • Right Panel: Global settings when opened
  • Top Bar: Navigation and actions

Think of it like a workspace where you can see your changes instantly as you make them.

[Screenshot: Full editor interface with panels labeled]

Top Toolbar​

The toolbar at the very top gives you quick access to important actions:

Toolbar Elements​

  • Back Arrow: Return to WordPress editor
  • Toggle Sidebars: Show/hide the side panels
  • Settings Icon: Open global design settings
  • Preview Button: Preview your page without the editor
  • Generate with AI: Create content from documents using AI
  • Save Button: Save all your changes to the page

Page Information​

In the middle, you'll see:

  • "Editing: [Page Name]" - Confirms which page you're working on
  • Status indicators - Shows if changes are saved or pending

[Screenshot: Toolbar with each button labeled]

Left Sidebar: Content Control​

The left sidebar is your main workspace for adding and editing content. It changes based on what you're doing:

When No Section is Selected​

  • Add Section button - Click to see all available section types
  • Section list - Shows all sections on your page in order
  • Global Settings - Access when settings panel is open

When a Section is Selected​

The left sidebar shows tabs for editing:

Content Tab​

  • Header fields (eyebrow, heading, main content)
  • Section-specific content (cards, testimonials, etc.)
  • Footer content (outro text, buttons)

Media Tab​

  • Featured image/video upload and settings
  • Media positioning controls
  • Display options (how media appears)

Layout Tab​

  • Theme variant (light or dark styling)
  • Layout variant (content positioning)
  • Custom background colors
  • Display mode options

Advanced Tab​

  • Custom CSS ID for developers
  • Custom CSS classes for styling
  • Additional technical options

[Screenshot: Left sidebar showing different tab states]

Center Area: Live Preview​

The center area shows exactly how your page will look to visitors:

What You See​

  • Real-time updates - Changes appear instantly
  • Actual styling - Colors, fonts, and layout as they'll appear
  • Responsive design - Adapts to different screen sizes
  • Interactive elements - Buttons and links work in preview

Section Indicators​

When you hover over sections in the preview:

  • Blue outline appears around the section
  • Section name shows at the top
  • Edit and delete buttons appear
  • Drag handle for reordering (when enabled)

Preview Modes​

The preview automatically adjusts for:

  • Desktop view (default)
  • Tablet view (when you narrow the browser)
  • Mobile view (on narrow screens)

[Screenshot: Center preview showing section hover state and responsive indicators]

The right sidebar opens when you click the settings icon:

Global Settings Panel​

  • Colors - Set your brand colors and themes
  • Typography - Choose fonts and text styles
  • Spacing - Control section padding and margins
  • Smart Colors - Automatic accessibility color adjustments

How It Works​

  • Click the settings icon to open
  • Make changes to see them apply globally
  • All sections use these settings by default
  • Individual sections can override with their own settings

[Screenshot: Right sidebar showing global settings and section controls]

Understanding how to move around the editor efficiently:

Adding Content​

  1. Click "+" to see section types
  2. Choose a section type from the list
  3. Section appears in the preview
  4. Left sidebar switches to content editing

Editing Content​

  1. Click on any section in the preview OR section list
  2. Left sidebar shows content forms
  3. Type in fields to see instant updates
  4. Switch tabs for different types of content

Managing Sections​

  1. Hover over sections in preview to see controls
  2. Click and drag to reorder sections
  3. Use delete button to remove sections
  4. Copy sections with the duplicate button

[Screenshot: Section management controls and reordering]

Visual Feedback​

The editor gives you constant feedback about what's happening:

Status Indicators​

  • Green checkmarks - Settings saved successfully
  • Orange dots - Unsaved changes exist
  • Loading spinners - Actions in progress
  • Error messages - Problems that need attention

Interactive States​

  • Blue highlights - Active/selected elements
  • Hover effects - Show what's clickable
  • Focus indicators - Show where you're typing
  • Drag indicators - Show what can be moved

Keyboard Shortcuts​

Speed up your workflow with these shortcuts:

  • Ctrl/Cmd + S - Save changes
  • Escape - Deselect current section
  • Delete - Remove selected section
  • Ctrl/Cmd + Z - Undo last action
  • Tab - Move between form fields

[Screenshot: Keyboard shortcuts reference card]

Mobile Editing​

The editor works on tablets and mobile devices:

On Tablets​

  • Touch to select sections and fields
  • Swipe between tabs in the left sidebar
  • Pinch to zoom in the preview area
  • All features available just like desktop

On Phones​

  • Sidebar collapses to save space
  • Tap to expand sidebars when needed
  • Preview takes full width for better editing
  • Touch-optimized buttons for easier tapping

Common Interface Questions​

"Why did the left sidebar change?"​

The left sidebar adapts to what you're doing - it shows content editing when a section is selected, and section management when nothing is selected.

"How do I know which section I'm editing?"​

Look for the blue outline in the preview and the highlighted section in the left sidebar section list.

"Can I hide the sidebars?"​

Yes! Click the eye icon in the toolbar to toggle sidebars on/off for more preview space.

"Where are my changes saved?"​

Changes to content save automatically to the page. Global design settings need to be saved manually using the "Save Settings" button.

Tips​

  • Use section list for quick navigation
  • Hide sidebars for more preview space
  • Save frequently

Need Help?​

For interface issues: contact@promptlesswp.com