Skip to main content

Working with Sections

Sections are the building blocks of your pages in Promptless WP. This guide will teach you everything about adding, editing, organizing, and managing sections to create amazing pages.

What Are Sections?​

Think of sections as different parts of your webpage:

  • Hero Section - The big banner at the top
  • Features Section - Highlights of what you offer
  • Testimonials Section - Customer feedback
  • Pricing Section - Your plans and pricing

Each section has its own content, styling, and layout options, but they all work together to create a complete page.

Adding Sections​

There are several ways to add sections to your page:

Method 1: Using the Add Button​

  1. Click the "+" button in the toolbar or left sidebar

  2. Choose from section types:

    • Hero - Page headers with call-to-action
    • Features - Highlight benefits or services
    • Stats - Display impressive numbers
    • Testimonials - Customer reviews
    • FAQ - Frequently asked questions
    • Team - Introduce your team members
    • Pricing - Show plans and pricing
    • Steps - Guide users through processes
    • Post Grid - Display blog posts

  3. Click your chosen section type

  4. New section appears in your page preview

Method 2: Inserting Between Sections​

  1. Hover between existing sections in the preview
  2. Click the "+" button that appears
  3. Choose section type from the popup
  4. Section inserts exactly where you clicked

Method 3: From Section List​

  1. Look at the left sidebar section list
  2. Click "Add Section" at the bottom
  3. Browse all available types
  4. Section adds to the end of your page

Section Types Overview​

Here's what each section type is best for:

Hero Sections​

Best for: Page headers, landing page banners, main messages Contains: Large headline, description, buttons, optional image/video Example use: Homepage header, product launch page, about page intro

Features Sections​

Best for: Highlighting benefits, services, or product features Contains: Grid of feature cards with icons, headlines, and descriptions Example use: "Why choose us", product benefits, service offerings

Stats Sections​

Best for: Impressive numbers, achievements, social proof Contains: Large numbers with labels and descriptions Example use: "10,000+ happy customers", company milestones, results

Testimonials Sections​

Best for: Customer reviews, social proof, trust building Contains: Customer quotes, names, roles, star ratings, photos Example use: Customer feedback, case study quotes, reviews

FAQ Sections​

Best for: Answering common questions, support content Contains: Expandable question and answer pairs Example use: Product questions, support pages, onboarding help

Team Sections​

Best for: Introducing team members, about pages, company culture Contains: Team member photos, names, roles, bios, links Example use: About page, team directory, leadership page

Pricing Sections​

Best for: Displaying plans, pricing tables, subscription options Contains: Pricing plans with features, prices, and call-to-action buttons Example use: Subscription pages, service pricing, product packages

Steps Sections​

Best for: Processes, how-it-works explanations, tutorials Contains: Numbered steps with descriptions and optional icons Example use: "How it works", getting started guides, processes

Post Grid Sections​

Best for: Displaying blog posts, news, recent updates Contains: Grid of blog post previews with titles, excerpts, dates Example use: Homepage blog feed, news section, latest updates

Editing Section Content​

Selecting Sections​

To edit a section:

  1. Click on the section in the preview area, OR
  2. Click the section name in the left sidebar list
  3. Left sidebar switches to editing mode for that section

Content Tab Structure​

Every section is organized the same way:

Header Block (Always Present)​

  • Eyebrow Heading: Small text above main headline
  • Heading: Main section title
  • Content: Description or introduction text
  • Media: Optional featured image or video

Items Block (Section-Specific)​

  • Cards (Features): Individual feature items
  • Stats (Stats): Number displays with labels
  • Testimonials (Testimonials): Customer reviews
  • Questions (FAQ): Q&A pairs
  • Team Members (Team): Individual bios
  • Plans (Pricing): Pricing options
  • Steps (Steps): Process steps
  • Post Settings (Post Grid): Blog display options
  • Outro Content: Additional text after main content
  • Buttons: Call-to-action buttons

Editing Tips​

  • Type directly in form fields to see instant updates
  • Use rich text editor for formatted content (bold, italic, links)
  • Upload images by clicking "Choose Image" buttons
  • Arrange items with drag-and-drop in repeater fields
  • Save frequently to preserve your work

Managing Section Media​

Adding Images​

  1. Go to Media tab when editing a section
  2. Click "Choose Image" for featured image
  3. Select from media library or upload new
  4. Image appears in section preview
  5. Adjust positioning with position controls

Image Settings​

  • Aspect Ratio: Control image proportions (auto, 16:9, 4:3, 1:1)
  • Position: Where to focus the image (center, top, bottom)
  • Disable Image Styling: Remove automatic styling
  • Custom Alt Text: For accessibility and SEO

Video Integration​

  1. Choose Media Type: Select "Video" instead of "Image"
  2. Paste Video URL: YouTube, Vimeo, or other video URLs
  3. Video embeds automatically with responsive sizing
  4. Thumbnail shows in preview mode

Media Best Practices​

  • Use high-quality images (at least 1200px wide)
  • Optimize file sizes before uploading (use tools like TinyPNG)
  • Choose relevant images that support your content
  • Add alt text for accessibility and SEO
  • Test on mobile to ensure images look good on small screens

Section Layout Options​

Layout Tab Controls​

Every section has layout controls:

Theme Variant​

  • Light: Default styling with light backgrounds
  • Dark: Dark backgrounds with light text
  • Auto: Follows global settings

Layout Variant​

  • Content Left: Content on left, media on right
  • Content Right: Content on right, media on left
  • Center: Content centered, media below or above

Custom Background​

  • Use Custom Background: Override default section background
  • Background Color: Choose any color for this section
  • Smart Colors: Automatic text color adjustments for accessibility

Display Modes (Specific Sections)​

Some sections have special display modes:

Features Section​

  • Display Mode: Features or Events
  • Card Style: Cards or Minimal
  • Grid Columns: 2, 3, or 4 columns
  • Card Alignment: Left, Center, or Right

Pricing Section​

  • Display Mode: Pricing or Products
  • Content Alignment: Center or Left
  • Billing Toggle: Show monthly/yearly options

Advanced Section Management​

Reordering Sections​

Drag and Drop Method:

  1. Click and hold on a section in the preview
  2. Drag to new position
  3. Drop in place - blue line shows where it will go
  4. Section moves to new position

Section List Method:

  1. Use the left sidebar section list
  2. Drag section names up or down
  3. Drop in new position
  4. Page reorders automatically

Duplicating Sections​

  1. Hover over section in preview
  2. Click duplicate icon (appears on hover)
  3. Copy appears below original section
  4. Edit copy to customize content

Deleting Sections​

  1. Select the section you want to remove
  2. Click delete button (trash icon)
  3. Confirm deletion in popup
  4. Section removes from page

Note: Deleted sections cannot be recovered, so be sure before deleting!

Section Status Indicators​

Sections show different states:

  • Green: Complete and ready
  • Orange: Missing required content
  • Red: Has errors that need fixing
  • Blue outline: Currently selected/editing

Content Organization Best Practices​

Page Flow Guidelines​

Structure your pages logically:

  1. Hero section first - Main message and call-to-action
  2. Features/benefits - Why visitors should care
  3. Social proof - Testimonials or stats
  4. Additional details - FAQ, team, or process info
  5. Final call-to-action - Pricing or contact section

Content Hierarchy​

Within sections:

  • Keep headlines clear and benefit-focused
  • Use bullet points for easy scanning
  • Include relevant images that support your message
  • Add clear calls-to-action that tell users what to do next

Mobile Considerations​

  • Test all sections on mobile devices
  • Keep text readable - not too small
  • Use appropriate image sizes for mobile
  • Ensure buttons are easy to tap

Bulk Text Add Feature​

Quickly add multiple items to repeater fields without tedious one-by-one entry.

How to Use Bulk Text Add​

  1. Find any repeater field (Features, Team, Testimonials, etc.)
  2. Click the bulk add icon (≡) next to the "Add" button
  3. Enter multiple items, one per line
  4. Use :: separator to split heading from description
  5. Click "Add Items" to create all items at once

Format Examples​

Simple items (heading only):

Fast Delivery
Free Shipping
Easy Returns
24/7 Support

Items with descriptions (using :: separator):

Fast Delivery :: Get your order in 24 hours or less
Free Shipping :: No minimum order required, ever
Easy Returns :: 30-day hassle-free return policy
24/7 Support :: Real humans available around the clock

Where Bulk Add Works​

  • Features sections: Add multiple feature cards
  • Team sections: Add team member names quickly
  • Steps sections: Add process steps in sequence
  • FAQ sections: Add questions (answers added individually)
  • Any repeater field: Look for the bulk add icon

Tips for Bulk Add​

  • Copy from spreadsheets: Paste directly from Excel or Google Sheets
  • Import from documents: Copy formatted lists from Word or Google Docs
  • Use consistent formatting: The :: separator is optional but helpful
  • Review after adding: Edit individual items for fine-tuning

Create smooth-scrolling navigation to specific sections on your page.

  1. Each section can have a unique ID (set in Advanced tab)
  2. Links to yourpage.com/#section-id scroll smoothly to that section
  3. URL updates as users scroll past sections
  4. Perfect for single-page sites and long-form content
  1. Edit any section
  2. Go to the Advanced tab
  3. Enter a unique Section ID (e.g., "features", "pricing", "contact")
  4. Save your changes

In buttons:

  • Set button URL to #section-id
  • Clicking scrolls smoothly to that section

In navigation menus:

  • Add menu items with URL #section-id
  • Create single-page navigation experiences

Shareable URLs:

  • Share yoursite.com/page/#pricing to link directly to pricing section
  • Great for marketing campaigns and support responses

Best Practices for Anchor IDs​

  • Use lowercase letters and hyphens (e.g., "our-team")
  • Keep IDs short and descriptive
  • Avoid spaces and special characters
  • Make IDs unique per page (no duplicates)

Background Images​

Add visual depth to any section with background images.

Adding a Background Image​

  1. Edit your section
  2. Go to the Layout tab
  3. Enable "Use Background Image"
  4. Click "Choose Image" to select or upload
  5. Adjust settings as needed

Background Image Options​

Image Position:

  • Center: Image centered in section (default)
  • Top: Focus on top portion of image
  • Bottom: Focus on bottom portion
  • Left/Right: Align image to sides

Overlay Settings:

  • Overlay color: Semi-transparent color over the image
  • Overlay opacity: Control how much image shows through
  • Purpose: Ensures text remains readable over busy images

Best Practices for Background Images​

Image Selection:

  • Choose images that don't compete with text content
  • Avoid busy or cluttered images
  • Consider how the image looks when cropped on mobile

Readability:

  • Always test text readability over the image
  • Use overlay for better contrast when needed
  • Darker images work better with light text (and vice versa)

Performance:

  • Optimize images for web (under 500KB recommended)
  • Use appropriate dimensions (don't upload 5000px images)
  • Consider using subtle patterns instead of complex photos

Accessibility:

  • Background images are decorative - important content should be in text
  • Ensure sufficient contrast ratios with overlay
  • Test with different screen sizes

Working with Repeater Fields​

Many sections use repeater fields for items like testimonials, features, or team members:

Adding Items​

  1. Find the repeater section (Cards, Testimonials, etc.)
  2. Click "Add [Item]" button
  3. New item appears with empty fields
  4. Fill in content for the new item

Editing Items​

  1. Click on any item in the repeater
  2. Edit fields directly
  3. Changes appear instantly in preview
  4. Move to next item when done

Organizing Items​

  1. Drag items up or down in the list
  2. Use handles (⋮⋮) to grab items
  3. Drop in new position
  4. Preview updates automatically

Removing Items​

  1. Find the item you want to remove
  2. Click delete button (usually a trash icon)
  3. Confirm removal
  4. Item disappears from section

Content Quality Tips​

Writing Effective Content​

  • Be specific - "Increase sales by 30%" vs "Boost your business"
  • Focus on benefits - What's in it for the visitor?
  • Use active voice - "We help you grow" vs "Growth is provided"
  • Keep it scannable - Short paragraphs and bullet points

Choosing Good Images​

  • High resolution - At least 1200px wide for hero images
  • Relevant to content - Support your message
  • Professional quality - Avoid blurry or amateur photos
  • Consistent style - Similar lighting, color treatment

Button Best Practices​

  • Clear action words - "Get Started", "Download Now", "Contact Us"
  • Contrast with background - Easy to see and click
  • Appropriate size - Big enough to tap on mobile
  • Limit choices - 1-2 buttons per section maximum

Troubleshooting Section Issues​

Section Won't Add​

  • Check browser compatibility - Use modern browsers
  • Try refreshing the page
  • Check for JavaScript errors in browser console

Content Not Saving​

  • Check internet connection
  • Click "Save Changes" manually
  • Look for error messages in the interface

Images Not Displaying​

  • Check file format - JPG, PNG, WebP supported
  • Verify file size - Large files may timeout
  • Try different image to isolate the issue

Preview Looks Wrong​

  • Check display mode settings
  • Clear browser cache
  • Verify theme compatibility

Next Steps​

Now that you know how to work with sections:

  1. Explore each Section Type in detail
  2. Learn about Preview & Publishing
  3. Try the AI Features to generate content faster
  4. Experiment with Design System controls

Need More Help?​

Remember: sections are building blocks - start simple and add complexity as you get comfortable with the system!