Custom Home Page Content

Overview

The General Settings page contains several configurable content panels that allow administrators to customise the information displayed on your Fluid home page. These panels support HTML content, enabling you to create formatted text, links, images, and other rich content.

Administration Console → General Settings → Home Page Setup

Available Home Page Content Sections

• Home Page Header Content — static image, Rich Text Format, or HTML content displayed below the carousel on the home page.

• Home Page Carousel Content — a configurable announcement carousel, shown to all users. Add more than one rotating slide by wrapping each slide's content in its own outer <div>.

  The Show Home Page Carousel Content toggle must be enabled for this content to appear on the home page.

• Home Page Secondary Content — static image, Rich Text Format, or HTML content displayed at the bottom of the left-hand column on the home page.

  The Show Home Page Secondary Content toggle must be enabled for this content to appear on the home page.

Methods for Creating Content

Using the Rich Text Editor

The simplest method of adding content to the customisable content areas, is to use the rich text editor on the page. You can add content directly to the text editor for each of the content areas. When you click into the box, a floating toolbar will appear with options for formatting text based content.

Clicking on the 3 ellipses on the right side of the toolbar opens up a menu with a list of formatting tools you can use. You can use the tools to add and format text, create tables and even paste images.

Create a Table

To add a table, click the table icon as pictured below and select the table size to create.

Example of a basic table used in the Home Page Secondary Content area:

Here's how it renders on the home page:

Design Content in PowerPoint

You can design content for these home page content sections in PowerPoint as a presentation slide and paste the slide directly into the editor. Note that, when you paste the slide, it will render as a static image, any animations & links will not be rendered.

To do this:

• Design your slide

• Click on the slide in the slide thumbnail pane on the left hand side of the application and copy it

• Paste the copied slide directly into the sections content editor in the general settings page - you'll see the content previewed in the editor

• Ensure that the content area is enabled if using the carousel or secondary content area

• Click Save

This content will be displayed on your home page.

➜

Design Content Using HTML

The content sections on these pages can be created using HTML code. This method is the most advanced of method for creating custom homepage content, but is also the most flexible and allows for interactive content, for example creating buttons that link to external sources or other pages within your Fluid site.

To add HTML content:

1. Navigate to the required content section within General Settings.

2. Click inside the Content field to enable the editor.

3. A floating toolbar will appear above the content editing area.

4. Click the 3 ellipses ⋮ on the far right of the toolbar.

5. Select View HTML from the menu.

5. Paste your HTML content into the HTML editor.

   Note: Paste the content as HTML. Do not paste it as plain text, as this will prevent the HTML formatting from rendering correctly.

6. Click Update to apply the HTML to the editor.

7. Verify that the content appears as expected in the preview.

8. Click Save on the General Settings page to commit your changes.

HTML Banner Builder

This tool is to create a custom Header Content area with button links or an announcement Carousel. These are examples that you can use and tailor to your needs. You can create your own custom content if you choose to.

Fill out the settings to customise your content and then take a look at the preview below. Once satisfied, copy the HTML and place it into the relevant content area on the General Settings page in the HTML dialogue. See the previous section ' Design Content Using HTML' above for the steps to apply.