Adding Content to the Front Face

The front face of a flip box is what visitors see first — before hovering. It’s your first impression, so it should be visually clear and compelling enough to invite interaction.

Each flip box item has three optional content elements you can place on the front face: a title, an icon, and an image. You can use all three together, or just one or two depending on your design.

Front Title

The front title is the main heading shown on the front of each card.

How to Set It

1. In the Flipbox editor, find your item and click to expand it (or click Edit).
2. Look for the field labeled Front Title (or “Flip Box Front Title”).
3. Type your heading text.

Examples:

• “Web Design”
• “John Smith”
• “Starter Plan”
• “Our Story”

Styling the Title

In the style settings panel (Front Face section), you can control:

• Font family, size, weight, and style (normal/italic)
• Text color
• Text alignment (left, center, right)
• Padding (top, bottom, left, right) to adjust spacing

See Typography Settings for a full guide on font customization.

Front Icon

You can place a Font Awesome icon on the front of each card. This works great for services, features, or category cards.

How to Set It

1. In the item editor, find the Front Icon field.
2. Click the icon picker or type the Font Awesome class directly (e.g., fas fa-star, fab fa-wordpress).
3. The icon will appear on the front face of the card.

Note: Font Awesome must be enabled in the plugin settings for icons to display. It is on by default. See Font Awesome & Google Fonts Settings if your icons aren’t showing.

Styling the Icon

In the style settings panel, you can adjust:

• Icon color
• Icon background color (great for circular icon badges)
• Icon size (in pixels)
• Icon container width/height
• Icon border radius (set to 50% for a perfect circle)

For a full guide, see Using Icons in Your Flip Box.

Front Image

You can add an image to the front of each card. This could be a photo, illustration, product image, or team member headshot.

How to Set It

1. In the item editor, find the Front Image field.
2. Click Upload to open the WordPress media library and select or upload an image.
3. Optionally, fill in the Alt Text field for accessibility and SEO.

Styling the Image

In the style settings, you can control the image height (as a percentage) to adjust how much of the front face the image fills.

Combining Title, Icon, and Image

You can mix and match these three elements depending on your design goals:

• Icon + Title: Clean, minimal service or feature card
• Image + Title: Great for team members or portfolio items
• Image only: Strong visual impact, no text clutter on the front
• Icon + Image + Title: Use sparingly; can feel crowded if not styled carefully

Pro Tip: Keep the front face simple. Too much text or too many elements on the front can reduce the perceived value of the flip effect. The back side is where the details belong.

Next Steps

• Adding Content to the Back Face: Set up the description, button, and back image
• Using Icons in Your Flip Box: Full guide to Font Awesome icons
• Using Images in Your Flip Box: Tips for choosing and sizing images