Content-specific Layouts

Frames are centrally configured layouts for different content elements. Frames can be used, for example, to allow a content editor to apply a specific background image and/or color to specific content elements throughout the website.


Ruler before

You can set a rulers before or after each content element.

Ruler after

Here the ruler is positioned after the element.


Indent

Donec volutpat pulvinar enim tincidunt sagittis. Duis rutrum enim leo. Maecenas euismod congue blandit? Aliquam et auctor sapien. Phasellus ut pellentesque tellus. Sed ac libero vitae quam porttitor viverra. Nullam neque libero, luctus suscipit ultricies in, tincidunt ac justo?

Indent, 33/66%

Mauris magna nisl, dapibus dapibus faucibus ultrices, congue vehicula ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ac quam sed odio blandit commodo! Vivamus dui urna, volutpat nec ultrices in, consectetur vitae sapien. Nulla facilisi.

Indent, 66/33%

Proin rhoncus augue quis est eleifend consequat. Fusce varius vehicula feugiat. In quis ipsum neque. Sed venenatis risus diam. Praesent tincidunt lacinia pellentesque. Donec non justo eros, lacinia hendrerit est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas et urna sed lorem venenatis tempor quis vel eros? Proin pellentesque ultricies enim sed aliquet.

Box with background color

Donec volutpat pulvinar enim tincidunt sagittis. Duis rutrum enim leo. Maecenas euismod congue blandit? Aliquam et auctor sapien. Phasellus ut pellentesque tellus. Sed ac libero vitae quam porttitor viverra. Nullam neque libero, luctus suscipit ultricies in, tincidunt ac justo?

Box (grid) with background color

Text Column

Sed lacus urna; fringilla a porta in, pretium sit amet sapien. Praesent quis lorem lectus, et malesuada quam. Etiam ullamcorper lorem eu orci varius eu pretium lectus cursus. Vestibulum a tellus metus. Nulla sit amet purus lectus, sed tempor augue. Aenean sed egestas diam. Duis placerat vulputate lacus, non cursus odio rhoncus ac! Fusce rhoncus neque et ante auctor ornare. Duis commodo, purus a vestibulum hendrerit, neque mi convallis velit, quis commodo velit odio vel risus. Nulla facilisi. Maecenas a ipsum leo. Pellentesque porttitor porta eleifend.

Text Column

Sed lacus urna; fringilla a porta in, pretium sit amet sapien. Praesent quis lorem lectus, et malesuada quam. Etiam ullamcorper lorem eu orci varius eu pretium lectus cursus. Vestibulum a tellus metus. Nulla sit amet purus lectus, sed tempor augue. Aenean sed egestas diam. Duis placerat vulputate lacus, non cursus odio rhoncus ac! Fusce rhoncus neque et ante auctor ornare. Duis commodo, purus a vestibulum hendrerit, neque mi convallis velit, quis commodo velit odio vel risus. Nulla facilisi. Maecenas a ipsum leo. Pellentesque porttitor porta eleifend.

Text Column

Sed lacus urna; fringilla a porta in, pretium sit amet sapien. Praesent quis lorem lectus, et malesuada quam. Etiam ullamcorper lorem eu orci varius eu pretium lectus cursus. Vestibulum a tellus metus. Nulla sit amet purus lectus, sed tempor augue. Aenean sed egestas diam. Duis placerat vulputate lacus, non cursus odio rhoncus ac! Fusce rhoncus neque et ante auctor ornare. Duis commodo, purus a vestibulum hendrerit, neque mi convallis velit, quis commodo velit odio vel risus. Nulla facilisi. Maecenas a ipsum leo. Pellentesque porttitor porta eleifend.

Well

Duis luctus, enim commodo auctor sodales, mi dui facilisis elit, a lobortis quam lacus nec velit. Nam pharetra, augue quis tristique consequat, arcu orci tincidunt dolor, et vehicula nulla risus vel nisi? Maecenas vel ligula lorem. Pellentesque ullamcorper dolor non justo faucibus eleifend. Sed nec sapien vel massa vulputate vehicula eget eu nisl.

Jumbotron

Duis vitae ipsum et ante sollicitudin tincidunt a nec sem. Maecenas ultricies lacinia nunc at adipiscing? Nam ullamcorper commodo elit in euismod. Fusce nec varius tortor. Fusce justo diam, interdum quis egestas et, luctus a purus.

Minimum Grid (example with images)

Minimum Grid (example with grid)

Text Column

Sed lacus urna; fringilla a porta in, pretium sit amet sapien. Praesent quis lorem lectus, et malesuada quam. Etiam ullamcorper lorem eu orci varius eu pretium lectus cursus. Vestibulum a tellus metus. Nulla sit amet purus lectus, sed tempor augue. Aenean sed egestas diam. Duis placerat vulputate lacus, non cursus odio rhoncus ac! Fusce rhoncus neque et ante auctor ornare. Duis commodo, purus a vestibulum hendrerit, neque mi convallis velit, quis commodo velit odio vel risus. Nulla facilisi. Maecenas a ipsum leo. Pellentesque porttitor porta eleifend.

Image Column

Text Column

Sed lacus urna; fringilla a porta in, pretium sit amet sapien. Praesent quis lorem lectus, et malesuada quam. Etiam ullamcorper lorem eu orci varius eu pretium lectus cursus. Vestibulum a tellus metus. Nulla sit amet purus lectus, sed tempor augue. Aenean sed egestas diam. Duis placerat vulputate lacus, non cursus odio rhoncus ac! Fusce rhoncus neque et ante auctor ornare. Duis commodo, purus a vestibulum hendrerit, neque mi convallis velit, quis commodo velit odio vel risus. Nulla facilisi. Maecenas a ipsum leo. Pellentesque porttitor porta eleifend.

Image Column