Tool Panel

Tile Widget

Tile Widget

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

  1. Navigate to the page in the Contensive page editor.
  2. Click the widget tool to open the widget panel.
  3. Find the Tile Widget in the Design Blocks category.
  4. Drag the widget onto the page at the desired location.

Editing Widget Content

  1. Click the edit icon on the Tile Widget.
  2. Upload or select an image using the Image Filename field.
  3. Enter a heading in the Headline field.
  4. Set the Headline Type to choose the heading level (Heading 1 through Heading 6).
  5. Enter body text in the Description field using the WYSIWYG editor.
  6. Set the Image Aspect Ratio to control how the image is cropped.

Configuring the Button

  1. Click the edit icon on the widget.
  2. In the advanced editor, go to the Buttons tab.
  3. Enter a label in the Button Text field.
  4. Enter the destination URL in the Button URL field.
  5. Adjust the Button Style on the Styles tab to change the button appearance.

Configuring the Image

  1. In the advanced editor, go to the Image tab.
  2. Set the Image Width to control the display size in pixels (default: 400).
  3. Enter Image Alt text for accessibility.
  4. Set the Image Alt Size List for responsive display if needed.

Styling the Widget

  • 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.

Removing the Widget

  • 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