CSS-Architektur.
Builder-Inhalte sind Bootstrap-5-Markup plus ein kleiner Satz
az--Klassen. Zu wissen, welche Klassen auf veröffentlichten Seiten
erscheinen und welche nur existieren, während der Editor läuft, sagt
Ihnen, worauf Ihr Theme-CSS zielen kann.
Klassen auf veröffentlichten Seiten
Layout
| Markup | Klassen |
|---|---|
| Abschnitt | az-section, mit container oder container-fluid darin |
| Zeile | Bootstrap-row |
| Spalte | Bootstrap-col-*-Klassen, eine pro Breakpoint |
| Inhaltselement | Eine Klasse pro Elementtyp, etwa az-text, az-image oder az-images-carousel; Social Links nutzt st-social. Die meisten tragen außerdem az-element; Button und Image nicht |
Inhalte, die ältere Versionen gespeichert haben, können noch az-row und
az-column tragen. Der Editor erkennt sie und lässt sie beim nächsten
Speichern der Zeile oder Spalte weg.
Modifikatoren
| Klasse | Gesetzt von |
|---|---|
az-row--equal-height |
Equal-height columns auf einer Zeile; ohne es erhält die Zeile align-items-start |
az-row--reverse-horizontal |
Mirror row auf einer Zeile |
az-util-vertical-centering |
Vertical centering auf einem Abschnitt oder einer Spalte |
Bootstrap-Raster
Spalten nutzen die Rasterklassen von Bootstrap:
| Klasse | Breite |
|---|---|
col |
Teilt die Zeile gleichmäßig |
col-6 |
50 % |
col-md-4 |
33 % ab 768 px |
col-lg-3 |
25 % ab 992 px |
Eigenes CSS schreiben
- Grenzen Sie Builder-spezifische Regeln auf
.az-sectionoder auf die Typklassen ein, etwa.az-textoder.az-button..az-elementverfehlt Button und Image. - Überschreiben Sie Bootstraps Rasterklassen nicht; der Editor setzt Spaltenbreiten über sie.
- Für einmaliges Styling fügen Sie eine Klasse im Feld HTML classes des Elements hinzu und stylen diese Klasse.
Nur-Editor-Klassen
Diese Klassen existieren nur, während der Editor läuft, daher passen veröffentlichte Seiten nie auf sie:
| Klasse | Wo |
|---|---|
dxpr-builder-ui |
Jedes Stück Editor-Oberfläche: Steuerungsleisten, Menüs, Dialoge |
controls |
Die Steuerungsleiste eines Elements |
dxpr-editor |
Der Feld-Container in jedem Ansichtsmodus außer Preview |
az-ctnr |
Der Feld-Container, sobald der Editor gestartet ist |
az-sortable-placeholder |
Der Ablage-Platzhalter, während Sie ein Element ziehen |
Die eigenen Stile des Editors liegen in dxpr_builder/css/dxpr_builder_backend.css,
gebaut aus dxpr_builder/sass/dxpr_builder_backend.scss.
Bootstrap-Version
Der Builder schreibt Bootstrap-5-Markup. Wenn Ihr Theme kein Bootstrap 5 lädt, setzen Sie Sideload Bootstrap files auf Bootstrap 5 unter DXPR Studio > DXPR Builder > General Settings, unter Bootstrap. None (theme provides Bootstrap) geht davon aus, dass Ihr Theme es lädt.