Steps to Add a Codepen to Bricks Builder
- Locate the Codepen you want to add to your website
- Add a Code Widget to your Bricks page
In Bricks Builder, navigate to your elements and select the Code Widget. Drag and drop it into the desired container on your page.
- Copy the HTML from the Codepen
Go back to your Codepen and copy all the HTML code.
- Paste the HTML into the Code Widget
In Bricks Builder, paste the copied HTML into the Code Widget. Click on “Execute Code” to render the HTML on your page.
- Add the CSS from the Codepen
Copy the CSS from the Codepen. In the Code Widget, type
<style></style>at the bottom of the HTML code. Paste the CSS code between these tags.
- Add the external JS library
In the Codepen, locate the external JS library in the JS section. Copy the URL of the library. In the Code Widget, find the closing
</body>tag in the HTML code. Above this tag, type
<script src=""></script>. Paste the URL of the JS library between the quotes in the
- Save and view your page
Click “Save” in Bricks Builder and view your live page to see the Codepen in action.
When should you Add a Codepen to Bricks Builder
Adding a Codepen to your Bricks Builder website can be beneficial in several scenarios. For instance, if you find a Codepen that includes a unique navigation menu, an interactive animation, or a dynamic form, you can integrate it into your site to enhance its functionality and user experience. Codepen is a treasure trove of creative front-end ideas, and integrating these into your site can help it stand out.
- Codepen not displaying correctly
- Animations or movements not working
This is likely due to the external JS library not being properly added. Make sure to add the
<script src=""></script>tag with the URL of the library above the closing
</body>tag in the HTML code.