CTA Box puts a title, text and a button over an image. On hover the button slides up into view, with an optional sheen across the image. Add an overlay so the text stays readable on any photo.
Pottery classes with the default hover reveal, a walking holiday banner with the button always on, dog rescue tiles that reveal their text as well, and two centred restaurant boxes. On phones the buttons show without hover.
The default behaviour: the button is hidden until you hover, then rises and pushes the title up while a sheen crosses the image. Dark gradient overlay and 16px corners.
A wide banner with a left-to-right gradient, Button Align set to left and Always Show Button on, so the button is there without hover. Sheen off.
Only the title shows at first. On hover the text and the button both slide up. Teal gradient overlay, 24px corners, a soft shadow and no sheen.
Button Align set to centre, a solid dark overlay for white-background photos, square corners and a square button. Hover to see the sheen and button.
Pick an image, write the message, then style the box.
Drop CTA Box onto your page and choose an image. The image sets the height of the box.
Enter a title, some text and the button text and link.
Set the overlay, typography, borders and button, and choose how the button appears on touch devices.
A simple box with the options you need to make it fit your design.
The button is hidden until hover, then rises into view and pushes the title up.
A light sheen passes across the box on hover. Turn it off with one toggle.
Hide the text as well as the button until hover, so only the title shows at first.
Add an overlay over the image so white text stays readable.
Show the button without hover on mobile devices, or always show it at every width.
Align the button left, centre or right, and align the title and text with their typography settings.
Set the box width and height per breakpoint.
Add borders, rounded corners and shadows to the box.
The image, title, text, button text and button link can all come from dynamic data.
Anywhere an image should lead visitors to another page.
Show each service with a photo and a link to its page.
Link to shop categories or blog topics with an image for each.
Highlight a sale or new product on the home page.
Show projects with a short summary and a button to the case study.
Show places or venues with a book or read more button.
Use it in a post loop and pull the image, title and link from each post.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| Image | Background image of the box. | — |
| Title | Heading shown over the image. | Title |
| Content | Rich text below the title. | — |
| Reveal Content on Hover | Hide the text until hover. | Off |
| Button | Button text and link. | My Button |
| Design | ||
| Button | Button design. | — |
| Button Align | Left, Center or Right. Aligns the title and text with the button. | — |
| Width | Box width, per breakpoint. | — |
| Height | Box height, per breakpoint. | — |
| Title Typography | Title text style and alignment. | — |
| Content Typography | Content text style and alignment. | — |
| Overlay | Solid or gradient overlay on the image. | Dark gradient from the bottom |
| Borders | Borders, radius and shadow. | — |
| Disable Sheen Effect | Turn off the sheen on hover. | Off |
| Show Button without hover on mobile devices | Show the button on touch devices without hover. | Off |
| Always Show Button | Show the button at every width, without the hover reveal. | Off |
Touch screens have no hover, so turn on Show Button without hover on mobile devices. The button is then visible straight away on smaller screens.
Yes. Turn on Always Show Button to take the button out of the hover reveal at every width.
The image gives the box its height. Add an image, or set a height in the Design section.
Yes. The image, title, content and button fields accept dynamic data, so each post can fill its own box.
Yes. Turn on Disable Sheen Effect to keep the hover reveal without the sheen.
CTA Box is included with Phox Elements, along with 140+ other premium elements for Breakdance.