Classes dans le balisage enregistré.
Le contenu du builder est du balisage Bootstrap 5 plus un petit jeu de classes az-. Savoir quelles classes figurent sur les pages publiées, et lesquelles n’existent que pendant que l’éditeur tourne, pour savoir ce que le CSS de votre thème peut cibler.
Classes sur les pages publiées
Layout
| Balisage | Classes |
|---|---|
| Section | az-section, avec container ou container-fluid dedans |
| Row | Bootstrap row |
| Column | classes Bootstrap col-*, une par point d’arrêt |
| Content element | Une classe par type d’élément, comme az-text, az-image ou az-images-carousel ; Social Links utilise st-social. La plupart portent aussi az-element ; Button et Image non |
Le contenu enregistré par d’anciennes versions peut encore porter az-row et az-column. L’éditeur les reconnaît et les omet la prochaine fois que la ligne ou la colonne est enregistrée.
Modificateurs
| Classe | Défini par |
|---|---|
az-row--equal-height |
Equal-height columns sur une ligne ; sans elle, la ligne reçoit align-items-start |
az-row--reverse-horizontal |
Mirror row sur une ligne |
az-util-vertical-centering |
Vertical centering sur une section ou une colonne |
Grille Bootstrap
Les colonnes utilisent les classes de grille Bootstrap :
| Classe | Largeur |
|---|---|
col |
Se partage la ligne à parts égales |
col-6 |
50 % |
col-md-4 |
33 % à partir de 768 px |
col-lg-3 |
25 % à partir de 992 px |
Écrire du CSS personnalisé
- Ciblez les règles propres au builder sur
.az-sectionou sur les classes de type, comme.az-textou.az-button..az-elementmanque Button et Image. - Ne surchargez pas les classes de grille Bootstrap ; l’éditeur définit les largeurs de colonne par elles.
- Pour un stylage ponctuel, ajoutez une classe dans le champ HTML classes de l’élément et stylisez cette classe.
Classes réservées à l’éditeur
Ces classes n’existent que pendant que l’éditeur tourne, donc les pages publiées ne correspondent jamais à ces classes :
| Classe | Où |
|---|---|
dxpr-builder-ui |
Chaque morceau d’interface de l’éditeur : barres de contrôle, menus, dialogues |
controls |
La barre de contrôle d’un élément |
dxpr-editor |
Le conteneur de champ dans chaque mode d’affichage sauf Preview |
az-ctnr |
Le conteneur de champ une fois l’éditeur démarré |
az-sortable-placeholder |
L’espace réservé de dépôt pendant que vous glissez un élément |
Les styles propres de l’éditeur sont dans dxpr_builder/css/dxpr_builder_backend.css, construits depuis dxpr_builder/sass/dxpr_builder_backend.scss.
Version de Bootstrap
Le builder écrit du balisage Bootstrap 5. Si votre thème ne charge pas Bootstrap 5, réglez Sideload Bootstrap files sur Bootstrap 5 sous DXPR Studio > DXPR Builder > General Settings, sous Bootstrap. None (theme provides Bootstrap) présuppose que votre thème le charge.