How To Edit Code In Webflow

‍

Here is how to display and edit code in Webflow:

1. Open the Add Elements menu from the left sidebar menu.
2. Search for the Code Block element or scroll down to find it.
3. Drag and drop this element to where you wish to add it in your project.
4. Upon dropping, a Code Block Editor window will open.
5. Enter the code you wish to display.
6. When done, click on Save & Close.
7. You now have a code block inserted in your project.
8. When selected, click on the small gear icon next to its name to view additional settings.
9. This menu allows you to modify code, select language for styling, pick a theme etc.
10. The language options from the menu allows you to pick from a very comprehensive list of languages for styling and readability.
11. To control other settings of this element such as alignment, classes, properties, click on Show All Settings which will simply take you to the right sidebar menu.
12. Make any changes you wish and you're done!