--- url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/customization/custom-css' title: 'Da estilo al contenido del constructor con el CSS de tu tema | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:17:03+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'El contenido de DXPR Builder es parte de la página que renderiza tu tema, así que el CSS de tu tema le da estilo en el editor y en la página publicada. Usa esta página cuando un aspecto debe repetirse en muchos elementos o páginas, o cuando los ajustes del elemento no pueden producirlo. Terminas con una hoja de estilos en tu tema y una clase que las personas que editan pueden aplicar. Para un elemento, usa su diálogo de ajustes.' 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:03+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Da estilo al contenido del constructor con el CSS de tu tema' description: 'El contenido de DXPR Builder es parte de la página que renderiza tu tema, así que el CSS de tu tema le da estilo en el editor y en la página publicada. Usa esta página cuando un aspecto debe repetirse en muchos elementos o páginas, o cuando los ajustes del elemento no pueden producirlo. Terminas con una hoja de estilos en tu tema y una clase que las personas que editan pueden aplicar. Para un elemento, usa su diálogo de ajustes.' 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:03+0000' dateModified: '2026-10-24T11:17:03+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/custom-css' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/customization/custom-css' description: 'El contenido de DXPR Builder es parte de la página que renderiza tu tema, así que el CSS de tu tema le da estilo en el editor y en la página publicada. Usa esta página cuando un aspecto debe repetirse en muchos elementos o páginas, o cuando los ajustes del elemento no pueden producirlo. Terminas con una hoja de estilos en tu tema y una clase que las personas que editan pueden aplicar. Para un elemento, usa su diálogo de ajustes.' 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) # Da estilo al contenido del constructor con el CSS de tu tema. Learn DXPR BuilderManage the siteJe huisstijl toepassen ## In this guide Related guides - [Clases de utilidades](/es/hc/documentation/learn-dxpr-builder/customization/utility-classes) - [Usa las fuentes de tu marca en páginas del constructor](/es/hc/documentation/learn-dxpr-builder/customization/custom-fonts) - [Añade estilos de marca y botones al editor de texto](/es/hc/documentation/learn-dxpr-builder/customization/text-editor) El contenido de DXPR Builder es parte de la página que renderiza tu tema, así que el CSS de tu tema le da estilo en el editor y en la página publicada. Usa esta página cuando un aspecto debe repetirse en muchos elementos o páginas, o cuando los ajustes del elemento no pueden producirlo. Terminas con una hoja de estilos en tu tema y una clase que las personas que editan pueden aplicar. Para un elemento, usa su [diálogo de ajustes](/hc/documentation/learn-dxpr-builder/element-settings). ## Antes de empezar - Necesitas acceso a los archivos de tu tema y una forma de desplegarlos. - Usa un tema personalizado o un subtema. Una actualización de un tema contribuido reemplaza sus archivos, y tu CSS con ellos. ## Configuración 1. Crea `css/custom.css` en la carpeta de tu tema, por ejemplo `themes/custom/mytheme/css/custom.css`. 2. Declara el archivo en `mytheme.libraries.yml`: ```yaml global-styling: css: theme: css/custom.css: {} ``` 3. Carga la biblioteca en cada página desde `mytheme.info.yml`: ```yaml libraries: - mytheme/global-styling ``` 4. Escribe una regla para un nombre de clase propio: ```css .brand-hero { background: linear-gradient(135deg, #1a4d8f, #0f2a4d); color: #ffffff; } ``` 5. Limpia la caché en **Configuration** > **Development** > **Performance** (`/admin/config/development/performance`) con **Clear all caches**, o ejecuta `drush cr`. 6. En el constructor, abre los ajustes de una **Section** y añade `brand-hero` en **HTML classes**. [ID y clases HTML](/hc/documentation/learn-dxpr-builder/element-settings/custom-css) muestra cómo escribir una clase propia. Las personas que editan también pueden escoger la clase en la lista **HTML classes** una vez que tu tema la enumera ahí; consulta [Clases de utilidades](/hc/documentation/learn-dxpr-builder/customization/utility-classes). ## Lo que ves La sección toma el degradado y el texto blanco en cuanto añades la clase, porque el editor funciona en la página que renderiza tu tema. Las visitas ven lo mismo después de guardar la página. La clase se guarda en el HTML de la página, así que cambiar la regla después actualiza cada elemento que la tiene. ## Clases que escribe DXPR Builder Tu propia clase es el objetivo más seguro. Estas clases también están en el HTML guardado: | Selector | Coincide con | |---|---| | `.az-container` | el envoltorio de cada campo de DXPR Builder; también tiene `.dxpr-editor` mientras alguien lo edita | | `.az-section` | cada **Section**; dentro está un `.container`, o `.container-fluid` cuando **Full width** está activado | | `.row` | cada **Row**; DXPR Builder usa la propia clase de Bootstrap y no añade ningún `az-row` | | `.col-*` | cada columna, por ejemplo `.col-12.col-md-6`; no hay ningún `az-column` | | `.az-text`, `.az-image`, `.az-button`, `.az-card` | un tipo de elemento: `az-` más el nombre del elemento, como `.az-separator` para el Divider | | `.az-element` | la mayoría de los elementos de contenido, pero no Image, Icon ni Button | El panel **Style** escribe atributos `style` en línea, que ganan a una regla de clase en la misma propiedad. Las clases de utilidades de Bootstrap están marcadas `!important` y ganan a ambas. ## Si no ves el estilo - **La clase está en el elemento, pero nada cambia.** La biblioteca no está cargada, o la caché aún guarda el CSS viejo. Comprueba que `mytheme.info.yml` enumera la biblioteca, y limpia cachés en `/admin/config/development/performance`. - **Only some properties apply.** Un valor del panel **Style** en la misma propiedad gana. Limpia ese valor en el panel **Style** del elemento, o mueve todo el aspecto a tu clase. - **El estilo se ve en el editor, pero no para las visitas.** **Apply text format filters to frontend content** está activado, y el formato de texto del campo quita atributos `class`. Desactívalo en **Text Filters** desde `/admin/dxpr_studio/dxpr_builder/settings`, o permite clases en el formato. - **A rule for `.az-row` or `.az-column` never matches.** DXPR Builder no escribe esas clases. Apunta a `.row`, las clases `.col-*` o tu propia clase. ## ¿Qué sigue? - [Clases de utilidades](/hc/documentation/learn-dxpr-builder/customization/utility-classes): enumera tus clases en **HTML classes** para que las personas que editan las escojan. - [Fuentes personalizadas](/hc/documentation/learn-dxpr-builder/customization/custom-fonts): carga fuentes de marca de la misma forma. - [Editor de texto](/hc/documentation/learn-dxpr-builder/customization/text-editor): ofrece clases para párrafos y palabras en la lista **Styles**.