In Dotcom, a container is like a special frame that holds and showcases your elements and widgets. Container columns are vertical sections within a container that organize elements and widgets neatly.
A container column 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 column. Here, Dotcom allows customization of backgrounds and borders. With this feature, you can create visually appealing and organized sections for the elements and widgets on your website.
Steps to edit the style of a container column on Dotcom
- Hover over the element or widget and click on the container column icon. The customization panel loads on your screen's right side. Here, navigate to the Style tab to set the style for the container column. This has two sections- Background and Border. Let’s customize the style for the background section first.
Edit the style of the container column Background
- In the Background section, let’s first set the style for the Normal mode.
- Go to Select Type and choose Color or Image for the background.
- If you choose 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.
- If you select Image, click on the Upload icon to add an image from the computer. The image should be 160x160 in size and in jpg or png file format not exceeding 5MB. The uploaded image gets stored in the Image Library. You can upload as many images as you want to this library. Now, click on the image you want for the background and click Save. The image gets added to the background.
- Let’s do some customization for the background image. Select the Size as Cover or Contain. Next, select its Position as Top, Bottom, Left, Right, or Center. Set the Repeat status as Repeat-X, Repeat-Y, Repeat, Space, Round, or No Repeat.
- Next, set the Radius of the container by selecting the size unit as px, %, em, or rem from the dropdown. Next, fill in the Top, Right, Bottom, and Left values or click on the outline icon to set a uniform 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, repeat the same for the Hover effect. These effects are visible when you hover over the element or widget.
Edit the style of the container column Border
- Next, expand the Border section. Let’s first set the border style for the Normal mode.
- Select the Border Type as Solid, Dashed, Dotted, or Double from the dropdown.
- To edit the Border Color, click on the globe icon and select from the Global Colors. Else, click on the color box and select a color of your choice from the color picker tool.
- Next, adjust the Border Width by first selecting the size unit as px, em, or rem from the dropdown. Next, fill in the Top, Right, Bottom, and Left values or click on the outline icon to set a uniform value for all four parameters simultaneously.
- Repeat the same for the Hover effect.
- Click on Save and then on Preview to get a preview of your web page.
That’s it on how to edit the container column’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.