Advice and answers from the Rentech Digital Team

Video Tutorial of Image element

What is an Image element on Dotcom?

The Image element in Dotcom helps you insert an image into any webpage on your Dotcom website using a simple drag-and-drop tool. Adding an image to your site helps visualize the content for users. It increases customer engagement and also shows the search engines that your website is valuable.

Steps to use the Image element on Dotcom

• On your Dotcom dashboard, select the theme or the web page from the Select dropdown.

• In the Elements tab, drag and drop the Image element into position on the web page design.
• Hover over the dropped Image element, and you can perform three edit actions.

1. For the image.
2. For the container column.
3. For the container row.

Let’s see how to add and edit the image style first.

1. How to add/edit an image to your site on Dotcom?

• Click on the edit icon for the image. This allows us to add an image and customize its style.
• The customization panel loads on your screen’s right side. Here, you have 3 tabs.
• Content
• Style
• Advanced

How to edit the content of the Image element on Dotcom?

• Navigate to the Content tab first to add an image to your site. Here, click on the edit icon on the blank image.

• Next, click on Upload Image and upload an image from your computer (up to 5MB max). The image gets added to the library. You can upload as many images as you want.
• To add an image from the library to the image container, click on the image and then on Save. The image gets added to the container of the Image element.

• To change the image in the container, upload another image from your computer or click on the image you want to add from the media library. Click on Save. This image gets added to the Image element container, replacing the older one.

• To delete the image from the Image element container, hover over the added image and click on the delete icon.

• You can Link the image to any page on your website, an external URL, a downloadable file, an email address, or a phone number.

• Now, let’s adjust the image alignment. Select the screen type as desktop, tablet, or mobile from the dropdown and adjust the Alignment to left-aligned, center-aligned, or right-aligned for each screen type.

How to customize the image style on Dotcom?

• Let’s now start customizing the image. Navigate to the Style tab for the image.

• In the Width dropdown, select the screen size you want to customize, such as desktop, tablet, or mobile. Then, choose the desired size unit, like px, %, em, or rem, from the dropdown. Adjust the image Width using the provided range slider. If you need to customize the width for multiple screen sizes, repeat these steps for each screen size.
• Repeat the same for Height. Select the screen as desktop, tablet, or mobile. Select the unit size as px, %, em, or rem from the size unit dropdown and adjust the image height on the range slider. Complete it for the other two screen types.

• Select the image Object Fit as Fill, Cover, or Contain from the dropdown. Here, customize it for desktop, tablet, and mobile from the dropdown.

• Next, in the Normal mode and Hover effect, let us first select the Hover effect.
• Adjust the image transparency through the Opacity range slider anywhere from a minimum of 0 to a maximum of 100.

• Select the Border Type as Solid, Dashed, or None from the dropdown.

• The next option is to edit the Border Color. Click on the globe icon to reveal the Global Colors list. Select any one of the options.

NOTE: All the colors you have set at Theme Styles > Site Colors are displayed. Any new Custom Color you have added to the list is also displayed here.

• If you want any other color, click on the color box and pick a color of your choice from the color picker tool.

• To adjust the Border Width, select the size unit as px, em, or rem from the dropdown. Next, fill in the Top, Right, Bottom, and Left values individually. Clicking on the image outline icon will set uniform values across four parameters.
• To adjust the image edge Radius, select 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 image outline icon to set a uniform value across all four parameters.

• To insert the Box Shadow effect, click on the edit icon and select the style as Drop Shadow or Inner Shadow from the dropdown.
• Next, click on the color box to select the color from the color picker tool. All the color boxes in Dotcom give you three ways to select a color.
• Enter the color values in HEX, RGB, or HSL.
• Use the color slider and click on the color in the frame.
• Click on the dropper and move the patch to any place on the screen to pick the exact color.
• Once you have selected the color, fill in the X and Y values. Fill in the values for Blur and Spread. Adjust the values using the increment-decrement counter. The changes you make for the Hover effect are visible when you hover over the image.

• Repeat the same for Normal mode.

How to configure advanced settings for the Image Element on Dotcom?

• Navigate to the Advanced tab to configure some advanced settings for the Image element.
• Once we have completed customizing the Image element, let’s start with the customizations for its container column and row.

2. How to edit the Image container column on Dotcom?

• Hover over the Image element and click on the edit icon for the container column. The Customization panel loads on the right side with three tabs. Items here include-
• Content
• Style
• Advanced

3. How to edit the Image container row on Dotcom?

• Hover over the Image element and click on the edit icon for the container row. The Customization panel loads on the right side with three tabs. Items here include-
• Content
• Style
• Advanced

You can perform some general customizations, such as deleting or duplicating the Image element container on Dotcom.

That ends our tutorial on how to use the Image 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.