Page Layout

Magento is an object-oriented environment with pages that are assembled from separate components. For some, this approach requires a slightly different way of thinking, because there isn’t a single HTML page that corresponds to any given page. After you understand the basics, you’ll appreciate working in such a flexible and fluid environment!

The layout of each page in your store consists of distinct sections, or containers, that define the header, footer, and content areas of the page. Depending on the layout, each page might have one, two, three columns, or more. You can think of the layout as the “floor plan” of the page.

Content blocks float to fill the available space, according to the section of the page layout where they are assigned to appear. You will discover that if you change the layout from a three-column to a two-column layout, the content of the main area expands to fill the available space, and any blocks that are associated with the unused side bar seem to disappear. However, if you restore the three-column layout, the blocks reappear. This fluid approach, or liquid layout, makes it possible to change the page layout without having to rework the content. If you are used to working with individual HTML pages, you will discover that this modular, “building block” approach requires a different way of thinking.