Customizing Your Help Center's Home Page

Customize the structure and content of your Help Center's home page so that it fits your company's style and best serves customers. Modify the layout, contents, and background of each section to make your Help Center's home page stand out as your own.

Tip:

Learn how to build your own Custom Section using HTML or CSS code.

Note:

We're currently working on releasing new help center settings. If the steps in this article do not match your help center settings, click here for directions.

Editing the Top Section

Make a great first impression with your Help Center's visitors by customizing the Top Section that appears below your header.

Tip:

Learn how to customize the header and footer that appear on every page of your Help Center.

Show me how

In the Wix Answers app, go to Settings > Support Channels > Help Center.
Click Customize Help Center.
Note: If you have multiple brands, click Customize Help Center in the relevant brand.
Click the Language drop-down and select the language you'd like to customize.
Edit the Layout:
1. Click Layout in the Top Section component.
2. Select a layout:
  - Center: Display the Top Section contents in the center. Click the Height drop-down and select the height (Short or Tall).
  - Compact: Display the Top Section contents at a minimal height with the text aligned to the left.
  - Side by Side: Display the Top Section contents next to an image:
    1. Set the text alignment from the Align drop-down (Align Left, or Align Right).
    2. Set the height from the Height drop-down (Short or Tall).
    3. Click the Image toggle to show an image (desktop only):
      1. Click Change, then select the image you want to upload from your computer and click Open.
      2. Click the Opacity slider and drag it sideways to adjust the image opacity.
Edit the Contents:
1. Click Contents in the Top Section component.
2. Click the Title field and edit the title text.
3. Click Change next to Title Color to edit the title font color.
4. Click the Show subtitle toggle to enable it. Then edit the subtitle text and color.
5. Click the Search bar toggle to enable it.
  Note: Go to the Advanced tab to edit the search bar placeholder text.
Edit the Background:
1. Click Background in the Top Section component.
2. (Optional) Click the Image toggle to display an image behind your Top Section:
  1. Click Change to display a different background image.
  2. Click the Scale drop-down to change how your background image is scaled:
    - Cover: The image is cropped to fill the entire Top Section.
    - Original size: The image displays at its original size.
    - Fit width: The image width adjusts to the width of your screen.
    - Fit height: The image height adjusts to the height of your Top Section.
  3. Click the Opacity slider and drag it sideways to adjust the image opacity.
  4. (Optional) Click the Use a different image for mobile toggle to display a different background image on mobile. Then edit the image, scale, and opacity.
3. Click Change next to Color to edit the background color.
Click Save at the top right.

Customize the appearance of your Help Center's list of categories. Choose a layout, edit the title, change the background, and more.

Show me how

In the Wix Answers app, go to Settings > Support Channels > Help Center.
Click Customize Help Center.
Note: If you have multiple brands, click Customize Help Center in the relevant brand.
Click the Language drop-down and select the language you'd like to customize.
Edit the Layout:
1. Click Layout in the Category List component.
2. Select a layout (List or Cards).
3. Click the Show category image toggle to enable or disable it:
  - Enabled: Category images display in your Category List. Click Change next to Image background color to edit the color displayed behind transparent category images.
  - Disabled: Category images do not display in your Category List.
Edit the Contents:
1. Click Contents in the Category List component.
2. Click the Show title toggle to enable or disable it:
  - Enabled: The title of your Category List appears at the top of the list:
    1. Click the Title field to edit the title.
    2. Click Change next to Title color to edit the color of the title.
  - Disabled: A title does not display at the top of the list.
3. Click the 'Show More' button toggle to enable or disable it:
  - Enabled: Set the number of categories to display next to Initial number of categories shown. If you have more categories than this number, customers can click a "Browse All Topics" link to view them all.
  - Disabled: All categories are displayed in the list.
Edit the Background:
1. Click Background in the Category List component.
2. Click the Image toggle to display an image behind your Category List:
  1. Click Change to display a different background image.
  2. Click the Scale drop-down to change how your background image is scaled:
    - Cover: The image is cropped to fill the entire Category List section.
    - Original size: The image displays at its original size.
    - Fit width: The image width adjusts to the width of your screen.
    - Fit height: The image height adjusts to the height of your Category List section.
  3. Click the Opacity slider and drag it sideways to adjust the image opacity.
  4. Click the Use a different image for mobile toggle to enable or disable it.
    - Enabled: Display a different background image on mobile. Edit the image, scale and opacity of your mobile background image.
    - Disabled: Display the same background image on mobile.
3. Click Change next to Color to edit the background color.
Click Save at the top right.

Notes:

To remove the Category List: Click the Show More icon and select Remove. To re-add it, click + Add Section and select Category List.
To move the Category List below the Selected Articles section: Click the Reorder icon and drag it down below the Selected Articles section.

Editing the Selected Articles Section

Customize a group of featured articles in the Selected Articles section of your Help Center's Home page. Use Selected Articles to help customers find solutions to common issues or to promote specific articles.

Show me how

In the Wix Answers app, go to Settings > Support Channels > Help Center.
Click Customize Help Center.
Note: If you have multiple brands, click Customize Help Center in the relevant brand.
Click the Language drop-down and select the language you'd like to customize.
Click the Manage Articles tab in the Selected Articles component:
- Add articles:
  1. Click Add an article.
  2. Use the Search field to find an article you want to display.
  3. Hover over the article and click Add Article.
  4. Repeat steps B and C above to add more articles to your Selected Articles section.
  5. Click Save at the top right.
- Reorder articles: Click and drag an article's Reorder icon vertically to move it up or down on the list.
- Remove articles: Click the Vertical Show More icon next to an article and select Remove from list.
Edit the layout:
1. Click the Design tab of the Selected Articles component.
2. Click Layout.
3. Select a layout:
  - List: Display your selected articles as a list. To show an image next to the list:
    1. Click the Show image toggle.
    2. Click Change, then select an image from your computer and click Open.
    3. Click the Scale drop-down to change how image is scaled:
      - Cover: The image is cropped to fill the area next to the list.
      - Original size: The image displays at its original size or fits within the area next to the list (if the image is larger).
      - Fit width: The image width adjusts to the width of the area next to the list.
      - Fit height: The image height adjusts to the height of the area next to the list.
    4. Click the Opacity slider and drag it sideways to adjust the image opacity.
  - Cards: Display your selected articles as cards.
Edit the contents:
1. Click Contents in the Selected Articles component.
2. Click the Show title toggle to display a title:
  1. Click the Title field and edit the title of the Selected Articles section.
  2. Click Change to edit the title's font color.
3. Click the Show associated categories toggle to show the categories of each Selected Article.
4. Click the Show opening sentence toggle to show the first part of each Selected Article's content.
5. Click Show reading time (minutes) to show the estimated time it takes to read each Selected Article.
Edit the background:
1. Click the Image toggle to display an image behind your Selected Articles section:
  1. Click Change to display a different background image.
  2. Click the Scale drop-down to change how your background image is scaled:
    - Cover: The image is cropped to fill the entire Selected Articles section.
    - Original size: The image displays at its original size.
    - Fit width: The image width adjusts to the width of your screen.
    - Fit height: The image height adjusts to the height of your Selected Articles section.
  3. Click the Opacity slider and drag it sideways to adjust the image opacity.
  4. Click the Use a different image for mobile toggle to enable or disable it.
    - Enabled: Display a different background image on mobile. Edit the image, scale and opacity of your mobile background image.
    - Disabled: Display the same background image on mobile.
2. Click Change next to Color to edit the background color.
Click Save at the top right.

Notes:

To remove the Selected Articles section: Click the Show More icon next to Category List and select Remove. To re-add it, click + Add Section and click Selected Articles.
To move the Selected Articles section above the Category List: Click the Reorder icon and drag it up above the Category List.

Note:

To undo changes that you have not saved, click Revert at the top right.

Was this article helpful?

Yes