Convert elements

Webflow's element conversion feature allows you to seamlessly convert between various element types, including block elements, typography elements, and inline text elements, without rebuilding them from scratch.

In this lesson, you'll learn:

1. How to convert block elements
2. How to convert typography elements
3. How to convert inline text elements

How to convert block elements

Block elements, such as div blocks, containers, grids, and flexboxes, can be easily converted to other block elements using the on-canvas menu or quick find.

To convert a block element:

1. Select the block element you want to convert on the canvas
2. Right-click the element
3. Hover over Convert to
4. Choose your desired block element type from the list of available conversions

Alternatively, you can use quick find to convert block elements:

1. Press Control + E (on Windows) or Command + E (on Mac) to open quick find
2. Type "Convert to" followed by the name of the desired block element type (e.g., "Convert to grid")
3. Press Enter

How to convert typography elements

Typography elements, such as headings, paragraphs, and block quotes, can be converted to other typography elements while preserving their existing content and styling.

To convert a typography element:

1. Select the typography element you want to convert on the canvas
2. Right-click the element
3. Hover over Convert to
4. Choose your desired typography element type from the list of available conversions

You can also use the quick find feature to convert typography elements, following the same steps as converting block elements.

How to convert inline text elements

Inline text elements, such as bold, italic, and span tags, can be converted to other inline text elements within a typography element.

To convert an inline text element:

1. Double-click the typography element containing the inline text element you want to convert
2. Select the inline text element
3. Right-click the selected inline text element
4. Hover over Convert to 
5. Choose your desired inline text element type from the list of available conversions

Note: The available conversions for inline text elements depend on the current formatting of the selected text. For example, if the text is already wrapped in a bold tag, the bold option won’t appear in the on-canvas menu.

And there you have it — a quicker way to convert elements in Webflow while keeping your designs consistent and your workflow efficient!