The banner designer lets you create professional promotional banners without design skills. Build from preset templates or create custom designs with the visual editor.
Banner Designer Overview
The designer includes:
- Canvas: Your working area where the banner takes shape
- Elements Panel: Drag-and-drop components to add
- Properties Panel: Configure selected element settings
- Preview: See how the banner looks in context
Using Preset Templates
Signkit includes 10+ professionally designed banner templates:
Available Presets
- Product Launch: Highlight new features or products
- Event Promotion: Drive registrations for webinars or conferences
- Special Offer: Showcase discounts and deals
- Content Download: Promote ebooks, guides, or resources
- Announcement: Share company news
- Holiday Themed: Seasonal campaigns
- Minimalist: Clean, text-focused designs
- Bold: High-contrast attention grabbers
Using a Preset
- In the campaign editor, click Choose Template
- Browse available presets
- Click to select one
- The template loads into the designer
- Customize text, colors, and images
Start with a preset and customize it. This is faster than building from scratch.
Creating Custom Banners
Adding Elements
Drag elements from the panel onto the canvas:
Text
- Headlines, subheadings, body text
- Configure font, size, color, alignment
- Add multiple text blocks for hierarchy
Images
- Upload product images or graphics
- Supports PNG, JPG, GIF
- Resize and position freely
Shapes
- Rectangles, circles, triangles, stars
- Use as backgrounds or decorative elements
- Set fill colors and borders
Buttons
- Call-to-action elements
- Customize text, background, and border
- Style hover states
Dividers
- Horizontal or vertical lines
- Separate content sections
Gradients
- Background gradient effects
- Choose colors and direction
Positioning Elements
- Drag: Move elements around the canvas
- Resize: Pull corners or edges to change size
- Align: Use alignment tools for precise positioning
- Layer: Arrange element stacking order (front/back)
Element Properties
Select any element to configure:
- Position: X and Y coordinates
- Size: Width and height
- Colors: Fill, stroke, text color
- Typography: Font family, size, weight
- Spacing: Padding and margins
- Effects: Shadows, borders, opacity
Design Best Practices
Size Guidelines
| Dimension | Recommended | Maximum | |-----------|-------------|---------| | Width | 600px | 700px | | Height | 80-100px | 150px | | File size | Under 100KB | 200KB |
Color Considerations
- Use your brand colors for consistency
- Ensure sufficient contrast for readability
- Test how colors render in different email clients
- Consider dark mode compatibility
Typography Tips
- Limit to 1-2 font families
- Use clear, readable fonts (minimum 12px)
- Create hierarchy with size and weight
- Keep text concise - banners are seen quickly
Mobile Optimization
- Design for small screens first
- Ensure text is readable at smaller sizes
- Keep tap targets large enough for touch
- Test on mobile email apps
Working with Text
Adding Headline Text
- Drag Text element to canvas
- Click to edit content
- Set font size to 18-24px
- Choose bold or semibold weight
- Select your brand color
Adding Body Text
- Add another Text element below
- Set font size to 12-14px
- Use normal weight
- Limit to one line if possible
Text Alignment
Align text within its container:
- Left: Standard, easy to read
- Center: Good for single lines
- Right: Use sparingly
Working with Images
Uploading Images
- Drag Image element to canvas
- Click to open the upload dialog
- Select your file
- Position and resize as needed
Image Tips
- Use PNG for graphics with transparency
- Use JPG for photographs
- Optimize file size before uploading
- Include alt text for accessibility
Background Images
To use an image as a background:
- Add the image element first
- Position and size to fill the canvas
- Send to back (Layer > Send to Back)
- Add text and other elements on top
Call-to-Action Buttons
Creating Effective CTAs
- Add a Button element
- Enter action text: "Shop Now", "Learn More", "Register"
- Style the button to stand out
- Position prominently (usually right side)
Button Styling
- Use a contrasting background color
- Add slight rounding to corners
- Include padding around text
- Keep text short (2-3 words)
Saving Your Design
Save as Draft
Click Save at any time to preserve your work. You can continue editing later.
Finalize Design
When ready:
- Click Save & Preview
- Review in the preview panel
- Check mobile appearance
- Click Apply to Campaign
Troubleshooting
Elements Not Aligned
- Select the elements to align
- Use alignment tools (top, center, bottom, left, right)
- Or manually set X/Y coordinates
Text Too Small to Read
- Increase font size
- Reduce text content
- Use shorter words or abbreviations
Image Quality Issues
- Upload higher resolution source
- Don't scale images up
- Use appropriate format (PNG/JPG)
Colors Look Different in Email
Email clients render colors differently:
- Stick to web-safe colors
- Test in actual email clients
- Use hex codes instead of color names