This guide is full of handy tips to get you feeling like a Candu pro in no time 🦸♀️
🧭 Navigate content
You can use Layers to easily flick between and move components on your page!
Use breadcrumbs to navigate through the layers of components!
⏰ Time-saving hacks
You can click on the Link icon to change all sides of your Margin or Padding at once!
Hold down shift and select multiple components to change styles, e.g. base size at once:
Copy/paste typography and switch between H1/H2, etc. in the Editor rather than dragging a new one each time!
Open content in a new tab by holding down CMD/CTRL whilst clicking on the content name!
If you want to create a list, just type a number or * at the beginning of the line and hit the spacebar:
Add an Interaction Label as you build, this will allow you to easily track every time this component is clicked and set up user journeys based on it.
↩️ Undo changes/revert to old designs
If you make a change that doesn't look right, no worries! You always have the option to undo it using your keyboard shortcut (cmd/ctrl+z) or the undo icon here:
If you've made lots of changes, you can use History to restore old versions of your designs!
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.
✂️ Resize with Ease
Resize your components with the drag-and-drop handlers. You can use the size handlers to increase or decrease the size of the selected component.
Top tip: hold down shift as you use your diagonal drag handler to amend the size of a component whilst keeping the proportions!
Use margin to add space around a component and use padding to add space within a component.
The space you're adding will be highlighted automatically as you input numbers, so you can test different sizes to see what looks best.
Pro tip: Always add some padding to the sides of your texts and buttons. Otherwise, they can look too crowded on smaller screens.
Tips for images:
Small images (profile, social media, icons) should ideally be set up in pixels, to avoid losing the quality of the image when resizing. Try to keep icons in SVG or any other vector format.
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!
📲 Make your content responsive
Create mobile-ready content with our responsive toolbox.
Our best practice is to set content to 100% width with a max width set in pixels.
Under responsive controls, you can choose to hide content from specific devices by unselecting the icon you don't want the content to show on:
Use the mobile, tablet, and desktop icons next to the toolbox to test your content and the way it appears on different devices:
Use flex settings on your layouts or the responsiveness across different devices. For more information see our Advanced Layout Guide.
Wrap Mode
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 before wrapping.
Base Size
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.
💡 Get Inspired with Templates
Not sure where to start? Fair enough! We’ve created lots of templates for different use cases that you can check out.
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.
