Using Images in Your Flip Box
Images can make your flip box cards much more engaging. You can add an image to the front face of each card, and a background image to the back face. This guide covers both, plus tips for choosing and sizing images for the best results.
Two Types of Images in Flipbox
| Image Type | Where It Appears | Purpose |
|---|---|---|
| Front Image | Front face of the card | Main visual — photo, product shot, illustration |
| Back Image | Background of the back face | Decorative background behind text and button |
Adding a Front Image
- In the Flipbox editor, open an item to edit it.
- Find the Front Image upload field.
- Click the upload button to open the WordPress media library.
- Select an existing image or upload a new one from your computer.
- Click Select to confirm.
- Fill in the Alt Text field — this is important for accessibility and SEO.
Controlling Front Image Height
In the Front Face style settings, there is an Image Height option (in percentage). This controls how much vertical space the front image takes up within the card. Adjust this to make the image larger or smaller relative to the card height.
Adding a Back Background Image
- In the item editor, find the Back Image upload field.
- Click the upload button and select or upload your image.
- Click Select to confirm.
Making Text Readable Over a Back Image
When using a back image, text legibility can be a challenge. Here’s how to keep it readable:
- Set the Back Background Color to a dark color with some transparency (e.g., black at 60–70% opacity)
- Set your description text and button to white or light colors
- Avoid using a very busy or high-contrast image — subtle textures or blurred backgrounds work best
Recommended Image Sizes
For the best results, prepare your images at the right size before uploading:
- Front Image: Match the width and height of your flip box card (e.g., if your card is 300×250px, export the image at 300×250px or 600×500px for retina displays)
- Back Image: Same dimensions as the card — the image will be used as a CSS background, so it stretches to fill the card
- File format: JPEG for photos, PNG for graphics with transparency, WebP for best compression
- File size: Keep images under 150KB for fast loading
Alt Text: Don’t Skip This
The alt text field is important for two reasons:
- Accessibility – Screen readers use alt text to describe images to visually impaired visitors
- SEO – Search engines index alt text to understand what an image shows
Write a short, descriptive alt text for every image. For example: “Web design service icon” or “Team member Sarah Johnson headshot”.
Removing an Image
To remove a front or back image from a card, open the item editor and clear the image field (usually by clicking an “X” button or clearing the URL field). Save the flip box afterward.
Pro Tip: Use consistent image dimensions across all items in a flip box. Mismatched sizes can cause cards to look uneven, especially when displayed in a multi-column grid.