Managing Sections

Master creating, organizing, and reusing sections - the building blocks of your pages

Sections are the fundamental building blocks of your landing pages. This guide covers everything you need to know about creating, organizing, and reusing sections effectively.

What Are Sections?

Sections are horizontal containers that:

• Span the full width of the browser window

• Stack vertically to form your page

• Contain all your content blocks (text, images, buttons, etc.)

• Have independent styling and behavior settings

• Can be saved and reused across pages

Creating Sections

Method 1: Drag from Right Sidebar (Primary Method)

The most intuitive way to add sections:

1. Look at the right sidebar in the editor

2. Click the Layout category button

3. Find Section in the dropdown

4. Drag the Section block onto your page

5. Drop it where you want the new section

6. The section appears with a default paragraph block

This gives you a clean slate to build your content from scratch.

Method 2: Section Templates (Quick Layouts)

Start with professionally designed layouts:

1. After creating an empty section (Method 1)

2. Look for "Or continue with a template:" at the bottom

3. Choose from four predefined layouts:

   • Hero Section: Centered headline + text + button

   • Two Column: Image on left, content on right

   • Feature Cards: Headline + text + 3 icon cards

   • Testimonials: Headline + 3 testimonial cards

These templates instantly populate your section with common patterns.

Method 3: Hover to Add Section

Quick addition while working:

1. Hover near the bottom edge of any section

2. A + button appears

3. Click to insert a new empty section

4. Section appears with a default paragraph block

This method is great for adding sections on the fly without leaving your current workflow.

Method 4: Copy Existing Sections

Duplicate sections you've already designed:

1. Click into any section to reveal its toolbar

2. Click the copy icon (looks like two squares)

3. A duplicate appears immediately below

4. All content and styling is preserved

Section Toolbar Controls

When you click into any section, a vertical toolbar appears on the left with these options:

⚙️ Settings

• Name: Label your section for analytics and organization

• Background Color: Full-width background

• Content Background: Inner container background

• Layout Width: Adjustable (margins) or Full Width

• Spacing: Height and padding options

• Visibility: Desktop/Mobile toggles

✏️ Font

• Font Size: Small, Medium, Large

• Font Color: Override global text color

• Alignment: Left, Center, Right

• Line Height: Spacing between lines

🎭 Animation

• Enable/Disable: Toggle entrance animations

• Style: Fade In, Slide In

• Direction: From bottom, left, or right

• Speed: Animation duration

🖼️ Background Image

• Click to open image picker

• Upload, choose from Unsplash, or AI generate

• Adjust size, position, and overlay

📋 Copy

• Creates exact duplicate below

• Preserves all content and settings

• Disabled for fixed sections (like headers)

📁 Save as Template

• Save section for reuse

• Name your template

• Access later from template gallery

• Important: Templates save differently in page builder vs template builder

⬆️⬇️ Move Up/Down

• Reorder sections on your page

• Disabled when section is first/last

• Maintains all content and settings

🗑️ Delete

• Remove section from page

• Requires confirmation

• Cannot delete last remaining section

Renaming Sections

Give sections meaningful names for better organization:

1. Click into the section

2. Click the Settings icon (⚙️) in the toolbar

3. Enter a name in the Name field

4. Names appear in:

   • Analytics reports

   • Section navigation

   • Template library

Good naming examples:

• "Hero - Main Value Prop"

• "Features - Core Benefits"

• "Testimonials - Customer Success"

• "CTA - Book Demo"

Moving and Reordering Sections

Using Toolbar Controls

1. Click into the section

2. Use Up/Down arrows in toolbar

3. Section moves one position

Saving and Reusing Sections

Save as Template

Transform any section into a reusable template:

1. Design your perfect section

2. Click the folder icon in section toolbar

3. Name your template descriptively

4. Click Save

Template Storage

Templates are stored separately based on context:

In Template Builder

• Saved as "page" templates

• Available across all page templates

• Shared with your team

In Page Editor (Rooms)

• Saved as "room" templates

• Available when editing individual pages

• Separate from page templates

Using Saved Templates

1. Create a new empty section

2. Look for template options at the bottom

3. Click "Browse Templates" to see your saved sections

4. Click any template to apply it

5. Customize as needed

Predefined Section Layouts

RevvedUp includes four starter layouts to accelerate your design:

Hero Section

Perfect for page headers:

• Centered H1 headline

• Paragraph for subheading

• Call-to-action button

• All center-aligned

Two-Column Layout

Image + content side-by-side:

• Left column with image placeholder

• Right column with headline and text

• Responsive on mobile (stacks vertically)

• Great for feature highlights

Feature Cards

Showcase multiple benefits:

• Centered headline and intro text

• Three icon cards below

• Each card has icon, title, description

• Responsive grid layout

Testimonial Section

Social proof display:

• Centered headline

• Three testimonial cards

• Each has quote, name, title, company

• Can switch to slideshow view

Section Best Practices

Organization

• Name all sections: Helps with analytics and management

• Group related content: Keep logical flow

• Limit sections per page: 5-7 is typically optimal

Performance

• Test mobile: Sections may look different on small screens

• Monitor load time: Each section adds weight

Design Consistency

• Reuse saved templates: Maintains consistency

• Follow patterns: Users expect certain layouts

• Match brand guidelines: Colors, fonts, spacing

• Test variations: A/B test section orders

Troubleshooting

Section Won't Delete

• Cannot delete the last section on a page

• Fixed sections (headers/footers) cannot be deleted

• Check if section has required content

Section Not Moving

• First section cannot move up

• Last section cannot move down

Remember: you can always use the undo/redo buttons at the top of the page to un-delete a section or cancel the last action you did.

Related Resources

• Designing Your Page - Section styling and backgrounds

• Editor Interface - Understanding the page builder

• Content Blocks - What goes inside sections

• Template Settings - Managing saved templates

Remember: Sections are just containers. The magic happens when you combine great content with thoughtful section design!