Dotcom offers an extensive range of advanced settings for elements. An element is a dynamic component that can be customized using its three sections.
- Content
- Style
- Advanced
In this section, we’ll walk you through how to configure the Advanced tab of any element to access features like adjusting the element’s margin, padding, width, position, and visibility on different device screen types. Experiment with different combinations to create eye-catching designs for elements that align perfectly with your website's aesthetic.
Steps to configure the Advanced settings of an Element on Dotcom
- Hover over the element and click on the edit icon. The customization panel loads on your screen's right side. Here, navigate to the Advanced tab for advanced style settings for the element.
Advanced Section
- Adjust the Margin by first selecting the size unit as px, %, em, or rem from the dropdown. Next, fill in the Top, Right, Bottom, and Left values individually. Click on the outline icon if you want to set the same value across all four parameters.
- Similarly, adjust the Padding of the element.
- To adjust the Width, first select the device screen type as desktop, tablet, or mobile from the dropdown. Then, set the width to Default, Full Width, or Custom.
- If you select Custom, adjust the Custom Width through the range slider after picking a suitable size unit as px, %, em, or rem. Repeat the above for the other screen types.
- Select the Position of the Image element as Default or Absolute from the dropdown.
- If you select Absolute, change the Horizontal Orientation to Left or Right. Edit the Offset value by first selecting the size unit as px, %, em, or rem. Now, select the screen type as desktop, tablet, or mobile from the dropdown. Set the value using the range slider. Repeat this for the other screen types.
- Similarly, change the Vertical Orientation to Up or Down and also set its Offset value for all screen types.
NOTE: Custom positioning is not considered a good practice for responsive website design. Limit its use.
- Set the Z-Index value needed for the Image element position.
- Enter the CSS ID and CSS Classes values.
Background Section
- Expand the Background section. Select Normal mode first. In the Select Type for background, select Color or Image from the dropdown. If you select Color, change the color by clicking on the globe icon and selecting colors from the Global Colors list. Else click on the color box and use the color picker tool to choose a color of your choice.
NOTE: The changes you make in Theme Styles > Site Colors and displayed in the Global Colors list. Any Custom Color you have added is also displayed in the list.
- If you select Image, click on Upload and upload an image from your computer in JPG or PNG format not more than 5MB.
- Next, adjust the Radius by first selecting the size unit as px,%, em, or rem from the dropdown. Next, fill in the Top, Right, Bottom, and Left values individually. Click on the outline icon if you want a uniform value across all four parameters.
- Click on the Box Shadow edit icon. Here, select Drop Shadow or Inner Shadow from the dropdown. Next, click on the color box to select a color from the color picker tool. Fill in the X and Y values. Also, fill in the Blur and Spread values.
- You can do similar customizations for the Hover effect now.
Border Section
- Here, select Normal mode.
- Select the Border Type as Solid, Dashed, Dotted, or Double from the dropdown.
- Next, select a Border Color by clicking on the globe icon. Select any color from the Global Colors list. Else, click on the color box and choose a color from the color picker tool.
- To adjust the Border Width, first select the size unit as px, em, or rem from the dropdown. Then, fill in the Top, Right, Bottom, and Left values individually. If you want to set a uniform value across all these four parameters, click on the border outline icon and fill in a value in any of the boxes.
- Repeat the same for the Hover effect also.
Visibility Section
- Click to expand the Visibility section. Here, edit the visibility criteria of the image for various devices by adjusting the toggle positions for Hide on Desktop, Hide on Tablet Portrait, and Hide on Mobile Portrait.
- Click on Save and then on Preview to get a preview of your web page.
That’s it on how to configure the advanced settings for an element 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.