All Collections
Creating Content with Candu
The Candu Editor
Creating Content - Walkthrough
Creating Content - Walkthrough

Learn the Basics | Creating your First Piece of Candu Content!

Lauren Cumming avatar
Written by Lauren Cumming
Updated over a week ago

To start creating content, select from Candu's pre-populated Templates or start from scratch. Templates are great for inspiration, but they are also fully editable and will function in all the same ways as from-scratch content.

Editor Overview

Once you're in the editor, you will see five tabs across the top: Content, Analytics, Users, Settings,

  • Content is the editor where you build content (of course!).

  • Analytics is where you see how the content is performing; nothing will appear here until the content is published.

  • Users are where you can see the list of all users that have viewed your content. If you click on an individual user, you can see what content they are seeing and scroll through their user traits. The user id and user traits depend on what information you're sending to Candu. Learn more about user IDs.

  • Embeds is where you can specify the div/selector you want to embed Candu content in + see if your content is nested within any other Candu content.

  • Settings is where you manage your content details. Learn more about content settings.

Creating Content

The panel on the left-hand side of the screen is called the Palette and provides all the different types of components that you can drag and drop into the editor. Learn more about components.

The right-hand sidebar is called the Toolbox and is where you can adjust sizing, alignment & component settings.

The Document is where you build your creation!

Re-create the Banner above (about 5-10 mins)

If you really want to learn how to build content from scratch, the best way is to build something yourself! Follow the step-by-step guide below to learn a lot of the ins and outs of the Candu editor!

Let's set the foundations

  • Drag a card onto the document and make sure it is dismissible (you can change the color of the dismissible X in your styleguide)

  • Remove all padding from the card (✨pro tip: if you click the little lock icon next to padding you can remove from all four sides in one go!)

  • Drag a columns layout onto the card and remove all its padding

Great work so far! Now let's add the image of the boat!

  • Make the first Column take up 4/12 of the space and Column 2 take up 8/12 of the space. Set the space between to be 0px.

  • In Column 1 drag an image component in and use this image https://media.candulabs.com/1/join-community-1.png

  • Set the background of Column 2 to be #6310e5 (✨pro tip: use your keyboard arrows to navigate between the different components)

Time to add the text! ✍️

  • Drag a Header 3 text and paragraph text onto the document and mimic the copy in the banner above. Change the font to be white.

  • Give each typography element a left margin of 48px (✨pro tip: designers usually work in increments of 8px / 16px when adding margin and padding)

  • Set the content alignment of Column 2 to be center.

And finally let's add the buttons! 🚀

  • Drag a view layout below the paragraph text and set the direction to be Row

  • Drag your primary button into the View layout and then drag another button to sit next to it. The second button will need to have 16px right margin added and the first 48px.

  • Edit the button copy and link out to CanDocs and a Candu youtube video. (✨pro tip: make sure to add an interaction label so you can track analytics of how many clicks your component gets)

Amazing work! 👏 Look at that banner! Now you are officially a Candu creator! 🌟

Did this answer your question?