How to Customise the Homepage Highlights

SoftwareRoad Knowledge Base can display three short highlight boxes on the main knowledge base page.

These are useful for drawing attention to important information, explaining what visitors can find or showing the main benefits of your documentation.

Each highlight can have its own heading, description and icon or image.

Open the homepage highlight settings

To change the highlights:

1. Sign in to your WordPress dashboard.
2. Open Knowledge Base > Settings.
3. Select the Homepage tab.
4. Find the Homepage Highlights section.
5. Change the headings, descriptions and icons.
6. Select Save Changes.
7. Open the knowledge base homepage to check the result.

The three highlights are managed separately, so each one can show different information.

Enable or disable the highlights

You can show or hide the whole highlights section.

To display it:

1. Open Knowledge Base > Settings > Homepage.
2. Enable the Homepage Highlights option.
3. Select Save Changes.

To remove the section from the homepage, disable the option and save again.

The saved headings and images should remain in the settings, so you can enable the section again later without recreating everything.

What should the highlights be used for?

The highlights work best when they give visitors useful information before they start browsing.

You could use them to explain:

• What the knowledge base contains
• How to search for help
• That articles are regularly updated
• Where to find setup instructions
• The type of support available
• The main subjects covered

Try not to use all three boxes for general marketing messages. They should help visitors understand or use the knowledge base.

Example highlight set

A SoftwareRoad Knowledge Base documentation area could use:

Step-by-Step Guides

Follow clear instructions for installing, activating and using SoftwareRoad Knowledge Base.

Search for Answers

Use the knowledge base search to quickly find the feature, setting or problem you need help with.

Regularly Updated

Articles are reviewed and updated as SoftwareRoad Knowledge Base continues to improve.

This gives each box a separate purpose without repeating the same message.

Change a highlight heading

The heading is the main text shown inside the highlight.

To change it:

1. Find the heading field for Highlight One, Two or Three.
2. Enter the new wording.
3. Select Save Changes.

Keep the heading short.

Good examples include:

• Step-by-Step Guides
• Search for Answers
• Easy to Follow
• Regularly Updated
• Setup Help
• Troubleshooting Guides
• Product Documentation

A heading of two to four words will normally fit well on desktop and mobile.

Change the highlight description

The description appears underneath the heading.

Use one short sentence to explain the highlight.

For example:

Browse clear installation, activation and setup instructions.

Avoid adding a full paragraph. The highlights should be quick to scan.

Long descriptions can also make one box taller than the others.

Keep the descriptions similar in length

The three boxes usually look better when the descriptions are roughly the same length.

For example:

Follow clear guides for installing and setting up the plugin.

Search the documentation to quickly find the help you need.

Read updated articles covering the latest plugin features.

The wording does not need to be identical in length, but large differences can make the layout feel uneven.

Add a Bootstrap icon

Each highlight can use a Bootstrap icon.

Enter the icon class in the relevant field.

Examples include:

bi-book

bi-search

bi-arrow-repeat

bi-lightbulb

bi-tools

bi-shield-check

bi-gear

bi-question-circle

Make sure the icon class includes the bi- prefix.

Choose an icon that matches the message in the highlight.

For example, a search icon works well with a heading such as Search for Answers.

Add a custom highlight image

You can upload your own image instead of using a Bootstrap icon.

To add one:

1. Find the image option for the highlight.
2. Select the choose or upload image button.
3. Pick an image from the WordPress Media Library or upload a new one.
4. Confirm the selection.
5. Select Save Changes.

A custom image takes priority over the Bootstrap icon.

If both are saved, the uploaded image will normally be displayed.

Choosing suitable highlight images

Highlights use fairly small graphics, so simple images are usually best.

Suitable options include:

• Clean line icons
• Small product illustrations
• Simple symbols
• Branded graphics
• Images with transparent backgrounds

Avoid using detailed screenshots or photographs. They may be difficult to understand at the smaller display size.

Use the same style across all three highlights.

Keep the graphics consistent

Try to avoid mixing different visual styles.

For example, do not use:

• One photograph
• One black line icon
• One colourful cartoon image

A more consistent set could use:

• Three Bootstrap icons
• Three matching product graphics
• Three line-style images
• Three icons using the same colours

The individual symbols can be different, but the overall style should feel connected.

Remove a custom image

To remove an uploaded highlight image:

1. Open the Homepage settings.
2. Find the saved image.
3. Select the remove or clear option.
4. Select Save Changes.

If a Bootstrap icon class is still saved for that highlight, it may appear again after the image is removed.

Remove a Bootstrap icon

To remove an icon:

1. Delete the icon class from the highlight field.
2. Select Save Changes.

If a custom image is selected, it will continue to appear until that image is also removed.

Suggested highlights for a plugin knowledge base

Here are a few combinations you could use.

Option One: General documentation

Clear Guides

Follow straightforward instructions for installing, configuring and using the plugin.

Quick Search

Search the knowledge base to find the answer or setting you need.

Helpful Support

Use our troubleshooting guides or contact support if you are still stuck.

Option Two: Product-focused

Getting Started

Find installation, activation and first-time setup instructions.

Using the Plugin

Learn how to create articles, manage categories and customise your knowledge base.

Fixing Problems

Find answers to common licence, search and page display issues.

Option Three: Customer reassurance

Easy to Follow

Articles are written with clear steps and practical examples.

Regularly Updated

Documentation is reviewed as the plugin changes and improves.

Built for WordPress

Manage your knowledge base directly from the familiar WordPress dashboard.

Choose one clear purpose for each box.

Avoid repeating other homepage content

The highlights should add something new.

For example, if your title already says:

Search our guides and documentation

you may not need all three highlights to repeat that visitors can search.

Use the boxes to explain different benefits or sections of the knowledge base.

Do not overload the highlights

Keep each highlight simple.

A box usually only needs:

• One icon or image
• One short heading
• One sentence

Avoid adding long instructions, several links or detailed pricing information.

Longer information belongs in a knowledge base article or normal website page.

Check the order

The highlights are normally displayed in the order shown in the settings.

Place the most important message first.

For example:

1. Getting Started
2. Search for Answers
3. Troubleshooting Help

This follows the general path a new visitor may take.

The first box should not depend on someone having already read the third one.

Match the wording to your website

Use the same tone as the rest of your website.

For a friendly support site, you could use:

Need a Hand?

Find simple guides covering setup, settings and common problems.

For a more formal documentation area, you could use:

Technical Documentation

Browse detailed instructions for installing and configuring the plugin.

The wording should still be clear, whatever tone you choose.

Check the highlight colours

Highlight colours and text sizes can be adjusted from the SoftwareRoad Knowledge Base Design settings.

Open:

Knowledge Base > Settings > Design

Depending on the plugin version, you may be able to change:

• Highlight heading colour
• Highlight heading size
• Icon colour
• General text colour
• Section spacing
• Background colours

Choose colours that match the knowledge base and keep the text easy to read.

Preview the highlights

After saving, open the main knowledge base page.

Check that:

• All three highlights appear
• The headings are easy to understand
• Descriptions are not too long
• Icons match the wording
• Custom images load correctly
• The boxes look balanced
• The section does not repeat nearby content

Check the public page while signed out of WordPress.

Check the mobile layout

On a smaller screen, the highlights may appear one underneath another.

Make sure that:

• Headings wrap neatly
• Descriptions remain short
• Icons are not too large
• There is enough spacing between boxes
• The section does not make the homepage unnecessarily long

If the mobile page feels too busy, shorten the descriptions or disable the section.

A highlight is missing

If one of the highlights does not appear, check that:

• The Homepage Highlights section is enabled
• A heading or description has been entered
• The settings were saved
• The website cache has been cleared
• You are viewing the correct knowledge base page
• Your SoftwareRoad Knowledge Base licence is active

Try adding a simple heading and description, then save again.

The icon is not showing

Check that:

• The icon class begins with bi-
• The icon name is correct
• There are no extra spaces
• A custom image is not overriding it
• The settings were saved
• Bootstrap Icons can load
• The website cache has been cleared

Try a simple icon such as:

bi-book

If that appears, the previous icon class may have been incorrect.

The custom image is not showing

If an uploaded image is missing:

• Check that it still exists in the Media Library
• Select the image again
• Save the settings
• Clear the WordPress cache
• Check that the image URL works
• Try uploading a fresh copy

Also make sure you selected the image for the correct highlight.

The boxes are different heights

Different heights are normally caused by:

• Longer headings
• Descriptions with different lengths
• Images with different proportions
• One image containing more empty space

Shorten the longer text and use graphics with similar dimensions.

A small difference may still appear on mobile because of text wrapping.

The section looks too crowded

If the homepage feels too busy:

• Shorten the descriptions
• Use simpler icons
• Remove repeated wording
• Reduce the number of other homepage sections
• Disable the highlights completely

The highlights are optional. Search and category cards may be enough for a smaller knowledge base.

Changes are not appearing

If the old wording or images remain:

1. Confirm that you selected Save Changes.
2. Clear your WordPress cache.
3. Clear any hosting or server cache.
4. Clear your browser cache.
5. Open the page in a private browser window.

Make sure you are editing the settings for the knowledge base page you are viewing.

Homepage highlights checklist

Before finishing, check that:

• Each highlight has a clear purpose
• Headings are short
• Descriptions are easy to scan
• The three descriptions are similar in length
• Icons or images match the message
• The graphics use a consistent style
• The content does not repeat other homepage sections
• The layout looks balanced on desktop
• The section works well on mobile
• All changes have been saved

Your homepage highlights are now ready to give visitors a quick introduction to the knowledge base.