Usa los colores de tu marca.

Aprende DXPR BuilderCrear páginasDa estilo a tus elementosGuías de diseño

Aplica los colores de tu marca a secciones, texto y botones para que cada página parezca del mismo sitio. Cada campo de color en DXPR Builder muestra la paleta de tu tema como muestras, así que escoges colores de marca en lugar de adivinar códigos. El ejemplo da a una sección tu color primario de marca con texto blanco.

El vídeo sigue los pasos de abajo: colorea una sección con tu muestra de marca y pone su texto en blanco.

Antes de empezar

  • Los colores de tu marca viven en el tema. Con DXPR Theme, fíjalos en Appearance > Settings > DXPR Theme (/admin/appearance/settings/dxpr_theme), en el panel Colors.
  • DXPR Builder muestra los diez primeros colores distintos de esa paleta como muestras.

Colorea una sección

  1. Pasa sobre la sección, abre More y elige Settings.
  2. Abre el panel Style.
  3. Haz clic en el botón de color de Background. El selector de color se abre con tus muestras.
  4. Haz clic en tu muestra primaria de marca.
  5. Haz clic en el botón de color de Font color y escoge blanco.
  6. Haz clic en Save. El texto del párrafo pasa a blanco; los encabezados conservan el color de encabezado del tema.
  7. Para poner un encabezado en blanco también, abre los Settings de su elemento Text, escoge blanco para Font color en su panel Style y haz clic en Save.

Lo que ves

La sección se rellena con tu color de marca, y su texto de párrafo y encabezado pasan a blanco. Las mismas muestras aparecen en cada campo de color. Incluye los paneles Style y Hover style, y el Start color y End color de un fondo Gradient de sección.

Para usar un color fuera de la paleta, escribe su código en el campo de texto del selector, por ejemplo #2196F3. Mueve el deslizador de opacidad para un color translúcido. Clear quita el color.

Mantén los colores vinculados al tema

Una muestra copia el código del color en el elemento. Si cambias la paleta del tema después, ese elemento conserva el color viejo.

Para que un elemento siga la paleta, usa una clase de color. Abre los Settings del elemento y escoge un chip en HTML classes:

Chip Qué hace
Primary background, Secondary background y otros Colores Bootstrap de tu tema
Primary text color, Secondary text color y otros Colores de texto Bootstrap de tu tema
Background color: DXPR Theme primary El color Primary de DXPR Theme, con su color de texto correspondiente
Text color: DXPR Theme accent1 El color Secondary de DXPR Theme para texto

Los chips DXPR Theme solo aparecen cuando DXPR Theme está habilitado.

Campos de color por elemento

Dónde Qué colorea
Style (panel): Font color, Border color, Background El propio elemento
Hover style (panel): los mismos campos El elemento mientras el puntero está en él
Button: Type Un esquema de color de botón ya hecho
Card: Type El fondo y el texto de toda la tarjeta
Alert: Type Success, Info, Warning o Danger
Section: Background effects > Gradient Una fusión de dos colores

Color legible

  • Mantén contraste suficiente entre texto y fondo. WCAG 2.1 Nivel AA pide al menos 4.5 a 1 para texto normal.
  • No uses solo el color para transmitir significado; acompáñalo con una etiqueta o un icono.
  • Alterna fondos de sección, como blanco, gris claro y tu color de marca, para dar ritmo a páginas largas.

Si no ves tus colores

  • El selector de color no muestra muestras. El tema predeterminado de tu sitio no ofrece paleta de color. Escribe tus códigos de color, o usa un tema con paleta, como DXPR Theme.
  • Un elemento conserva su color tras cambiar la paleta del tema. Una muestra guarda un código de color fijo. Escoge la muestra nueva, o cambia a un chip de color en HTML classes, que sigue la paleta.
  • Background o Font color no tienen efecto en una tarjeta. Un Type de tarjeta distinto de Default fija sus colores con clases del tema que ganan. Fija primero Type en Default.

¿Qué sigue?