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.

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.

When designing a page or component template for the first time, designers and integrators can start by developing a general understanding of the WYSIWYG editor by browsing the following topics:

• Manage components in the canvas
• Use the component shortcut menu
• Explore options in the sidebar
• Explore options in the footer
• Use keyboard shortcuts to navigate the WYSIWYG editor faster and more smoothly.

When ready to design, the following topic describes the first step to take:

• Define a layout for a page or component template

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 and/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 label(s) 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.

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.

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 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 fullscreen 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. Click and drag components available in the Layout section and drop them onto the canvas.
3. Use the component shortcut menu and/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 upublishing 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 page(s) 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.