Da estilo al contenido del constructor con el CSS de tu tema.

Aprende DXPR BuilderGestionar el sitioAdapta tu marca

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.

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:

    global-styling:
  css:
    theme:
      css/custom.css: {}

  3. Carga la biblioteca en cada página desde mytheme.info.yml:

    libraries:
  - mytheme/global-styling

  4. Escribe una regla para un nombre de clase propio:

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

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?