How does content appear on your webpage?
Areas, layouts, and blocks dictate where content will go on the page, how it looks, and what it says. These three elements make up the structure of every page on the PPCC website.
Your site is a collection of pages arranged in a hierarchy called the site tree. Each page in your site is associated with a page type and theme. That combination of page type & theme defines parts of the page which can have editable content or functionality. Areas provide the permanent structure, layouts provide places for content to nest, and blocks provide ways to edit content.
What's an Area?
There are certain elements on each webpage that are hard-coded in, like the Navigation Area, Header Area, and the Main Content Area. They provide the most basic structural elements of the page and give us a framework for customization in other ways. Except in extremely rare cases, you will never customize an area but should know they are there.
Generally, we like to see Areas used in this way:
- Navigation areas reserved for navigational elements
- Header areas for page introductions and key takeaways
- Main Content areas for supporting information and calls to action.
What about layouts?
Layouts provide columns of space across an area. On most pages, there are multiple layouts because columns help break up information for visual tension and organization of information.
You can add a layout by:
- Clicking on an area label.
- Selecting "Add Layout."
- Choosing the number of columns in Twitter Bootstrap.
- Selecting "Save."
What are Blocks?
A block is how we add editable content or functionality to pages. Like Legos, they are the actual building blocks that go together to make your site.
You can move blocks around your page by:
- Clicking and holding in the upper right-hand corner of the block (where the intersecting arrows appear.
- Dragging the block into a new position within a layout (where the bright green glows brighter).
- Letting go of the block once you have it where you want it to go.
For more in-depth and updated information about the Concrete5's Block Areas, refer to documentation at Concrete5's website.