Pages and reusable elements in No-Code - Step-by-Step Execution

Concept Flow - Pages and reusable elements

Start: Create Page

↓

Add Elements to Page

↓

Identify Reusable Elements?

No→Finish Page Setup

Yes↓

Create Reusable Element

↓

Use Reusable Element in Pages

↓

Update Reusable Element?

Yes→Changes Reflect in All Pages

No↓

Finish

This flow shows how you create pages, add elements, decide if elements should be reusable, create reusable elements, use them in pages, and update them with changes reflecting everywhere.

Execution Sample

No-Code

1. Create a new page called 'Home'
2. Add a header and button
3. Make the header a reusable element named 'Main Header'
4. Use 'Main Header' on 'About' page
5. Update 'Main Header' to change color

This example shows creating a page, making an element reusable, using it on another page, and updating it to reflect changes everywhere.

Analysis Table

Step	Action	Element/Page	Result	Notes
1	Create page	Home	Page 'Home' created	Starting point for content
2	Add elements	Header, Button	Elements added to 'Home'	Basic page content
3	Make reusable	Header	Header saved as 'Main Header'	Reusable element created
4	Use reusable	Main Header on 'About'	'Main Header' appears on 'About'	Reuse saves time
5	Update reusable	Main Header color	Color changes on all pages	Update reflects everywhere
6	Finish	-	Pages ready with reusable elements	End of process

💡 Process ends after reusable elements are created, used, and updated across pages.

State Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
Pages	None	Home	Home	Home, About	Home, About	Home, About
Elements on Home	None	Header, Button	Header (reusable), Button	Header (reusable), Button	Header (reusable updated), Button	Header (reusable updated), Button
Reusable Elements	None	None	Main Header	Main Header	Main Header (updated)	Main Header (updated)

Key Insights - 3 Insights

Why does updating a reusable element change it on all pages?

Because reusable elements are linked copies; changing one updates all instances, as shown in step 5 of the execution_table.

Can I use a reusable element before creating it?

No, you must first create the reusable element (step 3) before using it on other pages (step 4).

What happens if I don't make an element reusable?

It stays unique to that page and changes won't affect other pages, as seen when the button remains only on 'Home' page.

Visual Quiz - 3 Questions

Look at the execution_table at step 4, what happens when 'Main Header' is used on the 'About' page?

A 'Main Header' is deleted from 'Home' page

B 'Main Header' becomes unique to 'About' page

C 'Main Header' appears on 'About' page

D No change occurs

💡 Hint

Check the 'Result' column in step 4 of the execution_table.

At which step does the reusable element get created?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Look for the action 'Make reusable' in the execution_table.

If you update the reusable element's color at step 5, what happens to the 'Header' on the 'Home' page?

A It disappears

B It changes color to match the update

C It stays the same color

D It duplicates

💡 Hint

Refer to the 'Result' column in step 5 of the execution_table and variable_tracker for 'Elements on Home'.

Concept Snapshot

Pages hold content and elements.
Reusable elements are saved parts you can use on many pages.
Create reusable elements to save time and keep design consistent.
Updating a reusable element changes it everywhere it is used.
Use reusable elements to make editing easier and faster.

Full Transcript

This lesson shows how to create pages and add elements. You can choose to make some elements reusable, which means you save them once and use them on many pages. When you update a reusable element, the change appears on all pages using it. This saves time and keeps your design consistent. The execution table walks through creating a page, adding elements, making one reusable, using it on another page, and updating it. The variable tracker shows how pages and elements change step by step. Key moments clarify common confusions about reuse and updates. The quiz tests your understanding of these steps.