How to create Custom Pages

Custom Pages are free-form pages designed to create any type of content (Terms of Use, FAQ, Community Guide) that can't be integrated into other channels/sections of the platform.

You can watch the video to discover everything step by step.

Types of Custom Pages

Simple layout

For primarily text-based content, without elaborate layout. 

 

These pages are quick to create independently using Word or Google Docs.

  • Terms and Conditions
  • Contest rules
  • Privacy policy
  • Community guidelines
Elaborate layout

For structured, illustrated, or interactive content

 

These pages require HTML/CSS/JS skills and are generally created by the Skeepers team.

  • Illustrated FAQ or advanced layout
  • Explanatory home page on how the community works
  • Pages with iFrames (external forms, embedded resources)

A Custom Page should not be confused with a channel. No member interaction (likes, comments, content submission) is possible on this type of page. Their main purpose is to host and present information by making it accessible to the community.

Create a page

You have two options depending on the complexity of the content:

Option 1: Reach out to the Skeepers team

For complex pages (illustrated FAQ, formatted landing page, advanced HTML/CSS integration), contact the Brand Communities team for creation and modifications.

Creating or modifying complex Custom Pages requires HTML/CSS/JS skills. If you don't have these skills, the Skeepers team can do it for you.

Option 2: Create your Custom Page yourself

For text-based content or a simple layout (Terms of Use, rules, privacy policy), you can create your Custom Page easily and independently using Word or Google Docs.

If you choose to create your Custom Page, here are some prerequisites and tips

Font Size and spacing Formatting Colors Transparent background

Common fonts work without installation and are generally available in word processing software: Arial, Calibri, Helvetica, Open Sans, Roboto.

 

If you need a custom font, you need to install it:

  1. Download the font in .otf format
  2. Double-click on the file 
  3. Click Install
  4. Restart Word or Google Docs to find your font in the list

Import a page into the community

After finalizing your page in Word or Google Docs, you can watch the video tutorial or follow these steps to import it into the community: 

Step 1: Export as HTML

  • In Word: File > Save a Copy > Web Page (.html)
  • In Google Docs: File > Download > Web Page (.html)

Step 2: Access the code

Open the HTML file that was just downloaded: 

  • Right-click on the file > Open with > Notepad, or
  • Right-click on the file > Open with > Browser

If you choose to open the file via a browser, follow these steps once the page is open: 

  1. Right-click > Inspect
  2. Right-click on the first line of code (which starts with <html lang...>) > Edit as HTML.

Step 3: Host images (if the page contains any)

If your page contains images (logo, illustrations, etc.), you will need to host them online before integrating the code: 

  1. In the back-office, go to Configuration > Look & feel > Images
  2. Upload your image files (JPG or PNG formats) and click on an image to copy its URL
  3. In the HTML code (in Notepad or browser), right-click on the image or use CTRL + F to find <img alt src=...>
  4. Replace the value of the src attribute with the URL of the relevant image
  5. Repeat this operation for each image

For example, if your image file is named "Community banner.jpg", search for "banner.jpg" in the code. Spaces are encoded differently and the full name may not appear as-is.

Step 4: Copy the code

  1. Press CTRL + A to select all the code
  2. Then press CTRL + C to copy it

Step 5: Add the Custom Page in the back-office

In the back-office, go to Configuration > Custom pages, and click Add a custom page, then:

  1. Give your custom page a title
  2. Click Source in the text editor
  3. Paste your code with CTRL + V

Step 6: Fix link styles (if the page contains any)

  1. Press CTRL + F and search for "a:link". 
  2. Add ".WordSection1" in front of "a:link". 
  3. Repeat the same operation in front of "a:visited".

This prevents the link style from applying across the entire platform.

You can then click Save to save your Custom Page.

Step 7: Integrate the Custom Page

To learn where and how to integrate Custom Pages in the community, check this article.

 

Was this article helpful?
0 out of 0 found this helpful