Homepage Bands are the basic building blocks of homepage/full-width layouts, labeled as the Advanced template in the page editor. Every piece of content must be placed inside a band. Homepage bands have four optional attributes that can be used to format them as page content.
Attributes
Name | Possible Values | Required | Notes |
---|---|---|---|
align | left or right | No | Sets the position of the text. |
class | lt-gray, red, skewed-edge | No | lt-gray and red set the background color – both can be used in combination with skewed-edge |
image | URL to an image (starting with /) | No | If specified an image will be displayed to the left or the right of the text dependent on the align attribute. |
scalable | true or false | No | If set to true, the text and image will scale in proportion to one another. This produces smaller text on tablets but might be necessary to keep items aligned properly. |
Layout Examples
Left aligned, skewed edge
[[homepageband scalable="true" image="image link" class="lt-gray skewed-edge"] text content[buttonrow][button]<a href="button link">Button Text Here</a>[/button][/buttonrow][/homepageband]]
Right aligned
[homepageband class="lt-gray" align="right" scalable="true" image="image link here"] Text content here [button]<a rel="noopener noreferrer" href="button link here" target="_blank">Button Text Here</a>[/button] [/homepageband]
Code Sample (no image)
[[homepageband align="left" scalable="true"] Place content inside here. [/homepageband]]