Container Layouts
Here you'll find examples of some of the layouts you can use to organize your content. Keep in mind that there are no restrictions on how you organize and combine layouts since content Sections often contain other content Sections where each Section is configured with it's own layout.
Layout Basics
Used to organize content such as Text, Pictures, Videos and more.
Layout Options
Anything you can imaging is doable with an Ittrium site. There are no restrictions.
Where to Start
Add content elements to a container, select the layout you want and Voila. Perfect web pages in minutes.
Layout: Grid
The grid layout is frequently used to organize content on a web page. This layout is based on a simple 12 column grid that responds and adapts as the browser size changes.
Content elements are placed in the grid and you control how many columns will be allocated to each content element by adjusting the column configuration on a content container such as a Section element. For example, the grid layout above is configured with 8 columns allocated to the Text element on the left and then 4 columns for the Section container on the right. Note that the Section container on the right is configured with it's own Grid layout configuration where each content element receives all 12 columns of space. In this case, there are 3 Text elements in the Section on the right so the grid pattern repeats until all content elements are positioned on the page.
The following is another simple example where we've used simple two column layout where we allocate 6 of the 12 columns to each content element that is contained in the grid.
Headline 3.1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut felis nibh. Sed sed tincidunt nunc, a cursus odio. Aliquam laoreet ex a urna tincidunt efficitur. Aliquam purus lacus, iaculis non sagittis non, sagittis vel elit. Cras at elit sed neque molestie tempus. Aliquam in vulputate dolor. Maecenas auctor mauris nunc, nec pulvinar odio congue id. Vestibulum ullamcorper consequat pharetra. Etiam aliquet mauris diam, consequat tristique est tincidunt nec. Vestibulum ultricies ex lectus, et egestas sapien ultricies quis. Nulla eleifend vehicula consectetur. Vivamus urna nulla, commodo vitae arcu in, vehicula facilisis diam. Morbi vel neque fringilla, mattis justo ac, malesuada dui. Sed condimentum orci sed arcu sodales efficitur. Nullam vel sagittis urna.
Headline 3.2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut felis nibh. Sed sed tincidunt nunc, a cursus odio. Aliquam laoreet ex a urna tincidunt efficitur. Aliquam purus lacus, iaculis non sagittis non, sagittis vel elit. Cras at elit sed neque molestie tempus. Aliquam in vulputate dolor. Maecenas auctor mauris nunc, nec pulvinar odio congue id. Vestibulum ullamcorper consequat pharetra. Etiam aliquet mauris diam, consequat tristique est tincidunt nec. Vestibulum ultricies ex lectus, et egestas sapien ultricies quis. Nulla eleifend vehicula consectetur. Vivamus urna nulla, commodo vitae arcu in, vehicula facilisis diam. Morbi vel neque fringilla, mattis justo ac, malesuada dui. Sed condimentum orci sed arcu sodales efficitur. Nullam vel sagittis urna.
Layout: SlideBox
The slideBox layout combines two pieces of content, typically a Picture element and a Text element to provide a visual effect of having the the second content element slide up and over the first content element when a visitors positions their mouse over the content area.
Layout: backgroundImage
Use this layout when you want to display one content element on top of another. The background content is typically an image, but it can be any content element.