If you make a change that doesn't look right, no worries! You always have the option to undo (cmd+z), so feel free to play around.
✨ Layouts are Magic
We 💜 layouts! If you want to do anything other than left-justify your content on a full-width page, Layouts are your friend. They may come across as intimidating at first, but if you can master PowerPoint, then you can master Candu's Layouts.
First, for every layout, you can set content orientation—set it to Column if you want to stack content vertically, or set it to Row if you want to add elements side-by-side. If you want a little of both, you can nest layouts within one another and change content orientation depending on your needs (e.g., you can create side-by-side columns with a row layout and then add an image stacked on top of text with a column layout).
Like PowerPoint, you can also change the alignment in order to center images or text, set content to fill the page, or create space between elements.
🤩 Pro tip: If you want different layout boxes to be the same size horizontally or vertically, use Stretch alignment.
✂️ Resize with Ease
Resize your elements with drag-and-drop positioning as well as color and line guides that let you see how elements impact the size of your layout in real-time. You can use the size handlers to extend or decrease the size of the selected component. When you resize your component, it will automatically reflect in the toolbar. You can alternatively use + and - from the toolbox as either pixels or percentages.
📲 Responsive Controls
Create mobile-ready content with our responsive toolbox. Adjust size and visibility with precision controls for desktop and mobile. You are able to set the min and max sizes for the height and width of any component to ensure your content renders properly across different sized devices.
You can also now test your content and the way it appears on different devices directly from the Editor. On the far right above the toolbox, you will see icons for Small, Medium, or Large devices to see how the content will render with each size screen.
💪 Use the Flex Settings
There are other ways to define your layouts or the responsiveness across different devices. For more information see our Advanced Settings Guide.
The wrap is used when you want your content to wrap around on responsive screens. Generally for cards, for example.
Grow vs Shrink?
Grow is a good option combined with wrap, if you want the wrapped content to grow to fill the full screen horizontally.
You can set a base size for nested layouts that specify the exact size of each child object. Base sizes can be input as percentages of the total canvas or as absolute pixels.
🎨 You CAN Master Margin and Padding
Zero CSS knowledge is required.
Use margin to add space around a component and use padding to add space within an component.
The space the settings will change highlight automatically as you input numbers, so you can test different settings to see what looks best. You can use the arrow keys to make more subtle changes.
🤩 Pro tip: Always add some padding to the sides of your texts and buttons. Otherwise, they can look too crowded on smaller screens.
👑 Content is King
You came here to create content, so let’s make it happen! You can add text and media directly from the palette on the left.
To add text, simply choose the Heading style you want. Wondering about fonts? Surprise! Those will be set up during installation to always match your styles, so don't worry about them. You can still have some fun, though.
If you highlight text, you can make it bold, italic, underlined, code, or you can add a handy link. Links will automatically open in a new tab so customers stay in your app.
On the right-hand side, update the text-type and add basic alignment options. The minimum font recommended for digital products is 16px, although you can use smaller (12px) for captions, labels, etc. It is best practice to use increments of 8px e.g. 16px or 32px etc.
🤩 Pro tip: If you want a list, just type a number or * at the beginning of the line and hit the spacebar.
👀 Show, Don't Tell
Make it look good by adding images or gifs. First, drag the Image from the Media section of the Palette and then choose from various options, depending on how you want to upload content:
Drag it directly into the “Upload Image” box if you have the file handy
If links are more your style, add an image or gif using a link in the right-hand toolbox
Try to keep icons in SVG or any other vector format.
Use the Media Library, also in the right-hand toolbox. Content uploaded here will remain available for ease of search and reuse.
The toolbox is also very important for resizing images. You can either size the images based on pixels (px) or percentage of the screen (%). By default, Candu will maintain the aspect ratio of the image, but you can click the little lock/ unlock to change that. You can also change the settings of the size boxes or use the arrows on the side to make more precise adjustments.
When using images, it is good to know a few points about sizing:
Small images (profile, social media, icons) should ideally be set up in pixels, to avoid losing the quality of the image when resizing.
Big images will work better as percentages since they can re-scale well
If an image seems to overlap the content block, you may change the width to 100%
You can use the resize handlers to manually drag to resize your images
🤩 Pro tip: Add intuitive and familiar naming conventions to the images that you will reuse across different pieces of content. This way you will be able to easily find it using the search on the media library.
💃 Let’s Make this Interactive
Buttons and cards help make your content more useful and fun to use. For instance, cards become action cards when you add a link. For both buttons and cards, links can be added using the hover toolbox, or the Interactions tab on the right. You can also link directly to an email, to a Pendo guide in another page, or enter a callback name.
Don’t forget to add an Interaction Label -- this will allow you to track every time this element is clicked.
In the content tab, change the size and color of your buttons (colors are set in your style guide to match your brand upon publishing).
For extra *pop* you can also add Alert Blocks or Badges from the Elements menu in the Palette. As with buttons, you can set colors and alignment in the Content menu on the right.
🔥 Enhance your Content with Cards
Dismissive cards - When to Use
For general announcements. Once a user has seen the card, they have the ability to remove the notification.
Share reminders for your viewers.
To direct an action, such as "schedule your call." The card can be dismissed once the action is completed.
Cards are created in the Styleguide for active or non-active effects.
Active card hover adds a shadow effect - check that the amount of shadow is right for your design
Non-active cards have no effect
Default card is Active
💡 Get Inspired with Templates
Not sure where to start? Fair enough! We’ve created a few templates for different use cases that you can check out. You'll find them when you click 'Create New Content'
Templates are also a great learning tool. If you’re curious about building something that is similar to an existing Template, click into any component and use the arrow keys to navigate around and see how it’s all set up.
Fun fact: it’s mostly Layouts magic! ✨