Save 28% - Sale ends in 29 days - Go To Pricing
Editor Enhancer - The Best UI for Oxygen Builder
Post Date: July 18, 2021
Posted In:

Basic Component Lists in Oxygen

If you didn't know about custom tags in Oxygen Builder, now you do! Here's one use case for them: Building lists.

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.

Enter "ul" or "ol" as a custom tag to replace "div."

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.

List items use the tag "li" in both unordered and ordered lists.

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.

Enhance Your Workflow

Get flowing with Editor Enhancer's suite of extensions and settings that immediately improve your workflow and editing environment.
Get Access Now

Reach out and say "hello!"

Join the Facebook Group
Editor Enhancer - The Best UI for Oxygen Builder
2023 Editor Enhancer. All rights reserved.