Grid Page Layout
Preferred limit a grid layout is 9 (3 x 3), optional: Banner area at top can be used.
| Banner Area (Optional) | ||
| Column 1 | Column 2 | Column 3 |
| Column 4 | Column 5 | Column 6 |
| Column 7 | Column 8 | Column 9 |
The grid layout is used to as a landing page, it allows you to highlight and display important areas, when you have many pages eg:
- Make a few containers
- Give the container a class of "content-module-1-4a-div" in its container properties (cog)
- Place a heading2 (H2) inside
- With the Heading selected, type in your class of choice below
- Save
.module-title-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae imperdiet sem. Etiam porttitor eros id orci fermentum consequat. Pellentesque vestibulum, augue at placerat consectetur, sapien dui mattiulla odio sed ipsum. Pe
.module-title-3
.module-title-1 .light-orange
.module-title-1 .orange
.module-title-1 .grid-red
Creating the grid requires several page div's with specific start and end tags:
//Start Div
<div class="content-module-container-2-3"> <div class="content-module-full-wrap">
//Column 1 Div
content-module-1-4a-div
//Column 2 Div
content-module-1-4a-div
//Column 3 Div
content-module-1-4a-div
//End Div
</div><!-- end module wrap 1-->
</div><!--end content module container 1 -->
Module Heading - 2 column (.grid-red)
Testing content area
- test
- test
- test
Module Heading - 1
Testing content area
- test
- test
- test
Module Heading - 3 column (.orange)
Testing content area
- test
- test
- test
Module Heading - Half column (.light-orange)
Testing content area
- test
- test
- test
Module Heading - Half column (.light-grey)
Testing content area
- test
- test
- test
Module Heading - 1(.mid-grey)
Testing content area
- test
- test
- test
Module Heading - 1(.grey)
Testing content area
- test
- test
- test
Module Heading - 1 (.deep-grey)
Testing content area
- test
- test
- test
//BEGIN Landing rows
<div class="landing-rows">
//Row 1 (2/3 + 1/3)
<div class="modules-2-column">
<h2 class="red-heading">Module Heading - 2 column (.red)</h2>
<p>Testing content area</p> <ul> <li>test</li> <li>test</li> <li>test</li> </ul>
</div>
<div class="modules-1-column">
<h2>Module Heading - 1</h2>
<p>Testing content area</p> <ul> <li>test</li> <li>test</li> <li>test</li> </ul>
</div>
//Row 2 (full width)
<div class="modules-3-column">
<h2 class="orange-heading">Module Heading - 3 column (.orange)</h2>
<p>Testing content area</p> <ul> <li>test</li> <li>test</li> <li>test</li> </ul></div>
//Row 3 (1/2 + 1/2)
<div class="modules-half-column">
<h2>Module Heading - Half column</h2> <p>Testing content area</p>
<ul> <li>test</li> <li>test</li> <li>test</li> </ul></div>
<div class="modules-half-column">
<h2 class="orange-heading">Module Heading - Half column</h2>
<p>Testing content area</p> <ul> <li>test</li> <li>test</li> <li>test</li> </ul></div>
//Row 4 (1/3 + 1/3 + 1/3)
<div class="modules-1-column">
<h2>Module Heading - 1</h2> <p>Testing content area</p>
<ul> <li>test</li> <li>test</li> <li>test</li> </ul></div>
<div class="modules-1-column">
<h2>Module Heading - 1</h2> <p>Testing content area</p> <ul> <li>test</li> <li>test</li> <li>test</li> </ul></div>
<div class="modules-1-column">
<h2>Module Heading - 1</h2> <p>Testing content area</p> <ul> <li>test</li> <li>test</li> <li>test</li> </ul></div>
//END Landing Rows
</div>