Series of Basic Tutorials - 6.How to create a Sidebar

Welcome to our basic low-code tutorials on using the Elwis app web builder.

🎥 In this video, we'll walk you through creating a sidebar widget, specifically for the Task 2 page. Let’s break it down step by step:

1️⃣ *Starting the Task:*
After being redirected to the Tasks page, click on edit, add a new section, and select the sidebar option.
2️⃣ *Setting Up the Sidebar:*
From the “dynamic sidebar open/close” menu, select the button option.
To edit the button, click the arrow next to the checkbox, and additional options will appear.
3️⃣ *Customizing the Button:*
Enter the name you want to display on the button and choose an icon (we selected the plus icon).
Fill in all options like close-hover, open-no hover, and open-hover.
Customize the color for each state; we only changed the close-no hover button.
4️⃣ *Aligning the Button:*
You can align the button to the center, left, or right. After creating the button, click on it, and a blank sidebar will appear.
5️⃣ *Adding Widgets to the Sidebar:*
Click the plus sign, select the artifact widget from the widgets menu, then click on advanced mode.
In the artifact widget settings, select the artifact type Task 2, add all previously created attributes, and adjust the size of the column.
6️⃣ *Final Adjustments:*
In the widget settings, add an EDIT button. You can also choose to hide the “save and notify button” option.

Now you’re all set to create a functional and customizable sidebar! 🙌

✏️ Created by Slavomira Solmosiova & Natalia Motyl

*Let's stay connected:*

✔️ LinkedIn: / elwisapp
✔️ YouTube: @elwisapp-kw9xm

0:00 Welcome to Elwisapp
0:10 Generate a section
0:14 Sidebar widget
0:20 Creating a button - label and icon
0:46 Changing the background color and alignment of the button
0:57 Creating artifact widget in the sidebar