Requirements
Page Section is a Component in the Faculty and Department theme.
Flexible Rows and Columns
Page Sections determine the vertical order of your web pages. When building your webpage, you can drag-and-drop your Page Sections to easily rearrange your page content in the layout and order you desire. The ability to quickly reorder and rearrange Page Sections is what makes content rows ‘flexible’. Content Rows determine the horizontal layout within each Page Section by selecting the number of columns desired within the section.
Concept: Stacking Page Sections
It might be helpful to imagine Page Sections as layers of a burger or sandwich. Each Page Section makes up one part of a series of ‘ingredients’ sandwiched stacked within the slices of ‘bread’ (the header and footer of the page).
Think of the rows, columns, components, and content as the ‘preparation steps’ for each of the ingredient layers that eventually form one Page Section.
Adding Page Sections
Start creating your page layout by clicking the Add Page Section button. You can add as many Page Sections as you need to achieve the layout your desire.
Sketching out basic wireframes of your webpages before building can save you lots of time and guesswork when you start using Page Sections. Old fashioned paper and pencil is easy and free, but you can also use tools such as Balsamiq, Mockingbird, or Photoshop to build out wireframes on a computer.
Page Section Options Tab
Page Sections Options include additional options for background colour, content alignment, and outer/inner spacing.
Page Section Inside Content Row Options
You can choose up to four Column Rows to display the layout of the content within your Page Sections. After selecting your desired number of columns, then you can add the Components available for that specific column width.
- Single Column Row
Displays 1 column of content spanning the full width (100%) of the section container. - Two Column Row
Displays 2 columns of content each spanning half (50%) of the section container with a small space between each column. - Three Column Row
Displays 3 columns of content each spanning one-third (30%) of the section container with a small space between each column. - Four Column Row
Displays 4 columns of content each spanning one-quarter (25%) of the section container with a small space between each column.
