--- url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/element-settings/custom-css' title: 'Enlaza a secciones y reutiliza estilos con clases | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:11:51+00:00' updated: '2026-10-24T06:20:39+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Dale a una sección un HTML ID para que un botón pueda saltar a ella. Añade HTML classes para ocultar un elemento en teléfonos, definir espaciado por tamaño de pantalla, o reutilizar un aspecto que define tu tema. Ambos campos están al final del panel General de cada elemento. Una clase mantiene un aspecto consistente: cuando su regla CSS cambia, cada elemento con esa clase la sigue. El vídeo sigue la primera receta de abajo: hace que un botón salte a una sección más abajo en la página. tags: - 'Elementen stylen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T06:20:39+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Enlaza a secciones y reutiliza estilos con clases' description: |- Dale a una sección un HTML ID para que un botón pueda saltar a ella. Añade HTML classes para ocultar un elemento en teléfonos, definir espaciado por tamaño de pantalla, o reutilizar un aspecto que define tu tema. Ambos campos están al final del panel General de cada elemento. Una clase mantiene un aspecto consistente: cuando su regla CSS cambia, cada elemento con esa clase la sigue. El vídeo sigue la primera receta de abajo: hace que un botón salte a una sección más abajo en la página. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:11:51+0000' dateModified: '2026-10-24T06:20:39+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/documentation/learn-dxpr-builder/element-settings/custom-css' articleSection: 'Elementen stylen' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/element-settings/custom-css' description: |- Dale a una sección un HTML ID para que un botón pueda saltar a ella. Añade HTML classes para ocultar un elemento en teléfonos, definir espaciado por tamaño de pantalla, o reutilizar un aspecto que define tu tema. Ambos campos están al final del panel General de cada elemento. Una clase mantiene un aspecto consistente: cuando su regla CSS cambia, cada elemento con esa clase la sigue. El vídeo sigue la primera receta de abajo: hace que un botón salte a una sección más abajo en la página. 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 --- [Help Center](/es/hc)/[Documentation](/es/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) # Enlaza a secciones y reutiliza estilos con clases. Learn DXPR BuilderBuild pagesElementen stylen ## In this guide Related guides - [Haz que tu diseño funcione en teléfonos](/es/hc/documentation/learn-dxpr-builder/design/responsive-design) Dale a una sección un **HTML ID** para que un botón pueda saltar a ella. Añade **HTML classes** para ocultar un elemento en teléfonos, definir espaciado por tamaño de pantalla, o reutilizar un aspecto que define tu tema. Ambos campos están al final del panel **General** de cada elemento. Una clase mantiene un aspecto consistente: cuando su regla CSS cambia, cada elemento con esa clase la sigue. El vídeo sigue la primera receta de abajo: hace que un botón salte a una sección más abajo en la página. ## 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/documentation/learn-dxpr-builder/getting-started/first-page). - **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". - **Usa un HTML ID** para un destino de salto. Un botón "Reserva una visita" puede desplazarse al formulario de reserva. Una lista de enlaces arriba de una página larga puede llevar a cada parte. - **Usa una clase para un aspecto que se repite.** Tu webmaster escribe el CSS una vez, y tú añades la clase donde la necesites. El panel **Style** en cambio copia valores en cada elemento, que divergen con el tiempo. - **Usa una clase para lo que el panel Style no puede hacer**, como ocultar un elemento en teléfonos o cambiar espaciado por tamaño de pantalla. ## Receta: un botón que salta a una sección 1. Pasa el cursor sobre la **Section** destino, haz clic en **More** y luego en **Settings**. 2. En el panel **General**, escribe un nombre corto, como `programmes`, en **HTML ID**. Haz clic en **Save**. 3. Abre los ajustes del **Button**. En **Link**, escribe `#` seguido exactamente del mismo nombre: `#programmes`. Haz clic en **Save**. 4. Haz clic en **Save** en la barra de herramientas del constructor. 5. Elige **Preview** en el menú de vista (el icono del ojo) y haz clic en el botón. Prueba con la sección más abajo en la página que el botón, para ver el desplazamiento. Si el destino está dentro de un panel colapsable, una pestaña o una diapositiva de carrusel, el enlace lo abre primero. ## Receta: oculta un elemento en teléfonos 1. Pasa el cursor sobre el elemento, haz clic en **More** y luego en **Settings**. 2. En el panel **General**, haz clic en el recuadro **HTML classes**. 3. Elige **Hidden on extra small devices, phones (<576px)**. Está en el grupo **Responsive Visibility**. 4. Haz clic en **Save** en el diálogo y luego en **Save** en la barra de herramientas. El elemento ahora desaparece en pantallas de menos de 576 px, también en el editor. Para comprobarlo, abre la página en un teléfono. ## Receta: escribe tus propias clases El recuadro **HTML classes** solo deja elegir de su lista. Para escribir un nombre de clase, cámbialo a texto primero. 1. Pasa el cursor sobre el elemento, haz clic en **More** y luego en **Settings**. 2. Bajo **HTML classes**, haz clic en **Edit as text**. El recuadro se convierte en un campo de texto simple que lista las clases que el elemento ya tiene. 3. Añade tus nombres de clase tras ellos, separados por espacios, por ejemplo `brand-card py-3 py-lg-5`. Omite el punto: `.brand-card` en el CSS de tu equipo es `brand-card` aquí. 4. Haz clic en **Save** en el diálogo y luego en **Save** en la barra de herramientas. El elemento toma el aspecto que definió tu equipo web. ## Lo que ves En **Preview**, el botón desplaza la página con suavidad hasta la sección y deja sitio para una cabecera fija; la barra de dirección termina en `#programmes`. Bajo 576 px de ancho, el elemento oculto desaparece. Las clases que escribiste se muestran como chips la próxima vez que abres el diálogo, entre comillas cuando no están en la lista, como "brand-card". ## Cómo funcionan los campos ### HTML ID Un ID debe empezar con una letra. Después puede contener letras, números, guiones y guiones bajos, pero no espacios. Un ID erróneo muestra un error bajo el campo, y **Save** no hace nada hasta que lo corriges. Si dejas el campo vacío, el elemento conserva un ID que creó DXPR Builder. El campo vacío lo muestra en gris. Usa cada ID una vez por página: cuando dos elementos comparten uno, los enlaces saltan al primero. ### HTML classes La lista contiene clases de sombra y clases Bootstrap 5, agrupadas por tarea, como **Margins**, **Padding**, **Responsive Visibility** y **Rounded Corners**. Tu tema puede añadir un grupo propio al final. Desplázate por la lista abierta, o escribe parte de un nombre como padding, py-5 o circular para filtrarla. Escribir solo filtra la lista; para una clase que no está en ella, usa **Edit as text**. Las clases Bootstrap solo funcionan cuando la página carga Bootstrap 5. Viene de tu tema, o de **General Settings** > **Bootstrap** (`/admin/dxpr_studio/dxpr_builder/settings`), donde **Sideload Bootstrap files** está en **Bootstrap 5**. Las clases de utilidades Bootstrap, como las de color y espaciado, están marcadas `!important`. Superan al panel **Style** en la misma propiedad. **Primary background** supera a **Background**, y **Top margin size 3 (mt-3)** supera al **Margin** superior. Una clase con un tamaño de pantalla en su nombre aplica desde ese ancho hacia arriba: | En el nombre de la clase | Aplica desde | |---|---| | `sm` | 576 px | | `md` | 768 px | | `lg` | 992 px | | `xl` | 1200 px | | `xxl` | 1400 px | Así que `py-3 py-lg-5` da 16 px de relleno arriba y abajo en pantallas pequeñas, y 48 px desde 992 px de ancho. ### Para tu equipo de desarrollo del tema Una clase necesita una regla CSS en el tema, por ejemplo: ```css .brand-card { background: #f4f6fb; border-left: 4px solid #1a4d8f; padding: 2rem; } ``` Para mostrar la clase en la lista **HTML classes** para las personas que editan, regístrala en el `.info.yml` del tema; consulta [Clases de utilidades](/hc/documentation/learn-dxpr-builder/customization/utility-classes). Para estilos en todo el sitio, consulta [Da estilo al contenido del constructor con el CSS de tu tema](/hc/documentation/learn-dxpr-builder/customization/custom-css). ## Si no lo ves - **Save no hace nada y HTML ID dice "ID must start with a letter".** El ID incumple las reglas de arriba. Empieza con una letra, y usa solo letras, números, guiones y guiones bajos. - **No puedes escribir una clase nueva.** El recuadro solo filtra su lista. Haz clic en **Edit as text** primero. - **Falta una clase que esperas en la lista.** La lista solo contiene las clases que definen DXPR Builder y tu tema. Haz clic en **Edit as text** y escríbela. - **El botón no se desplaza.** **Link** debe ser `#` seguido exactamente del HTML ID, con las mismas mayúsculas. Comprueba ambos campos, y prueba en **Preview**. - **Una clase no tiene efecto.** El nombre está mal escrito, el tema no tiene regla para ella, o Bootstrap 5 no está cargado. Comprueba la ortografía, y pregunta a tu webmaster sobre la regla o **Sideload Bootstrap files**. - **La clase de tu equipo solo cambia algunas cosas.** Un valor del panel **Style** en la misma propiedad supera una clase del tema. Limpia ese valor en el panel **Style**. - **El botón salta al lugar equivocado.** Dos elementos comparten el ID, y el primero gana. Da a cada elemento su propio ID. - **El encabezado de la sección queda oculto bajo la cabecera fija.** DXPR Builder no reconoce tu cabecera. Un webmaster define **Scroll offset selector** en **General Settings** > **Advanced Settings** (`/admin/dxpr_studio/dxpr_builder/settings`) al selector CSS de la cabecera. ## ¿Qué sigue? - [Haz que tu diseño funcione en teléfonos](/hc/documentation/learn-dxpr-builder/design/responsive-design): planea qué elementos mostrar en cada tamaño de pantalla.