Can I adjust the indent of a bullet list in a rich text element in Webflow?
TL;DR
- Open the Webflow Designer tab, select the rich text element with the bullet list.
- Create and apply a custom class, navigate to the Style panel; custom CSS is needed for indentation adjustments.
- Add custom CSS in Project Settings under Custom Code, apply it to the class and publish the changes.
Adjusting the indent of a bullet list in a rich text element in Webflow requires some specific changes. Here's a step-by-step guide.
1. Access the Designer
- Open your Webflow project and go to the Designer tab where you have your rich text element.
2. Select the Rich Text Element
- Click on the rich text element containing the bullet list you want to adjust.
3. Apply a Custom Class
- Create and apply a custom class to the rich text element, which allows you to make style adjustments specific to this element.
4. Use the Designer Panel
- Go to the Style panel on the right side.
- Look for the Typography section within the Style panel.
5. Adjust List Indentation
- Unfortunately, Webflow doesn't provide a built-in control for adjusting list indentation directly in the Style panel.
- Custom CSS embedded in the Project Settings or Page Settings is required for specific indentation changes.
6. Add Custom CSS
- Navigate to Project Settings > Custom Code.
- In the Head Code or Body Code section, you can add a
<style>section with custom CSS. For instance:
```css
.your-custom-class ul {
margin-left: 20px;
}
```
- **Replace
.your-custom-class**with the class name you applied to the rich text element.
7. Save and Publish
- Save your changes and publish your site to see the adjustments take effect.
Summary
You can adjust bullet list indentation in Webflow by using a custom class and adding custom CSS within your project settings. Since Webflow doesn't provide a direct styling option for list indentation, applying styles via custom code is necessary.
