To ease navigation and make the Help Center experience simpler for our customers, we decided to add some quick-links in our front page. We call these "welcome images" - and each one is linked to a specific area of our Help Center. Furthermore, we made it bilingual, making use of Zendesk's dynamic content feature.
Editing the CSS
To begin, click on Customize design on the right-hand menu and edit your current theme.
Under HTML select Home page
Navigate to the CSS tab - This is where all the magic will be happening.
Here we added all of our CSS for both our welcome images and the buttons, which have an animation of its own. Here's a little preview of what we did:
/*
* Buttons
*/
[role=button]:hover, [type=button]:hover, [type=submit]:hover{
background-color: #64b9f4;
background-image:none;
}
input[type=submit] {
background-color: #41acf4;
background-image:linear-gradient(to bottom, #64b9f4, #0d98f5);
border-color: transparent;
color: #FFF;
}
a[role="button"]:hover {
text-decoration: none;
}
The images are hosted on our own server. Here's a preview of how they were implemented using CSS:
/*
* Welcome icons
*/
div.principal-container div.container-span4{
width: 21%;
margin-right: 4%;
float: left;
margin-top: 40px;
}
Create Dynamic Content
Each of the classes above are linked back to the dynamic content we created.
To create your own dynamic content, hover over to your Zendesk settings and click on Manage > Dynamic Content (more on this here: https://support.zendesk.com/entries/20720458-Providing-multiple-language-support-with-dynamic-content.)
Within each variant, we added HTML to reflect what each image/button is suppose to do, as each leads to a different version of our Help Center. The dynamic content string was then added to the HTML for the Home page in the Theme options. (Zendesk uses Handlebars.js - allowing for all the HTML that was created under Dynamic Content to be implemented here as a component, and sync up with the CSS shown above)
This will also allow us to easily recreate this in as many languages as we have, without having to make any additional changes to the CSS, and simply adding additional variants and editing the links using Dynamic Content.
