Cambia el aspecto de un elemento en el panel Style.

Usa el panel Style cuando un elemento de una página necesita su propio aspecto: una tarjeta de color, un logotipo atenuado, un botón en colores de campaña. Ves cada cambio en la página mientras lo haces. Para un aspecto que cada página debe compartir, como el color de todos los botones, cambia tu tema. Un cambio allí actualiza todo el sitio.

El vídeo sigue la primera receta de abajo: atenúa un logotipo de socio hasta que el puntero llega a él.

Antes de empezar

• Abre la página en DXPR Builder; señalar un elemento muestra su barra de controles con More. ¿No conoces el constructor? Consulta Crea tu primera página.
• Save en el diálogo conserva un cambio en el editor. Save en la barra de herramientas del constructor, sobre tu contenido, guarda la página y muestra "Saved field".

Los ajustes del panel Style pertenecen a un elemento. Se guardan en el contenido de esa página, no en tu tema. Si tu color de marca cambia el año próximo, cada elemento que coloreaste a mano conserva el color viejo hasta que lo edites.

• Reutiliza un aspecto guardando un elemento con estilo con More > Save as template, o dando a los elementos una clase compartida bajo HTML classes. Consulta Plantillas de usuario e ID y clases HTML.
• Elige colores de las muestras cuando tu sitio las muestra. Vienen de la paleta de color de tu tema. Una muestra copia el color, así que un cambio posterior de paleta no la actualiza.

Receta: atenúa logotipos hasta que el puntero llega a ellos

Una fila de logotipos de socios se ve más tranquila cuando los logotipos están atenuados. Esta receta atenúa un logotipo y lo trae de vuelta en hover.

1. Pasa el cursor sobre un elemento Image que muestra un logotipo, haz clic en More y luego en Settings.
2. Abre el panel Style y arrastra Opacity a 0.5. El logotipo se atenúa mientras arrastras.
3. Abre el panel Hover style debajo y arrastra Opacity a 1.
4. Haz clic en Save en el diálogo y luego en Save en la barra de herramientas.
5. Abre el menú de vista (el icono del ojo) en la barra de herramientas del constructor, elige Preview y señala el logotipo. Cambia a plena intensidad y se atenúa de nuevo cuando el puntero sale.

Repite los pasos para cada logotipo de la fila.

Receta: un botón en colores de campaña

Tu tema da a los botones un color de hover. Un Background que defines tú también reemplaza ese color de hover, así que define ambos.

1. Pasa el cursor sobre el elemento Button, haz clic en More y luego en Settings.
2. En el panel Style, elige un Background y un Font color. Haz clic en una muestra, o escribe tu código de color, como #e4002b, en el campo de color.
3. En el panel Hover style, elige un Background más oscuro.
4. Haz clic en Save en el diálogo y luego en Save en la barra de herramientas.
5. Elige Preview en el menú de vista y señala el botón. Toma el color más oscuro.

Lo que ves

Mientras el diálogo está abierto, el elemento muestra cada cambio. En Preview, el logotipo atenuado pasa a plena intensidad bajo el puntero, y el botón de campaña toma su color más oscuro. Ambos aspectos permanecen tras recargar la página, porque Save en la barra de herramientas los guardó.

Qué acepta cada control

Un valor escrito fuera del rango se recorta al límite más cercano. El modelo de caja y sus candados se explican en la página Espaciado.

Cómo se comportan los ajustes

Valores del tema

Un color vacío, un deslizador en 0, una lista en Theme defaults y un lado del modelo de caja que muestra "-" significan lo mismo. DXPR Builder no escribe nada, y tu tema decide. Así que Opacity 0 no oculta un elemento, y Font size 0 conserva el tamaño del tema. Para volver al aspecto del tema, haz clic en Clear en el selector de color, mueve el deslizador a 0 o elige Theme defaults de nuevo.

Dónde quedan los ajustes

Cada ajuste de Style excepto Drop shadow se guarda como estilo en línea en el elemento. Los estilos en línea superan el CSS normal del tema. Dos cosas aún los superan: reglas del tema marcadas !important, y clases de utilidades Bootstrap bajo HTML classes, que también llevan !important.

En algunos elementos los ajustes van en una parte interior. En un Button dan estilo al botón mismo, en un Image a la imagen, en un Link al enlace y en un Map al marco del mapa.

Cada tamaño de pantalla

Los ajustes de estilo no tienen puntos de interrupción. 64 px de relleno son 64 px también en un teléfono. Los valores en porcentaje crecen y encogen con el ancho de la página. Para valores distintos por tamaño de pantalla, usa clases adaptables, como se muestra en la página ID y clases HTML.

Opacity atenúa todo lo de dentro

Opacity actúa sobre todo el elemento. Atenúa el recuadro, el borde, el texto y cada elemento dentro de él. Para un recuadro translúcido tras un texto sólido, deja Opacity en 0. Elige en cambio un color Background con algo de transparencia: el selector de color tiene su propio deslizador de opacidad para eso.

Estilo hover

Hover style es un panel aparte bajo Style. Tiene los mismos controles, con su propio modelo de caja incluido. Sus valores aplican mientras el puntero está sobre el elemento. A diferencia de los valores de Style, están marcados !important, así que superan tus valores de Style, las clases de utilidades bajo HTML classes y la mayoría de reglas del tema.

Solo Drop shadow aparece con fundido, en 0.15 segundos. Otros cambios de hover cambian al momento, salvo que tu tema los anime. Los botones Bootstrap funden colores en 0.15 segundos.

Teléfonos y tabletas no tienen puntero. Las visitas allí solo ven un aspecto hover tras un toque, así que nunca pongas en él información que necesiten.

Elementos con sus propios ajustes

Algunos elementos tienen su propio ajuste para el mismo trabajo. Su propio ajuste gana, y el control de Style no hace nada.

Si no ves tu cambio

• El cambio desapareció al cerrar el diálogo. Lo cerraste con Cancel, el icono de cierre o la tecla Escape, que devolvió los ajustes viejos. Haz el cambio de nuevo y haz clic en Save en el diálogo.
• El cambio desaparece tras recargar la página. Save en el diálogo conserva un cambio solo en el editor. Haz clic en Save en la barra de herramientas antes de salir de la página.
• El aspecto del tema permanece. Una clase de utilidades Bootstrap bajo HTML classes o una regla del tema con !important gana. Abre el panel General y quita el chip de clase, por ejemplo Primary background, o pregunta a tu webmaster sobre la regla del tema.
• Un control no hace nada. Algunos elementos tienen su propio ajuste para el mismo trabajo. Consulta Elementos con sus propios ajustes.
• El botón ya no cambia de color en hover. Tu Background reemplaza el color de hover del tema. Define también un Background en el panel Hover style.
• El texto se atenuó junto con el recuadro. Opacity atenúa todo el elemento. Devuélvelo a 0 y usa un color Background con transparencia.
• Opacity 0 no oculta el elemento. 0 significa Theme defaults. Añade en cambio la clase Hide element (d-none) bajo HTML classes.

¿Qué sigue?

• Backgrounds: pon una foto tras un encabezado y mantén el encabezado legible.