Snippets
The video gives you details about what snippets are and these design components can be used to enhance your web application.
1. Adding a Snippet
Go to Snippets, click Add Snippet and create your design element for the web page and choose Create Snippet.
![DrapCode SignUp Form](https://d3ab6ve1niai1p.cloudfront.net/product/app-new-images/dfb/dfb-snippets/1.png)
2. Dropping a Snippet
Go to Components and in Pre-built Sections choose the snippet for eg., footer (for this use case). Then drag-and-drop it onto the page. Similarly, you can choose as per your preference.
![DrapCode SignUp Form](https://d3ab6ve1niai1p.cloudfront.net/product/app-new-images/dfb/dfb-snippets/2.png)
3. Adding the Same Snippet on Every Page
Go to Pages choose Snippet. Then drag-and-drop it onto the new page.
![DrapCode SignUp Form](https://d3ab6ve1niai1p.cloudfront.net/product/app-new-images/dfb/dfb-snippets/3.png)
3.1 mention the Snippet to Duplicate
A pop-up will appear in which you can mention the snippet which you wnat to duplicate onto this page i.e., footer in this use case. Then Save.
![DrapCode SignUp Form](https://d3ab6ve1niai1p.cloudfront.net/product/app-new-images/dfb/dfb-snippets/3.1.jpg)
4. Preview the Snippet
Go to Preview and it will display the common snippet.
![DrapCode SignUp Form](https://d3ab6ve1niai1p.cloudfront.net/product/app-new-images/dfb/dfb-snippets/4.png)
5. Moving the Snippet Layer
Once you add a snippet its layer is created which you can add and move from the many layers by dragging-and-dropping.
![DrapCode SignUp Form](https://d3ab6ve1niai1p.cloudfront.net/product/app-new-images/dfb/dfb-snippets/5.png)
6. Modifying the Footer Element
You can modiy the main snippet and save. You can then preview its changes on every page that has that snippet.
![DrapCode SignUp Form](https://d3ab6ve1niai1p.cloudfront.net/product/app-new-images/dfb/dfb-snippets/6.jpg)