When you drag and drop any element or widget in the design canvas, it is placed neatly in containers. A container row in Dotcom refers to the horizontal section of the container that helps arrange elements and widgets.
A container row is a dynamic component that can be customized using its three sections in the customization panel.
In this section, we’ll walk you through how to configure the style of the container row.
Steps to configure the style of the container row
- Hover over the element or widget and click on the container row icon. The customization panel loads on the screen’s right side. Go to the Style tab to set the style for the container row.
- It is divided into two sections - Background and Border.
1. Background
- You can customize the style in Normal mode and Hover effect.
- Select the Normal tab.
- Go to Select Type and choose Color or Image for the background.
- If you choose Color, click the globe icon to select any Global Colors. If you want a different color, click on the color box and select the color from the color picker tool.
- If you select Image, click the Upload icon to add an image from the computer or choose from the list of already uploaded images.
NOTE: The image should not exceed 5MB and in jpg or png file format.
- Click Save.
- Now, set the Size as Cover or Contain.
- Set the Position of the image as Top, Bottom, Left, Right, or Center.
- Configure the Repeat value as repeat-x, repeat-y, repeat, space, round, or no-repeat from the dropdown.
- Change the Radius by selecting the size unit as px, %, em, or rem from the dropdown. Now, fill in the Top, Right, Bottom, and Left values. Select the outline icon to set the same value for all four parameters simultaneously.
- Setup the Box Shadow by clicking on the edit icon and choose the effect as Drop shadow or Inner shadow from the dropdown.
- Select the color from the color picker tool. Fill in the X & Y values, and Blur and Spread.
- Now, switch to the Hover tab. Make similar customizations here for the style to work under the Hover effect.
2. Border
- Likewise, you can customize the style in Normal mode and Hover effect.
- Select the Normal tab.
- Choose the Border Type as Solid, Dashed, Dotted, or Double.
- Configure the Border Color. Click on the globe icon to select any Global Colors. If you want a different color, click on the color box and select the color from the color picker tool.
- Change the Border Width by selecting the size unit as px, em, or rem from the dropdown. Now, fill in the Top, Right, Bottom, and Left values. Select the outline icon to set the same value for all four parameters simultaneously.
- Switch to the Hover tab and perform similar customizations.
- Click on Save and then on Preview to get a preview of your web page.
That ends our guide on how to edit the container row’s style on Dotcom.
If you have any questions regarding this topic, we recommend reaching out to our implementation specialist or contacting our support team for further assistance.
To understand the pricing plans for Dotcom, we encourage you to visit our pricing page, where you can explore the different options available. If you would like to discover the complete range of features and benefits offered by Dotcom, we invite you to schedule a demo with our team.