How can I add Horizontal Rule and Break Rule elements in Webflow?

Published on
September 22, 2023

To add Horizontal Rule and Break Rule elements in Webflow, you can follow these steps:

  1. Select the element or section where you want to add the Horizontal Rule or Break Rule.
  2. Click on the plus icon (+) to open the element menu.
  3. Under "Elements," scroll down and select "Divider" to add the Horizontal Rule.
  4. Webflow will automatically add a default Horizontal Rule element to your selected section.
  5. To customize the Horizontal Rule, select it and use the options in the right sidebar. You can adjust the width, color, thickness, and alignment.
  6. To add a Break Rule, you can use an empty paragraph element (

    ), which will create a line break in your text. Alternatively, you can use the "Div" element and add custom CSS to style it as a break rule.

Using these steps, you can easily add Horizontal Rule and Break Rule elements to your Webflow project and customize them to fit your design needs.

Additional Questions:

  1. How do I adjust the width of a Horizontal Rule element in Webflow?
  2. Can I customize the color and thickness of a Horizontal Rule in Webflow?
  3. What is the CSS class of a Break Rule added in Webflow?