Try it: use the Code Embed element

Test real, working code in a layout using the Code Embed element

Let’s give it a try. In this series of practice activities, you’ll add a few small pieces of custom code to your site so you can see how code behaves at different levels: inside the layout, on a single page, and across the entire site.

First, you’ll embed something visible directly into your layout using the Code Embed element. We’ll use a simple embedded Google Map, and you can place it anywhere on the page.

You don’t need a finished site for this. You can use a blank project or clone a practice site from the Made in Webflow Marketplace, like this Webflow University cloneable.

Step 1: Add a Code Embed element

Open any page in your site.
Add a Code Embed element to the page.
Place it inside a section, container, or div so it has some space.

Step 2: Paste the embed code

Copy and paste the code below into the Code Embed element:

<iframe
  src="https://www.google.com/maps?q=New%20York%20City&output=embed"
  width="100%"
  height="300"
  style="border:0;"
  loading="lazy">
</iframe>

Save and close the embed.

Step 3: Preview the page

Enter Preview mode. If you don’t see the map right away, make sure Enable custom code is turned on.

You’ll know this worked if you see a map showing New York City embedded directly on the page.

Extras:

Try changing the height value in the code from 300 to 400 and see how it affects the layout.
Try changing the src url to change the city or address displayed on the map.