Design and Manage Pages - Fluid Topics - Latest

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:

• Design and manage pages.
• Design and manage component templates.

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

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.

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.

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.

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.

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.

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

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

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

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.

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.

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 480px	Max 768px

The following additional options are available in the footer:

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

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.

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.

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:

• View a page's status and availability.
• Manage a page's publishing status.
• Open a page's shortcut menu to access available options:
  • Design.
  • Edit settings.
  • Duplicate.
  • Open draft (available for pages but not for component templates).
  • Delete.

A page has one of the following statuses:

• Draft
• Published

Each page begins with its status set to draft.

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.

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.

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.

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

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.