How can I add a divider to the page?

How can I add a divider to the page?

Divider

The divider feature allows users to clearly separate sections of a page using a line, spacing, or a line with an icon. Each option is customisable to fit your preferred style. The screenshots below demonstrate the divider feature and show the available options: Line, Space, and Line with Icon.

Line Divider

Selecting the Line option will insert a clear horizontal line to divide the page or content. After selecting the line, a design menu will appear on the left-hand side of the screen.



You will have 5 different customisation options for the line Divider.
  1. Size: Users can adjust the width and height of the line, which by default spans the full width of the screen. This setting can be toggled on or off, and the dimensions can be customized as needed.

  2. Space: Margin adjusts the spacing outside the row, changing its border dimensions, while Padding controls the space inside the row, shifting the content within its border. Both can be customized using pixels.

  3. Line Alignment: The Alignment option allows users to position the line on the page with three choices: Left Align, Center Align, and Right Align.

  4. Line Style: The Line Style option allows users to customize the line color using a color tool, HEX code, RGBA code, Global Color Palette, or predefined color groups. There are also four different line styles available for further customization.

  5. Background: The Background feature lets users customize the row's background color (excluding the line). Colors can be selected using HEX or RGBA codes, the Global Color Palette, or predefined color groups.


















Space Divider

Selecting the Space Divider option will insert a clear horizontal line, effectively dividing the page or content. Once selected, a design menu will appear on the left-hand side of the screen.
You will have 3 different customisation options for the Space Divider.
  1. Size: The Size option allows users to customize the width and height of the space divider, with the ability to toggle it on or off using a checkbox.

  2. Space: Margin adjusts the space outside the row, affecting its border dimensions. Padding modifies the space inside the row, shifting content within its border. Both can be customized in pixels.

  3. Background: The Background feature enables users to change the divider's color using HEX or RGBA codes. Users can also select colors from the Global Color Palette or predefined color groups.



Line With Icon

Selecting the Line with Icon option will insert a clear horizontal line to divide the page or content with an Icon in between. After selecting the line with Icon, a design menu will appear on the left-hand side of the screen, offering 5 different customisation options for the line. After adding a Line with Icon, if you wish to change the icon, simply click on the icon and select the "Replace" option. This will open the Icon Library, allowing you to choose a new icon from the available options.


You will also have four additional editing options to customise the icon:

  1. Size: Adjust the height of the icon to suit your design. This allows you to scale the icon up or down to fit the desired space.

  2. Space: Modify the padding around the icon. This allows you to control the spacing between the icon and other elements, providing better alignment or separation.

  3. Icon Color: Change the color of the icon to match your design theme. You can select any color using the color picker or input a specific HEX/RGBA code.

  4. Background: Change the background color behind the icon. This lets you create contrast by adding a colored background to the icon, enhancing its visibility or matching it with other design elements.





Thank You

    • Related Articles

    • Landing page

      Overview of landing page The landing page has a simple and user-friendly design that lets you create, edit, and organize course content easily. The Ultimate Walkthrough: Exploring Every Detail This section provides an in-depth breakdown of the key ...

    • Editor Page

      Overview of Editor Page The Editor Page is designed to enable seamless content creation and customization. Detailed Explanation of Icons in the Interface Home Icon - Clicking this icon will navigate you back to the main dashboard or home screen. This ...

    • How do I add text?

      This element can be used to add text to the page. Text Selecting the Text element will give you five options as detailed in the image below: Header Paragraph Heading with paragraph QuoteBlock Header The header option allows the user to add a text ...

    • How do I add an image?

      Images As a Loree Design user, selecting the images option will now give you multiple pre-defined options, which easily add images, images with text, or both in combination. Selecting one of the options below will add the content to the particular ...

    • How do I add and edit course elements?

      Learn how to effortlessly add and edit course elements in Loree Design Loree Landing Page Once Loree has been successfully configured, you can access it through Canvas Course Navigations. Simply locate "Loree" on the left-hand side navigation bar, ...