Custom blocks

Custom blocks are the row of linked cards on the home page. Each one points wherever you want — a category, an article, the community, the request form, or any external page.

Which themes

All our themes have custom blocks, but the settings differ by theme.

• Flatrock 11, Braden 6, Mink 6, Lotus One 5 — six blocks, plus a Custom blocks section with layout, colour, and icon settings. These are the steps below.
• Selway — six blocks, fewer section settings. See Custom blocks in Selway.
• Hudson — three blocks. See Custom blocks in Hudson.

Set up a block

1. In Guide, click the Customize design icon in the sidebar.
2. Click Customize on your theme.
3. Open the Custom block 1 section (or 2 to 6).
4. Choose a Type. See the table below.
5. Upload an Icon, then fill in the Heading and Text.
6. For a block of type Custom, enter a URL. Use a relative path for pages inside your help center, for example /hc/en-us/categories/360001234567.
7. Click Publish.

Block types

Type	Where it links
Custom	The address you enter in the URL field.
Community	Your community home page. The theme builds the link, so the URL field is ignored.
Submit a request	Your request form. The theme builds the link, so the URL field is ignored.
Hidden	Nothing. The block does not render, and the remaining blocks close the gap.

Change the layout of the whole row

Open the Custom blocks section to style all blocks at once.

Setting	What it does
Custom blocks heading	A heading above the row. Leave it empty to show no heading.
Custom blocks type	The card style: Cards (bordered), Horizontal cards (bordered), Cards (separated), or None. Lotus One offers Cards (filled) instead of Cards (separated). Mink offers neither.
Custom Blocks content alignment	Centers or left-aligns the icon and text inside each card. Desktop only, on screens wider than 768px. Horizontal cards ignore this setting.
Number of custom blocks per line	1 to 4 columns on large screens. Smaller screens drop to two columns, then one.
Custom blocks background color	The background behind the whole row.
Icon color	Recolors SVG icons. See the note below.
Icon height	Sets the icon box. Enter a CSS length with a unit, such as 64px or 4rem.

Note. The Custom blocks heading follows the Homepage heading alignment setting in the Home page elements section, not the Custom Blocks content alignment setting. Set both if you want the heading and the cards to line up.

Icons

1. Open the Custom block section for the block you want to change.
2. Click the Icon field, or click Replace if an icon is already set.
3. Choose your file. The preview updates as soon as it uploads.
4. Click Publish.

Recommended size: 100×100px.

Use SVG files if you want the Icon color setting to work. The theme loads SVG icons into the page and recolours their outlines. Three conditions apply:

• The file must be an SVG. PNG and JPG icons keep their own colours.
• The colour applies to the stroke of the shapes, not the fill. Outline-style icons recolour. Solid, filled icons do not.
• Only path and circle shapes are recoloured.

If your icon does not change colour, either use an outline SVG or set the colour inside the SVG file before you upload it.

Hide the blocks

To hide one block, set its Type to Hidden.

To hide the whole row:

• Flatrock, Braden, Mink, Lotus One — open Custom blocks and set Custom blocks type to None.
• Selway, Hudson — open Home page layout and clear the Custom Blocks checkbox.

Add more blocks

Flatrock, Braden, Mink, Lotus One, and Selway give you six blocks. Hudson gives you three. Zendesk caps the number of settings a theme can define, so more blocks than that need a code change. Contact us if you need it.

Translate the blocks

Headings, text, and custom URLs can come from Zendesk dynamic content.

1. Create a dynamic content item for each string in Admin Center → Workspaces → Dynamic content, with a variant per language.
2. In the theme settings, open the Translations section and select Use dynamic content translations.
3. Enter the placeholder names in Heading, Text, and URL instead of plain text.
4. Click Publish.

This switch is theme-wide. Once it is on, every setting that supports dynamic content expects a placeholder name.

Custom blocks in Selway

Selway has six blocks with the same four types, but a smaller Custom Blocks section:

• Title section — the heading above the row.
• Number of custom blocks per line.
• Icon height — a CSS length, for example 2rem.

Selway has no card style, alignment, background, or icon colour setting. Per-block fields are Title and Text. To hide the row, clear the Custom Blocks checkbox in Home page layout.

Custom blocks in Hudson

Hudson has three blocks, with the same four types. Per-block fields are Title and Description. There is no Custom blocks section. To hide the row, clear Show Custom Blocks in Home page layout.