Añade estilos de marca y botones al editor de texto.

Aprende DXPR BuilderGestionar el sitioAdapta tu marca

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.

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.

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:

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 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.

Barra de texto de un elemento Text cuyo botón Styles indica Lead, sobre el párrafo con el cursor, ya en el estilo Lead más grande sobre un párrafo normal

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.

¿Qué sigue?