What is Layout¶
A layout defines the visual structure of the user interface element, such as a page or a widget. In other words, a layout is a recursive system that knows how an element should be positioned and drawn.
Content of any page of an application is usually separated by a set of blocks grouped by content or structure.
Have a look at the following page structure:
Here, we are splitting the page into the following blocks hierarchy:
- main content
Each of these blocks has children in the final structure, so they represent a container.
- A Container is a block type responsible for holding and rendering its children.
- A Final block is a block type that renders content based on data, but it cannot have children.
Each block has a type class that is responsible for passing options and data into view, and building the inner structure of the block into containers.
The following are the block types to build HTML layout structure:
|Type name||Default HTML output|
|style||<style> with content or <link> with external resource|
|form||Creates three child blocks: form_start, form_fields, form_end|
|form_fields||Adds form fields based on the Symfony form|
|form_field||Block will be rendered differently depending on the field type of the Symfony form|
|list_item||<li>, this block type can be used if you want to control rendering of the li tag and its attributes|
|button||<button> or <input type=”submit/reset/button”>|
|button_group||No HTML output. It is used for logical grouping of buttons. You can define how to render the button group in your application|
Identify The Block To Customize¶
When you need to find out the specific block and its template to customize the design or content on the storefront, use the Twig Inspector tool, that is part of the OroCommerce application since v.3.1.
Please, refer to the Twig Inspector manual for the detailed information on how to use it.