The Tile Widget displays a compact content block with a centered headline, image, description text, and a button. Tiles are commonly used inside the Slider Widget but can also be used independently on any page.
Common Tasks
Adding the Widget to a Page
- Navigate to the page in the Contensive page editor.
- Click the widget tool to open the widget panel.
- Find the Tile Widget in the Design Blocks category.
- Drag the widget onto the page at the desired location.
Editing Widget Content
- Click the edit icon on the Tile Widget.
- Upload or select an image using the Image Filename field.
- Enter a heading in the Headline field.
- Set the Headline Type to choose the heading level (Heading 1 through Heading 6).
- Enter body text in the Description field using the WYSIWYG editor.
- Set the Image Aspect Ratio to control how the image is cropped.
- Click the edit icon on the widget.
- In the advanced editor, go to the Buttons tab.
- Enter a label in the Button Text field.
- Enter the destination URL in the Button URL field.
- Adjust the Button Style on the Styles tab to change the button appearance.
Configuring the Image
- In the advanced editor, go to the Image tab.
- Set the Image Width to control the display size in pixels (default: 400).
- Enter Image Alt text for accessibility.
- Set the Image Alt Size List for responsive display if needed.
- Open the advanced editor to access the Styles tab.
- Set padding (top, right, bottom, left) to control spacing.
- Choose a Theme Style to apply a predefined look.
- Set a Background Image on the Background tab.
- Enable As Full Bleed for edge-to-edge rendering.
- Set a specific Height if needed.
- Click the edit icon on the widget and open the advanced editor.
- Set the Active field to "No" on the Control Info tab to hide it, or delete the record to remove it permanently.
Edit Dialog Fields
| Field |
Description |
| Image Filename |
The image file to display |
| Headline |
The heading text for the tile |
| Headline Type |
The heading level: Heading 1 through Heading 6 |
| Description |
Body text for the tile (HTML) |
| Image Aspect Ratio |
Select the aspect ratio for the image (default: 3) |
Advanced Edit Fields
| Field |
Tab |
Description |
| Name |
Control Info |
Internal name for this widget |
| Image Width |
Image |
Width of the image in pixels (default: 400) |
| Image Alt |
Image |
Alt text for accessibility |
| Image Alt Size List |
Image |
Alternative image sizes for responsive display |
| Embed |
Embed Code |
Custom HTML/JS code to embed in the tile |
| Button Text |
Buttons |
Label for the call-to-action button |
| Button URL |
Buttons |
URL the button links to |
| Analytics Slider |
Analytics |
Enable slider analytics tracking |
| Pad Top |
Styles |
Add top padding to the widget |
| Pad Right |
Styles |
Add right padding to the widget |
| Pad Bottom |
Styles |
Add bottom padding to the widget |
| Pad Left |
Styles |
Add left padding to the widget |
| As Full Bleed |
Styles |
Include margins for content |
| Height |
Styles |
Set a specific height with units |
| Theme Style |
Styles |
Select a layout wrapper class from Design Block Themes |
| Button Style |
Styles |
CSS class for buttons (default: "btn btn-primary") |
| Background Image |
Background |
Set a background image for the widget |