Designing Your Page
Master sections, global styles, headers, and footers to create beautiful, cohesive landing pages.
Create professional, cohesive landing pages by mastering the design framework: sections for structure, global styles for consistency, and headers/footers for navigation. This guide covers everything you need to design pages that convert.
Page Design Overview
Your landing page consists of three key design layers:
Headers & Footers: Frame your content with navigation and branding
Sections: Horizontal slices that contain your content
Global Styles: Consistent colors, fonts, and spacing throughout
Understanding Sections
What's a Section?
Think of sections as horizontal slices of your page. Each section:
Spans the full width of the browser
Contains your content (text, images, buttons, etc.)
Has its own background, spacing, and style settings
Can be reordered, duplicated, or saved as templates
Section Anatomy
┌─────────────────────────────────────────────────┐
│ Section Background (full browser width) │
│ ┌─────────────────────────────────────────┐ │
│ │ Content Container (responsive width) │ │
│ │ - Your text, images, buttons │ │
│ │ - Constrained for readability │ │
│ └─────────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘Creating Sections
Method 1: Drag from Right Sidebar (Recommended)
The easiest way to add sections to your page:
Look at the right sidebar in the editor
Click the Layout category button
Find Section in the dropdown
Drag it onto your page where you want it
The section appears with a default paragraph block ready for content
This method gives you a clean, empty section to build from scratch.
Learn more about managing sections or other ways of adding new sections in our Managing Sections guide.
Section Controls
When you click into any section, a toolbar appears with these options:
⚙️ Settings
Core section configuration:
Layout Width
Adjustable (default): Content has margins on larger screens
Full Width: Content stretches edge-to-edge
Spacing
Height: Compact, Default, Large, Extra Large
Custom Padding: Fine-tune top/bottom spacing
Visibility
Desktop: Show/hide on desktop
Mobile: Show/hide on mobile devices
Conditional: Show based on contact attributes (Pro tip!)
🎨 Background
Create visual interest with backgrounds:
Main Background (Full Width)
This affects the entire section width:
Solid Colors
Choose from your palette or custom colors
Adjust opacity for subtle effects
Layer colors over images
Background Images
Click the image icon
Choose from:
Upload your own
Use a photo from the unsplash stock photo library - more here
AI-generated images
Adjust settings:
Size: Cover (default), Contain, Full Screen
Position: Center, Top, Bottom
Tint: Overlay color for text readability
Pro Background Tips
Use high-res images (1920x1080 minimum)
Add color tint for better text contrast
Test on mobile - images crop differently
Keep file sizes under 500KB for speed
Layer card color over section background for depth
✏️ Font Settings
Control text appearance section-by-section:
Font Size: Small, Medium (default), Large
Font Color: Override global colors
Alignment: Left, Center, Right
Line Height: Tight, Normal, Relaxed
🎭 Animation
Add subtle motion to engage visitors:
Entrance Animations
Fade In: Gentle opacity transition
Slide Up: Content rises into view
Slide In: Enters from left or right
Scale: Grows from smaller size
Animation Settings
Delay: Stagger multiple sections
Duration: Speed of animation
Trigger: On load vs. on scroll
📋 More Actions
Copy: Duplicate section instantly
Move Up/Down: Reorder sections
Delete: Remove section (with confirmation)
💾 Save as Template
Create reusable sections for consistent design:
Click into any section
Click "Save as Template" in toolbar
Name your template
Access later via Section Templates panel
Use Cases:
Hero sections with your branding
Feature grids you use often
Testimonial layouts
CTAs that work well
You can browse your saved templates from the Section Templates panel in the Editor Interface.
Pro Tip: Build a library of high-performing sections to speed up page creation.
Global Styles
Set page-wide styles for consistency:
Accessing Global Styles
Click the controls icon in the top right menubar to open the Global Styles panel.
Global Colors
Color Swatches: Click any swatch to customize its color
Add Colors: Use the + button to add more brand colors
Usage: These colors become available throughout your page in color pickers
Global Fonts
Font Settings
Header: Select font family and weight for all headings (H1, H2, etc.)
Paragraph: Select font family and weight for body text
Preview: "Example Text" shows how your selections will look
Available Options
Font families include DM Sans, Inter, Roboto, and more
Font weights range from 300 (light) to 900 (black)
Changes apply automatically across your entire page
Responsive Design Built In
RevvedUp automatically handles all the technical details of responsive design. Your pages will look great on every device - from phones to tablets to desktop computers.
What happens automatically:
Text sizes, layouts, and spacing adjust to each screen
Headers collapse into hamburger menus on mobile
Footers stack content vertically
Touch targets are properly sized
Images and content reflow naturally
You can focus on your content while we handle the complexity.
Headers and Footers
Headers and footers frame your content with navigation and branding.
Accessing Header & Footer Settings
Hover over the header or footer area
Click the controls icon that appears on the left
The settings panel opens
Navigation Settings
Control what appears in your header:
Display Options
Show Navigation Bar: Toggle the entire header on/off
Show Menu: Display navigation links
Show Logo: Display your brand logo
Show Button: Display call-to-action button
Note: To edit the logo itself (upload or change), click on the logo and adjust it in Seller Profiles.
Styling
Background Color: Choose from your color palette
Text Color: Set the color for menu items and text
Behavior
Type:
Fixed: Header stays at top of viewport while scrolling
Scrollable: Header scrolls away with the page
Footer Settings
Display Options
Show Footer: Toggle the entire footer on/off
Show Logo: Display your brand logo in the footer
Show Menu: Display footer navigation links
Show Social Icons: Display social media links
Social Media Links
You can add a bar of social media icons to your footer. These links are managed globally for your entire account to ensure consistency across all pages.
To configure your social links:
Navigate to Settings > Page Settings (under Other section)
Add the URLs for your company's social media profiles
Once saved, return here and toggle "Show Social Icons" to display them
See Account Page Settings for detailed setup instructions. Adjusting here ensures your social links stay consistent across all pages and can be updated in one place.
Styling
Background Color: Choose from your color palette
Text Color: Set the color for footer text and links
Style Inheritance
Understanding how styles cascade:
Global Styles (entire page)
↓
Section Styles (override global)
↓
Block Styles (override section)
↓
Inline Styles (override everything)Practical Example
Global: Set primary color to blue
Section: Override background to dark
Block: Make one heading red
Inline: Bold specific words
Common Design Patterns
Hero Section
Large height
Centered text
Background image with tint
Strong CTA button
Features Section
Default height
Multi-column layout
Icons + text
Alternating backgrounds
Testimonial Section
Card-style backgrounds
Quote formatting
Profile images
Muted colors
CTA Section
Compact height
High contrast
Centered content
Multiple buttons
Pro Design Tips
Visual Hierarchy
Size: Larger = more important
Color: Primary color = key actions
Space: More space = more emphasis
Contrast: Higher contrast = attention
Quick Setup Checklist
Design Checklist
Header Checklist
Footer Checklist
Next Steps
Explore Content Blocks - Add rich content to your sections
Master Advanced Personalization - Dynamic styling with variables
View Publishing Options - Launch your designed pages
Remember: Great design is invisible. When visitors focus on your message instead of your design, you've succeeded!
Last updated