Component Menu

    Components

    Divider

    Improve the visual arrangement of your page with Dividers, visually separating one component from another.


    Edited 2 years ago

      Desktop

      Mobile

      Step by Step

       

      Layout Canvas Structure:

       

      1. Go to the the page that you wish to add the Divider component and click on the "+" button in the Layout Canvas;

       

      2. Search the "Component - Divider" component on the list. It's located in the "Layout Components" category;

       

      3. Drag and drop the component inside the canvas, and make sure to put it exactly where you wish to place it.

       

       

      4. Click twice on the component and turn the "Simple divider" option to "ON" to activate the Simple divider. To finish, click on "Apply".

       

      Customizing the Component:

       

      1. Go to the Style Guide page(/admin/appearance/settings/corebr_whitelabel) to customize the color of your divider;

       

      2. Inside the Style Guide category, you'll find the General Settings category. Inside it, there's the "Ornament" tab with the "Divider" field.

       

      3. All you need to do is fill the field with the hex code of the color that you wish to use, and all the dividers in your website will receive the chosen color.

       

      4. Click on "Save configuration" to finish it.

       

      If the Simple Divider field is set to ON, a thin, grayish line will be drawn between components. IYou can change the line's color by going to the "Ornaments" section in the style guide.



       




      Divider with Simple Divider OFF


      Divider with Simple Divider ON


      placeholder text