The left-hand side palette of the Candu editor includes the full set of content and container UI components that you can use to build your content.

Layouts

Layouts provide an overall structure and foundation for content.

They can be stacked on top of one another or nested within one another. Depending on the type of layout, different options are available in the toolbox on the right, where you can adjust how the layout interacts with other objects on the page, how text or images are displayed within the layout, and how to apply dependent options, like the number of columns in the column layout.

View

  • Full-width layout which is often the base layout for a lot of content.

  • 🤩 Pro Tip: Add the Panel layout anytime you want to align elements on the page.

Column

  • 2-column layout. By default, the two columns provided will be of equal width but the height will expand with the content added.

  • Turn columns into polished layouts faster, toggle between parent-child columns and see color-coded selections.

  • Use the Toolbox on the right to add more columns and adjust the proportions of each column. You can also adjust the space between each column.

Layouts provide an overall structure and foundation for content.


Text

Text options are simplified here. If you would like to change your fonts, colors, and other style selections, then use the StyleGuide. In this way, you can adjust how all of your content looks at once without editing multiple pages. You can also add as many new variants of Text as you like!

  • Headers: Header 1 (H1) is the largest available header and Header 4 (H4) is the smallest available header. You can choose these options from the palette on the left-hand side when you drag-and-drop, or you can update the type at any time by highlighting the text and choosing a different 'Variant" under the Typography section in the Content tab of the toolbox on the right.

  • Paragraph: Basic paragraph text, with bold, italic, underline, link, un-link, and code snippet. These options appear when you highlight text.

Once text has been drag and dropped onto the editor you can add:

  • Bulleted List: Auto-indented bullets. To create a bulleted list, drag the text option you would like onto the page, type * at the beginning of the line, and then begin typing the list.

  • Numbered List: Auto-indented list that adds the next number each time that you hit Enter. To create a numbered list, begin by typing "1." at the beginning of the line, and then type your list.

  • Links: To add an in-line link, highlight the text you want to link, select the link icon from the options, and then paste the link. You can also link to other content you've built in Candu. To do this, start typing the name of the content and click the name when it appears below.

  • B/I/U: Similar to links, if you want to add special formatting to your text, you can simply highlight the text and select an option from the menu that appears or use the usual keyboard shortcuts.

you can adjust how all of your Candu content looks at once without editing multiple pages.


Components

Buttons

  • Add buttons to your content to direct users to other places or drive them to take a key action.

  • You can adjust the size, color, and shape of the button using the toolbox on the right of the editor or the drag handlers on the button.

  • You can create as many button styles as you like using the Styleguide.

  • You can set the link using the Interactions tab, also in the toolbox or hover menu on the button. For any interaction you can add a label that will identify the action which is used for tracking click events in your Content Analytics. The options are to:

    • Open a URL: which will send users to another page

    • Send Email: which will open a mail client;

    • Launch Pendo Guide: if you want to link users to a specific guided experience within your product; or

    • Callbacks: if you're looking to do something more advanced, you can add JavaScript snippets in the installation and call them from the Editor. An example of this is triggering a chat widget to open when a 'Start chat' button is clicked.

Use buttons to get your users to do a key action. You can create as many button variants as you like

Alerts & Badges:

  • Alerts: use these to draw users' attention to important pieces of information. Alerts are static on the page and will be set up to match your styles so you can call out questions, warnings, etc. You can choose what type of alert block you want to use in the toolbox on the right.

  • Badges: Highlight specific content using a badge. Using the toolbox on the right, select from primary, secondary, tertiary, warning, and danger to set the tone. These colors will all be synced directly to your style guide.

Alerts and badges are create for drawing attention to key information and key content

Dividers

  • These places a line or spacer between content and are useful to break up different sections especially if you are building something with lots of different components.


Containers

You can create as many Container types as you like using the Styleguide but there are a number of defaults created to start you off!

Action Cards

  • Creates a single, full-width card that will keep the content inside of it separate from the rest of the page.

  • An action card is shown with hover effect to show that it has a clickable option.

  • If you place a card within a layout section, it will fill the layout block.

  • Cards have an option to be Dismissable, this means users are able to dismiss it. If a user dismisses the card, it will be dismissed permanently for them. You can toggle the dismissable option on and off using the toolbox.

Cards (Not Actionable)

  • This card has the same functionality as the Action Card, without the hover.

Checklist

  • Create an expandable checklist that your users can work through, or use an expandable drawer to organize your content or text.

  • Customize the color, font, look and style of your Checklist from the Styleguide.

  • Add section titles, steps, and expandable content blocks to create a dynamic, interactive checklist for your users.

  • This is a great component to use for creating a Getting Started checklist for new users

Create an expandable checklist that your users can work through. Customer Onboarding

Media

Images

  • You can upload images of any size into Candu.

  • Drag the image option onto the editor and you can then either embed the image via a link or upload it from your computer into the media library.

  • Once uploaded, you can resize images with the drag handlers or toolbox. When resizing, you can either use pixel size (px) or percentage (%).

  • If you only fill in width or height, the image will maintain its original aspect ratio; if you fill in both width and height, the original aspect ratio will be overridden. If the size entered is larger than the portal that the image will appear in, the image may not be displayed.

Videos

  • You can embed videos in Candu so that your users can watch your content within your application rather than having to navigate to an external site.

  • Drag the video option onto the Editor and then you'll be able to input a video link using your preferred hosting service.

You can embed images and videos into your content to make it as engaging as possible

Embed

Embed allows you to nest existing Candu content that you have created within other content and create dynamic spaces.

  • Candu Content: If you want to reuse bits of Candu content in multiple places — say, a card with your contact details — you can create a single piece of content and embed it. Then, if you ever need to update your headshot, you can do that in one place.

  • iFrame: With an iFrame you are able to create content using elements from outside applications. Drag the iFrame component to the canvas, which will show a link field with the default size. Add the link and it will display on the iFrame box. You can control the width, height, and whether the iFrame can show as full screen. Common examples of iFrames include embedding content such as surveys or forms.

You can embed existing candu content within multiple places to make updating content easier. You can also use iFrames
Did this answer your question?