--- url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/customization/utility-classes' title: 'Clases de utilidades | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:17:28+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Cada elemento tiene un campo HTML classes con una lista de clases con nombre. Las utilidades de Bootstrap 5 y las sombras están integradas. Tu tema puede añadir un grupo propio con su .info.yml, y un módulo con un hook de alteración. Esta página explica qué contiene la lista y cómo registras tus propias clases, para que las personas que editan escojan un aspecto de marca por nombre en lugar de escribir nombres de clases.' tags: - 'Je huisstijl toepassen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:17:28+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Clases de utilidades' description: 'Cada elemento tiene un campo HTML classes con una lista de clases con nombre. Las utilidades de Bootstrap 5 y las sombras están integradas. Tu tema puede añadir un grupo propio con su .info.yml, y un módulo con un hook de alteración. Esta página explica qué contiene la lista y cómo registras tus propias clases, para que las personas que editan escojan un aspecto de marca por nombre en lugar de escribir nombres de clases.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:17:28+0000' dateModified: '2026-10-24T11:17:28+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/customization/utility-classes' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/customization/utility-classes' description: 'Cada elemento tiene un campo HTML classes con una lista de clases con nombre. Las utilidades de Bootstrap 5 y las sombras están integradas. Tu tema puede añadir un grupo propio con su .info.yml, y un módulo con un hook de alteración. Esta página explica qué contiene la lista y cómo registras tus propias clases, para que las personas que editan escojan un aspecto de marca por nombre en lugar de escribir nombres de clases.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://dxpr.com/es' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: es --- [Help Center](/es/hc)/[Documentation](/es/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/hc/documentation/learn-dxpr-builder/customization) # Clases de utilidades. Learn DXPR BuilderManage the siteJe huisstijl toepassen ## In this guide Related guides - [Da estilo al contenido del constructor con el CSS de tu tema](/es/hc/documentation/learn-dxpr-builder/customization/custom-css) - [Añade estilos de marca y botones al editor de texto](/es/hc/documentation/learn-dxpr-builder/customization/text-editor) - [Referencia de la API de hooks](/es/hc/documentation/learn-dxpr-builder/development/hooks-api) Cada elemento tiene un campo **HTML classes** con una lista de clases con nombre. Las utilidades de Bootstrap 5 y las sombras están integradas. Tu tema puede añadir un grupo propio con su `.info.yml`, y un módulo con un hook de alteración. Esta página explica qué contiene la lista y cómo registras tus propias clases, para que las personas que editan escojan un aspecto de marca por nombre en lugar de escribir nombres de clases. ## Aplica una clase 1. Abre los ajustes del elemento y busca **HTML classes** al final del panel **General**. 2. Haz clic en el recuadro y escoge una clase de la lista. Escribir en el recuadro filtra la lista. 3. Para introducir una clase que no está en la lista, haz clic en **Edit as text** y escríbela. 4. Haz clic en **Save** en el diálogo, y luego en **Save** en la barra del constructor. Las clases van al atributo `class` del elemento en el HTML guardado. [ID y clases HTML](/hc/documentation/learn-dxpr-builder/element-settings/custom-css) guía a quienes editan por los usos comunes. ## Qué contiene la lista El editor crea la lista al arrancar. Fusiona tres orígenes en este orden: 1. La lista integrada. Tiene un grupo **Drop shadows**, un grupo corto **Bootstrap classes** y las utilidades de Bootstrap 5, agrupadas por tarea: **Display & Visibility**, **Responsive Visibility**, **Margins**, **Padding**, **Text Colors** y más. 2. Un grupo por cada tema instalado cuyo `.info.yml` tiene una clave `dxpr_builder_classes`. El grupo lleva el nombre del tema. 3. Cambios desde módulos; consulta [Registra clases desde un módulo](#register-classes-from-a-module). Así que cada sitio tiene clases de espacio, como `mt-3` y `px-4`, de visualización, como `d-none`, y de texto, como `text-center` y `fw-bold`. No configuras nada para ellas. ## Registra clases en un tema Añade un mapeo `dxpr_builder_classes` al `.info.yml` del tema. Cada clave es un nombre de clase, o varios separados por espacios; cada valor es la etiqueta que ven las personas que editan. DXPR Theme registra sus clases así: ```yaml dxpr_builder_classes: dxpr-theme-form-inline: 'Inline Form' dxpr-theme-util-background-accent1: 'Background color: DXPR Theme accent1' dxpr-theme-util-border-accent1: 'Border color: DXPR Theme accent1' ``` 1. Añade el mapeo a `themes/custom/mytheme/mytheme.info.yml`: ```yaml dxpr_builder_classes: brand-card: 'Brand card' brand-card shadow-lg: 'Brand card with shadow' ``` 2. Escribe el CSS de las clases en una biblioteca que el tema carga en cada página; consulta [CSS personalizado](/hc/documentation/learn-dxpr-builder/customization/custom-css). 3. Limpia cachés con `drush cr`, para que Drupal lea de nuevo el archivo info. 4. Abre los ajustes de un elemento y comprueba que **HTML classes** muestra un grupo con el nombre de tu tema y las dos entradas. Cada tema instalado con la clave añade su grupo, no solo el tema predeterminado. El grupo siempre lleva el nombre del tema; el archivo info no puede renombrarlo. ## Registra clases desde un módulo Un módulo personalizado puede añadir clases, o quitar clases que registró un tema, con un hook de alteración. No puede quitar las entradas integradas de Bootstrap, porque el editor las añade en el navegador. El código está en [Referencia de la API de hooks](/hc/documentation/learn-dxpr-builder/development/hooks-api#hook_dxpr_builder_classes_alter). ## Versión de Bootstrap La lista integrada es Bootstrap 5. Si tu tema no carga Bootstrap 5, fija **Sideload Bootstrap files** en **Bootstrap 5** dentro de **Bootstrap** en **DXPR Studio** > **DXPR Builder** > **General Settings**, para que las clases tengan CSS detrás. Consulta [Rendimiento](/hc/documentation/learn-dxpr-builder/advanced/performance#bootstrap-sideloading) para ver lo que eso carga. ## Si no ves tus clases - **El grupo de tu tema falta en las HTML classes.** Drupal aún usa la copia vieja del archivo info del tema. Haz clic en **Clear all caches** en **Configuration** > **Development** > **Performance** (`/admin/config/development/performance`), o ejecuta `drush cr`. - **Un tema con la clave no añade ningún grupo.** Solo cuentan los temas instalados. Instala el tema en **Appearance** (`/admin/appearance`); no necesita ser el tema predeterminado. - **El elemento se ve igual tras elegir una clase.** Ningún CSS de esa clase se carga en la página. Añade las reglas a una biblioteca que tu tema carga; consulta [CSS personalizado](/hc/documentation/learn-dxpr-builder/customization/custom-css). Para clases Bootstrap, consulta [Versión de Bootstrap](#bootstrap-version). ## ¿Qué sigue? - [CSS personalizado](/hc/documentation/learn-dxpr-builder/customization/custom-css): escribe las reglas detrás de tus clases. - [Editor de texto](/hc/documentation/learn-dxpr-builder/customization/text-editor): ofrece clases para párrafos y palabras en la lista **Styles**. - [Referencia de la API de hooks](/hc/documentation/learn-dxpr-builder/development/hooks-api): los demás hooks que ofrece DXPR Builder.