---
url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/referencia/referencia-elementos'
title: 'Referencia de elementos | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:59:37+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  DXPR Builder ofrece 22 elementos de contenido y 6 elementos de
  diseño. Esta página lista el nombre de sistema de cada elemento y
  los campos de su ventana modal de ajustes; la parte de diseño también lista
  la Columna dentro de cada fila. Los bloques y vistas de Drupal, que
  el constructor también ofrece como elementos, no están incluidos.
tags:
  - 'Elements and CSS'
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: 'Referencia de elementos'
      description: |-
        DXPR Builder ofrece 22 elementos de contenido y 6 elementos de
        diseño. Esta página lista el nombre de sistema de cada elemento y
        los campos de su ventana modal de ajustes; la parte de diseño también lista
        la Columna dentro de cada fila. Los bloques y vistas de Drupal, que
        el constructor también ofrece como elementos, no están incluidos.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:59:37+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/referencia/referencia-elementos'
      articleSection: 'Elementos y CSS'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/referencia/referencia-elementos'
      description: |-
        DXPR Builder ofrece 22 elementos de contenido y 6 elementos de
        diseño. Esta página lista el nombre de sistema de cada elemento y
        los campos de su ventana modal de ajustes; la parte de diseño también lista
        la Columna dentro de cada fila. Los bloques y vistas de Drupal, que
        el constructor también ofrece como elementos, no están incluidos.
      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) /[Referencia](/es/hc/documentation/learn-dxpr-builder/reference) /[Elementos y CSS](/es/hc/documentation/learn-dxpr-builder/reference/elements-and-css) # Referencia de elementos.

 Aprende DXPR BuilderReferenciaElementos y CSS

   ## En esta guía

DXPR Builder ofrece 22 elementos de contenido y 6 elementos de diseño. Esta página lista el nombre de sistema de cada elemento y los campos de su ventana modal de ajustes; la parte de diseño también lista la Columna dentro de cada fila. Los bloques y vistas de Drupal, que el constructor también ofrece como elementos, no están incluidos.

## Cómo leer esta página

La primera tabla de cada elemento lista los campos de su acordeón **General**. Un campo de otro acordeón va en una tabla aparte con el nombre de ese acordeón. Etiqueta es la etiqueta del campo como la muestra la ventana modal, en la ortografía estadounidense de la interfaz. Parámetro es el `param_name` en la definición del elemento. Las opciones dicen `value` (Label).

Dos campos de General aparecen en cada elemento y no se repiten en las tablas:

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| HTML ID | `hash` | text | empty; el campo muestra el ID generado como marcador | Primero una letra, luego letras, números, guiones y guiones bajos | ID personalizado para el elemento. |
| HTML classes | `el_class` | multi-select | empty; las secciones nuevas reciben `py-5` | Clases de utilidad de Bootstrap 5 y las clases que declaran los temas activados; **Edit as text** acepta cualquier clase | Clases CSS extra para el elemento. |

Cada elemento también tiene los acordeones **Style** y **Hover style**, documentados en la página [Pestaña de estilo](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/pestana-style). Todos los elementos salvo Columna y los paneles dentro de Pestañas, Panel plegable y Carrusel también tienen el acordeón **Animation**, documentado en la página [Pestaña de animación](/es/hc/documentacion/aprender-dxpr-builder/diseno/pestana-animacion).

La columna Control nombra lo que muestra la ventana modal. Cada control viene de un `type` de parámetro en la definición del elemento:

| Control | Tipo de código `type` |
|---|---|
| text | `textfield` |
| number | `numericfield` |
| link | `link` |
| radio | `dropdown` con menos de 7 opciones |
| select | `dropdown` con 7 o más opciones |
| toggle | `checkbox` con una opción |
| checkboxes | `checkbox` con varias opciones |
| slider | `dxb_slider` |
| colour | `colorpicker` |
| icon, image, images, video, datetime | El `type` del mismo nombre |
| ckeditor | `textarea` |
| ace | `html` |
| social | `social_links` |

Un interruptor activado guarda el valor de su celda de Valores permitidos; un interruptor desactivado guarda `no` o un valor vacío. Las casillas guardan los valores marcados como lista separada por comas. Una opción listada como vacía se guarda como cadena vacía; en la ventana modal su botón de radio tiene la clave `dxpr-default`.

Los campos de imagen e imágenes también ofrecen un selector de estilo de imagen: primero el estilo `optimize` del sitio cuando existe, luego **Original image (No resizing)** y los demás estilos de imagen. Algunos campos quedan ocultos hasta que otro campo tiene un valor coincidente; la columna Descripción nombra esa dependencia.

## Elementos de contenido

### [Texto](/es/hc/documentation/learn-dxpr-builder/elements/text)

Texto enriquecido editado en CKEditor. Nombre de sistema: `az_text`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Text | `content` | ckeditor | Placeholder heading and paragraph | HTML | El contenido de texto. |

### [Imagen](/es/hc/documentacion/aprender-dxpr-builder/elementos/imagen)

Una sola imagen, opcionalmente envuelta en un enlace. Nombre de sistema: `az_image`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Image | `image` | image | empty | Imagen del navegador de medios | La imagen para mostrar. |
| Image width | `width` | text | `100%` | Longitud CSS, por ejemplo `100px` or `50%` | Un número solo cuenta como píxeles. |
| Image height | `height` | text | empty | Longitud CSS, por ejemplo `100px` | Un número solo cuenta como píxeles. |
| Image link | `link` | link | empty | URL o ruta interna | Envuelve la imagen en un enlace. |
| Image link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Dónde se abre el enlace. Aparece cuando `link` tiene valor. |

Campos del acordeón **SEO**:

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Alt attribute | `alt` | text | empty | Cualquier texto | Texto Alt de la imagen. |
| Title attribute | `title` | text | empty | Cualquier texto | Atributo de título de la imagen. |

### [Carrusel de imágenes](/es/hc/documentacion/aprender-dxpr-builder/elementos/carrusel-imagenes)

Una presentación Bootstrap de varias imágenes. Nombre de sistema: `az_images_carousel`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Images | `images` | images | empty | Imágenes del navegador de medios | Una diapositiva por imagen. |
| Interval | `interval` | slider | 5000 | 0 a 10000, paso 1 | Tiempo entre diapositivas en milisegundos. En 0 las diapositivas no avanzan solas. |
| Hide | `hide` | checkboxes | none ticked | `pagination_control` (Hide pagination control), `prev_next_buttons` (Hide prev/next buttons) | Esconde los indicadores, las flechas o ambos. |

Campos del acordeón **SEO**:

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Alt attribute | `alt` | text | empty | Cualquier texto | Texto Alt de las imágenes. |
| Title attribute | `title` | text | empty | Cualquier texto | Atributo de título de las imágenes. |

### [Vídeo](/es/hc/documentacion/aprender-dxpr-builder/elementos/video)

Incrusta un vídeo de YouTube o Vimeo. Nombre de sistema: `az_video`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Video link | `link` | text | empty | URL de YouTube o Vimeo | El vídeo para incrustar. |
| Video width | `width` | text | `100%` | Longitud CSS, por ejemplo `100px` or `50%` | Un número solo cuenta como píxeles. |
| Image | `image` | image | empty | Imagen del navegador de medios | Imagen de portada; el reproductor carga cuando la persona visitante hace clic en ella. |
| Themed play button | `play` | toggle | off | `yes` when on | Muestra el botón de reproducir del tema sobre el vídeo. |

### [Vídeo local](/es/hc/documentacion/aprender-dxpr-builder/elementos/video-local)

Reproduce un archivo de vídeo propio en un reproductor HTML5. Nombre de sistema: `az_video_local`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Video | `video` | video | empty | Archivo MP4, WEBM, OGG u OGV, hasta el límite de tamaño de subida del sitio | El archivo de vídeo. |
| Start playing automatically | `autoplay` | toggle | off | `autoplay` when on | Empieza la reproducción al cargar la página. La reproducción automática siempre silencia el vídeo. |
| Muted | `muted` | toggle | off | `muted` when on | Silencia el vídeo. Aparece mientras `autoplay` está desactivado. |
| Controls | `controls` | toggle | off | `controls` when on | Muestra los controles del reproductor. |
| Loop | `loop` | toggle | off | `loop` when on | Reinicia el vídeo cuando termina. |
| Video width | `width` | text | `100%` | Longitud CSS, por ejemplo `100px` or `50%` | Ancho del reproductor. |
| Image | `image` | image | empty | Imagen del navegador de medios | Imagen de póster mostrada antes de la reproducción. |

### [HTML](/es/hc/documentacion/aprender-dxpr-builder/elementos/html)

HTML puro editado en un editor de código. Nombre de sistema: `az_html`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Raw HTML | `content` | ace | Placeholder message "Click the edit button to change this HTML" | HTML | El contenido HTML. |

### [Jumbotron](/es/hc/documentacion/aprender-dxpr-builder/elementos/jumbotron)

Banner grande con título y texto de entrada; otros elementos pueden soltarse dentro. Nombre de sistema: `az_jumbotron`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Title | `title` | text | empty | Cualquier texto | Título del banner. |
| Lead | `lead` | text | empty | Cualquier texto | Texto de subtítulo mostrado bajo el título. |
| Type | `type` | select | `bg-light` (Light) | `bg-light` (Light), `text-white bg-primary` (Primary), `text-white bg-secondary` (Secondary), `text-white bg-success` (Success), `text-white bg-info` (Info), `text-white bg-warning` (Warning), `text-white bg-danger` (Danger), `text-white bg-dark` (Dark), `none` (Default) | Clases de color de fondo y texto. |
| Padding | `padding` | radio | `p-5` (Large) | `p-5` (Large), `p-4` (Medium), `p-3` (Small) | Tamaño del relleno. |

### [Botón](/es/hc/documentacion/aprender-dxpr-builder/elementos/boton)

Un botón Bootstrap que enlaza a una URL. Nombre de sistema: `az_button`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Title | `title` | text | Click to add text | Cualquier texto | Texto del botón. |
| Link | `link` | link | empty | URL o ruta interna | Enlace del botón. |
| Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Dónde se abre el enlace. Aparece cuando `link` tiene valor. |
| Type | `type` | select | `primary` (Primary) | `primary`, `secondary`, `success`, `info`, `warning`, `danger`, `link`, `light`, `dark`; cada etiqueta es el valor con mayúscula inicial | Estilo de botón Bootstrap. |
| Block button | `block` | toggle | off | `btn-block` when on | Botón de ancho completo. |
| Outline style | `outlined` | toggle | off | `outline` when on | Muestra `btn-outline-*` en lugar de `btn-*`. |
| Size | `size` | radio | empty (Normal) | empty (Normal), `btn-lg` (Large), `btn-sm` (Small) | Tamaño del botón. |

### [Elemento de enlace](/es/hc/documentacion/aprender-dxpr-builder/elementos/enlace)

Contenedor que envuelve en un enlace los elementos de dentro. Nombre de sistema: `az_link`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Link | `link` | link | empty | URL o ruta interna | Enlace del contenido. |
| Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Dónde se abre el enlace. Aparece cuando `link` tiene valor. |

Campos del acordeón **SEO**:

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Title attribute | `title` | text | empty | Cualquier texto | Atributo de título del enlace. |
| Tell search engines not to follow | `nofollow` | toggle | off | `nofollow` when on | Añade `rel="nofollow"` al enlace. |

### [Alerta](/es/hc/documentacion/aprender-dxpr-builder/elementos/alerta)

Un mensaje de alerta Bootstrap. Nombre de sistema: `az_alert`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Message | `content` | ckeditor | Placeholder text | HTML | El mensaje. |
| Type | `type` | radio | `alert-success` (Success) | `alert-success` (Success), `alert-info` (Info), `alert-warning` (Warning), `alert-danger` (Danger) | Color de la alerta. |

### [Tarjeta](/es/hc/documentacion/aprender-dxpr-builder/elementos/tarjeta)

Un contenedor de tarjeta Bootstrap con encabezado y título opcionales. Nombre de sistema: `az_card`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Header | `header` | text | empty | Cualquier texto | Texto de encabezado de la tarjeta. |
| Title | `title` | text | empty | Cualquier texto | Título de la tarjeta. |
| Type | `type` | select | empty (Default) | empty (Default), `text-white bg-primary` (Primary), `text-white bg-secondary` (Secondary), `text-white bg-success` (Success), `text-white bg-info` (Info), `text-white bg-warning` (Warning), `text-white bg-danger` (Danger), `text-white bg-dark` (Dark), `bg-light` (Light) | Clases de color de la tarjeta. |

### [Panel](/es/hc/documentacion/aprender-dxpr-builder/elementos/panel)

Un contenedor de panel con barra de título. Nombre de sistema: `az_panel`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Title | `title` | text | empty | Cualquier texto | Título del panel. |
| Type | `type` | select | `panel-dxpr` (DXPR) | `panel-dxpr` (DXPR), `panel-default` (Default), `panel-primary` (Primary), `panel-success` (Success), `panel-info` (Info), `panel-warning` (Warning), `panel-danger` (Danger) | Estilo del panel. |

### [Cita en bloque](/es/hc/documentacion/aprender-dxpr-builder/elementos/cita-bloque)

Una cita con atribución opcional. Nombre de sistema: `az_blockquote`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Text | `content` | ckeditor | Placeholder text | HTML | El texto citado. |
| Cite | `cite` | text | empty | Cualquier texto | Atribución mostrada bajo la cita. |
| Reverse | `reverse` | toggle | off | `blockquote-reverse` when on | Alinea la cita al final de la línea (`text-end`). |

### [Enlaces sociales](/es/hc/documentacion/aprender-dxpr-builder/elementos/enlaces-sociales)

Una fila o columna de iconos de redes sociales que enlazan a páginas de perfil. Nombre de sistema: `st_social`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Social links | `st_social_links` | social | Facebook and YouTube rows | Una fila por icono: una marca y la URL del perfil | Los iconos y sus enlaces. |
| Layout | `st_type` | radio | `inline` (Inline) | `inline` (Inline), `stacked` (Stacked) | Diseño de los iconos. |
| Style | `st_style` | radio | empty (None) | empty (None), `rounded` (Rounded), `circle` (Circle), `square` (Square) | Forma del fondo del icono. |
| Size | `st_size` | radio | `lg` (Large) | `lg` (Large), empty (Small), `2x`, `3x`, `4x`, `5x`; the last four labels match their values | Tamaño del icono. |
| CSS3 hover effects | `st_css3_hover_effects` | radio | empty (None) | empty (None), `disc` (Disc), `pulse` (Pulse) | Efecto al pasar el cursor. Un efecto vuelve el icono de estilo circular. |

Campos del acordeón **Icon colors**:

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Color | `st_theme_color` | radio | `custom` (Custom) | `brand` (Brand color), `custom` (Custom), `inherit` (Inherit) | Origen del color del icono. |
| Color | `st_color` | colour | none | Cualquier color | Color personalizado del icono. Aparece cuando `st_theme_color` es `custom`. |
| Background color | `st_theme_bgcolor` | radio | `custom` (Custom) | `brand` (Brand color), `custom` (Custom), `inherit` (Inherit) | Origen del color de fondo del icono. |
| Background color | `st_bgcolor` | colour | none | Cualquier color | Color de fondo personalizado. Aparece cuando `st_theme_bgcolor` es `custom`. |

### [Contador numérico](/es/hc/documentacion/aprender-dxpr-builder/elementos/contador-numeros)

Un número que cuenta desde un valor inicial hasta un valor final. Nombre de sistema: `az_counter`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Start | `start` | number | 0 | Número | Número desde el que empieza la cuenta. |
| End | `end` | number | 100 | Número | Número hasta el que cuenta. |
| Font size | `fontsize` | slider | 30 | 0 a 200, paso 1 | Tamaño de fuente del número en píxeles. |
| Speed | `speed` | slider | 2000 | 0 a 10000, paso 1 | Tiempo en milisegundos para terminar la cuenta. |
| Thousands separator | `seperator` | radio | empty (None) | empty (None), `,` (Comma), `.` (Dot), a space (Space) | Separa los miles en el número final. El código escribe el parámetro así. |
| Prefix | `prefix` | text | empty | Cualquier texto | Caracteres antes del número, por ejemplo `$`. |
| Suffix | `postfix` | text | empty | Cualquier texto | Caracteres tras el número, por ejemplo `%`. |

### [Contador circular](/es/hc/documentacion/aprender-dxpr-builder/elementos/contador-circular)

Indicador de progreso circular con texto opcional, una línea de información y un icono en el centro. Nombre de sistema: `az_circle_counter`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Foreground color | `fgcolor` | colour | `#333333` | Cualquier color | Color del arco de progreso. |
| Background color | `bgcolor` | colour | `#999999` | Cualquier color | Color de la pista detrás del arco. |
| Fill color | `fill` | colour | none | Cualquier color | Color de relleno dentro del círculo. |
| Percent | `percent` | slider | 50 | 0 a 100, paso 1 | Valor de progreso. |
| Dimension | `dimension` | slider | 250 | 100 a 500, paso 1 | Diámetro del círculo en píxeles. |
| Foreground width | `width` | slider | 10 | 1 a 100, paso 1 | Grosor del trazo del arco. |
| Animation | `animation` | toggle | on | `yes` when on | Anima el arco. |
| Animation duration | `duration` | slider | 1500 | 0 a 5000, paso 1 | En milisegundos. Aparece cuando `animation` está activado. |
| Animation delay | `delay` | slider | 0 | 0 a 5000, paso 1 | En milisegundos. Aparece cuando `animation` está activado. |
| Animation in-viewport | `in_viewport` | toggle | on | `yes` when on | Empieza la animación cuando el elemento entra en vista al desplazar. Aparece cuando `animation` está activado. |

Campos del acordeón **Circle content**. Cada campo tras **Show progress** solo aparece mientras está desactivado:

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Show progress | `show_progress` | toggle | off | `yes` when on | Muestra el porcentaje en lugar de tu propio texto e icono. |
| Text | `text` | text | empty | Cualquier texto | Texto central. |
| Font size | `fontsize` | slider | 16 | 0 a 100, paso 1 | Tamaño del texto central en píxeles. |
| Text color | `text_color` | colour | none | Cualquier color | Color del texto central. |
| Info | `info` | text | empty | Cualquier texto | Línea de información secundaria. |
| Info font size | `info_fontsize` | slider | 14 | 0 a 100, paso 1 | Tamaño de la línea de información en píxeles. |
| Info color | `info_color` | colour | none | Cualquier color | Color de la línea de información. |
| Icon | `icon` | icon | empty | Icono de los juegos que permite tu perfil de constructor | Icono central. |
| Icon size | `icon_size` | slider | 16 | 0 a 100, paso 1 | Tamaño de fuente del icono en píxeles. |
| Icon color | `icon_color` | colour | none | Cualquier color | Color del icono. |

### [Barra de progreso](/es/hc/documentacion/aprender-dxpr-builder/elementos/barra-progreso)

Barra de progreso horizontal Bootstrap con etiqueta. Nombre de sistema: `az_progress_bar`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Label | `label` | text | Click to add text | Cualquier texto | Texto dentro de la barra. |
| Progress | `width` | slider | 50 | 0 a 100, paso 1 | Progreso como porcentaje. |
| Bar height | `height` | slider | 45 | 0 a 100, paso 1 | Alto de la barra en píxeles. |
| Back color | `bgcolor` | colour | `#e9ecef` | Cualquier color | Color de pista detrás de la barra. |
| Front color | `fcolor` | colour | `#284ed9` | Cualquier color | Color de la barra. |
| Grow animation | `grow_animation` | toggle | off | `yes` when on | Anima la barra desde 0 hasta su valor. |
| Stripes | `options` | checkboxes | none ticked | `progress-bar-striped` (Add striped pattern to bar), `progress-bar-animated` (Animate stripes (requires striped pattern)) | Patrón de rayas y rayas en movimiento. |

### [Cuenta atrás](/es/hc/documentation/learn-dxpr-builder/elements/countdown-timer)

Cuenta atrás hasta una fecha, una hora del día o el fin de un intervalo repetido. Nombre de sistema: `az_countdown`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Countdown style | `countdown_style` | radio | `plain` (Plain) | `plain` (Plain), `style1` (Grid), `style6` (3D flip), `style9` (Disc), `style10` (Airport style), `style12` (Transparent) | Estilo visual. |
| Date / Time Limitations | `counter_scope` | radio | `date` (Specify date only) | `date` (Specify date only), `date_time` (Specify date and time), `repeating` (Specify time only (repeating every day)), `resetting` (Resetting counter (set interval up to 24 hours)) | A qué cuenta atrás el temporizador. |
| Date | `date` | datetime | empty | Fecha en `d.m.Y` formato | Fecha objetivo. Aparece cuando `counter_scope` es `date`. |
| Date / Time | `date_time` | datetime | empty | Fecha en `d.m.Y` formato más hora (`H`) | Fecha y hora objetivo. Aparece cuando `counter_scope` es `date_time`. |
| Time | `time` | datetime | empty | Hora (`H`) | Hora objetivo de cada día. Aparece cuando `counter_scope` es `repeating`. |
| Reset in hours | `reset_hours` | slider | 0 | 0 a 24, paso 1 | Horas del intervalo. Aparece cuando `counter_scope` es `resetting`. |
| Reset in minutes | `reset_minutes` | slider | 0 | 0 a 60, paso 1 | Minutos del intervalo. Aparece cuando `counter_scope` es `resetting`. |
| Reset in seconds | `reset_seconds` | slider | 0 | 0 a 60, paso 1 | Segundos del intervalo. Aparece cuando `counter_scope` es `resetting`. |
| Page referrer | `referrer` | link | empty | URL o ruta interna | Página abierta cuando vence la cuenta atrás. Aparece cuando `counter_scope` es `repeating` o `resetting`. |
| Automatic restart | `restart` | toggle | off | `yes` when on | Reinicia el intervalo cuando termina. Aparece cuando `counter_scope` es `resetting`. |
| Display options | `display` | checkboxes | all five ticked | `years` (Show remaining years), `days` (Show remaining days), `hours` (Show remaining hours), `minutes` (Show remaining minutes), `seconds` (Show remaining seconds) | Unidades para mostrar. |

### [Marquesina](/es/hc/documentation/learn-dxpr-builder/elements/marquee)

Tira horizontal de imágenes que se desplaza sin parar. Nombre de sistema: `az_marquee`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Images | `images` | images | Three copies of the DXPR logo | Imágenes del navegador de medios | Las imágenes de la tira. |
| Speed | `speed` | slider | 3 | 1 a 5, paso 1 | Velocidad de desplazamiento; 1 es la más lenta, 5 la más rápida. |
| Height | `height` | slider | 50 | 10 a 200, paso 1 | Alto de imagen en píxeles. |
| Image layout | `image_layout` | radio | `fh` (Fixed height images) | `fh` (Fixed height images), `fw` (Fixed width images) | Si las imágenes comparten alto o ancho. |
| Image width | `width` | slider | 400 | 50 a 500, paso 1 | Ancho de imagen en píxeles. Aparece cuando `image_layout` es `fw`. |
| Gray scale | `grayscale` | toggle | off | `apply` when on | Muestra las imágenes en escala de grises. |
| Fade edges | `fade_edges` | toggle | off | `apply` when on | Difumina la tira en ambos bordes. |

Campos del acordeón **SEO**:

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Alt attribute | `alt` | text | empty | Cualquier texto | Texto Alt de las imágenes. |
| Title attribute | `title` | text | empty | Cualquier texto | Atributo de título de las imágenes. |

### [Mapa](/es/hc/documentation/learn-dxpr-builder/elements/map)

Mapa de Google incrustado para una dirección. Nombre de sistema: `az_map`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Address | `address` | text | empty | Dirección postal | Ubicación para mostrar. |
| Map width | `width` | text | `100%` | Longitud CSS, por ejemplo `100px` or `50%` | Un número solo cuenta como píxeles. |
| Map height | `height` | text | `400px` | Longitud CSS, por ejemplo `100px` | Un número solo cuenta como píxeles. |

### [Icono](/es/hc/documentacion/aprender-dxpr-builder/elementos/icono)

Un solo icono, opcionalmente enlazado. Nombre de sistema: `az_icon`. El módulo incluye 14 juegos de iconos. Los temas y módulos pueden añadir más, y un perfil de constructor puede limitar qué juegos ve el equipo de edición.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Icon | `icon` | icon | `bi bi-heart` | Icono de los juegos que permite tu perfil de constructor | El icono. |
| Size | `size` | radio | `fa-lg` (Large) | `normal` (Normal), `fa-lg` (Large), `fa-2x` (Extra Large (2x)), `fa-3x` (Very Large (3x)), `fa-4x` (Huge (4x)), `fa-5x` (Gigantic (5x)) | Tamaño del icono. |
| Link | `link` | link | empty | URL o ruta interna | Enlace del icono. |
| Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Dónde se abre el enlace. Aparece cuando `link` tiene valor. |

Campos del acordeón **Icon utilities**:

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Style | `st_style` | radio | empty (None) | empty (None), `stbe-util-icon-rounded` (Rounded), `stbe-util-icon-circle` (Circle), `stbe-util-icon-square` (Square) | Forma del fondo. |
| Icon animation | `animation` | radio | empty (No) | empty (No), `fa-spin` (Spin), `fa-pulse` (Pulse) | Animación del icono. |
| Icon orientation | `orientation` | radio | empty (Normal) | empty (Normal), `fa-rotate-90` (Rotate 90), `fa-rotate-180` (Rotate 180), `fa-rotate-270` (Rotate 270), `fa-flip-horizontal` (Flip horizontal), `fa-flip-vertical` (Flip vertical) | Rotación o volteo. |

### [Separador](/es/hc/documentacion/aprender-dxpr-builder/elementos/separador)

Regla horizontal. Nombre de sistema: `az_separator`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Color | `bgcolor` | colour | none | Cualquier color | Color de la línea. |
| Thickness | `thickness` | radio | `auto` (Theme default) | `auto` (Theme default), `custom` (Custom thickness) | Si sobrescribe el grosor del tema. |
| Thickness | `custom_thickness` | slider | 3 | 0 a 20, paso 1 | Grosor de línea en píxeles. Aparece cuando `thickness` es `custom`. |
| Length | `width` | radio | `auto` (Theme default) | `auto` (Theme default), `custom` (Custom width) | Si sobrescribe la longitud del tema. |
| Width | `custom_width` | slider | 100 | 0 a 500, paso 10 | Longitud de línea en píxeles; 0 muestra ancho completo. Aparece cuando `width` es `custom`. |
| Align | `align` | radio | `left` (Left) | `left` (Left), `center` (Center), `right` (Right) | Alineación horizontal. Aparece cuando `width` es `custom`. |

## Elementos de diseño

### [Sección](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/secciones)

Contenedor superior para filas, con opciones de ancho completo, alto completo y efectos de fondo. Nombre de sistema: `az_section`. Las secciones nuevas reciben la clase `py-5` en **HTML classes**.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Full width | `fluid` | toggle | off | `yes` when on | Usa un contenedor de ancho completo (`container-fluid`). |
| 100% height | `fullheight` | toggle | off | `yes` when on | La sección ocupa el alto de la ventana. |
| Vertical centering | `vertical_centering` | toggle | off | `yes` when on | Centra el contenido verticalmente. |

Campos del acordeón **Background effects**. Todos salvo **Background effect** dependen de su valor, como muestra la columna Descripción:

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Background effect | `effect` | radio | empty (Simple image) | empty (Simple image), `fixed` (Fixed image), `parallax` (Parallax image), `gradient` (Gradient), `youtube` (YouTube video) | Efecto de fondo. |
| Parallax speed | `parallax_speed` | slider | 0 | 0 a 100, paso 1 | Velocidad de desplazamiento del parallax. Aparece cuando `effect` es `parallax`. |
| Parallax mode | `parallax_mode` | radio | `fixed` (Fixed) | `fixed` (Fixed), `scroll` (Local) | Adjunto de fondo de la imagen. Aparece cuando `effect` es `parallax`. |
| Disable on mobile | `parallax_mobile_disable` | toggle | off | `yes` when on | Apaga el parallax en pantallas de menos de 481 px. Aparece cuando `effect` es `parallax`. |
| Start color | `gradient_start_color` | colour | none | Cualquier color | Color inicial del degradado. Aparece cuando `effect` es `gradient`. |
| End color | `gradient_end_color` | colour | none | Cualquier color | Color final del degradado. Aparece cuando `effect` es `gradient`. |
| Gradient direction | `gradient_direction` | slider | 180 | 1 a 360, paso 1 | Ángulo del degradado en grados. Aparece cuando `effect` es `gradient`. |
| Start position | `gradient_start` | slider | 0 | 0 a 100, paso 1 | Posición del color inicial en porcentaje. Aparece cuando `effect` es `gradient`. |
| End position | `gradient_end` | slider | 100 | 0 a 100, paso 1 | Posición del color final en porcentaje. Aparece cuando `effect` es `gradient`. |
| Video options | `video_options` | checkboxes | none ticked | `disMobile` (Disable on mobile devices), `loop` (Loop), `audio` (Unmute (Not reliable when auto-playing due to recent browser policy updates)), `noCrop` (Disable cropping out player), `resizeSection` (Resize section to match video), `showControls` (Show controls) | Opciones de fondo de YouTube. Aparece cuando `effect` es `youtube`. |
| YouTube video URL | `video_youtube` | text | empty | URL de YouTube | Vídeo de fondo de YouTube. Aparece cuando `effect` es `youtube`. |
| Start time in seconds | `video_start` | text | 0 | Segundos | Tiempo de inicio del vídeo. Aparece cuando `effect` es `youtube`. |
| Stop time in seconds | `video_stop` | text | 0 | Segundos | Tiempo de fin del vídeo. Aparece cuando `effect` es `youtube`. |

### [Fila](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/filas-columnas)

Fila de cuadrícula Bootstrap que guarda columnas. Una fila nueva empieza con dos columnas de medio ancho. Nombre de sistema: `az_row`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Equal-height columns | `equal` | toggle | off | `yes` when on | Da a todas las columnas la misma altura. |
| Mirror row | `reverse_horizontal` | toggle | off | `yes` when on | Invierte el orden de columnas en pantallas de 768 px y más. |

### [Columna](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/filas-columnas)

Una columna dentro de una fila. Las filas crean sus columnas, así que Columna no está en el selector de elementos. Nombre de sistema: `az_column`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Vertical centering | `vertical_centering` | toggle | off | `yes` when on | Centra el contenido de la columna verticalmente. |

### [Pestañas](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/panel-pestanas)

Contenedor con paneles de pestaña conmutables; cada pestaña se añade con el control **Add tab**. Nombre de sistema: `az_tabs`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Tab direction | `az_dirrection` | radio | empty (Default) | empty (Default), `tabs-left` (Left), `tabs-right` (Right) | Posición de la barra de pestañas. El código escribe el parámetro así. |
| Style | `tab_style` | radio | empty (Default) | empty (Default), `modern` (Modern), `accordion` (Accordion) | Estilo de pestañas. |
| Mobile friendly | `responsive` | toggle | on | `yes` when on | Muestra las pestañas como plegable en pantallas pequeñas. |

Cada pestaña (`az_tab`) tiene sus propios ajustes:

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Tab title | `title` | text | Title | Cualquier texto | Etiqueta de la pestaña. |
| Tab description | `subtitle` | ckeditor | empty | HTML | Línea de entradilla corta opcional mostrada en la pestaña activa. |

### [Panel plegable](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/panel-plegable)

Contenedor de paneles plegables; cada panel se añade con el control **Add toggle**. Nombre de sistema: `az_accordion`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Collapse | `collapsed` | toggle | off | `yes` when on | Empieza con cada panel cerrado. Cuando está desactivado, el primer panel empieza abierto. |
| Expand icon | `expandicon` | radio | empty (None) | empty (None), `az-accordion--icon-plusminus` (+), `az-accordion--icon-arrow` (﹀) | Icono junto al título de cada panel. |

Cada panel (`az_toggle`) tiene sus propios ajustes:

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Toggle title | `title` | text | Title | Cualquier texto | Título del panel. |

### [Carrusel](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/diseno-carrusel)

Contenedor de diapositivas; cada diapositiva guarda otros elementos y se añade con el control **Add slide**. Las diapositivas (`az_slide`) no tienen campos propios. Nombre de sistema: `az_carousel`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Frames per slide | `items` | slider | 1 | 1 a 10, paso 1 | Diapositivas mostradas lado a lado. Las pantallas estrechas muestran menos. |
| Disable auto-play | `autoplay` | toggle | off | `yes` when on | Impide que las diapositivas avancen solas. |
| Auto-play interval | `interval` | slider | 5000 | 1000 a 20000, paso 100 | Tiempo entre diapositivas en milisegundos. |
| Stop on hover | `stoponhover` | toggle | off | `yes` when on | Pausa la reproducción automática mientras el puntero está sobre el carrusel. |

Campos del acordeón **Dots**. Cada campo tras **Dots navigation** solo aparece mientras está activado:

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Dots navigation | `pagination` | toggle | on | `yes` when on | Muestra un punto por cada diapositiva. |
| Dots orientation | `pagination_orientation` | radio | `outside` (Outside slider) | `outside` (Outside slider), `inside` (Inside slider) | Posición de los puntos. |
| Dot shape | `pagination_shape` | radio | `bar` (Bar) | `bar` (Bar), `circle` (Circle), `square` (Square), `triangle` (Triangle) | Forma del punto. |
| Active dot transformation | `pagination_transform` | radio | empty (None) | empty (None), `growTaller` (Grow taller), `growWider` (Grow wider), `scaleUp` (Scale up) | Efecto en el punto activo. |
| Dot color | `pagination_color` | colour | none | Cualquier color | Color del punto. |
| Active dot color | `pagination_active_color` | colour | none | Cualquier color | Color del punto activo. |

Campos del acordeón **Next/Previous**. Cada campo tras **Next/Previous** solo aparece mientras está activado:

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Next/Previous | `navigation` | toggle | off | `yes` when on | Muestra las flechas siguiente y anterior. |
| Orientation | `navigation_orientation` | radio | `outside` (Outside slider) | `outside` (Outside slider), `inside` (Inside slider) | Posición de las flechas. |
| Dot shape | `navigation_shape` | radio | empty (No background) | empty (No background), `circle` (Circle), `square` (Square), `bar` (Bar) | Forma del fondo de la flecha. La ventana modal lo llama **Dot shape** también. |
| Icon color | `navigation_icon_color` | colour | none | Cualquier color | Color del icono de la flecha. |
| Icon hover color | `navigation_icon_hover_color` | colour | none | Cualquier color | Color del icono de la flecha al pasar el cursor. |
| Background color | `navigation_background_color` | colour | none | Cualquier color | Color de fondo de la flecha. |
| Background hover color | `navigation_background_hover_color` | colour | none | Cualquier color | Color de fondo de la flecha al pasar el cursor. |
| Outside navigation position | `navigation_position` | select | `adjacent` (Adjacent) | `adjacent` (Adjacent), `topCenter` (Top center), `topLeft` (Top left), `topRight` (Top right), `bottomCenter` (Bottom center), `bottomLeft` (Bottom left), `bottomRight` (Bottom right) | Posición de las flechas fuera del deslizador. |

### [Capas posicionadas](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/capas-posicionadas)

Lienzo en el que los elementos hijos se arrastran y cambian de tamaño libremente. Un elemento de Capas posicionadas no puede anidarse dentro de otro. Nombre de sistema: `az_layers`. Cada hijo guarda su sitio en parámetros ocultos: `pos_left`, `pos_top`, `pos_width`, `pos_height` y `pos_zindex`.

| Etiqueta | Parámetro | Control | Valor por defecto | Valores permitidos | Descripción |
|---|---|---|---|---|---|
| Width | `width` | text | `100%` | Longitud CSS, por ejemplo `100px` or `50%` | Ancho del lienzo. Un número solo cuenta como píxeles. |
| Height | `height` | slider | 500 | 0 a 10000, paso 1 | Alto del lienzo en píxeles. |
| Responsive | `responsive` | toggle | off | `yes` when on | Escala el alto del lienzo y los tamaños de fuente con el ancho disponible. |

## ¿Qué sigue?

- [Resumen de elementos](/hc/documentation/learn-dxpr-builder/elements)
- [Resumen de diseño](/hc/documentation/learn-dxpr-builder/layout/overview)
- [Ajustes de elemento](/hc/documentation/learn-dxpr-builder/element-settings)