Widgets reference
Widgets are the blocks you place on a site page. This page lists the eight built-in widgets and every setting each one has, with the defaults a new widget starts with. To place and arrange them, see Site pages and the page builder.
How widget settings work
When you add or edit a widget, the form shows the settings of its widget type. Settings that are empty are simply not shown on the page.
- Image settings take a web address. Paste one, or upload an image and Raytha fills in the address of the uploaded file.
- Color settings are hex colors such as
#1e293b. - Button style choices are Primary, Secondary, Outline primary, Outline light, Light, Link, Success, Danger, Warning, Info, Dark and Outline dark. They map to Bootstrap button styles.
- Alignment choices are Left, Center and Right.
- A button is shown only when both its Button text and its Button URL are filled in.
Every widget also has the Advanced settings (CSS class, HTML id, custom attributes, row, column and column span) described in the page builder guide.
Note The built-in widgets are styled with Bootstrap, which the built-in theme includes. If you switch to a theme without Bootstrap, widgets will lose their styling and the FAQ will not expand and collapse. Widgets belong to a theme, so a theme can also add its own widget types, marked Custom in the picker.
Hero
A large banner with a headline, supporting text and an optional button. Use it at the top of a page.
| Setting | Type | Default | Notes |
|---|---|---|---|
| Headline | Text | Large heading. | |
| Subheadline | Text | Supporting line below it. | |
| Background image | Image | Covers the banner. A dark overlay is added so text stays readable. | |
| Background color | Color | #1e293b | Shown behind or instead of the image. |
| Text color | Color | #ffffff | |
| Button text, Button URL | Text | Both needed for the button to appear. | |
| Button style | Dropdown | Light | |
| Alignment | Dropdown | Center | Text and button position. |
| Minimum height | Number | 400 | In pixels. |
WYSIWYG
A free-form block of formatted text, links, lists and images, written in the rich text editor.
| Setting | Type | Default | Notes |
|---|---|---|---|
| Content | Rich text | The body. | |
| Background color | Color | Optional. | |
| Padding | Dropdown | Medium | None, Small, Medium or Large space above and below. |
Image + Text
An image next to a headline, text and an optional button. Use it for feature descriptions and about sections.
| Setting | Type | Default | Notes |
|---|---|---|---|
| Image | Image | Without it the widget shows an empty placeholder box. | |
| Image alt text | Text | Describes the image for screen readers. Falls back to the headline. | |
| Headline | Text | ||
| Content | Rich text | ||
| Image position | Dropdown | Left | Left or Right. |
| Button text, Button URL | Text | Both needed. | |
| Button style | Dropdown | Primary | |
| Background color | Color | Optional. |
Card
A single card with an optional image, a title, a description and a button. Place several side by side by giving each a narrow column span.
| Setting | Type | Default | Notes |
|---|---|---|---|
| Title | Text | ||
| Description | Rich text | ||
| Image | Image | Shown across the top, cropped to a fixed height. | |
| Image alt text | Text | Falls back to the title. | |
| Button text, Button URL | Text | Both needed. | |
| Button style | Dropdown | Primary | |
| Background color | Color | Optional. |
FAQ
A list of questions that expand to show their answers.
| Setting | Type | Default | Notes |
|---|---|---|---|
| Headline, Subheadline | Text | Optional heading above the list. | |
| Expand first item | Checkbox | On | Opens the first question when the page loads. |
| Background color | Color | Optional. | |
| Questions | Repeater | Each row has a Question (text) and an Answer (rich text). Add a row for each question. |
Call to Action
A full-width colored band with a headline, a short message and one button. Use it to close a page.
| Setting | Type | Default | Notes |
|---|---|---|---|
| Headline | Text | ||
| Content | Rich text | ||
| Button text, Button URL | Text | Both needed. | |
| Button style | Dropdown | Light | |
| Background color | Color | #0d6efd | |
| Text color | Color | #ffffff | |
| Alignment | Dropdown | Center |
Embed
Shows content from elsewhere, such as a video, a map or a form, either in an iframe or as your own HTML.
| Setting | Type | Default | Notes |
|---|---|---|---|
| Embed type | Dropdown | Iframe | Iframe or HTML. |
| Iframe URL | Text | Used when the type is Iframe. Use the embed address the provider gives you, not the normal page address. | |
| Embed HTML | Long text | Used when the type is HTML. "Rendered as raw HTML, scripts included." | |
| Aspect ratio | Dropdown | 16:9 | 16:9, 4:3, 1:1 or 21:9. Applies to iframes. |
| Max width | Number | In pixels. Leave empty for full width. | |
| Caption | Text | Small text below the embed. | |
| Background color | Color | Optional. |
Warning Embed HTML is inserted exactly as typed, scripts included. Only paste code from sources you trust, and only give people who should be able to run scripts on your site the permission to edit pages. If neither the iframe address nor the HTML is filled in, the widget shows "No embed content configured".
Content List
A live list of content items from one content type, such as your three latest posts. It updates itself whenever items are published.
| Setting | Type | Default | Notes |
|---|---|---|---|
| Headline, Subheadline | Text | Optional heading. | |
| Content type | Content type picker | Required. Which items to list. | |
| View | View picker | Choose a view of that content type. See the note below. | |
| Filter | Text | IsPublished eq 'true' | An OData filter expression. |
| Order by | Text | An OData order-by expression, for example CreationTime desc. | |
| Page size | Number | 3 | How many items to show. |
| Display style | Dropdown | Cards | Cards, List or Compact. |
| Show image, Show date, Show excerpt | Checkbox | On | Turn parts of each entry on or off. |
| View all text, View all URL | Text | Adds a link next to the heading. The text defaults to "View all"; the link appears when a URL is set. | |
| Background color | Color | Optional. |
Things to know about Content List:
- Image and excerpt come from field names. The built-in template shows an image from a field with the developer name
featured_imageand an excerpt from a field namedcontent(shortened, with the formatting removed). Content types without such fields simply show no image or excerpt. Posts has both. - The View setting has no effect in the built-in template at the moment. Use Filter and Order by to control which items appear and in what order.
- Only published items are listed, regardless of the filter.
- If nothing matches, the widget shows "No content items found".
- The filter and order-by syntax is the same as in templates and the API; see OData in templates.
Gotchas
- Settings you leave empty fall back to the template's own default, which can differ from the form's default. For example the Hero template falls back to
#0d6efdif the background color is cleared, while a new Hero starts at#1e293b. - Changing a widget template changes every widget of that type. Edit widget templates under Themes only if you mean to. See Themes and web templates.
- Need a block that is not here? A developer can add a widget template to the theme; see Widget templates.