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

[Screenshot: Different methods of adding sections]

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

[Screenshot: Examples of each section type]

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

[Screenshot: Content tab structure showing consistent organization]

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

[Screenshot: Media upload and configuration interface]

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

[Screenshot: Layout controls and their effects]

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

[Screenshot: Section management tools and status indicators]

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

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

[Screenshot: Repeater field interface with drag handles]

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!