How to add and edit dividers

How to add and edit dividers

With Essentials Shape Builder you can build stunning and awesome dividers in no time! Below you can learn how to add dividers using WPBakery or Elementor page builder.

Adding dividers in WPBakery
Adding dividers in WPBakery

Adding beautiful dividers in WPBakery is very easy, you can add dividers to Sections or Rows, or you can use the Dividers element from pixfort Elements.

Adding dividers to Sections and Rows

To add dividers to a section or a row, just open the Options Panel > Top or Bottom Dividers and then you can add top or bottom divider. You can choose the divider layout, number of layers, colors, animations, flip, height…

Open Section settings

Open Row settings

The result: Top & Bottom dividers šŸ¤©

  • Note: if you want to make the divider full width, make sure to set the Section or Row to Stretch (Section/Row settings > General > Section/Row Stretch).
Adding dividers using Dividers element in pixfort Elements

Another way to add dividers is to use the Dividers element from pixfort Element, the element can be added anywhere in the page (Section, Row, Content Box, Highlight Box…) and it has the same options as dividers in Sections and Rows (Top and Bottom dividers, Layout and Styling options…).

To set the options of the divider just open the Dividers Options Panel > Top or Bottom Dividers and then you can add top or bottom divider. You can choose the divider layout, number of layers, colors, animations, flip, height…

Dividers element in pixfort Elements

Adding dividers in Elementor
Adding dividers in Elementor

Adding beautiful pixfort dividers in Elementor is very easy, you can add dividers by usingĀ the Dividers element from pixfort Elements. You can add top or bottom divider. You can choose the divider layout, number of layers, colors, animations, flip, height…

Adding bottom divider

  • You can customize the position of the dividers by changing the value of Top/Bottom margin.
  • Note: if the divider was over other items and you want to bring it backward (underneath other items), set the z-index of the dividerĀ to 0 and increase the z-index of other Elements/Columns.
  • Ā Note: if you want to make the divider full width, make sure to set the Section to Stretch, also set Columns Gap to No Gap.
pixfort
pixfort
Essentials support team
hub.pixfort.com

Hey, this is pixfort support team, if you still need help you can always reach us via the chat messenger in your account on pixfort hub

Related Posts