Edit page layouts in a help center

Editing the layout of pages in your help center lets you gain control over how help content is displayed to your customer. Currently, you can edit the layout of the home page and landing pages in every help center.

You need to be a Jira admin to edit page layouts in a help center.

The home page and each landing page on a help center is made up of horizontal blocks called sections. You can use sections to build out your page and add content to it.

Add rich content to a page

To add images, texts, links and other rich content to a page:

1. Go to the home page of a help center or a landing page of your choice.

2. Select Customize from the navigation, and from the dropdown, select Edit page layout.

3. Hover between sections on the page and select Add rich content.

4. Using the editor that opens up, you can add text, images, links, emojis, tables, links and other elements.

5. Once you’re done customising the content, select Publish to save your changes.

Types of rich content you can add to a page

You can add rich content to your page directly from the editor or by using slash commands.

Layouts

Layouts allow you to organize your content into columns and sections, making it easier to present information in a structured and visually appealing manner.

There are six different column layouts available in the editor. To add a layout, select the Layouts icon from the editor. By default, a two-column layout gets added to your home page. You can easily switch between the options.

Content doesn't get lost when you change the column layout; additional columns are added to the right, and when you change to a layout with fewer columns, the content moves to the left.

Text

You can add text and format it as normal text or you can assign up to six levels of headings to it. You can also add emphasis to your text with formatting such as italics, bold, underline as well as text color and alignment. 

You can also create bulleted and numbered lists.

Links

Links help you guide users through your content, connecting related pages, and referencing external resources. To add a link, select the Link icon from the editor or type /link.

You can link out to pages in your help center, portals and help resources on your site, or to external URLs.

Images, videos, emojis

Add an image, video or GIF by selecting the Image icon or by typing /image. You can also drag and drop images from your computer directly into the editor.

Resize images and videos by dragging the handles on their sides. Media will proportionally grow or shrink based on how much you drag the mouse in and out. When you select an uploaded image or video, a floating toolbar appears. You can use this toolbar to align the image, add links to it and add alt text.

Adding links to images to turn them into clickable elements that can help users navigate to different relevant pages. Alt text will help ensure that your content is accessible to screen reader users.

Select the emoji icon on the editor or type /emoji to quickly add this element. 

Expand

Create a collapsed section that reveals more information for the people who seek it. This is particularly useful for creating FAQs or sections that contain a lot of information, as it helps in compressing content and improving the overall user experience. To add an expand, select the plus icon on the editor toolbar and choose Expand or type /expand to quickly add this element. 

Date

Make a date stand out with grey background; the default date format is MM, DD, YYYY. To add a date, select the plus icon on the editor toolbar and choose Date or type // to bring up a date picker.

Divider

Separate sections of text using a horizontal line. To add a divider, select the plus icon on the editor toolbar and choose Divider or type /divider to quickly add this element.

Panel

Emphasize information by choosing a preset panel type to consistently communicate ideas like info, note, error, success, and warning.  To add an info panel, select the info icon on the editor toolbar or type /panel to quickly see the options and add this element. 

Quote

Emphasize a quote by adding a vertical line on its left margin and adjusting the font color. To add a quote, select the plus icon on the editor toolbar and choose Quote or type /quote to quickly add this element.

Status

Highlight text to stand out on the page and choose a background color that fits its meaning. To add a status, select the plus icon on the editor toolbar and choose Status or type /status to quickly add this element.

Add a unique banner to a page

By default, all pages inherit the home page banner that you set up for your help center. However, you can turn this setting off and add unique page banners for the home page and landing pages.

To set a unique banner for a page:

1. Go to the home page of a help center or a landing page of your choice.

2. Select Customize from the top navigation, and from the dropdown, select Edit page layout.

3. Select the banner section. You’ll see customization options for it on the side panel.

4. Turn off the Apply help center banner settings toggle.

5. Customize the banner background color and text color.

6. Select Publish to save the changes you made.

Hide and reorder sections on a page

To hide and reorder sections in the home page:

1. Go to home page of a help center or a landing page of your choice.

2. Select Customize from the top navigation, and from the dropdown, select Edit page layout.

3. Hover over any section on the page to see the Hide button on the top right.

4. To show a hidden section, hover over it and select Show on the top right.

5. To reorder a section, hover over it and drag and drop it to your preferred position.

6. Select Publish to save the changes you made.

Customize sections on a page

You can draw attention to certain sections of your page by customizing the section background and text color for section names.

To customize sections on a page:

1. Go to home page of a help center or a landing page of your choice.

2. Select Customize from the top navigation, and from the dropdown, select Edit page layout.

3. Select the section you wish to customize. You’ll see customization options for it on the side panel.

4. For the section background, you can choose between having no background, a solid color background or an image.

   1. You can upload images up to 10MB in size.

5. For sections that contain topics, portals, and recently used request forms, you can also change the title text color.

You cannot manage background and color for sections that are hidden from your home page.