Page Overlay

Overview

A page overlay is shown as an overlay on an existing page. For example, the cart overlay:

For example, in Infosys Equinox Studio a newly created page overlay is shown below:

Note: You can configure the properties of the newly added page overlay using the properties panel on the right-side panel. For more details, see Properties of a Page Overlay.

The list of overlays of a project is added in the left-side panel after the page list as shown below:

Properties of a Page Overlay

The page overlay properties allow you to add extra information to a page overlay. When you create a page overlay, the overlay ID is auto-generated.

Properties of a page overlay are available under the tabs:

• Settings – Holds properties related to the settings of the page overlay.
• Style – Holds properties to set the overlay panel style.
• Actions – Holds the options to configure the actions of the page overlay.

Settings Tab

Below are the properties used in the settings of a page overlay:

Property	Descriptions
Overlay Name	Indicates the name of a page overlay.
Overlay ID	Holds the autogenerated ID of a page.
Close when click outside panel	Specifies whether the overlay is closed or not when the user clicks on the outside of the overlay panel.
Show background Scroll	Specifies whether the background window is shown or not. When this toggle is enabled, you can find the properties needed to set the background under the tab STYLE:
Fix height to Viewport	Specifies whether the overlay height is fixed to the viewport height or not. If this toggle is enabled, the overlay is shown in the entire height of the viewport.

Style Tab

Below are the properties of the page overlay to set the panel and background style:

Group	Property	Descriptions
Breakpoints	—	Helps to create responsive page views. Note: For more details on breakpoints, see the Breakpoint section.
General Settings	Width	Specifies the width of the page overlay element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Height	Specifies the height of the page overlay element. The value can be set as a % or pixel value. Note: When AUTO is enabled, the width of the element is changed based on the width of its contents.
	Padding	Specifies the padding of the page overlay element. 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 page overlay element. The contents can be arranged either in a vertical or horizontal direction. Note: Click  and select Manually customize per orientation to set the direction separately for LR (Left to Right) and RL (Right to Left).
	Alignment	Represents the alignment of the page overlay element. The contents can be aligned as Left, Right, Center, Top, Bottom, or Stretch. Note: Click and select Manually customize per orientation to set the alignment separately for LR (Left to Right) and RL (Right to Left).
	x-offset	Holds the offset value of the X-axis. The element is shown based on this offset value.
	y-offset	Holds the offset value of the Y-axis. The element is shown based on this offset value.
Background	Fill Type	Holds the fill type of the page overlay background. The value can be Solid Colour, Gradient Colour, or Background Image.
	Color	Holds the color of the page overlay background. The value can be a color name, hex code, or color variable. Note: For more details on color variables, see Creating Reusable Color Styles.
	Opacity	Holds the background opacity value of the page overlay. The value can be set as a % value.
Corner Radius	Corner Radius	Makes the corner of the element rounded. The value can be set as a % or pixel value. Uniform values can be set for all the corners or different values can be set for each corner.
Border	Border Size	Sets the size of the border of an element. 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 border of the page overlay. The value can be All, Top, Bottom, Left, and Right.
	Color	Holds the color of the page overlay border. The color is applied to the selected border as in Border Color. The value can be a color name, hex code, or color variable. Note: For more details on color variables, see Creating Reusable Color Styles.
	Opacity	Holds the opacity of the page overlay border. The value is set as a %.
Drop Shadow	Drop Shadow	Configures the shadow of an element. The value can be: H Offset – Indicates the horizontal offset. You can enter either a positive or negative value. V Offset – Indicates the vertical offset. You can enter either a positive or negative value. Blur – Holds the blur radius length of the shadow. If the value is larger, the shadow becomes larger and more blurred. Spread – Holds the spread value. The value can be: A positive value causes the shadow to expand and grow bigger. A negative value causes the shadow to shrink.
	Color	Specifies the color of the shadow.

Actions Tab

For the details on the Actions tab, see the Actions section.

How To

A user can:

• Create a New Page Overlay
• Delete a Page Overlay
• Duplicate a Page Overlay
• Promote a Page Overlay as a Public Block

Creating a New Page Overlay

You can create a new page overlay under a project. A project can hold any number of page overlays.

To create a page overlay:

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Click available at the top-left corner.
   
4. Click the Add Overlay button to create a new page overlay.
   The page overlay is added to the selected project:
   

Deleting a Page Overlay

You can delete a page overlay if it is no longer required.

To delete a page overlay,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Click available at the top-left corner.
   
4. Select the required page overlay.
   The details of the page overlay appear.
5. Click available at the top of the right-side panel.
   
6. Select Delete from the dropdown list.
   The page overlay is deleted from the project.
   Note: You can also delete a page overlay by clicking available at the left-side panel and selecting Delete from the dropdown list.
   

Duplicating a Page Overlay

You can duplicate an existing page overlay instead of creating it from scratch.

To duplicate a page overlay,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Click available at the top-left corner.
   
4. Select the required page overlay.
   The details of the page overlay appear.
5. Click available at the top of the right-side panel.
6. Select Duplicate from the dropdown list.
   The page overlay is duplicated.

Promoting a Page Overlay as a Public Block

You can reuse a page by promoting a page overlay as a public block.

To promote a page overlay as a public block,

1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
2. Open the required project or asset.
3. Click available at the top-left corner.
   
4. Select the required page overlay.
   The details of the page overlay appear.
5. Click available at the top right-side panel.
6. Select Promote to Public Block from the dropdown list.
   The page overlay is promoted as a public block.
   Note: For more details on public blocks, see Managing Public Blocks in Agora Workplace.

 

Revision History

Date	Description	Created By	Peer-Reviewed By	Approved By
2023-06-26	Page created and content added.	AN	JP	Suganya