How can I add a divider to the page?
Divider
The divider features allow users to
clearly divide pages with either a line or spacing. The line and spacing
options are customizable depending on what particular style you desire.
The two screenshots below highlight the divider feature option and the
two options of “Line” and “Space”.
Line Divider
Selecting a line will present a clear horizontal line, dividing the page or content. Once the line has been selected, a design menu will appear on the “left-hand side” of the screen, presenting 5 different customizations for the line.
Size
The size options allow the user to
adjust the width and height of the line that spans across the page. By
default, the line is the full width
of the screen. This option is able to be toggled on and off via the
checkbox and both the width and height are able to be adjusted to the
user's desired size.
Space
Margin pertains to the area directly outside of the row. Adding a margin to either the top, bottom left or right will change the border dimensions of the row. All margins are adjustable using pixels as a standard of measure.
Padding pertains to the area directly inside the row. Adding padding to either to top, bottom left or right will move the content within the border of the row. All padding is adjustable using pixels as a standard of measure.
Alignment
Alignment can assist the user in
determining where the position of the line in relation to the page.
Alignment has three options which are, left align, centre align and right align.
Line Style
The line style option allows the user
to change the color of the line with either the color scaling tool or
if the color is known the user can update the specific HEX code or the
specific RGBA code. Users can also choose the colors from the Global
color Palette or from the predefined color groups.
There are also, 4 options of style that are able to be applied to the line, which is detailed in the screengrab below:
Background
The last feature of Background enables the user to change the color of the entire row background (not the color of the line). As
per the below screen grab, the color red, or HEX code #F30606 was
selected and applied to the row. Or RGBA code 243, 6, 6, 255 was
selected and applied to the row. Users can also choose the colors from
the Global color Palette or from the predefined color groups.
Space Divider
Selecting a line will present a clear
horizontal line, dividing the page or content. Once the space divider
has been selected, a design menu will appear on the “left-hand side” of
the screen, presenting 3 different customizations for the line.
Size
The size options allow the user to
adjust the width and height of the line that spans across the page. By
default, the line is the full width
of the screen. This option is able to be toggled on and off via the
checkbox and both the width and height are able to be adjusted to the
user's desired size.
Space
Margin pertains to the area directly outside of the row. Adding a margin to either the top, bottom left or right will change the border dimensions of the row. All margins are adjustable using pixels as a standard of measure.
Padding pertains to the area directly inside the row. Adding padding to either to top, bottom left or right will move the content within the border of the row. All padding is adjustable using pixels as a standard of measure.
Background
The last feature of color enables the user to change the color of the entire divider. As
per the below screen grab, the color red, or HEX code #FD0707 was
selected and applied to the divider. Or the RGBA code 253, 7, 7, 255 was
selected and applied to the divider. Users can also choose the colors
from the Global color Palette or from the predefined color groups.
Thank You!
Related Articles
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 Source Format Header The header option allows the user to ...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, ...I have already created a page in Canvas, can I edit this page in Loree? If yes, how?
Absolutely! If you've created a page in Canvas after launching Loree, you can seamlessly select that specific page within Loree for editing. Additionally, if the page is already included in a module, you can conveniently locate and edit it by ...How do I remove duplicated Canvas Page title?
Learn how to remove duplicated Canvas course page titles via themes with Loree's bonus custom code. To conceal page titles in Canvas LMS using custom CSS and upload/update themes in your instance, follow these steps: Uploading/Updating Themes: Access ...