--- url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/development/theming' title: 'Aplicación de temas a DXPR Builder | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:12:10+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- El contenido del constructor es HTML normal en tu página, así tu tema le da estilo como a cualquier otro contenido. Esta página cubre qué hereda un tema, cómo añade clases al editor, y dónde poner reemplazos. A qué da estilo tu tema El contenido publicado del constructor hereda los estilos de tu tema: tags: - 'Bouw erop voort' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T00:12:10+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Aplicación de temas a DXPR Builder' description: |- El contenido del constructor es HTML normal en tu página, así tu tema le da estilo como a cualquier otro contenido. Esta página cubre qué hereda un tema, cómo añade clases al editor, y dónde poner reemplazos. A qué da estilo tu tema El contenido publicado del constructor hereda los estilos de tu tema: image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:12:10+0000' dateModified: '2026-10-24T00:12:10+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/development/theming' articleSection: 'Bouw erop voort' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/development/theming' description: |- El contenido del constructor es HTML normal en tu página, así tu tema le da estilo como a cualquier otro contenido. Esta página cubre qué hereda un tema, cómo añade clases al editor, y dónde poner reemplazos. A qué da estilo tu tema El contenido publicado del constructor hereda los estilos de tu tema: 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) /[Extend](/hc/documentation/learn-dxpr-builder/extend) /[Bouw erop voort](/hc/documentation/learn-dxpr-builder/extend/build-on-it) # Aplicación de temas a DXPR Builder. Learn DXPR BuilderExtendBouw erop voort ## In this guide El contenido del constructor es HTML normal en tu página, así tu tema le da estilo como a cualquier otro contenido. Esta página cubre qué hereda un tema, cómo añade clases al editor, y dónde poner reemplazos. ## A qué da estilo tu tema El contenido publicado del constructor hereda los estilos de tu tema: - Encabezados, texto del cuerpo y enlaces usan los estilos de tu tema. - El diseño usa filas y columnas Bootstrap 5, así un tema Bootstrap 5 encaja con él. Con cualquier otro tema, ve a **DXPR Studio > DXPR Builder > General Settings** y pon **Sideload Bootstrap files** en **Bootstrap 5**. - Cada elemento tiene una clase por tipo, como `az-card` o `az-button`, y la mayoría también lleva `az-element`; consulta [Arquitectura CSS](/hc/documentation/learn-dxpr-builder/development/css-architecture). ## Añadir clases al editor ### En el info.yml del tema Lista clases en `dxpr_builder_classes` en el `.info.yml` de tu tema. Aparecen en la lista **HTML classes** de cada elemento, en un grupo de opciones con el nombre del tema, mientras el tema está activo: ```yaml # mytheme.info.yml dxpr_builder_classes: brand-header: 'Brand header style' brand-cta: 'Call to action style' bg-gradient-primary: 'Primary gradient background' ``` ### Desde un módulo Implementa `hook_dxpr_builder_classes_alter()`. El nombre debe terminar en `_alter`; consulta [API de hooks](/hc/documentation/learn-dxpr-builder/development/hooks-api). ```php /** * Implements hook_dxpr_builder_classes_alter(). */ function mymodule_dxpr_builder_classes_alter(&$classes) { $classes['optgroup-custom'] = t('Custom Styles'); $classes['custom-card'] = t('Custom card'); $classes['custom-hero'] = t('Custom hero'); } ``` ## Estilos de botones El elemento Button ofrece los estilos Bootstrap Primary, Secondary, Success, Info, Warning, Danger, Link, Light y Dark. La lista es fija en el editor; el hook de carpetas de botones no la cambia. Para dar a los botones el aspecto de tu marca, da estilo a las clases `btn-*` de Bootstrap en tu tema, o añade tu propia clase con **HTML classes**. ## Reemplazos CSS Reemplaza la salida del constructor en el CSS de tu tema: ```css /* Section padding */ .az-section { padding-top: 4rem; padding-bottom: 4rem; } .az-card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } ``` Ajustes que hace una persona que edita en la pestaña Style se escriben como estilos en línea. Los estilos en línea superan reglas del tema que no usan `!important`, así usa CSS del tema para valores predeterminados y deja que las personas que editan los reemplacen por elemento. ## El editor y tu tema El editor se ejecuta en la página donde se muestra el campo, así dentro de tu tema de front-end, no el tema admin. Sus barras de controles, menús y diálogos llevan la clase `dxpr-builder-ui` y cargan su propia hoja de estilo, `dxpr_builder_backend.css`. Reglas del tema que apuntan selectores amplios como `button` o `.modal` aún pueden alcanzarlos; limita tus reglas a tus regiones de contenido para evitarlo.