Layout Cell
Overview
A layout cell is a part of the page, which contains content such as blocks, text, images, videos, and other elements. A page MUST have at least one layout cell. While you create a new project, a default page with a default layout cell is added to the project automatically.
A newly added layout cell is shown below:
Note: You can configure the properties of the newly added layout cell using the properties panel on the right-side panel. For more details, see Properties of a Layout Cell.
A user can add a layout cell before or after another layout cell.
Properties of a Layout Cell
Properties of a layout cell are available under the tabs:
- Settings – Holds properties related to the settings of the layout cell.
- Style – Holds properties to set the layout cell style.
- Actions – Holds the options to configure the actions of the layout cell.
Settings Tab
Below are the properties used in the settings of the layout cell:
Property | Description |
Layout Cell Name | Indicates the name of a layout cell. |
Layout Cell ID | Holds the autogenerated ID of a layout cell. |
Add Layout Cell | Helps to add the layout cells of the page. You can add a layout cell before or after an existing layout cell. Note: For more details, see the Adding a Layout Cell section. |
Style Tab
Below are the properties of the layout cell to set the style:
Group | Property | Description |
General Settings | Default Visibility | Specifies whether the layout cell is visible or not. By default, this toggle is on, and the cell is visible. When the toggle is off, the cell is hidden. |
Width | Specifies the width of a layout cell. The value can be set as a % or pixel value. Note: When the AUTO toggle is enabled, the width is adjusted automatically, and you cannot set the width manually. |
|
Height | Specifies the height of a layout cell. The value can be set as a % or pixel value. Note: When the AUTO toggle is enabled, the height is adjusted automatically, and you cannot set the height manually. |
|
Autofill Space | Specifies whether the space to be filled automatically or not. | |
Horizontal Space | Specifies the horizontal space of a layout cell. The value can be set as a % or pixel value. | |
Vertical Space | Specifies the vertical space of a layout cell. The value can be set as a % or pixel value. | |
Padding | Specifies the padding of a layout cell. The value can be set as a % or pixel value. Uniform padding can be set for all the sides or different paddings can be set for each side. | |
Direction | Represents the direction of the contents of a layout cell. The contents can be arranged either in the vertical or horizontal direction. | |
Alignment | Represents the alignment of the contents of a layout cell. The contents can be aligned as Left, Right, Center, Top, Bottom, or Stretch. | |
Wrap Items | Represents a toggle, which determines whether the contents of a layout cell are wrapped or overflown. Enable the toggle to wrap the contents. | |
Position | Position | Holds the position of the layout cell. The value can be Static, Absolute, or Relative. If the value is Absolute, you can set the exact position of the layout cell. ![]() ![]() ![]() ![]() ![]() Note: Click ![]() |
Background | Fill Type | Holds the fill type of the layout cell background. The value can be Solid Colour, Gradient Colour, or Background Image |
Color | Holds the color of the layout cell background. The value can be a color name, hex code, or color variable. Note: For more details on color variable, see Creating Reusable Color Styles. |
|
Opacity | Holds the opacity of the layout cell background. The value is set as a %. | |
Border | Border Size | Sets the size of the border of a layout cell. The value can be set as a % or pixel value. Uniform values can be set for all the sides or different values can be set for each side. |
Border Color | Sets the color of the border of a layout cell. The value can be set as a color name, hex code, or color variable. Uniform values can be set for all the sides or different values can be set for each side.
Note: For more details on color variable, see Creating Reusable Color Styles. |
|
Opacity | Holds the opacity of the layout cell border. The value is set as a %. | |
Overflow | Overflow | Holds the overflow value of the layout cell when it does not fit in the padding-box. The value can be:
|
Actions Tab
For the details on the Actions tab, see the Actions section.
How To
A user can:
Adding a Layout Cell
To add a layout cell,
- Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
- Open the required project or asset.
- Select the required page. For example,
- Select the required layout cell:
- Select + Before or + After available under the Add Layout Cell panel to add a layout cell.
A new layout cell is added before or after the selected cell. For example,
Deleting a Layout Cell
You can delete a layout cell if it is no longer required.
Note: A page MUST have at least one layout cell.
To delete a layout cell,
- Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
- Open the required project or asset.
- Select the required page. For example,
- Select the required layout cell:
- Click
at the top-right corner.
- Select Delete from the dropdown list.
The cell is deleted from the page:
Revision History
Date | Description | Created By | Peer-Reviewed By | Approved By |
2023-06-22 | Page created and content added. | AN | JP | Suganya |