Skip to main content

Modules

Codepen Embed

Screenshot of Codepen Embed Module

The Codepen Embed is used to display projects (otherwise called pens) from Codepen into your webpages

You can check the demo page here

Settings

  • Codepen URL: The url to the project from Codepen. The default url is https://codepen.io/reatlat/pen/gOyGyMo.
  • Height: (Slider) The viewport of the module. The default is 500px, but you can set it to a value between 40px and 1440px.
  • Default Tabs: These are the different tabs you may allow to have open. You can select various tabs (default displays only result) like:
    • Result: The display result of the project.
    • HTML: The HTML tab.
    • CSS: The CSS tab.
    • JS: The JavaScript tab.

Keep it fresh, keep it clean — and when you’re ready for more power, visit the Knowledge Base for Pro Modules and full docs.