Elemento Box y selectores de etiqueta ampliados

Estamos actualizando la forma en que estructuras y diseñas en Webflow: un elemento Box con la etiqueta HTML como ajuste y selectores de etiqueta para muchos más elementos. El resultado es un marcado semántico con menos opciones y un lugar centralizado para aplicar estilos.

Elemento Box

Box es un elemento único para la estructura que utiliza la etiqueta HTML como ajuste, para que pierdas menos tiempo eligiendo entre elementos redundantes y más tiempo construyendo con el marcado correcto. Sustituye a Div Block, Section, Container, Columns, Grid, V Flex y H Flex en el panel Añadir.

Con Box, puedes:

• Buscar en Quick Find box, div o section, o buscar una etiqueta para añadir un Box con esa configuración ya aplicada, como Box <address>
• Leer la estructura de tu página en el Navegador, donde cada etiqueta semántica tiene su propio icono y nombre
• Configurar un Box como div, section, nav, header, footer, main, article, aside, address o figure, y cambiarlo en cualquier momento sin tener que reemplazar el elemento

Tus elementos existentes siguen funcionando y están ocultos en el panel Añadir, no eliminados. Un Box con la etiqueta Div publica el mismo resultado que un Div Block.

Selectores de etiqueta

Los selectores de etiqueta te permiten definir estilos base una sola vez, sobre una etiqueta HTML, como un selector de tipo en CSS. Hemos ampliado la compatibilidad a muchos más elementos, incluyendo div, section, nav, header, footer, main, article, aside, address, button, input, textarea, select, y más. Un Box toma su etiqueta de un ajuste, por lo que un Box configurado como section adopta tus estilos de Todas las secciones. Los nuevos selectores de etiqueta comienzan vacíos, así que tu sitio se ve igual hasta que cambias uno; además, dar estilo a Todos los Divs también afecta a un Box con la etiqueta Div.

Usa la API y el servidor MCP

Puedes crear y trabajar con elementos Box a través de la API del Diseñador y el servidor MCP de Webflow, igual que haces en Webflow. Para comprobar la etiqueta HTML de un Box, incluyendo elementos personalizados, usa getTag().

Tanto el nuevo elemento Box como los selectores de estilo de etiqueta ampliados están disponibles para cualquier persona con el rol de Diseñador, en cualquier plan, incluido el gratuito.