All of our themes provide content blocks to display categories or sections on the Home page. The blocks are fully configurable through theme settings, allowing you to replace the images through Zendesk Guide.
You can choose from several built-in styles, copy-and-paste one from another theme or our Pattern Library or create your own using our powerful micro-templating system. The example below demonstrates a style of content block found in our Braxton theme.
Grow on hover effect
View code 7ea850cc7abd28ffcab19fa53c8d2181aba58fd7f291610ca83078c7ca44774a534ea2c57d7093135a1eb47c378d9ad75368f625e94f3dbf3eb694d0a9d00961e0a48365b37739c29ba778f6f3280acd94d66c95fae032a701adedf52c6be491fbf3356d98633105d4d915651dd889afc6e84072975e8ba2b7704be187a32477d931c5786326386767013a0301f9c3b892ee3e4901ed0e748fac32268c140dfa5dc9debc5d841ad26bbe41e566464d7d7d05a196c55ea077644647735bae047f49317eab1d710f3a7258910b49742783c110d2ffe6b6bcd83fbb1c4c3604ee395efc96b5f2db674554db785050765fc076cb7c4c4e4d0f87b45a499a0339cdad568974c3d879b42966331d58631fad1e40ae75fc5ad1c1fddcfa425b003e035f0374deb955f900cd983cf49d32e5427da8a80e823eab7c2bf83007c747b300e066ecc5b12ee19d486496ef049fe7a2f2833f34090592aa1e4a491161d7fbc3c69717a6a06bcc439fa35c165ceb952554caa929ec96bc1f8d10d6124527f3e48924fbce46d6cb4c8fb74a62b3b731e3dc4753969aa539b9de6776a6d37b01f893d42ced798beab4a08ce4d32fad5d5c2d18f53b7dbd4d6a12711692ec3564586bffe95fcc5d70eed475ca2c7d2dac9a71dd6bfe5b87821f59b44ab0fae9517c954a998c64dc3c313020c329a829c820163e136ab483fb9e9b6595a569302127c674f5bfee07dbb240103a88e9bc8a0d1042bd8c5f1334df11003e7c0202fa583dd3e8165b3334c4f85071755bca8926290c7039dde79cd74d652d055b4c2d34b4a75425b06fe1bf5701279d57df7b636446c3e69ecdfc78a064232c4ea6f030fbf5bd4774008b996cd6230ed60e7b88a189ddc5f9da23c800fafd18068daa2645ed61a178cc18606a553e5a91f63415b152f50038e9952558b4bc776a37f09b4f9d6954f56d2a959a5b29e4a466af929e3222bad658ce761f86dd71407b63b2b1705625d91ccfde4dc380f061e249434e86e53473fde5f8acedf55ce42fed4b15a73d985e44d0b19b9ae3ca629752d1db1beae46cc6c6d19b8d3a835b1d319bb137920a72ce6081c370353c53a879e04dc25ea59f782b72c0e0c92c2a91dfa98a6b4922a2a124a842087ea1a7a4d262274ffe64c58823f47d1ee4c43252f10ba8f5006c2b58e67577509c36ea34990ae766c7d249dcbdc99a9d8b95e00d31816e34c338a1697096cbe008b5296575c7df8228c900488d3c24fdd0456996f4074088bb0474b6b17bc507853d6f7920bfbfe5597ff11ece6146e26136dea43ce64aefb12aa0b77de2fad1613e7f67e25475c40ab0dfcdb809df5a323cb09a4937f0e7e910ae205a8c8f2d00f1ae81a6d11021ed50c86d17b99049f6d74456eaa2ebd7dcd373200c5f0251c0f615d58c4658f167657967170a1fe37beb390e85c2f9c8c551c1409d9963165da5644ab926fa7cc22422411859df631b1e40256d78ced6581a52f2a3237369301ff93497fdd7648b02370a6961cec1d096ebeecb0020ad933055c37e5a5c9b618c2acc1944a78f3a6fdbdb9cca0e2adf412a53d9708fffcea72e08313063adc06c1d1454459550c1b0927a0aa5981ed0c2ccca6210657b3bcf2ed3468f0f9893c8edf74db39fae47e8d38a3d1491fff2f4192a5d9008087d21724d1c6875ee89cf4b81aba391ef0a3fc1f1ef3e05f4317f6958fba6d4ca690f02c219ccc603cf7b3961d1194ff17ac7b138f5072dd772e9a003760717f5aa4e08fa846e102e3b93c77c8b22d7634f839fcd5495a4250565f88de3a46c452504debcfab0977c38f38d26986424ca7a764b85f09e0075730bcf99f6885fb73f07fcbd7e42df15658a1b1ad689d84ad7d557fd21984791b824db92def328de3500e934523534ba2ca4aadf761589864a072bb7302c52257bb79a5f66616b94dc0afd887268927bcb9ba70bbaa88ecbcfcd9f8cc606a803b94d3ab17b6a12dd3629445cd92554dc17f1586e85939a0be2851cc38c16a792e649f0c189bf9f3cf4222f53544f341a7331efc6740175a3a5f989d22b2d9a58cf5a1b36e4388249266b562f74f7e4782f49a1c5362aeefee1e65f1a18b1c73e7c60b0f15539f16a34dea3ce217cfdc9b5284b7048845845661f61eb628bc334774267be005055ef5a6079b7389231d50797873edda94ac7a96ecb07a884bce407e751773e24009cd0299d615bddb279b843f826d488bcdd68d61a32fbb8dbe45c2b40ba279a56524db56424f576680843628769b378a069a6d2b6a06bda9bed4e9cc5b029bdba08250a9f89bea4e0f95dccbfe660e9e5387ce34dc1cd2c6d5e90d1c04af3ed8eb715036e65a58683ff1b1c71bb4bf70480a494dc309cc33d35e3f91a812f48c57afe61f51a0a2d3078c29348ff779eaced13f7de280938228eedb0b1df704ca5faec09e76ac5f25cadfcf2693a852d92ea0ac0e4661292a960feacea55d0456be38092240ecf94943095cf3410352d6e0282b7d0db00920ea9ee61e1cb34c303a1ded2bc8018ba44cd729b0b84cb7c7ee703d33f53f1e97d6ba75960ac076286bfb6fa136e1ef6e183b8d382da51e01f064c9518805e352c99437f2c74d511cc25330378ba9a96fcb8467b2144117c73e794bcd89aadabf71e03ac53fa231b717b16cfc9a79072da3fcbc11c92e91974e84a7674babb27b5ec4252a815634f42508c53a25f32187c25271ab3d99d67688b19d78a1c04316f7c92f6b5be1004014d84999af0b88cb486e98d8763b40952f8ed9d41fe816c27d4ccfb5184870dbb0529b24998a81157bd0af578919fcfa3d6e5bcbac08ac7995fdc7d95bae50c2166e91ca3d9e6371ce42c62dbe7881e4ded392290ec673b1892d595789ce228862109ce9a1f69b85bd57813a7deeef7807160ad3110f5d9a7ce4229a2466ba1842cf0931958c6ae37aacb4b4e7382faef635e2e20d9486481c57a4052641e79afe20a47e9cba888056a8dbb8943a90ba222291b1cddec7839af5032f12b0bf3c37c75f133fb30000d1495943f819d8a437de956d0cf08ff2af96443150bd867172a463098281206a874434ec5e153eb598d87084bd7f009d976b3aea463871a541fec91a9583a3fa9ff4e668608e79dd14dbf3584f92d1f913eefbfdac6f4428cbf97cd1bd394b7cf87b7e824ea5486b1c933b2922adc4f2b95f3fd2cdf81e10ee709571f780f1f2f87a13d51b656e1c210e9b4aa8519a2ae10d5afb6b1d3b193c02ae1aa58ef43c7f4a9c36670eb779c680850821457018aba5d90b32cbe651094dffff462d569f57d9f1ef0df4c4c2818ff0b46335b3e31820cab94b3d77ffbaa4165b31304ff54074261c63798f79900bd329129546461a31d92ac47e880e43f8af0570eebafb9405c6ad350c456da038257534f186c2fdcfc66f1c1ad8b5eb5c9096106a7b29572b0f5acb5fb9a7f5b7ad6e09ae79c4e5f3d23423354fe51889fa24020a5be99e9d4b0faaffef06878407445c5f944e5432a808d38ff7155cdd22f064993cfae2f0b9ca928970f3e5287ac5abc33ba8a51c0579320b456904b9238fb3494f74b90e36aaa69d9ff4fb0148d3782b5a5fe86aa05309d4468eb7a631e31bea335c5044457d7d89440f285452fcbe43718eaa22d538c149b5a6ae77f0b16efb467aed70dc19196439aab676be5b00d56014b0d96b463c08dd17fc9cd7fe590a27487e2792ee95a18c7503536bdcae06c0fda33c325918a5416df9af3ae65e8dcdcd04a9ce6f50d68e7527a512a23f07c411d6a0b754b04476f1ec7e26095af6cd94cf759c30888e7d31a6c1a674d205109661c4499f3eabb072d6e29bde0e0b3d6ff017d0148704eb65a150c79fce8e6496dcd9ce80c872335c0f51fa896eb458e38277302854dcf1a393bad12149a7c9509a038933536bcb61a5ed5b86da3672eb36fe979cd2854fc0ae3e6113deaca2930b472a23e4fc74fcfa64b4d0543b3e544ad85f554162daaec1bf016e27f3e0e49c3f48831da1a6267e84ea89e6dc8bbd964eb35d4fda33cc77a4fdc29f9d2b5740aff698e4d73a2236ca6c4dd55976d79eb79bbcb52c7abf575aa3e39ae48335ed1b5830b5095cf915bf00415fe251d14006e7962bee2ae5217612b8a13e0af259854a7c8f4433422e831969d66f658a8b5cc0b54c8eaa3ec31a75b937899c0f3d7ac39daa9fca65763b39c393ca8f7f79b9483daf2b2f7f59978149ceacd9b3a0c1b116b09c6c264167e1c12f5701629639ee8ab6e22789fed61b0ebf553e7c2f3d9f13a77f2a8da1ba688220cefe74d4f1971dd481bf05792c55bde28e60ae37783456910c0c5188d583cc10c7694765141d3ae920d89d3135070e484119baf18c0ad7c1444abe085e020e68869367fe25e3721eaec569b4fc6e0ed765154271a3503219288ec47eccc15e8917f19fbecb9311afe638954
Similar general purpose custom blocks, used to display custom links on your help center Home page, and contact blocks, used to present contact options, are also available and can be configured through theme settings.
Content blocks are bundled into all of our themes by default, so you can start using them straight away. They build upon our powerful micro-templating system and gives you full control over how the search terms look and behave.
Our themes allow you to add content blocks to the Home page using theme settings.
-
In Zendesk Guide, click the Customize design icon (
) in the sidebar. -
Click Customize on the theme you want to edit.
-
Expand the Content blocks setting group to reveal settings that allow you to configure various aspects of the blocks. Select a style from the Content blocks style setting dropdown list to have them appear on the Home page.
If you’d like to display the content blocks outside of the Home page, you can copy-and-paste the following HTML and JavaScript code into your desired position:
{{#isnt settings.content_block_style 'none'}}
<div id="content-blocks">
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
new Navigation(document.getElementById('content-blocks'), {
collection: Theme.contentBlocks,
template: 'content-blocks',
templateData: {
images: [
"{{settings.content_block_1_image}}", "{{settings.content_block_2_image}}", "{{settings.content_block_3_image}}", "{{settings.content_block_4_image}}",
"{{settings.content_block_5_image}}", "{{settings.content_block_6_image}}", "{{settings.content_block_7_image}}", "{{settings.content_block_8_image}}"
],
imageHeight: "{{settings.content_block_image_height}}",
numberColumns: {{settings.number_content_block_columns}},
alignment: "{{settings.content_block_alignment}}",
color: "{{settings.color_content_blocks}}"
}
});
})
</script>
</div>
{{/isnt}}
The code in this example references one of the built-in micro-templates (with ID content-blocks), which you can edit or replace with your own custom micro-template.
For more information refer to the article on adding content blocks to your theme.
