After reading this article you’ll know how to:
Find the page components
Use different types of component alignment
Position and space page elements
Whether you're a seasoned developer or just embarking on your journey in the world of low code, understanding the nuances of layout design can significantly impact the effectiveness of your applications. Following the Setting up your page article, where we looked through the primary page components, you will dive into their options and learn how to build the pages in your application according to your company’s identity.
What are component options?
Page component options serve different purposes in the page designing process helping to arrange and stylize various components on the web page. When you add new components to your page (in the page builder), the options are automatically shown in the page builder menu on the left.
Though options are different for each component, some share similarities. For example, compare the alignment options of a column (left) and a box (right):
We won’t describe the options of each page component in this article, but instead, let’s just concentrate on the arrangement management options: alignment, positioning, and spacing.
Alignment
Page builder alignment refers to the arrangement of components, such as text, containers, buttons, etc. in a consistent and visually pleasing manner. It ensures that these elements are positioned in relation to each other and the page's layout grid in a way that is aesthetically balanced and easy to understand for the user.
To understand how alignment works, we’ll take a box component and drag it onto a page’s canvas. A box is an excellent tool for placing other elements into. Try to drop some components like buttons or containers inside of it. By default, the alignment will be set to none which means components will be placed from left to right, but after placing one component, you can choose where to drop the next one (follow the ‘|’ symbol when dragging).
Alignment option defines the horizontal position of components inside the box (left, center, right). Using justified alignment, separate two components at the right and left corners.
Vertical alignment allows you to choose the vertical position of your components in the box (top, centre, bottom).
GIF1
Content direction defines whether you want the components to be placed in a row (horizontally) or vertically, in a column.
The option below the content direction, Stretch (in flex container) allows you to extend a box to the full height or width of the parent column.
Positioning
The positioning of page components in web design involves using CSS (Cascading Style Sheets) properties to control how elements are placed and behave within an application page.
Betty Blocks offers such commonly used positioning values as static, relative, absolute, and fixed, sticky. These values can be applied to box components and all other components placed within them.
All the positions have top, bottom, left, or right properties. Depending on the type of position, they can be moved around the box component or the whole page. You can also choose the type of measurement units: percents, pixels (px), view height (vh), etc.
1. Static positioning is the default behavior for all HTML elements.
Elements with static positioning are placed in the normal flow of the document
They are not affected by top, bottom, left, or right properties
2. Relative positioning allows you to move an element relative to its normal position in the document flow.
You can use the top, bottom, left, or right properties to adjust the position relative to where it would be otherwise
Other elements are not affected by the relative positioning of the element
3. Absolute positioning removes the element from the normal document flow
The component is positioned relative to its nearest positioned ancestor (an ancestor with a position property other than static), or the containing block (box in our case) if no positioned ancestor is found
The most flexible positioning type
Absolute positioning can lead to unwanted overlapping elements if not managed carefully
4. Fixed component remains attached to its initial position even when the page is scrolled
The component is positioned relative to the viewport (the browser window)
Useful for creating elements like sticky headers, footers, or sidebars
5. Sticky positioning is a combination of both relative and fixed positioning
An element with sticky positioning behaves like a relatively positioned element until it reaches a certain scroll position, after which it becomes fixed to the viewport
This is often used for creating headers or navigation menus that stick to the top of the page when the user scrolls down
Note: If in the process of creating an application interface, you lost a component's sight as the result of overlapping - use the component tree to find it!
Spacing
Spacing of page components refers to the intentional management of the empty areas (‘white spaces’) between various elements and content of your application’s page. Spacing is used to separate page components to increase readability, give a page more breathing room, and improve overall aesthetics.
Have a look at the simple outer spacing option for the row component. In this example, we manage the distance between the navigation bar and box components.
The box component has more spacing options. Open the Styling tab and try out changing inner and outer space options. There are four basic sizes (S, M, L, XL) and the custom one (⚙). With basic sizes, you set the same measurements around (or inside) the chosen component from all four sides, while the custom spacing gives you the opportunity to extend some of the sides manually.
The button from our previous example will also have a similar spacing option to the row. So after finishing with spacing the box, you can space the button inside it, choosing the position that works best for you.
Overall, the page components have multiple options to choose from and we are currently working on improving them. Experiment and improvise to find your own ways of building interfaces