Overview
This section explains how templates render in different contexts: the live preview panel, PDF export, and print output. Understanding template behavior ensures consistent, professional results across all viewing methods.
Rendering Contexts
| Context | Technology | Where Used | CSS Rules |
|---|---|---|---|
| Screen Preview | HTML/CSS in browser | Right panel in offer form | Default styles + template CSS |
| Public Link | HTML/CSS in browser | Client-facing offer page | Same as screen preview |
| PDF Export | Browser print-to-PDF | Downloaded PDF file | @media print styles |
| Physical Print | Browser print dialog | Paper output | @media print styles |
Preview Panel (Screen)
Location: Right side of offer form (desktop) or below form (mobile)
Purpose:
- Real-time preview of offer appearance
- Shows exactly how offer will look to clients
- Updates instantly as you type/change settings
Rendering Details:
| Element | How It Renders | Update Timing |
|---|---|---|
| Template Design | CSS loaded from template file | Instant (when template changed) |
| Company Logo | Image from branding settings | Instant |
| Text Content | Live sync from form fields | Real-time (as you type) |
| Rich Text Formatting | HTML rendered with styles | Real-time |
| Section Layouts | CSS Grid (2 columns or 1 column) | Instant (when layout changed) |
| Images | Responsive grid layout | Instant (when uploaded/reordered) |
| Pricing Table | Calculations + template styling | Real-time (as you type prices) |
Preview Features:
- ✅ Scrollable – Preview panel scrolls independently
- ✅ Responsive – Adapts to panel width
- ✅ Interactive – Can click links (if any)
- ✅ Accurate – 95%+ match to final PDF
Preview vs PDF Differences:
- Preview may show slightly different font rendering (browser-dependent)
- Preview uses screen colors (PDFs may shift colors slightly)
- Preview page breaks not visible (PDFs paginate automatically)
PDF Export Rendering
How PDF Export Works:
- User clicks “Print/PDF” button (Premium) or uses browser print (Basic)
- Browser opens print dialog
- Special
@media printCSS rules activate - Template renders with print-optimized styles
- User selects “Save as PDF” in print dialog
- Browser generates PDF file
Technology: Uses browser’s native print-to-PDF engine (Chrome, Firefox, Safari, Edge)
Print-Specific CSS Rules
Templates apply special styles for print/PDF:
| Element | Screen Behavior | Print Behavior | Why Different |
|---|---|---|---|
| Page Size | Flexible width | A4 or Letter (8.5″ × 11″) | Standard paper sizes |
| Margins | Minimal padding | 0.5″ margins all sides | Printer safe areas |
| Colors | RGB (screen colors) | RGB optimized for print | Print color accuracy |
| Fonts | System fonts | Print-safe fonts | Ensure availability |
| Images | Responsive sizing | Fixed sizing, high-DPI | Print clarity |
| Links | Clickable, blue underline | Black text, URL visible | Paper can’t click links |
| Page Breaks | None (continuous scroll) | Automatic pagination | Multi-page output |
| Backgrounds | Full template backgrounds | Simplified (save ink) | Print efficiency |
Template Consistency
Goal: Preview should match PDF as closely as possible.
Consistency Measures:
| Aspect | Consistency Level | Notes |
|---|---|---|
| Layout | ✅ 100% consistent | Section layouts, column arrangements identical |
| Content | ✅ 100% consistent | All text, pricing, images identical |
| Colors | ✅ 95%+ consistent | Minor shifts possible (browser/printer variation) |
| Typography | ✅ 95%+ consistent | Same fonts, slight rendering differences |
| Spacing | ✅ 100% consistent | Margins, padding identical |
| Images | ✅ 100% consistent | Same images, high resolution in PDF |
| Rich Text Formatting | ✅ 100% consistent | Bold, italic, lists render identically |
What Changes in PDF:
- Page breaks added automatically (multi-page offers)
- Backgrounds may lighten slightly (ink saving)
- Links show URL in parentheses (e.g., “Click here (https://example.com)”)
- Margins enforce printer safe zones
What Stays the Same:
- Layout structure (columns, sections)
- All content (text, prices, images)
- Template design (colors, fonts, styling)
- Rich text formatting (bold, lists, etc.)
Page Break Behavior
How templates handle pagination:
| Element | Page Break Rule | Result |
|---|---|---|
| Header | Appears on first page only | Logo, company name at top of page 1 |
| Technical Sections | Avoid breaking mid-section | Section moves to next page if doesn’t fit |
| Pricing Table | Avoid breaking table rows | Table continues on next page if needed |
| Image Gallery | Images may span pages | Gallery continues across pages naturally |
| Terms Sections | Can break mid-content | Long text flows across pages |
| Footer | Appears on last page only | Contact info at bottom of final page |
Template-Specific Print Behavior
How each template handles PDF export:
| Template | Print Optimization | Special Features |
|---|---|---|
| Default | Basic print styles, high compatibility | Minimal backgrounds (ink-friendly) |
| Modern Blue | Blue gradient header, optimized for color printing | Header gradient lightens in print |
| Business | Professional grays, excellent B&W printing | Looks good even in grayscale |
| Elegant | Refined spacing, premium paper recommended | Subtle backgrounds preserve elegance |
| Creative | Vibrant colors, best with color printer | Gradients optimized for print |
| Minimal | Extremely ink-efficient, white space preserved | Best for eco-friendly printing |
| Professional | Structured layout, excellent multi-page | Page headers on pages 2+ (optional) |
Browser Compatibility
PDF export quality by browser:
| Browser | PDF Quality | Color Accuracy | Font Rendering | Recommendation |
|---|---|---|---|---|
| Chrome | ⭐⭐⭐⭐⭐ Excellent | 95%+ accurate | Crisp, clear | ✅ Recommended |
| Firefox | ⭐⭐⭐⭐ Very Good | 90%+ accurate | Good | ✅ Recommended |
| Safari | ⭐⭐⭐⭐ Very Good | 90%+ accurate | Good, Mac-optimized | ✅ Good on Mac |
| Edge | ⭐⭐⭐⭐⭐ Excellent | 95%+ accurate | Crisp (Chromium-based) | ✅ Recommended |
| Opera | ⭐⭐⭐⭐ Very Good | 95%+ accurate | Good (Chromium-based) | ✅ Good choice |
Best Practice: Use Chrome or Edge for most consistent PDF output.
Print Settings Recommendations
Optimal browser print settings for PDF export:
| Setting | Recommended Value | Why |
|---|---|---|
| Destination | “Save as PDF” | Creates digital PDF file |
| Paper Size | A4 or Letter | Standard business document size |
| Margins | Default | Templates handle margins internally |
| Scale | 100% (Default) | Maintains proper sizing |
| Background Graphics | ✅ Enabled (checked) | Includes template backgrounds and colors |
| Headers and Footers | ❌ Disabled (unchecked) | Templates have own header/footer |
| Orientation | Portrait | Standard vertical orientation |
Critical Setting: Always enable “Background Graphics” – otherwise template colors/backgrounds won’t appear in PDF.
Print Dialog Guide
Step-by-step for perfect PDF export:
1. Click “Print/PDF” button (Premium) or press Ctrl+P / Cmd+P
2. Print dialog opens
- Chrome: Modern print UI
- Firefox: Classic print dialog
- Safari: Mac print dialog
3. Select destination
- Destination dropdown → “Save as PDF”
- NOT “Microsoft Print to PDF” or physical printer
4. Check “Background graphics”
- Chrome: More settings → Background graphics ✅
- Firefox: Options → Print backgrounds ✅
- Safari: Show Details → Print backgrounds ✅
5. Verify settings
- Paper: A4 or Letter
- Margins: Default
- Scale: 100%
- Headers/footers: Unchecked
6. Preview PDF
- Right side shows PDF preview
- Check all pages render correctly
- Verify colors, images, layout
7. Save PDF
- Click “Save” or “Print” button
- Choose filename and location
- PDF downloads to your computer
Time: ~30 seconds
Common Rendering Issues
| Issue | Cause | Solution |
|---|---|---|
| No colors in PDF | “Background graphics” disabled | Enable “Background graphics” in print settings |
| Text cut off | Margins too large or scale wrong | Use default margins, 100% scale |
| Logo missing | Logo not uploaded or background graphics off | Upload logo in Company Data, enable backgrounds |
| Fonts look different | Browser font rendering variation | Normal – try Chrome for best results |
| Images blurry | Low-resolution images uploaded | Upload high-resolution images (min 1200px wide) |
| Awkward page breaks | Long sections force breaks | Shorten sections or use full-width layout |
| Rich text formatting lost | Premium not active when saved | Verify Premium, re-apply formatting, save |
| Columns not side-by-side | Print CSS not loading | Refresh page, try different browser |
Mobile Print Behavior
Printing from mobile devices:
| Device | Print Method | Quality | Notes |
|---|---|---|---|
| iOS (iPhone/iPad) | Share → Print → Save PDF | ⭐⭐⭐⭐ Very Good | Use Safari for best results |
| Android | Print option → Save as PDF | ⭐⭐⭐ Good | Chrome recommended |
| iPad (Safari) | Print → Pinch to zoom → Save | ⭐⭐⭐⭐ Very Good | Full-featured print support |
Mobile Considerations:
- Columns stack vertically on mobile preview
- PDF export from mobile still creates desktop-style layout (columns side-by-side)
- Best practice: Use desktop for final PDF export
- Mobile good for preview only
Quality Optimization
Achieving best PDF quality:
Images:
- ✅ Upload high-resolution images (min 1200px wide)
- ✅ Use PNG for graphics with transparency
- ✅ Use JPG for photos (smaller file size)
- ❌ Avoid low-res phone photos
Colors:
- ✅ Test PDF on different screens before sending to client
- ✅ Use web-safe brand colors
- ✅ Enable background graphics in print settings
- ❌ Don’t rely on extremely bright or neon colors (may not print accurately)
Fonts:
- ✅ Templates use web-safe fonts (available on all systems)
- ✅ Rich text formatting always works
- ❌ Don’t paste from Word (may bring unwanted formatting)
Layout:
- ✅ Use section layouts to control page utilization
- ✅ Preview multi-page offers before exporting
- ✅ Keep sections concise to avoid awkward breaks
Public Link Rendering
When clients view public offer link:
| Aspect | Rendering | Same as Admin Preview? |
|---|---|---|
| Template Design | Full template CSS applied | ✅ Identical |
| Layout | Responsive, adapts to screen size | ✅ Identical |
| Colors | Template + brand colors | ✅ Identical |
| Rich Text | Formatted text with styles | ✅ Identical |
| Images | Responsive gallery | ✅ Identical |
| Columns | Desktop: columns, Mobile: stacked | ✅ Identical |
| PDF Download | Premium: button visible, Basic: none | Different (public has download button) |
Client Experience:
- Public link looks identical to admin preview
- Clients see fully styled offer with template design
- No WordPress branding visible
- Professional, branded appearance
- Mobile-responsive (automatically adapts to phone screens)
Testing Checklist
Before sending offers to clients, verify:
Preview Check:
- Template selected correctly
- Logo visible and clear
- Brand colors applied
- All sections visible (checked)
- Section layouts correct (half/full width)
- Images uploaded and ordered
- Pricing calculations correct
- Rich text formatting preserved
- No typos or errors
PDF Export Check:
- Background graphics enabled
- All colors appear
- Logo renders correctly
- Text not cut off
- Images clear (not blurry)
- Page breaks acceptable
- All pages present
- File size reasonable (< 5MB)
Public Link Check:
- Link opens correctly
- Template design applied
- Responsive on mobile
- All content visible
- Acceptance box shows (if link active)
Time: 2-3 minutes for thorough check