Creating and Editing Flyers

The flyer editor provides a powerful yet easy-to-use interface for creating professional promotional materials. With drag-and-drop functionality and real-time preview, you can design flyers without any prior design experience.

Starting a New Flyer

From Templates

1. Click Create Flyer from the flyers list
2. Browse available templates:
   • Blank Template: Start with an empty 8.5" x 11" canvas
   • System Templates: Pre-designed layouts for common needs
   • Custom Templates: Your saved templates
3. Click on a template to begin

Template Selection

When choosing a template, you'll see:

• A preview of the template design
• The template name
• A brief description
• Options to rename, duplicate, or delete custom templates

Understanding the Editor Interface

Top Toolbar

The toolbar provides essential controls:

• Back Button: Return to the flyers list
• Delete Button: Remove the current flyer
• Flyer Name: Click to rename your flyer
• Save Status: Shows if changes are saved
• Undo/Redo: Navigate through your edit history
• Zoom Controls: Adjust the canvas view (25% to 100%)
• Preview: View how your flyer will look when printed
• Print: Open the print dialog
• Save: Manually save your changes

Left Sidebar

The sidebar contains tools for adding content:

Elements Panel

Add various content types to your flyer:

• Text: Add headings, body text, or custom text
• Image: Upload or select images
• Shape: Add rectangles, circles, or decorative elements
• Button: Create clickable elements with links
• QR Code: Generate QR codes for websites or forms
• Pet Grid: Display multiple pets in an organized layout
• Contact: Add formatted contact information
• Divider: Insert horizontal or vertical dividers

Properties Panel

When an element is selected, adjust its:

Layout

• Position (X, Y coordinates)
• Size (Width, Height)
• Rotation angle
• Layer order (bring forward/send back)

Style

• Colors (text, background, borders)
• Fonts and text formatting
• Border width and style
• Corner radius
• Opacity

Content

• Edit text directly
• Update image sources
• Configure links for buttons and QR codes
• Select pets for pet grids

Main Canvas

The central area shows your flyer design:

• Standard 8.5" x 11" format
• Real-time preview of all changes
• Grid and guides for alignment
• Click to select elements
• Drag to move elements
• Resize handles on selected elements

Working with Elements

Adding Elements

1. Click an element type in the sidebar
2. The element appears on the canvas
3. Drag it to the desired position
4. Resize using the corner handles

Text Elements

• Click to edit text directly on the canvas
• Use the properties panel for formatting:
  • Font family and size
  • Bold, italic, underline
  • Text alignment
  • Line height
  • Color selection

Images

Uploading Images

1. Click the image element or select an existing image
2. Click "Change Image" in the properties panel
3. Choose to upload a new image or select from existing ones
4. Images are automatically optimized for the flyer

Image Properties

• Maintain aspect ratio while resizing
• Adjust opacity for background effects
• Add borders or rounded corners

Pet Grids

Perfect for showcasing multiple pets:

1. Add a "Pet Grid" element
2. Click "Select Pets" in the properties panel
3. Search and choose pets to display
4. Configure the grid layout:
   • Number of columns
   • Background color
   • Border radius
5. Selected pets display with their photo and name

QR Codes

Add scannable codes that link to:

• Your organization's website
• Specific pet profiles
• Adoption application forms
• Donation pages
• Event registration

To add a QR code:

1. Add the QR Code element
2. Enter the destination URL
3. Customize colors to match your design
4. Test the code with your phone before printing

Buttons

Create call-to-action elements:

1. Add a button element
2. Edit the button text
3. Add a link URL (optional)
4. Style with colors and fonts
5. Preview shows hover effects

Design Tools and Features

Canvas Background

Change the flyer background:

1. Click on empty canvas space
2. Use the color picker in the properties panel
3. Choose from preset colors or enter custom values

Element Alignment

Keep your design organized:

• Drag elements to see alignment guides
• Snap to other elements for consistent spacing
• Use position values for precise placement

Copying Styles

Speed up your workflow:

1. Select an element with desired styling
2. Copy its properties
3. Apply to other similar elements

Layering

Control element overlap:

• "Bring to Front" moves element above others
• "Send to Back" places element behind others
• Adjust z-index values for fine control

Editing Workflow

Making Changes

1. Select: Click on any element to select it
2. Move: Drag elements to new positions
3. Resize: Use corner handles to adjust size
4. Edit: Double-click text to edit inline
5. Delete: Press Delete key or use the trash icon

Auto-Save

• Changes save automatically every few seconds
• Look for "Saved" indicator in the toolbar
• Unsaved changes show "Unsaved Changes"
• Manual save available with Save button

Undo/Redo

• Undo: Ctrl/Cmd + Z
• Redo: Ctrl/Cmd + Shift + Z
• Or use the toolbar buttons
• History tracks up to 50 actions

Keyboard Shortcuts

• Delete: Remove selected element
• Ctrl/Cmd + C: Copy element
• Ctrl/Cmd + V: Paste element
• Ctrl/Cmd + Z: Undo
• Ctrl/Cmd + Shift + Z: Redo
• Arrow Keys: Nudge selected element

Preview and Testing

Preview Mode

1. Click Preview in the toolbar
2. See your flyer without editing interface
3. Test any interactive elements
4. Check overall appearance
5. Return to editor with Edit button

Print Preview

1. Click Print in editor or preview
2. Browser print dialog opens
3. Flyer auto-formats for 8.5" x 11" paper
4. Check margins and scaling
5. Print or save as PDF

Tips for Success

Design Best Practices

• Hierarchy: Make important information prominent
• Whitespace: Don't overcrowd the design
• Consistency: Use similar fonts and colors throughout
• Readability: Ensure text is large enough to read when printed
• Contrast: Use colors that stand out from backgrounds

Performance Tips

• Work at comfortable zoom level (50-75% for overview)
• Save complex designs as templates
• Upload images at appropriate resolution
• Group related elements together

Common Layouts

Single Pet Feature

• Large pet photo at top
• Pet name and details
• Personality description
• Contact information at bottom

Multi-Pet Grid

• Header with organization logo
• Pet grid in center
• Event details or description
• QR code for more information

Event Announcement

• Eye-catching headline
• Event details (date, time, location)
• What to expect
• Registration QR code
• Contact information

Troubleshooting

Elements Not Visible

• Check element opacity settings
• Verify layer order (z-index)
• Ensure element is within canvas bounds

Cannot Select Element

• Element may be behind another
• Try selecting from element list
• Use "Send to Back" on overlapping elements

Images Not Loading

• Check internet connection
• Verify image file type (JPG, PNG, GIF supported)
• Try re-uploading the image

Save Issues

• Ensure stable internet connection
• Try manual save with Save button
• Refresh page if auto-save stops working