Lists are great! They help to keep content organized and make larger ideas more easily digestible. Creating lists in Oxygen Builder used to require a Rich Text component or Code Block, but with the introduction of custom tags we can now build lists quickly and style them in a much more flexible way. If you didn't realize this exists, it will change your workflow for the better!
How to Start a List
Start with a simple Div component as a wrapper. Then, select "Use custom tag" from the tag definition control and enter "ul". Now you have the beginnings of an unordered, bulleted list. Alternatively, you can enter "ol" for a numbered, ordered list.
Adding List Items
Next is to add your list items. For this, add a simple Text component. In the same way you updated the wrapping Div tag, change the tag on the text item from "div" to "li" to convert it to a list item.
Styling Your New List
Both ordered and unordered lists have a standard left padding of about 20 pixels. However, this is compounded by whatever padding is set on the section or containing box. If you want your list to be flush with the rest of your text, match the padding on your ul/ol to the left padding of its parent. Beyond that, you can style your lists and items as you would any other component!
Ready to Enhance Your Workflow?
Take the next step towards transforming your workflow with Editor Enhancer! The following are all included.
- Style Flow lets you track styles on your components and kill conflicts quickly.
- Context Switching keeps you in the Oxygen editor so you can load and edit templates instantly.
- Snapshots allows you to version control your layouts.
- And so much more! Check out the full docs to see what comes with Editor Enhancer's suite of workflow tools.