Arquitetura de CSS.
O conteúdo do construtor é código Bootstrap 5 mais um pequeno conjunto de classes
az-. Saber que classes aparecem nas páginas publicadas e que
classes só existem enquanto o editor está em execução indica o que o CSS do seu tema pode
selecionar.
Classes nas páginas publicadas
Esquema
| Markup | Classes |
|---|---|
| Section | az-section, com container ou container-fluid dentro |
| Row | Classe Bootstrap row |
| Column | Classes col-* do Bootstrap, uma por ponto de interrupção |
| Content element | Uma classe por tipo de elemento, como az-text, az-image ou az-images-carousel; Social Links utiliza st-social. A maioria também traz az-element; Button e Image não |
O conteúdo guardado por versões antigas ainda pode trazer az-row e
az-column. O editor reconhece-as e omite-as da próxima
vez que a linha ou a coluna for guardada.
Modificadores
| Class | Set by |
|---|---|
az-row--equal-height |
Equal-height columns numa linha; sem ela, a linha recebe align-items-start |
az-row--reverse-horizontal |
Mirror row numa linha |
az-util-vertical-centering |
Vertical centering numa secção ou coluna |
Grelha do Bootstrap
As colunas utilizam as classes de grelha do Bootstrap:
| Class | Width |
|---|---|
col |
Partilha a linha por igual |
col-6 |
50% |
col-md-4 |
33% a partir de 768 px |
col-lg-3 |
25% a partir de 992 px |
Escrever CSS personalizado
- Limite as regras específicas do construtor a
.az-sectionou às classes de tipo, como.az-textou.az-button..az-elementnão abrange Button nem Image. - Não sobreponha as classes de grelha do Bootstrap; o editor define as larguras das colunas através delas.
- Para estilo pontual, adicione uma classe no campo HTML classes do elemento e estilize essa classe.
Classes só do editor
Estas classes só existem enquanto o editor está em execução, por isso as páginas publicadas nunca lhes correspondem:
| Class | Where |
|---|---|
dxpr-builder-ui |
Toda a interface do editor: barras de controlos, menus, caixas de diálogo |
controls |
A barra de controlos de um elemento |
dxpr-editor |
O contentor de campo em todos os modos de visualização exceto Preview |
az-ctnr |
O contentor de campo depois de o editor iniciar |
az-sortable-placeholder |
O marcador de largada enquanto arrasta um elemento |
Os estilos próprios do editor estão em dxpr_builder/css/dxpr_builder_backend.css,
gerados a partir de dxpr_builder/sass/dxpr_builder_backend.scss.
Versão do Bootstrap
O construtor escreve código Bootstrap 5. Se o seu tema não carrega o Bootstrap 5, defina Sideload Bootstrap files para Bootstrap 5 em DXPR Studio > DXPR Builder > General Settings, em Bootstrap. None (theme provides Bootstrap) pressupõe que o seu tema o carrega.