--- url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/pestana-style' title: 'Cambia el aspecto de un elemento en el panel Style | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:13:58+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Cambia el aspecto de un elemento en el panel Style' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:13:58+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/pestana-style' articleSection: 'Da estilo a tus elementos' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/pestana-style' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://dxpr.com/es' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: es --- [Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Crear páginas](/es/hc/documentation/learn-dxpr-builder/build) /[Da estilo a tus elementos](/es/hc/documentation/learn-dxpr-builder/element-settings) # Cambia el aspecto de un elemento en el panel Style. Aprende DXPR BuilderCrear páginasDa estilo a tus elementos ## En esta guía Guías relacionadas - [Pon un color o una foto tras el contenido](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/fondo) 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](/es/hc/documentacion/aprender-dxpr-builder/primeros-pasos/primera-pagina). - **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](/es/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates) e [ID y clases HTML](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/css-personalizado). - **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 | Control | Rango | Unidad | |---|---|---| | **Font color**, **Border color**, **Background** | cualquier color, con transparencia | color | | **Background image** | una imagen de la biblioteca de medios, o una URL | | | **Background style**, **Background position**, **Border style** | una lista que empieza con **Theme defaults** | | | **Font size** | 0 a 100 | px | | **Border radius** | 0 a 100 | px | | **Opacity** | 0 a 1, en pasos de 0.01 | | | **Drop shadow** | niveles 0 a 5 | | | Modelo de caja **Margin** | -200 a 200 | **PX** o **%** | | Modelo de caja **Padding** | 0 a 200 | **PX** o **%** | | Modelo de caja **Border** | 0 a 50 | px | | Ancho × alto del modelo de caja | 0 a 2000 | **PX** o **%** | 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](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/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](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/css-personalizado). ### 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. | Elemento | Ignora en Style | Usa en cambio | |---|---|---| | Circle counter | **Background**, **Font size**, ancho × alto | **Background color** y **Dimension** en **General**, **Font size** en **Circle content** | | Progress bar | **Background**, ancho × alto | **Back color**, **Front color** y **Bar height** en **General** | | Divider | **Background**, ancho | **Color** y **Length** en **General** | | Number counter | **Font size** | **Font size** en **General** | | Image | ancho × alto | **Image width** e **Image height** en **General** | | Map | ancho × alto | **Map width** y **Map height** en **General** | | Marquee | ancho × alto | **Image width** y **Height** en **General** | | Video, Local video | ancho | **Video width** en **General** | | Positioned layers | ancho × alto | **Width** y **Height** en **General** | ## 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](#elements-with-their-own-settings). - **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](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/fondo): pon una foto tras un encabezado y mantén el encabezado legible.