How can you customize the footer?

Graphical Customization of the Footer

The following is a detailed guide on how to configure the “Get in Touch” section on your homepage. This section is designed to allow users to easily contact you and stay connected with your brand, thereby increasing interaction and engagement with your audience.

Enabling/Disabling the “Get in Touch” Section

In the dedicated settings, you will find a checkbox that allows you to decide whether to show or hide the “Get in Touch” section. Here are the main options:

• Enabled: The section will be visible on the homepage, facilitating direct contact with users.
• Disabled: The section will not be displayed, keeping the homepage more minimalistic. This choice can be useful if you do not wish to offer a direct contact channel at a certain stage of your project.

Tip: Activate this section only if you have an operational support channel (email, chat, contact form) to respond promptly to inquiries.

Background Color of the Section

Through a dedicated color picker, you can set the background color of the section. The background color is fundamental for:

• Capturing Attention: A well-chosen background can make the section more visible and attractive, encouraging users to interact.
• Ensuring Visual Consistency: The background color should harmonize with other elements on the page and maintain consistency with your brand’s color palette.

Example: If your brand identity is dominated by light and neutral tones, opt for a pastel background or a soft gray. If you want to emphasize this section, you might choose a slightly more vibrant color, but always in line with the overall style of the site.

Title Color

In the settings, you will also find a color picker for the section title. Remember the importance of good contrast between the title color and the background to ensure maximum readability. Some guidelines:

• High Contrast: On light backgrounds, prefer a dark title; on dark backgrounds, a light title.
• Brand Consistency: Keep the title style consistent with other textual elements on your site.

A well-visible title immediately clarifies the content of the section, guiding the user to understand that they can contact you.

Section Title

In the dedicated input field, you can enter the text you want to display as the title of the “Get in Touch” section. This is an excellent opportunity to:

• Communicate the Value of the Section: Use a clear title such as “Contact Us,” “We’re Here for You,” or “Get in Touch” to explicitly convey the function of the section.
• Create an Appropriate Tone of Voice: The title should reflect your brand’s identity. For example, a friendly and direct language can better encourage users to reach out to you.

Practical Tips for an Effective Set-Up

• Test Different Combinations: Try different colors for the background and title, and see which combination is clearer and more consistent with the rest of the site.
• Keep Usability in Mind: The “Get in Touch” section should be easily identifiable and accessible. Do not overload it with too many graphic elements or unnecessary text.
• Monitor User Interaction: Once the section is activated, track how many users utilize it to get in touch. Based on the results, you can make further improvements.

Conclusion

The “Get in Touch” section is designed to allow users to easily contact you and stay connected with your brand, thereby increasing interaction and engagement with your audience. By configuring parameters such as enabling/disabling the section, setting background and title colors, and crafting an effective section title, you can create a user-friendly and visually appealing contact area on your homepage.

Tips Recap:

• Visual Consistency: Maintain a color palette consistent with your brand for a professional result.
• Readability: Ensure sufficient contrast between background and text to make the content clear and easily readable.
• Light Interactivity: Use hover effects to provide immediate feedback to users without being intrusive.

By following these guidelines, you can set up the “Get in Touch” section effectively, enhancing both the user experience and the visual coherence of your site. Experiment with the available options and find the ideal balance that best reflects your company’s identity and meets your audience’s needs.

If you encounter difficulties during the setup process or wish to perform further customizations, do not hesitate to consult Zendesk’s official documentation or contact technical support for personalized assistance.

---

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:[phone]), or email address (e.g., mailto:[e-mail]) 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.

---

Basic Settings for the Footer

Display Logo

Checkbox: By enabling this option, you can decide whether to show the logo in the footer. If you uncheck the box, the footer will not display any logo, presenting a more minimalistic appearance.

Footer Logo

File Selector: If you have chosen to display the logo, you can upload it through a file selector. Ensure you upload a high-quality image. A recommended format is SVG or PNG with a transparent background, ensuring a clean and professional look.

Logo Link

Input Field: In this field, you can enter the URL where you want to direct users when they click on the footer logo. For example, if you wish to redirect to the homepage, enter the corresponding address. If you prefer the logo to be non-clickable, leave the field empty.

Info Text

Input Field: Here you can enter a brief informational text to display in the footer. This is an ideal place to include important details such as copyright, VAT number, company information, or any other legal or informational notes useful to the user. Keep the text concise and clear.

Settings for Social Icons in the Footer (Maximum 3)

Integrating social icons into the footer is a great way to direct visitors to your social profiles, thereby increasing your brand’s visibility across various platforms. You have up to 3 social icons available.

Display Icon

Checkbox: This option allows you to decide whether to show a specific social icon. You can manage the visibility of each icon independently. Check the box to display the icon, uncheck it to hide it.

Social Link

Input Field: In this field, you can enter the URL of the social profile you want to link to. For example:

• Facebook: https://www.facebook.com/yourpage
• Twitter: https://twitter.com/youraccount
• LinkedIn: https://www.linkedin.com/company/yourcompany

Ensure that the link is correct and functional to guarantee a smooth user experience.

Social Icon

File Selector: Upload the corresponding social network icon here. Ensure that the image is recognizable, preferably using the official logo of the social network. Again, vector formats or high-resolution images are recommended for a clean result.

Practical Tips for Optimal Footer Setup

• Visual Consistency: Maintain the colors and style of the footer consistent with your brand. The background and text colors should be easily readable and aligned with your company's image.

• Clarity of Titles and Descriptions: Use concise titles and brief yet informative descriptions to help users quickly understand the content or action offered by the card.

• Appropriate Link Types: Use standard links for site sections and phone or mail links for facilitating contact.

• Testing and Optimization: Experiment with different color, text, and link combinations to understand what works best with your audience. Consider user feedback and make adjustments as needed to improve the user experience.

Troubleshooting Common Issues

Icons Do Not Appear in the Cards

• Verify File Names: Ensure that the icon file names exactly match the IDs of the categories or sections, including the .png extension.
• Check Asset Uploads: Confirm that the icons have been uploaded correctly to the assets section without any errors.
• Clear Browser Cache: Sometimes, changes might not appear immediately due to the browser cache. Try clearing the cache or reloading the page in incognito mode.

Icons Appear Incorrectly

• Check Associated ID: Verify that each icon is associated with the correct category or section ID.
• Verify Icon Formatting: Ensure that the icons are in the recommended format and size to avoid distortion.

Display Issues on Mobile Devices

• Responsive Design: Ensure that the icons are optimized for mobile devices. Icons should maintain their clarity and proportion on screens of different sizes.
• Test on Various Devices: Check the icon display on various devices (desktop, tablet, smartphone) to ensure a consistent user experience.

Conclusion

Customizing the footer in your Zendesk Help Center using the Easy theme is an effective way to enhance the visual appeal and functionality of your online support. By following the steps outlined in this guide, you can easily configure elements such as the logo, logo link, informational text, and social icons, 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.

---

Summary of Key Points:

• Enable/Disable Sections: Use checkboxes to control the visibility of the “Get in Touch” section and social icons.
• Customize Colors: Utilize color pickers to set background, title, and text colors for both normal and hover states, ensuring good contrast and brand consistency.
• Upload High-Quality Images: Use SVG or PNG formats with transparent backgrounds for logos and social icons to maintain a clean and professional appearance.
• Link Configuration: Ensure that all links are correctly set to direct users to the intended destinations, whether internal pages, contact methods, or social profiles.
• Maintain Visual Consistency: Keep the design elements aligned with your brand’s color palette and overall site aesthetics for a cohesive look.
• Test Across Devices: Verify that all customizations display correctly on various devices to provide a seamless user experience.

By adhering to these guidelines and utilizing the customization options effectively, you can create a visually appealing and user-friendly footer that enhances the overall functionality and professionalism of your Zendesk Help Center.