Graphical Customization of Cards
The first set of settings allows you to define the background and text colors of the cards, both in their normal state and when hovered over by the mouse.
Card Background Color
Color Picker: This selector allows you to set the background color of a card in its normal state. Choose a color that harmonizes with your brand or the site's color palette, ensuring good contrast with the text.
Card Title Color
Color Picker: Use this selector to define the color of the card titles in their normal state. Ensure that the title is well-visible and easily readable against the background.
Card Text Color
Color Picker: Similarly, use this selector to define the color of the descriptive text in the cards' normal state. Choose a color that offers good contrast and does not strain the eyes during reading.
Card Background Color Hover
Color Picker: This selector allows you to define the background color of the card when the user hovers over it with the mouse. A slight color change can attract attention and invite interaction.
Card Title Color Hover
Color Picker: Define the color of the card title when the user hovers over the card. A slight shade change can make the card appear more "alive" and dynamic.
Card Text Color Hover
Color Picker: Similarly to the title, the descriptive text can change color on hover. This small adjustment helps create an effect of dynamism and responsiveness to user interaction.
Card Border Color Hover
Color Picker: You can apply a different border color when the card is in a hover state. Even a minimal change in the border can elegantly highlight the selected element.
Border Size
Input Field: Here you can set the thickness of the card borders, typically in pixels (e.g., 2px). A thicker border provides more emphasis, while a thinner one ensures a more delicate appearance.
Corner Rounding
Input Field: Defines the radius of the card corners (e.g., 10px). More rounded corners give a modern and soft look, while a value of 0 maintains a more defined and linear design.
Configuring Content for Each Card
You can configure up to a maximum of 3 cards. For each card, you will have the following settings:
Card Visibility
Checkbox: A checkbox to determine whether the card will be visible or not. If you wish to temporarily hide it, simply disable this option.
Card Title
Input Field: A field to define the title of the card. Choose a concise and meaningful title that clearly describes the content or the section it links to.
Card Description
Input Field: A field to enter a brief description. It provides the user with a more detailed indication of the content or the available action when clicking on the card.
Card Link Type
Dropdown Menu (Select): A dropdown menu to define the type of link associated with the card. The options include:
- Standard Link: A normal link that redirects to an internal or external page.
- Phone Link: A link that, when clicked from a mobile device, allows the user to make a call directly.
- Mail Link: A link that opens the user's email client and prepares a new email with the specified address.
- No Link: The card will not have any clickable link.
Card Link
Input Field: A field to define the actual link of the card, to be used only if you have selected a link type other than "No Link." Enter the URL, phone number (e.g., tel:+39123456789), or email address (e.g., mailto:info@yourwebsite.com) depending on the chosen link type.
Practical Tips for Optimal Setup
-
Visual Consistency: Maintain consistent colors and styles for the cards that align with your brand. The background and text colors should be easily readable and in line with your company's image.
-
Clarity of Titles and Descriptions: Concise titles and brief yet informative descriptions help users quickly understand the content or the action offered by the card.
-
Appropriate Link Types: If the card redirects to a site section, use a standard link. If the goal is to facilitate contact, a phone or mail link is more appropriate.
-
Testing and Optimization: Experiment with different color, text, and link combinations to understand what works best with your audience. Take user feedback into account and make adjustments as needed to improve the user experience.
Conclusion
The Knowledge Section of your Zendesk Help Center is a fundamental tool for providing users with useful information and quick answers to their questions. Enhancing the visual appearance of this section can increase user engagement and facilitate navigation. Adding custom icons to the category or section cards can make your Help Center more intuitive and attractive. By following the steps outlined in this guide, you can easily associate specific icons with your categories or sections, offering a more intuitive and engaging user experience.
If you encounter difficulties during the customization process or wish to perform further customizations, do not hesitate to consult Zendesk’s official documentation or contact technical support for personalized assistance.
Additional Tips Recap
- Visual Consistency: Ensure that the color palette aligns with your brand for a professional look.
- Readability: Maintain sufficient contrast between background and text for clear and easy-to-read content.
- Light Interactivity: Use hover effects to provide immediate feedback to users without being intrusive.
By adhering to these guidelines, you can effectively customize your cards, enhancing both the user experience and the visual coherence of your site. Experiment with the various parameters and find the ideal combination that best reflects your company’s identity and meets your audience’s needs.