Quick summary
Webflow's Code Block feature lets you embed custom code directly into your project without leaving the visual editor. You can control language styling, themes, and element settings all from within the Webflow Designer.
Steps
- Open the Add Elements menu from the left sidebar.
- Search for the Code Block element or scroll down to find it.
- Drag and drop the Code Block element to your desired location in the project.
- A Code Block Editor window will open automatically upon dropping the element.
- Enter the code you wish to display in the editor.
- When finished, click Save & Close to confirm your code.
- Confirm the code block is now inserted in your project.
- Select the code block and click the small gear icon next to its name to access additional settings.
- Use the settings menu to modify code, select a language for styling, and pick a theme.
- Use the language options to choose from a comprehensive list of languages for styling and readability.
- Click Show All Settings to control alignment, classes, and properties via the right sidebar.
- Make any final changes and you're done — your custom code is live in your Webflow project.
