Referencia de elementos.

Aprende DXPR BuilderReferenciaElementos y CSS

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

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

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

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.

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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?