Arquitectura CSS.
El contenido del constructor es marcado Bootstrap 5 más un pequeño conjunto de
clases az-. Saber qué clases aparecen en páginas publicadas, y cuáles
solo existen mientras el editor funciona, dice a qué puede apuntar el CSS de
tu tema.
Clases en páginas publicadas
Diseño
| Marcado | Clases |
|---|---|
| Section | az-section, con container o container-fluid dentro |
| Row | La fila Bootstrap row |
| Column | Clases col-* de Bootstrap, una por breakpoint |
| Content element | Una clase por tipo de elemento, como az-text, az-image o az-images-carousel; Social Links usa st-social. La mayoría también lleva az-element; Button e Image no |
El contenido guardado por versiones viejas aún puede llevar az-row y
az-column. El editor los reconoce y los deja fuera la próxima
vez que la fila o columna se guarda.
Modificadores
| Clase | Fijada por |
|---|---|
az-row--equal-height |
Equal-height columns en una fila; sin él la fila recibe align-items-start |
az-row--reverse-horizontal |
Mirror row en una fila |
az-util-vertical-centering |
Vertical centering en una sección o columna |
Cuadrícula Bootstrap
Las columnas usan las clases de cuadrícula de Bootstrap:
| Clase | Ancho |
|---|---|
col |
Comparte la fila a partes iguales |
col-6 |
50% |
col-md-4 |
33% desde 768 px |
col-lg-3 |
25% desde 992 px |
Escribe CSS personalizado
- Limita reglas propias del constructor a
.az-sectiono a las clases de tipo, como.az-texto.az-button..az-elementno alcanza a Button ni Image. - No anules las clases de cuadrícula de Bootstrap; el editor fija anchos de columna con ellas.
- Para estilo puntual, añade una clase en el campo HTML classes del elemento y da estilo a esa clase.
Clases solo del editor
Estas clases solo existen mientras el editor funciona, así que las páginas publicadas nunca las cumplen:
| Clase | Dónde |
|---|---|
dxpr-builder-ui |
Cada pieza de interfaz del editor: barras de controles, menús, diálogos |
controls |
La barra de controles de un elemento |
dxpr-editor |
El contenedor de campo en cada modo de vista salvo Preview |
az-ctnr |
El contenedor de campo una vez que el editor arrancó |
az-sortable-placeholder |
El marcador de destino mientras arrastras un elemento |
Los estilos propios del editor están en dxpr_builder/css/dxpr_builder_backend.css,
compilados desde dxpr_builder/sass/dxpr_builder_backend.scss.
Versión de Bootstrap
El constructor escribe marcado Bootstrap 5. Si tu tema no carga Bootstrap 5, fija Sideload Bootstrap files en Bootstrap 5 en DXPR Studio > DXPR Builder > General Settings, dentro de Bootstrap. None (theme provides Bootstrap) asume que tu tema lo carga.