filmov
tv
Series of Basic Tutorials - 7.How to create a Dashboard + Card widget
Показать описание
🎥 In this video, we'll walk you through creating a Dashboard using Card widget. Let’s break it down step by step:
1️⃣ *Navigate to the Dashboard:* Click on the dashboard and redirect to the dashboard page, which is currently empty.
2️⃣ *Edit the Dashboard Layout:* Click on the pencil icon to edit and select a 3+3+3+3 section for your layout.
3️⃣ *Add Card Widgets:*
Click on the plus icon and choose "Card" from the widget options.
Expand the "Card Layout" option and add a second column.
Name the columns and specify their placement within the card.
4️⃣ *Customize Icon and Design:*
Drag and drop the widget menu into the icon area and click "Add" to select an icon.
Customize the icon by clicking the blue button, and copy the design to other tabs.
5️⃣ *Modify Colors and Borders:*
Adjust the background color for the icon in both "On Hover" and "On Active Link."
Customize the border to create circular icons and apply the changes to both hover and active states.
6️⃣ *Add "Total Tasks" Card:*
Select the "Number" widget from the menu.
Enable "Advanced Mode," choose "Artifact Type Task 2," and adjust the counter styles (font size and color).
Name the card, set labels and counters to "Align Left," and adjust margins for perfect alignment.
7️⃣ *Card Content and Alignment:*
Customize the "Area Styles" and center both horizontal and vertical alignment for icon placement.
Center the content of the "Total Tasks" area vertically.
8️⃣ *Remove Card Shadow:* Remove the shadow effect around the card by adjusting the "Borders" settings.
9️⃣ *Reuse Card Styles:* Copy-paste the card style to reuse and customize as needed.
🔟 *Create a Chart Section:*
Add another section (choose a 4+4+4 layout for three cards).
Insert a "Card" widget, adjust the layout, and add rows.
Add a text widget labeled "Task Priority" and insert a chart with "Task 2 Artifact Type" and "Group Priority" attributes.
Follow along to build a fully customized dashboard! 🎯
✏️ Created by Slavomira Solmosiova & Natalia Motyl
*Let's stay connected:*
✔️ LinkedIn: / elwisapp
✔️ YouTube: @elwisapp-kw9xm
0:00 Welcome to Elwisapp
0:03 Navigate to the Dashboard
0:16 Dashboard Layout
0:21 Card widget and card layout
0:49 Icon (Menu widget)
0:59 Icon - Modify colors and borders
1:51 Total task area - Number widget
2:09 Number widget counter styles
3:03 Card content styles
3:41 Copy-Paste card
3:56 Card widget for Chart
4:38 Area 1 - Text widget
4:45 Chart widget
1️⃣ *Navigate to the Dashboard:* Click on the dashboard and redirect to the dashboard page, which is currently empty.
2️⃣ *Edit the Dashboard Layout:* Click on the pencil icon to edit and select a 3+3+3+3 section for your layout.
3️⃣ *Add Card Widgets:*
Click on the plus icon and choose "Card" from the widget options.
Expand the "Card Layout" option and add a second column.
Name the columns and specify their placement within the card.
4️⃣ *Customize Icon and Design:*
Drag and drop the widget menu into the icon area and click "Add" to select an icon.
Customize the icon by clicking the blue button, and copy the design to other tabs.
5️⃣ *Modify Colors and Borders:*
Adjust the background color for the icon in both "On Hover" and "On Active Link."
Customize the border to create circular icons and apply the changes to both hover and active states.
6️⃣ *Add "Total Tasks" Card:*
Select the "Number" widget from the menu.
Enable "Advanced Mode," choose "Artifact Type Task 2," and adjust the counter styles (font size and color).
Name the card, set labels and counters to "Align Left," and adjust margins for perfect alignment.
7️⃣ *Card Content and Alignment:*
Customize the "Area Styles" and center both horizontal and vertical alignment for icon placement.
Center the content of the "Total Tasks" area vertically.
8️⃣ *Remove Card Shadow:* Remove the shadow effect around the card by adjusting the "Borders" settings.
9️⃣ *Reuse Card Styles:* Copy-paste the card style to reuse and customize as needed.
🔟 *Create a Chart Section:*
Add another section (choose a 4+4+4 layout for three cards).
Insert a "Card" widget, adjust the layout, and add rows.
Add a text widget labeled "Task Priority" and insert a chart with "Task 2 Artifact Type" and "Group Priority" attributes.
Follow along to build a fully customized dashboard! 🎯
✏️ Created by Slavomira Solmosiova & Natalia Motyl
*Let's stay connected:*
✔️ LinkedIn: / elwisapp
✔️ YouTube: @elwisapp-kw9xm
0:00 Welcome to Elwisapp
0:03 Navigate to the Dashboard
0:16 Dashboard Layout
0:21 Card widget and card layout
0:49 Icon (Menu widget)
0:59 Icon - Modify colors and borders
1:51 Total task area - Number widget
2:09 Number widget counter styles
3:03 Card content styles
3:41 Copy-Paste card
3:56 Card widget for Chart
4:38 Area 1 - Text widget
4:45 Chart widget