Enlaza a secciones y reutiliza estilos con clases.

Aprende DXPR BuilderCrear páginasDa estilo a tus elementos

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.
  • 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.

Panel General de un Button con el Title Mira nuestros programas y el Link #programmes, junto a ese botón en la página

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.

Campo HTML classes de un elemento Text con el chip Hidden on extra small devices, phones (<576px), junto al recuadro gris Planea tu visita, aún mostrado a ancho de escritorio

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.

HTML classes en modo Edit as text, un campo simple que dice brand-card py-3 py-lg-5, junto al recuadro gris Colabora con nosotros con el relleno de la clase sobre y bajo su texto

Lo que ves

Panel General de una Section con HTML ID open-day y tres chips de clase, junto a esa sección con fondo gris y texto centrado

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.

La lista HTML classes filtrada por la palabra padding, con el grupo Padding con Padding size 1 a 5 y No padding, junto al texto Tasas del curso al que dará estilo

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:

.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. Para estilos en todo el sitio, consulta Da estilo al contenido del constructor con el CSS de tu tema.

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?