While most of your pages share the same logo as well as certain design elements, the content is quite likely to have a different structure. One page might have a sidebar, another page might have three columns, and another one might just have one big picture.
In concrete5, there are several ways to arrange your content in different structures. Each tool has certain advantages, and depending on your needs, you should pick the right one. We'll look at all of these tools in this section, making sure that at the end you'll know the right way to build the page structure you want.
Every page must have one and only one page type, never two or more than that. A page type is used in different ways. There are two applications for page types:
A page type is a logical entity which you can use to build lists. Imagine you have a type called
news. If you place a page list block in an area, you can build a list of all pages of that type and you'll have a news list. You can also use them to build something less obvious. In case you have your own car collection, create a page typecar, insert a picture and some text to these pages, and you'll have a nice showcase to present your wealth or collection of toy cars.It's not a must, but most page types have a theme template as well. You can define a certain HTML structure and use it for a page type. This makes it easy to define the most-used layouts, such as a two-column and three-column layout.
Let's have a look at the pretty much self-explanatory screen where you can select the page types. You can open it by hovering over the Edit button in the concrete5 toolbar and clicking on the Design link:
In the upper part of this screen, you can see all available types. Each type has a thumbnail assigned to it to give you an impression about the actual structure you're going to assign to your page. Select the one you need and confirm it by clicking on the Save button and you'll immediately see the new layout.
To get a better understanding of page types, look at the following block diagram:
Every page type has an actual template, making sure the content is found in one or more containers. However, not every page type has its own template. As just mentioned, sometimes you just need a page type to make a group of certain pages and don't need a different HTML structure, and thus no PHP file.
The name of the page type is slightly different from the name of the matching template. If we take the Full Width page type, you'd need to replace all of the spaces with underscores, convert the text to lowercase, and append .php. The Full Width page type becomes full_width.php.
If there's no template that matches the page types, concrete5 will simply use default.php as a fallback. This is also why you should try to keep default.php as simple as possible and avoid adding too many fancy things.
concrete5 has a feature which allows you to change some of the CSS properties without touching a single file. The design menu you need to see for this feature can be found in different places. There are three different places where this menu can be found:
Clicking on an existing block
Clicking on a stack you've inserted
Clicking on the Add to… link at the end of an area while you're in edit mode
The screen you'll see is always the same, as shown in the following screenshot, but the element and the styles that are applied differ depending on the element where you've opened the design menu.
In this dialog, you can see a number of different properties. All of them are based on basic CSS rules with which you might be familiar. For those who want to go beyond the usual usage, there's a tab called CSS where you can enter your own CSS rules. Click on the Save button once you're done and the layout will change immediately.
Sometimes you might need a column structure different from anything you've seen available in the page types. You could create a new page type, but if it's a structure you just need once, it's probably better to use the layout feature. Let's have a look!
First, you need to navigate to the page where you want to split up the area. Change into the edit mode and click on the Add To… link underneath the area you want to split. Click on the Add Layout button and you'll see a dialog like this:
Specify the number of columns and rows you need as well as the spacing between the cells. You can later change the width of the columns by dragging handles above the area. If you want fixed widths, tick the Lock Widths checkbox. In case you want to use the same layout again, enable the last checkbox and enter a name. You can later select the previously created layouts again. After you've added the layout, you'll see more areas, as shown below:
The Layout 1 : Cell 1 and Layout 1: Cell 2 areas work like any other area, they are just half the size of the original Main area. Drag the handle in the middle to the left-hand side or to the right-hand side to change the column widths. The layout can be edited, removed, reordered, and locked by clicking on the plus icon at the top-left corner.