--- url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/personalizacion/editor-texto' title: 'Añade estilos de marca y botones al editor de texto | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:17:24+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Cuando las personas que editan hacen clic en un texto en DXPR Builder, aparece una barra. Puedes llenar su lista Styles con los estilos de tu marca, como un párrafo de entradilla o una frase destacada. También puedes elegir qué botones ve cada rol. Así aplican un aspecto de marca con un clic en lugar de fijar tamaños y colores a mano. Las fuentes vienen de tu tema; consulta Fuentes personalizadas.' tags: - 'Match your brand' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Añade estilos de marca y botones al editor de texto' description: 'Cuando las personas que editan hacen clic en un texto en DXPR Builder, aparece una barra. Puedes llenar su lista Styles con los estilos de tu marca, como un párrafo de entradilla o una frase destacada. También puedes elegir qué botones ve cada rol. Así aplican un aspecto de marca con un clic en lugar de fijar tamaños y colores a mano. Las fuentes vienen de tu tema; consulta Fuentes personalizadas.' 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:24+0000' dateModified: '2026-10-24T17:19:22+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/documentacion/aprender-dxpr-builder/personalizacion/editor-texto' articleSection: 'Adapta tu marca' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/personalizacion/editor-texto' description: 'Cuando las personas que editan hacen clic en un texto en DXPR Builder, aparece una barra. Puedes llenar su lista Styles con los estilos de tu marca, como un párrafo de entradilla o una frase destacada. También puedes elegir qué botones ve cada rol. Así aplican un aspecto de marca con un clic en lugar de fijar tamaños y colores a mano. Las fuentes vienen de tu tema; consulta Fuentes personalizadas.' 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/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Gestionar el sitio](/es/hc/documentation/learn-dxpr-builder/manage) /[Adapta tu marca](/es/hc/documentation/learn-dxpr-builder/customization) # Añade estilos de marca y botones al editor de texto. Aprende DXPR BuilderGestionar el sitioAdapta tu marca ## En esta guía Guías relacionadas - [Da estilo al contenido del constructor con el CSS de tu tema](/es/hc/documentacion/aprender-dxpr-builder/personalizacion/css-personalizado) - [Clases de utilidades](/es/hc/documentacion/aprender-dxpr-builder/personalizacion/clases-utilidades) - [Elige qué ve cada rol en el constructor](/es/hc/documentacion/aprender-dxpr-builder/administracion/perfiles-usuario-administracion) Cuando las personas que editan hacen clic en un texto en DXPR Builder, aparece una barra. Puedes llenar su lista **Styles** con los estilos de tu marca, como un párrafo de entradilla o una frase destacada. También puedes elegir qué botones ve cada rol. Así aplican un aspecto de marca con un clic en lugar de fijar tamaños y colores a mano. Las fuentes vienen de tu tema; consulta [Fuentes personalizadas](/es/hc/documentacion/aprender-dxpr-builder/personalizacion/fuentes-personalizadas). ## Antes de empezar - Para editar estilos, necesitas **Administer DXPR Builder configuration**. - Para editar botones de la barra, necesitas **Administer dxpr builder profile**. - Cada estilo necesita CSS detrás. Clases de Bootstrap 5 como `lead` funcionan cuando la página carga Bootstrap 5. Tus propias clases necesitan una regla en el tema; consulta [CSS personalizado](/es/hc/documentacion/aprender-dxpr-builder/personalizacion/css-personalizado). ## Configuración 1. Ve a **DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`). 2. Expande **Text Editor**. El recuadro **Custom styles** ya enumera los estilos que trae DXPR Builder, uno por línea. 3. Añade una línea por estilo en la forma `Label=element.class`, y borra las líneas que no quieres. 4. Haz clic en **Save settings**. 5. Abre una página en el constructor, o recárgala si está abierta, y haz clic en un texto. 6. Haz clic en **Styles** en la barra y elige tu estilo. Estas líneas añaden cuatro estilos: ```text Lead=p.lead Event date=span.text-primary.fw-semibold Callout=p.border-start.border-primary.border-4.ps-3 Sassy Title=h1.sassy-title ``` Cada línea tiene tres partes: - La **etiqueta** antes de `=` es el nombre que ven las personas que editan en la lista. - El **elemento** tras `=` decide lo que cubre el estilo. Un elemento de bloque como `p`, `h2` o `blockquote` da estilo a un párrafo o encabezado entero. Un elemento en línea como `span`, `mark` o `code` envuelve solo las palabras seleccionadas. - Cada **clase** sigue a un punto. Añade más clases con más puntos, como en `Callout` arriba. Los nombres de elementos usan solo letras y dígitos. Los nombres de clases usan letras, dígitos, guiones y guiones bajos. Para recuperar la lista incluida, vacía el recuadro y guarda. ## Botones de la barra por rol 1. Ve a **DXPR Studio** > **DXPR Builder** > **User Profiles** (`/admin/dxpr_studio/dxpr_builder/profile`) y haz clic en **Edit** junto al perfil del rol. 2. Expande **Text editor buttons (inline editing)**. Marca los botones para texto que editas en la página. 3. Expande **Text editor buttons (modal editing)**. Marca los botones para recuadros de texto en un diálogo de ajustes. 4. Haz clic en **Save**. La edición en línea cubre los elementos Text, Alert y Blockquote. Mantén **Font style** marcado en ambos grupos para mostrar tus estilos personalizados; es el nombre del perfil para la lista **Styles**. Si desmarcas cada botón de un grupo, esa barra vuelve al conjunto integrado. [User profiles](/es/hc/documentacion/aprender-dxpr-builder/administracion/perfiles-usuario-administracion) explica qué perfil se aplica a quién. ## Lo que ves **Styles** en la barra abre un panel con dos grupos. **Block styles** guarda los estilos para párrafos y encabezados enteros, **Text styles** los de palabras seleccionadas. Después de elegir un estilo, el botón muestra su nombre, o **Multiple styles** cuando se aplican varios. El editor guarda el elemento y sus clases en el HTML de la página, así que las visitas ven el mismo aspecto. Un estilo de bloque solo está activo en su propio elemento: `Sassy Title` necesita el cursor en un **Heading 1**. ## Ajustes Los 36 botones aparecen en ambos grupos. Un perfil nuevo empieza con estos marcados: | Botón | Nombre de máquina | Predeterminado en línea | Predeterminado modal | |---|---|:-:|:-:| | **AI Assistant**, **AI Tone of Voice** | `aiAgentButton`, `aiAgentToneButton` | sí | sí | | **Bold**, **Italic** | `bold`, `italic` | sí | sí | | **Underline**, **Strike through** | `underline`, `strikethrough` | | sí | | **Superscript**, **Subscript** | `superscript`, `subscript` | | sí | | **Remove format** | `removeFormat` | sí | sí | | **Text color** | `fontColor` | sí | sí | | **Background color** | `fontBackgroundColor` | | | | **Font size** | `fontSize` | sí | sí | | **Font family** | `fontFamily` | | | | **HTML block format** | `heading` | sí | sí | | **Font style** (la lista **Styles**) | `style` | sí | sí | | **Align left**, **Center**, **Align right**, **Justify** | `alignment:left`, `alignment:center`, `alignment:right`, `alignment:justify` | sí | sí | | **Insert/Remove Bullet list** | `bulletedList` | sí | sí | | **Insert/Remove Numbered list** | `numberedList` | | sí | | **Outdent**, **Indent** | `outdent`, `indent` | | sí | | **Block quote** | `blockQuote` | | sí | | **Link**, **Image**, **Table** | `link`, `insertImage`, `insertTable` | sí | sí | | **Horizontal rule**, **Character map** | `horizontalLine`, `specialCharacters` | | sí | | **Source code**, **Show blocks** | `sourceEditing`, `showBlocks` | | sí | | **Select all**, **Replace**, **Accessibility help** | `selectAll`, `findAndReplace`, `accessibilityHelp` | | | | **Undo**, **Redo** | `undo`, `redo` | sí | sí | Las personas usuarias cuyos roles no corresponden a ningún perfil habilitado reciben las barras integradas. En línea, son **Bold**, **Italic**, **Remove format**, **HTML block format**, **Font style**, ambas listas, **Link**, **Image**, **Table**, **Undo** y **Redo**. La barra modal añade los botones de subrayado, tachado, scripts, alineación, sangría, color y tamaño. También añade **Block quote**, **Horizontal rule**, **Character map**, **Source code** y **Show blocks**. Con la IA activada, ambas reciben los dos botones de IA. **Font family** ofrece las fuentes seguras web estándar de CKEditor, no las fuentes de tu tema. ## Si no ves tu estilo - **La lista Styles solo muestra los estilos incluidos.** Una línea rompe el formato, o una línea en blanco entre dos estilos, así que DXPR Builder ignora toda la lista. Corrígela en **Text Editor** desde `/admin/dxpr_studio/dxpr_builder/settings` y guarda. - **Your style is greyed out.** Un estilo de bloque solo funciona en su propio elemento: `h1.sassy-title` necesita un **Heading 1**. Cambia primero el bloque con la lista de encabezados, o define el estilo para `p`. - **No hay ningún botón Styles en la barra.** El perfil del editor tiene **Font style** sin marcar. Márcalo en ambos grupos de botones en `/admin/dxpr_studio/dxpr_builder/profile`. - **El estilo se aplica, pero el texto se ve igual.** El tema no tiene CSS para la clase, o Bootstrap 5 no está cargado. Añade la regla al tema, o fija **Sideload Bootstrap files** en **Bootstrap 5** en **Bootstrap** en la página General Settings. - **Las personas que editan ven el estilo; las visitas no.** **Apply text format filters to frontend content** está activado en **Text Filters**, y el formato de texto del campo quita atributos `class`. Desactiva la opción, o dale al campo un formato que conserva clases; consulta [Las visitas ven algo distinto](/es/hc/documentacion/aprender-dxpr-builder/solucion-problemas/visitas-ven-otra-cosa). ## ¿Qué sigue? - [CSS personalizado](/es/hc/documentacion/aprender-dxpr-builder/personalizacion/css-personalizado): escribe las reglas de tema detrás de tus clases de estilo. - [Clases de utilidades](/es/hc/documentacion/aprender-dxpr-builder/personalizacion/clases-utilidades): ofrece clases para elementos enteros en la lista **HTML classes**. - [User profiles](/es/hc/documentacion/aprender-dxpr-builder/administracion/perfiles-usuario-administracion): todo lo demás que controla un perfil.