Written by
Krishna Gohil
Last updated 1 month ago by Krishna Gohil
Video Tutorial of Icon element
What is an Icon element on Dotcom?
Icons on a website are used to depict functions and enhance the message by providing visual explanations. They are often used to explain a process and can visually represent each step. For instance, they help customers to fill out forms, or even help you to optimize navigation and menus. From a visual perspective, they provide style to your site. The Icon element on Dotcom allows you to place icons on any page of your site to provide specific visual information.
Steps to use the Icon Element on Dotcom
- On your Dotcom dashboard, navigate to the Themes menu. Select your theme from the My Themes section. Click on the three-dot icon to open a floating menu. Now, click on Edit to open the theme dashboard.
- Here, select the page on which you want to insert the icon from the Select dropdown to open that page on your screen.
- In the Elements tab, drag and drop the Icon element into position on the page layout. Let’s see how to add an icon and customize its style on Dotcom.
- Hover over the dropped icon element. It has three sections. You can customize each section individually to customize the icon.
- Add/edit the icon.
- Edit the icon container column.
- Edit the icon container row.
- Let’s first see how to add an icon and customize its style to suit your site’s theme.
How to add/edit an icon on Dotcom?
- Click on the edit icon for the icon. This allows us to add an icon 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 Icon element on Dotcom?
- Let’s start with the Content tab first to add an icon to the Icon element and customize its style.
- Click on the edit icon on the minimized icon image. Click on + to upload an icon in SVG format from your computer. All the icons you upload get stored in your Icon library. Click on the icon you want to add to the Icon element and click Save. This icon now is displayed on the Icon element on your site’s page.
- To change the icon, upload another icon from your computer or click on the icon you want to add from the icon library. Click on Save. This icon gets added to the Icon element container, replacing the older one.
- To delete the icon from the Icon element container, hover over the added icon and click on the delete icon.
- Now, if you want to add a link to the icon, click on the link icon in the Link section. Here, you can link the icon or redirect the users to perform certain tasks-
- Pages:
- Select Page to Redirect from the dropdown. Check Open in New Tab if you want the link to open in a new tab.
- External URL:
- Add Web Address (URL) and check Open in New Tab for the link to open in a new tab.
- File Download:
- This enables the user to download a file when they click on the link. Click on Upload File to upload a file from your computer for the user to download. If you want to redirect users to a link to download the file, enable the Download file URL toggle switch and Add Web Address (URL). Click on Save when done.
- Email:
- Add Link Email Address if you want users to send an email to the mentioned link upon clicking the icon.
- Phone Number:
- Add Link Phone Number if you want a specific number to be dialed when users click on the icon.
- None:
- Select None when you don’t want to add any links to the icon. Click on Save and exit.
- Next, adjust the icon View to Default, Stacked, or Framed.
- Adjust the icon Alignment to be left-aligned, center-aligned, or right-aligned.
How to customize the Icon style on Dotcom?
- Navigate to the Style tab. Select Normal mode.
- Edit the Icon Color. Select the Globe icon to view the Global colors and choose from the standard 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 to set a custom color, click on the color box and select a color through the color picker tool. You can also set the color values by entering the color values in HEX, RGB, or HSL. You can also pick a color by clicking on the dropper and moving the patch to the color you want.
- Adjust the icon Size by first selecting a screen type as desktop, tablet, or mobile and then selecting the size unit as px, %, em, or rem from the dropdown. Now, adjust the Size through the range slider. Repeat this for the other screen types.
- Now, select the Hover mode and repeat the steps to customize the icon style for the hover effect.
How to configure advanced settings for the Icon element on Dotcom?
- Navigate to the Advanced tab to configure some advanced settings for the Icon element.
- Once we have completed customizing the Icon element, let’s start with the customizations for its container column and row.
2. How to edit the Icon container column on Dotcom?
- Hover over the Icon 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
- Complete customizing the container column to suit your branding requirements.
3. How to edit the Icon container row on Dotcom?
- Hover over the Icon element and click on the edit icon for the container row. The Customization panel loads on the right side with three tabs.
- Content
- Style
- Advanced
- Customize the container row to match the website theme.
You can perform some general customizations, such as deleting or duplicating the Icon element on Dotcom. That ends our tutorial on how to use the Icon element on Dotcom.
If you have any queries or concerns, we suggest reaching out to our implementation specialist or contacting our support team for further assistance.
To check 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.