Design and Manage Pages - Fluid Topics - Latest

How To


This article describes how designers and integrators can use the WYSIWYG editor that is provided with all Fluid Topics design tools. After acquiring this knowledge, it should be easier to perform the following actions in the Fluid Topics administration interface:

For a conceptual introduction to designing in Fluid Topics, see Designing at a Glance.


In this section, designers, and integrators can learn how to perform the following actions:

  • Design a page or component template
  • Manage pages and component templates

Design a page or component template

Holding the pointer over a page or component template makes a shortcut menu available. Opening this menu and selecting the Design option displays a WYSIWYG editor.

Introduction to the WYSIWYG editor

Manage components in the canvas

For each component added to the canvas, it is possible to perform the following actions:

  • Select a component with a single click.
  • For certain components, double-click to access advanced options.
  • Drag-and-drop components to move them around.

Selected components have a thick blue border while hovered components have a thin blue border.

Use the component shortcut menu

When a component is selected, a shortcut menu proposes options to configure it as follows:


From left to right, the icons correspond to the following actions:

  1. Configure the component in the sidebar.
  2. Style the component in the sidebar.
  3. Move the component in the canvas.
  4. Duplicate the component in place.
  5. Save the component as a shared component.
  6. Delete the component.

Explore options in the sidebar

The following tabs are available in the sidebar:


From left to right, these tabs make it possible to perform the following actions:

  1. Access the components library.
  2. Configure a component's settings.
  3. Configure a component's appearance.
  4. Configure the DOM tree.

More tabs may be available for certain design tools.

Components tab

Selecting the Components tab opens the Components library with all the components available for the page or template.

Components are organized into groups. The following non-exhaustive list describes only the components that have requirements or effects that may not be obvious:

  1. Layout components

    • The Section component provides a full-width container to configure a background with another, centered, smaller container inside it to add content. Sections help keep content centered.
  2. Basic components

    • Double-clicking the Rich text component opens a standalone text editor.
    • The Link component supports the following actions only:
      • Configuring a link and a target
      • Adding text or an image
    • The Image component supports images added from a local machine or from the Asset library.
    • The Video component makes it possible to embed a video in a page. Although some features may not seem to work while designing a page, all features should work after publishing the page.
    • The Localized label component makes it possible to add a custom label and its translation by going through the following steps:
      1. Create custom labels and add a translation.
      2. Drop the component in the page.
      3. Select the Configure tab.
      4. Select a context and key from the suggestions.
  3. Contextual components are interactive and provide access to Fluid Topics features. They are specific to each type of designer. Depending on how an ADMIN user has configured the portal, they may be hidden.

  4. Shared components have been saved for reuse.

Settings tab

The Settings tab provides options to configure the properties and behavior of a selected component.

Inject custom LESS

Checking the Inject custom LESS button allows users to apply LESS styling defined in the Theme menu to a Custom component.

Styles tab

The Styles tab provides options to configure the appearance of a selected component. A variety of fields are available by default to configure the most common CSS properties. Configuring additional properties is possible in the Plain CSS section.

Users can also style components according to their state. States correspond to CSS pseudo-classes. When selecting a state, users get a preview of the styling of a component in that state, without having to trigger it.

Basic components (except the Video component) can have the following states:

  • default (no pseudo-class selected)
  • hover

The Action block component (available in the Search results and Reader designer), and the Link component can have the following states:

  • default (no pseudo-class selected)
  • hover
  • active
  • focus
  • focus-visible
  • Fields in the Styles tab only accept CSS properties in the form of property: value. They do not accept CSS selectors.
  • Only the CSS properties of a selected component can be modified.

By default, units are set to px. It is possible to choose a different unit (for example, em or %) by writing it directly in the field.

DOM tree tab

It can be difficult to drag and drop a component to a specific location on a canvas, particularly if the component is non-linear or does not have margins or padding. Selecting the DOM tree tab shows a hierarchical list of all the components in the canvas and makes it possible drag them around more precisely.

It is possible to rename components directly in the DOM tree tab.

Explore options in the footer

The footer provides options to configure the WYSIWYG editor and change what is currently being edited.


The breadcrumb displays the hierarchy of a selected component within the page or template.

Responsive breakpoints

Selecting a breakpoint displays the appearance of the page or template for the corresponding device and screen resolution.

The breakpoints per device type are as follows:

Device Portrait screen width Landscape screen width
Tablet Max 1024px Max 1280px
Mobile Max 768px Max 480px

Removing a component applies to all devices and breakpoints (desktop, tablet, and mobile). It is not possible to remove a component for one device or breakpoint but not another.

  • Designing a page or template separately for each of the responsive breakpoints is important for accessibility and end-user satisfaction.
  • Except for deletion, which applies for all breakpoints, changes made for one breakpoint do not apply to the other breakpoints.
  • Desktop mode is selected by default.

When switching to a smaller device or screen resolution, the size of the canvas updates accordingly.

Additional footer options

The following additional options are available in the footer:

Footer options

From left to right, the icons correspond to the following actions:

  • Toggle the grid on to add a dashed border to invisible areas of components
  • Enter or exit full-screen mode
  • Undo the last operation
  • Redo an operation that was undone

It is not possible to undo or redo certain operations, such as designing custom components.

Available keyboard shortcuts

The following keyboard shortcuts are available when designing a page or a component template:

  • Arrow up selects the parent component of the current one, if any.
  • Arrow down selects the fist child of the current component, if any.
  • Arrow left and Arrow right select the previous/next sibling of the current component.
  • Backspace deletes the currently selected component.
  • Ctrl-Z or Cmd-Z undoes the last operation.
  • Ctrl-Shift-Z or Cmd-Shift-Z restores the last operation.

When modifying the size of a component, the following shortcuts are also available:

  • Arrow up increases the value by 1.
  • Shift-Arrow up increases the value by 10.
  • Arrow down decreases the value by 1.
  • Shift-Arrow down decreases the value by 10.

Define a layout

It is possible to define a layout for a page or a component template as follows:

  1. Select the four squares icon to open the components library.
  2. Select and drag components available in the Layout section and drop them onto the canvas.
  3. Use the component shortcut menu or options in the sidebar to configure each component.
  4. In the footer, select the grid icon to remove the dotted lines and preview the result.
  5. In the footer, select each of the responsive breakpoint icons to configure the layout for different devices and screen resolutions.

Removing a component from a page's layout applies to all devices and breakpoints (desktop, tablet, and mobile). It is not possible to remove a component for one device or breakpoint but not another.

Remember to configure the page's display for each responsive breakpoint. Without this step, it might be difficult to navigate the page on some devices.

Manage pages and component templates

When first accessing a Fluid Topics design tool in the Administration interface, and before opening a particular page or component template to design it, designers and integrators can get an overview of all pages and component templates that are either in the works or have been published.

At a global level, it is possible to manage pages and component templates as follows:

  • Search for a page by keyword or language.
  • Sort pages by name, publish date or draft date.

At an individual level, it is possible to manage each page or component template as follows:

It is not possible to recover a deleted page.

View a page's status and availability

A page has one of the following statuses:

  • Draft
  • Published

Each page begins with its status set to draft.

Only ADMIN users can access pages with this status.

Once an administrator publishes a page, its status changes to published, and the page becomes available to all designers and integrators in the Administration interface.

Manage a page's publishing status

Options to publish or unpublish a page are available in the footer of the WYSIWYG editor.

When unpublishing a page, the following actions are possible:

  • Keep the last published page.
  • Keep the current draft (including any currently unsaved modifications).

After unpublishing a page, the page is no longer available online.

Unpublishing a page cannot be undone. All overwritten modifications will be lost.

Download a page

It is possible to download the following elements:

  • The draft version of a page.
  • The published version of a page.
  • The assets used for a page.

The process is as follows:

  1. In the Pages administration interface, select the Download button.
  2. In the Pages with status section, select draft or published.
  3. In the Select pages section, select the pages to include in the downloaded archive.
  4. In the Select assets section, define whether to include assets in the downloaded archive.
  5. Select Download.
  • When draft is selected, if no draft version is available for a page, the published version of the page is included in the downloaded archive.
  • When published is selected, only pages with a published version are available for download.

Confirming the download creates a ZIP archive containing the downloaded pages and the associated assets.

Upload a page

All pages and assets that an administrator has previously downloaded are available for upload.

The upload process is as follows:

  1. In the Pages administration interface, select the Upload button.
  2. Drag and drop a ZIP archive into the upload window or open the file explorer to select a file.
  3. Select Upload.

If the size of assets in the archive exceeds the space available in the Asset library, the upload will fail.