Architettura CSS.
I contenuti del builder sono markup Bootstrap 5 più un piccolo insieme di classi az-.
Sapere quali classi compaiono nelle pagine pubblicate, e quali esistono
solo mentre l’editor è in esecuzione, ti dice cosa il CSS del tuo tema può
selezionare.
Classi nelle pagine pubblicate
Layout
| Markup | Classi |
|---|---|
| Sezione | az-section, con container o container-fluid all’interno |
| Riga | Riga Bootstrap row |
| Colonna | Classi col-* di Bootstrap, una per breakpoint |
| Elemento di contenuto | Una classe per tipo di elemento, come az-text, az-image o az-images-carousel; Social Links usa st-social. La maggior parte ha anche az-element; Button e Image no |
I contenuti salvati dalle versioni precedenti possono ancora contenere az-row e
az-column. L’editor li riconosce e li omette al successivo
salvataggio della riga o della colonna.
Modificatori
| Classe | Impostata da |
|---|---|
az-row--equal-height |
Equal-height columns su una riga; senza di essa la riga usa align-items-start |
az-row--reverse-horizontal |
Mirror row su una riga |
az-util-vertical-centering |
Vertical centering su una sezione o una colonna |
Griglia Bootstrap
Le colonne usano le classi della griglia di Bootstrap:
| Classe | Larghezza |
|---|---|
col |
Condivide la riga in parti uguali |
col-6 |
50% |
col-md-4 |
33% da 768 px |
col-lg-3 |
25% da 992 px |
Scrivere CSS personalizzato
- Limita le regole specifiche del builder a
.az-sectiono alle classi di tipo, come.az-texto.az-button..az-elementnon copre Button e Image. - Non sovrascrivere le classi della griglia di Bootstrap; l’editor imposta le larghezze delle colonne tramite esse.
- Per uno stile una tantum, aggiungi una classe nel campo HTML classes dell’elemento e stilizza quella classe.
Classi solo dell’editor
Queste classi esistono solo mentre l’editor è in esecuzione, quindi le pagine pubblicate non le usano mai:
| Classe | Dove |
|---|---|
dxpr-builder-ui |
Ogni parte dell’interfaccia dell’editor: barre di controllo, menu, finestre di dialogo |
controls |
La barra di controllo di un elemento |
dxpr-editor |
Il contenitore del campo in ogni modalità di visualizzazione tranne Preview |
az-ctnr |
Il contenitore del campo una volta avviato l’editor |
az-sortable-placeholder |
Il segnaposto di rilascio mentre trascini un elemento |
Gli stili propri dell’editor sono in dxpr_builder/css/dxpr_builder_backend.css,
generati da dxpr_builder/sass/dxpr_builder_backend.scss.
Versione di Bootstrap
Il builder scrive markup Bootstrap 5. Se il tuo tema non carica Bootstrap 5, imposta Sideload Bootstrap files su Bootstrap 5 in DXPR Studio > DXPR Builder > General Settings, sotto Bootstrap. None (theme provides Bootstrap) presume che il tuo tema lo carichi.