Image Box
An image with a title, text and an optional link, for cards and teasers.
The Image Box puts an image, a title, a short description and an optional link together in one card. Use it for service cards, project teasers, team members or articles. The whole card can be one link, and the image can zoom on hover.
Add an image box
Insert it
Open Insert in the left panel, find Image Box under Basic (or type
image boxin Search widgets) and click it or drag it onto the canvas.Choose the image
Click Choose image in Content → Image box. Check the Alt text, or leave it empty when the image only decorates the card.
Write the text
Type the Title and Description, or double-click them on the canvas.
Link the card
Fill in Link, choose the Clickable area and add a Link text such as “Learn more”.
Settings
Settings marked Per device can differ on desktop, tablet and mobile (see Responsive editing). Fields that support dynamic tags can show data such as a post title or featured image (see Dynamic tags).
Content tab
Image box
| Setting | What it does |
|---|---|
| Image | The image. Choose one from the media library, or use a URL. Supports dynamic tags. |
| Alt text | Describes the image for screen readers. Overrides the media library alt text; leave it empty when the image is decorative. Supports dynamic tags. |
| Resolution | The image size WordPress serves. Smaller files load faster; pick one at least as wide as the image is shown. Default: Medium large. |
| Title | The title of the card. Supports dynamic tags. |
| Description | A short description under the title. Supports dynamic tags. |
| Title HTML tag | The HTML tag of the title. It sets the heading level for search engines and screen readers, not the size. Default: H3. |
| Link | Makes the card a link. Supports dynamic tags. |
| Clickable area | Which part is clickable: the whole box, the image and title, or only the link text. Options: Whole box, Image and title, Link text only. Default: Whole box. Shown when Link has a URL. |
| Link text | An optional call to action under the description, such as “Learn more”. Supports dynamic tags. |
| Link icon | Icon after the link text. Shown when Link text is set. |
| Image position | Puts the image above, left or right of the text. Options: Top, Left, Right. Default: Top. Per device. |
| Vertical alignment | Vertical alignment of the image when it sits left or right of the text. Options: Top, Middle, Bottom. Per device. |
| Alignment | Aligns the text. Options: Left, Center, Right, Justify. Per device. |
Design tab
Box
| Setting | What it does |
|---|---|
| Padding | Space inside the box. Per device. |
| Border radius | Rounds the corners of the box. Per device. |
| Normal › Background | Background of the box. |
| Normal › Border | Border of the box. |
| Normal › Shadow | Shadow of the box. |
| Hover › Background | Background of the box on hover. |
| Hover › Border color | Border color of the box on hover. |
| Hover › Shadow | Shadow of the box on hover. |
| Hover effect | Moves or shadows the box on hover. Options: None, Lift, Shadow, Lift + shadow. |
| Lift distance | How far the box moves up on hover. Shown when Hover effect is Lift or Lift + shadow. |
| Transition (ms) | Duration of the hover change, in milliseconds. |
Image
| Setting | What it does |
|---|---|
| Width | Width of the image. Per device. |
| Aspect ratio | Crops the image to a fixed shape. Per device. |
| Focal point | Which part of the image stays visible when it is cropped. Shown when Aspect ratio is set. |
| Border radius | Rounds the corners of the image. Per device. |
| Border | Border of the image. |
| Shadow | Shadow of the image. |
| Spacing | Space between the image and the text. Per device. |
| Normal › CSS filters | Blur, brightness, contrast, saturation and hue of the image. |
| Hover › CSS filters | Filters of the image when the box is hovered. |
| Hover › Hover animation | An animation of the image when the box is hovered. Options: None, Zoom in, Zoom out, Grayscale to color, Dim. Default: Zoom in. |
| Hover › Zoom scale | How much the image zooms, for example 1.08. Shown when Hover animation is Zoom in or Zoom out. |
Content
| Setting | What it does |
|---|---|
| Content padding | Space around the title and text. Per device. |
| Title › Typography | Text style or font, size, weight and spacing of the title. |
| Title › Color | Color of the title. |
| Title › Hover color | Color of the title when the box is hovered. |
| Title › Spacing | Space between the title and the description. Per device. |
| Description › Typography | Text style or font, size, weight and spacing of the description. |
| Description › Color | Color of the description. |
| Description › Hover color | Color of the description when the box is hovered. |
| Link text › Typography | Text style or font, size, weight and spacing of the link text. Shown when Link text is set. |
| Link text › Color | Color of the link text. Shown when Link text is set. |
| Link text › Hover color | Color of the link text on hover. Shown when Link text is set. |
| Link text › Spacing | Space above the link text. Shown when Link text is set. Per device. |
Shared Design sections
Every element also has these sections at the end of the Design tab.
| Section | What it does |
|---|---|
| Spacing & position | Margin, padding, width, alignment in its container, order, position (relative, absolute, fixed), offsets, z-index and global classes. See Spacing, size & position. |
| Background & border | Background, border, border radius, box shadow, overflow and opacity of the whole element. See Colors & backgrounds and Borders & shadows. |
| Mask | Crops the element to a shape (circle, arch, blob, star…) or your own SVG or PNG. See Shape dividers & masks. |
Behaviour tab
Behaviour sections
The Behaviour tab is the same for every element.
| Section | What it does |
|---|---|
| Anchor & classes | An Anchor ID for #links and your own CSS classes. |
| Animations | Entrance, scroll, hover and loop animations from presets or your own timeline. See Motion & effects. |
| Motion & effects | A simple entrance animation, transforms (also on hover), CSS and backdrop filters, and sticky positioning. |
| Scroll & mouse effects | Movement, rotation, scale, fade and blur while the page scrolls, and pointer effects (follow the pointer, 3D tilt). |
| Visibility | Hide the element on desktop, tablet or mobile, or in dark or light mode. See Visibility. |
| Conditions | Show the element only when rules match, such as logged-in visitors, a date range or a URL parameter. See Display conditions. |
| Interactions | Show, hide or change other elements when this one is clicked, hovered or scrolled into view. See Interactions. |
| Attributes | Custom HTML attributes for this element. See Anchor, classes & attributes. |
Tips
- Same-shaped images. Set Design → Image → Aspect ratio (for example 4:3) so every card in a row lines up, whatever the original file.
- Side-by-side on tablet. Set Image position to Left on tablet for a compact list, and back to Top on mobile.
- One link per card. Clickable area → Whole box makes the card one big tap target; don't add more links inside it.
- Cards from posts. To show a card for each blog post, use a Loop Grid with a loop item instead of many image boxes.