Overview
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.
For a conceptual introduction to designing in Fluid Topics, see Designing at a Glance.
Procedure
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:
- Configure the component in the sidebar.
- Style the component in the sidebar.
- Move the component in the canvas.
- Duplicate the component in place.
- Save the component as a shared component.
- 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:
- Access the components library.
- Configure a component's settings.
- Configure a component's appearance.
- 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:
-
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.
-
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:
- Create custom labels and add a translation.
- Drop the component in the page.
- Select the Configure tab.
- Select a context and key from the suggestions.
-
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. - 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.
Breadcrumb
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:
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:
- Select the four squares icon to open the components library.
- Select and drag components available in the Layout section and drop them onto the canvas.
- Use the component shortcut menu or options in the sidebar to configure each component.
- In the footer, select the grid icon to remove the dotted lines and preview the result.
- 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:
- 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.
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:
- In the Pages administration interface, select the Download button.
- In the Pages with status section, select
draft
orpublished
. - In the Select pages section, select the pages to include in the downloaded archive.
- In the Select assets section, define whether to include assets in the downloaded archive.
- Select Download.
- When
draft
is selected, if no draft version is available for a page, thepublished
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:
- In the Pages administration interface, select the Upload button.
- Drag and drop a ZIP archive into the upload window or open the file explorer to select a file.
- Select Upload.
If the size of assets in the archive exceeds the space available in the Asset library, the upload will fail.