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
![example of homepage band with left aligned text, light grey background, and skewed edge image.](/responsive-media/cache/university-communications/wp-content/uploads/sites/144/2024/12/Homepage-band-skewed-edge.png.0.1x.generic.jpg)
1 2 | [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
![example of homepage band with image to the left and text content to the right](/responsive-media/cache/university-communications/wp-content/uploads/sites/144/2024/12/Homepage-band-right-align-1.png.0.1x.generic.jpg)
1 2 3 4 5 6 | [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)
1 2 3 4 5 | [homepageband align="left" scalable="true"] Place content inside here. [/homepageband] |