Utilizar as cores da marca.
Aplique as cores da marca a secções, texto e botões para cada página parecer do mesmo site. Cada campo de cor no DXPR Builder mostra a paleta do tema como amostras, para escolher cores da marca em vez de adivinhar códigos. O exemplo dá a uma secção a cor principal da marca com texto branco.
O vídeo segue os passos abaixo: pinta uma secção com a amostra da marca e torna o texto branco.
Antes de começar
- As cores da marca vivem no tema. Com o DXPR Theme, defina-as em Appearance > Settings > DXPR Theme (
/admin/appearance/settings/dxpr_theme), no painel Colors. - O DXPR Builder mostra as primeiras dez cores diferentes dessa paleta como amostras.
Pintar uma secção
- Paire sobre a secção, abra More e escolha Settings.
- Abra o painel Style.
- Clique no botão de cor de Background. O seletor de cores abre com as amostras.
- Clique na amostra principal da marca.
- Clique no botão de cor de Font color e escolha branco.
- Clique em Save. O texto dos parágrafos fica branco; os títulos mantêm a cor de títulos do tema.
- Para tornar um título branco também, abra as Settings do elemento Text, escolha branco para Font color no painel Style e clique em Save.
O que vê
A secção enche-se com a cor da marca, e o texto dos parágrafos e o título ficam brancos. As mesmas amostras aparecem em cada campo de cor. Isso inclui os painéis Style e Hover style, e o Start color e o End color do fundo Gradient de uma secção.
Para usar uma cor fora da paleta, escreva o código no campo de texto do seletor, por exemplo #2196F3. Mova o cursor de opacidade para uma cor transparente. Clear remove a cor.
Manter as cores ligadas ao tema
Uma amostra copia o código da cor para o elemento. Se mudar a paleta do tema mais tarde, esse elemento mantém a cor antiga.
Para um elemento seguir a paleta, use antes uma classe de cor. Abra as Settings do elemento e escolha um chip em HTML classes:
| Chip | What it does |
|---|---|
| Primary background, Secondary background e outros | Cores Bootstrap do tema |
| Primary text color, Secondary text color e outros | Cores de texto Bootstrap do tema |
| Background color: DXPR Theme primary | A cor Primary do DXPR Theme, com a cor de texto correspondente |
| Text color: DXPR Theme accent1 | A cor Secondary do DXPR Theme para texto |
Os chips DXPR Theme só aparecem quando o DXPR Theme está ativo.
Campos de cor por elemento
| Where | What it colours |
|---|---|
| Style (painel): Font color, Border color, Background | O próprio elemento |
| Hover style (painel): os mesmos campos | O elemento enquanto o ponteiro está sobre ele |
| Button: Type | Um esquema de cores de botão pronto |
| Card: Type | O fundo e o texto de todo o cartão |
| Alert: Type | Success, Info, Warning ou Danger |
| Section: Background effects > Gradient | Uma mistura de duas cores |
Cor legível
- Mantenha contraste suficiente entre texto e fundo. As WCAG 2.1 nível AA pedem pelo menos 4,5 para 1 para texto normal.
- Não use apenas a cor para transmitir significado; junte-lhe uma etiqueta ou um ícone.
- Alterne fundos de secção, como branco, cinzento claro e a cor da marca, para dar ritmo às páginas longas.
Se as cores não aparecem
- The colour picker shows no swatches. O tema predefinido do site não oferece paleta de cores. Escreva os códigos de cor, ou use um tema com paleta, como o DXPR Theme.
- An element keeps its old colour after you change the theme palette. Uma amostra guarda um código de cor fixo. Escolha a nova amostra, ou mude para um chip de cor em HTML classes, que segue a paleta.
- Background or Font color has no effect on a card. Um Type de cartão diferente de Default define as cores com classes do tema que prevalecem. Defina primeiro Type como Default.
O que se segue?
- Tornar os elementos reativos ao pairar: mude as cores quando os visitantes apontam para um elemento.
- Estilizar os cartões: aplique as cores aos cartões.
- CSS personalizado: defina regras da marca que os painéis não abrangem.