Custom Lists

Skill Level: Beginner

Walkthrough

Simple

1.) The simple walkthrough tab should consist mainly of text instruction (paragraph) steps with bold being reserved for step numbers and for referencing of buttons and labels in the Adalo Builder and elsewhere

2.) You can also add inline pictures to the simple walkthrough for small buttons that may be hard to find such as

3.) If you need to add sections to the walkthrough, do so using Heading 2

4.) Keep each step to 1-3 clicks each.

Blue callouts like this one may be used in very specific cases. They should be used sparingly and only when the maker needs to know something that will prohibit them from continuing in the walkthrough if they aren't told.

In-Depth

1.) The In-Depth tab should be exactly the same as the simple tab except each step should be accompanied by a GIF or a still screenshot

2.) When using GIFs, try to export using a high frame rate of 20+ and only use GIFs of the entire screen if absolutely necessary. You can also reduce your window size or zoom your browser window to help with this.

3.) We like using Snagit for GIF creation, but other free GIF software exists as well such as Capture to a GIF for Chrome.

4.) Ideally, GIFs should never be over 20 seconds. If they are, consider breaking the step into two steps (insert Unk/T-Pain music here)

Video

Example

This section should contain 3 things:

• A statement of what the app's end users should experience

• A GIF of the what the app's end users will see/experience (if applicable)

• A link to a cloneable kit of the app used to make the walkthrough.

If you charge money for your components, please make sure your share link is not cloneable, otherwise makers will be able to steal your components!

In this case, you can reference some example docs using this template! Click Here

Learn More

The Learn More section is typically a list of bullet points with advanced tips and tricks, other use cases, links to any other helpful resources, and other info. This section is most helpful for makers wanting to do advanced implementations. You can also use this section to list out optional features with bullet points.

Help

This help section is only here for providing links to the forum. At the very least, it should always say,

If you need additional help with this article, you can always ask in our community forum! Be sure to paste the link to this article in your post as well!

If you are a component developer and provide support for your customers, feel free to leave a support email or website link here as well.