Element Settings

This guide provides best practices for working with element settings, ensuring your components are semantic, accessible, and easily integrated into your React applications.

Element tags

Some Webflow elements let you override or bind their HTML tag at runtime. This is useful for keeping your exported components semantic and accessible without creating duplicate versions of the same component.

Headings

Heading elements in Webflow have a Tag setting. With components, you can bind this setting to a prop, then set the tag at runtime. This allows you to reuse the same Heading component across different contexts, while keeping your document outline accessible and SEO-friendly.

In React, you can set the tag at runtime by passing the prop to the component.

my-component.jsx

1
<Heading headingTag="h1" />

Div blocks

div blocks don’t require any additional setup in the Designer. Exported components expose an as prop automatically, letting you choose the rendered tag at runtime.

1
<DynamicDiv as="section" />

This approach allows you to make generic containers semantic, and improve accessibility and markup quality without duplicating components.

Custom identifiers

You can add custom IDs and custom attributes to elements in the Designer. DevLink automatically transforms custom IDs into safe, namespaced selectors using CSS Modules, preventing style conflicts when components are used in larger React apps.

DevLink transforms custom IDs into the following format upon export:

<ComponentName>_<custom-id>__<unique-identifier>

For example, a custom ID of featured-section on a Grid element within a Hero component may become: Hero_featured-section__abc123

This ensures that each identifier is unique, even if multiple instances of the component appear on the page.

Dynamic IDs

Some Webflow elements (like Grid or Quick Stack) use built-in IDs as styling hooks. These IDs appear in the Style Panel with a pink marker. If you make them dynamic in React, Webflow’s generated CSS selectors will no longer match, and your styling will break.

1
// ❌ This breaks Webflow’s generated CSS
2
<Grid id={sectionId} />

Custom attributes

Instead of replacing IDs, attach your own custom attributes. This keeps Webflow’s CSS intact while still giving you dynamic identifiers for React logic.

Adding custom attributes in Webflow

Select the element you want to add a custom attribute to, then navigate to the element’s settings panel. Scroll down to the Custom Attributes section and click the + button to add a custom attribute with a name and value.

1
import { Grid } from "@/devlink/Grid";
2
import { ProductCard } from "./ProductCard";
3
4
interface ProductGridProps {
5
  products: Product[];
6
  category: string;
7
}
8
9
export function ProductGrid({ products, category }: ProductGridProps) {
10
  return (
11
    <Grid 
12
      id="product-grid-123" // Keep original Webflow ID for styling
13
      data-category={category} // ✅ Use custom attributes for dynamic data
14
      data-product-count={products.length}
15
    >
16
      {products.map(product => (
17
        <ProductCard key={product.id} product={product} />
18
      ))}
19
    </Grid>
20
  );
21
}