Building a custom dashboard page

When creating a dashboard on Betty Blocks, you want something that not only meets your functional needs but also aligns with your brand’s style and vision. In this guide, we’ll walk you through building a custom dashboard page with a sidebar, using the Betty Blocks theme builder, Pages, and advanced customizations through CSS properties.

Preparation ideas

Before you start, it’s essential to gather ideas and requirements. A great source of inspiration is Dribbble, where designers share creative dashboard layouts and interactions. Look for elements that match your needs regarding structure and user experience.

• Dashboard reference. You can start by checking existing dashboard pages as a reference for what you want to achieve. Having a visual idea will help guide your decisions.

• Style guide. Check your brand’s style guide or a similar example. Asana’s brand book is a good benchmark for defining colors, typography, and overall styling.

• Fonts. Prepare your font files, for instance, via Google Fonts. Choose a title font that suits your design and a body font that helps readability.

• Logo. A proper style guide isn't always necessary; you can align design and color schemes with a company logo. In this instance, we used a logo from Logoipsum.

Start by opening the theme builder in Betty Blocks to set the foundation for your custom dashboard:

• Set primary and secondary colors that reflect your brand.

• Define the info color for status indicators and notifications

• Upload and configure your custom fonts:

  • For titles, use a title font like Poppins

  • For body text - a standard font, such as Work Sans

• Icon customizations: Adjust icon sizes to fit the overall look. Here, we downscaled a small icon to keep a minimalistic style

Building a new dashboard page

Once the design foundation is set, it’s time to create your custom dashboard page.

First, take a look at the core structure of the page. The main parent element is a Box

containing two child Box components - one as a Side menu and another one split into two child components - also Boxes - Top menu and Dashboard space.

A glimpse at this layout carcass can help us break down the steps toward building a similar page.

Page layout setup

You can either build from scratch or use a pre-built template within Pages. Since we've chosen to create a custom solution - pick up the Start from scratch option.

1. Drop a Column to a new empty page, then set the Row and Column height to 100%

2. Remove the outer spacing for the Column and drop a Box into it:

• Align it on Left

• Toggle Stretch (when in flex container)

• Remove the inner space

• Set the height to 100%

This way, we make sure the page is stretched across the screen properly, with no extra spaces.

Side menu

For the side menu as our main navigation element here, let's use another Box instead of a usual Drawer to have more flexibility in customizing. Drop a new Box inside on the previous one and rename it to 'Side menu' for convenience.

• Set a vertical alignment to Top

• Choose Column as a content direction

• Height should be set to 100%

• Width to 240 px

• Set a background color using the Styles section

  • Apply the background color by adding its HEX code to the CSS properties:

    background-color : #F9FAFB

  • Add a border on the right for visual separation:

    border-right : 1px solid #E6E7E9

Customizing the side menu

The carcass for our side menu is done and now we can fill it out with content.

1. Take one more Box and drop it inside the Side menu.

• Make sure the alignment is set to Top, content direction to Column

• Set it's width to 100% and stretch the Box

2. Use Media component to add a company’s logo (e.g., Logoipsum) at the top of the side menu. You can additionally select the page to be redirected to on click.

Good practice is to remove width limitations to allow it to adjust naturally to the space. In our case, the logo might not fit perfectly in the side menu but it can be fixed via outer space options:

Navigation items

1. Below the logo, we'll create a simple, again Box-based, structure for navigation with custom list items.

• The first, parent Box aligns left and to the centre vertically

• Set the inner space to small and width - to 100%

2. To prepare the area for the content components, let's add a few more Boxes: left one for an icon, and the other - stretched - for text.

3. Add an Icon in the left box and Text in the right. If needed, work your way around with spacing and styling to pick up the right look and arrangement.

4. Rename the parent Box for convenience. Now you can copy this custom list component and edit each one separately. Use the component tree to help you navigate while building.

Active list item

You can apply CSS properties to style the navigation. For example, highlight the active list item using custom CSS to change the background and when the item is selected. This will give your sidebar an interactive feel.

Additionally, we rounded the borders of the item to make it visually appealing. The '!important' value is used when you want to overwrite a default value set via the component's native options.

Note: Once the sidebar is designed, save it as a partial component so it can be reused across other pages.

Logout button

Let's have a brief look at how to place a Logout button at the bottom of our side menu. To do that simply copy a few of the custom list items: one will be used as Log out button, while another - as a filler between it and the top menu items.

• Delete all child components (Icon, Text and Boxes) from a 'filler' List item

• Stretch the parent List item Box and set it to transparent

Top menu

For the top menu, we'll follow some similar principles and arrange our components using Boxes.

1. Place a Box in the dashboard space area:

• Set the width to 100%

• Remane this parent Box to Top menu

• Go to Styles tab and apply the border-bottom property:

  border-bottom : 1px solid #E3E4E8

This way, we'll separate the top menu from the rest of the content on our page.

2. Drop two Boxes inside:

• The left one is scratched, with a Text inside.

• On the right, there are two more child Boxes prepared: one for Avatar component, and another - for user-related text components

3. Fill in the right Box with two Text components and select the right alignment: top, center, with column direction.

Wrapping up the dashboard

Finally, it's time to fill out the dashboard space with some cards showing project statistics and a data table displaying projects.

Custom cards

1. Place 4 Columns component to prepare space for placing Boxes that will be turned into custom cards showing project statistics on our dashboard.

• Set alignment to Left

• Remove the outer spacing and select White for background

• Go to Styles tab and add a CSS property:

border : 1px solid #E3E4E8 !important

• Make border radius to 8 px

2. Drop two Boxes and stretch the right one:

• In the left Box, you drop the Avatar with icon (Light background)

• In the right - two Text components

Now you can copy and reuse the same arrangement for other cards on the page.

Data table (with chip statuses)

Once we're done with custom cards, let's proceed to creating a Data table with displaying the latest projects.

1. Add a Box with Text ('Latest projects')

2. Proceed to dropping a Data table and setting the column properties via the configuration wizard

3. Drag the Chip component into Status column. Refine the styling choosing the appropriate color and spacing

4. Add Conditional component to place each status chip into

Final touch

Once you’ve arranged the dashboard elements, review the layout to ensure all components are properly aligned. Refer to a pre-designed dashboard image as your guide to ensure everything looks cohesive.

This structure should provide clear guidance on building a custom dashboard page, offering flexibility in design while following Betty Blocks’ features.