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.
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.
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:
Introduction to the 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.
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.
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 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:
- Create custom label(s) 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.
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.
- 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.
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.
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.
- 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.
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 fullscreen mode * Undo the last operation * Redo an operation that was undone
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.
- Click and drag components available in the Layout section and drop them onto the canvas.
- Use the component shortcut menu and/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.
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.
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
.
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 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.
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, 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 page(s) 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.