--- url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/design/colour-and-branding' title: 'Usa los colores de tu marca | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:17:50+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Aplica los colores de tu marca a secciones, texto y botones para que cada página parezca del mismo sitio. Cada campo de color en DXPR Builder muestra la paleta de tu tema como muestras, así que escoges colores de marca en lugar de adivinar códigos. El ejemplo da a una sección tu color primario de marca con texto blanco. El vídeo sigue los pasos de abajo: colorea una sección con tu muestra de marca y pone su texto en blanco. tags: - 'Design guides' 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:50+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Usa los colores de tu marca' description: |- Aplica los colores de tu marca a secciones, texto y botones para que cada página parezca del mismo sitio. Cada campo de color en DXPR Builder muestra la paleta de tu tema como muestras, así que escoges colores de marca en lugar de adivinar códigos. El ejemplo da a una sección tu color primario de marca con texto blanco. El vídeo sigue los pasos de abajo: colorea una sección con tu muestra de marca y pone su texto en blanco. 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:50+0000' dateModified: '2026-10-24T11:17:50+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/design/colour-and-branding' articleSection: 'Guías de diseño' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/design/colour-and-branding' description: |- Aplica los colores de tu marca a secciones, texto y botones para que cada página parezca del mismo sitio. Cada campo de color en DXPR Builder muestra la paleta de tu tema como muestras, así que escoges colores de marca en lugar de adivinar códigos. El ejemplo da a una sección tu color primario de marca con texto blanco. El vídeo sigue los pasos de abajo: colorea una sección con tu muestra de marca y pone su texto en blanco. 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 --- [Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentation) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Crear páginas](/es/hc/documentation/learn-dxpr-builder/build) /[Da estilo a tus elementos](/es/hc/documentation/learn-dxpr-builder/element-settings) /[Guías de diseño](/es/hc/documentation/learn-dxpr-builder/design/overview) # Usa los colores de tu marca. Aprende DXPR BuilderCrear páginasDa estilo a tus elementosGuías de diseño ## En esta guía Guías relacionadas - [Haz que los elementos reaccionen en hover](/es/hc/documentation/learn-dxpr-builder/design/hover-effects) - [Da estilo a tus tarjetas](/es/hc/documentation/learn-dxpr-builder/design/card-styles) - [Da estilo al contenido del constructor con el CSS de tu tema](/es/hc/documentation/learn-dxpr-builder/customization/custom-css) Aplica los colores de tu marca a secciones, texto y botones para que cada página parezca del mismo sitio. Cada campo de color en DXPR Builder muestra la paleta de tu tema como muestras, así que escoges colores de marca en lugar de adivinar códigos. El ejemplo da a una sección tu color primario de marca con texto blanco. El vídeo sigue los pasos de abajo: colorea una sección con tu muestra de marca y pone su texto en blanco. ## Antes de empezar - Los colores de tu marca viven en el tema. Con DXPR Theme, fíjalos en **Appearance** > **Settings** > **DXPR Theme** (`/admin/appearance/settings/dxpr_theme`), en el panel **Colors**. - DXPR Builder muestra los diez primeros colores distintos de esa paleta como muestras. ## Colorea una sección 1. Pasa sobre la sección, abre **More** y elige **Settings**. 2. Abre el panel **Style**. 3. Haz clic en el botón de color de **Background**. El selector de color se abre con tus muestras. 4. Haz clic en tu muestra primaria de marca. 5. Haz clic en el botón de color de **Font color** y escoge blanco. 6. Haz clic en **Save**. El texto del párrafo pasa a blanco; los encabezados conservan el color de encabezado del tema. 7. Para poner un encabezado en blanco también, abre los **Settings** de su elemento **Text**, escoge blanco para **Font color** en su panel **Style** y haz clic en **Save**. ## Lo que ves La sección se rellena con tu color de marca, y su texto de párrafo y encabezado pasan a blanco. Las mismas muestras aparecen en cada campo de color. Incluye los paneles **Style** y **Hover style**, y el **Start color** y **End color** de un fondo **Gradient** de sección. Para usar un color fuera de la paleta, escribe su código en el campo de texto del selector, por ejemplo `#2196F3`. Mueve el deslizador de opacidad para un color translúcido. **Clear** quita el color. ## Mantén los colores vinculados al tema Una muestra copia el código del color en el elemento. Si cambias la paleta del tema después, ese elemento conserva el color viejo. Para que un elemento siga la paleta, usa una clase de color. Abre los **Settings** del elemento y escoge un chip en **HTML classes**: | Chip | Qué hace | |---|---| | **Primary background**, **Secondary background** y otros | Colores Bootstrap de tu tema | | **Primary text color**, **Secondary text color** y otros | Colores de texto Bootstrap de tu tema | | **Background color: DXPR Theme primary** | El color **Primary** de DXPR Theme, con su color de texto correspondiente | | **Text color: DXPR Theme accent1** | El color **Secondary** de DXPR Theme para texto | Los chips **DXPR Theme** solo aparecen cuando DXPR Theme está habilitado. ## Campos de color por elemento | Dónde | Qué colorea | |---|---| | **Style** (panel): **Font color**, **Border color**, **Background** | El propio elemento | | **Hover style** (panel): los mismos campos | El elemento mientras el puntero está en él | | **Button**: **Type** | Un esquema de color de botón ya hecho | | **Card**: **Type** | El fondo y el texto de toda la tarjeta | | **Alert**: **Type** | **Success**, **Info**, **Warning** o **Danger** | | **Section**: **Background effects** > **Gradient** | Una fusión de dos colores | ## Color legible - Mantén contraste suficiente entre texto y fondo. WCAG 2.1 Nivel AA pide al menos 4.5 a 1 para texto normal. - No uses solo el color para transmitir significado; acompáñalo con una etiqueta o un icono. - Alterna fondos de sección, como blanco, gris claro y tu color de marca, para dar ritmo a páginas largas. ## Si no ves tus colores - **El selector de color no muestra muestras.** El tema predeterminado de tu sitio no ofrece paleta de color. Escribe tus códigos de color, o usa un tema con paleta, como DXPR Theme. - **Un elemento conserva su color tras cambiar la paleta del tema.** Una muestra guarda un código de color fijo. Escoge la muestra nueva, o cambia a un chip de color en **HTML classes**, que sigue la paleta. - **Background o Font color no tienen efecto en una tarjeta.** Un **Type** de tarjeta distinto de **Default** fija sus colores con clases del tema que ganan. Fija primero **Type** en **Default**. ## ¿Qué sigue? - [Haz que los elementos reaccionen en hover](/hc/documentation/learn-dxpr-builder/design/hover-effects): cambia colores cuando las visitas señalan un elemento. - [Da estilo a tus tarjetas](/hc/documentation/learn-dxpr-builder/design/card-styles): aplica tus colores a tarjetas. - [CSS personalizado](/hc/documentation/learn-dxpr-builder/customization/custom-css): fija reglas de marca que los paneles no cubren.