--- url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/referencia/referencia-de-elementos' title: 'Referência de elementos | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T09:03:22+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'O DXPR Builder fornece 22 elementos de conteúdo e 6 elementos de esquema. Esta página lista o nome de máquina de cada elemento e os campos na sua janela de definições; a parte de esquema também lista a Column dentro de cada fila. Blocos e vistas Drupal, que o construtor também oferece como elementos, não estão incluídos.' 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: 'Referência de elementos' description: 'O DXPR Builder fornece 22 elementos de conteúdo e 6 elementos de esquema. Esta página lista o nome de máquina de cada elemento e os campos na sua janela de definições; a parte de esquema também lista a Column dentro de cada fila. Blocos e vistas Drupal, que o construtor também oferece como elementos, não estão incluídos.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T09:03:22+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/pt-pt/hc/documentacao/aprender-dxpr-builder/referencia/referencia-de-elementos' articleSection: 'Elementos e CSS' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/referencia/referencia-de-elementos' description: 'O DXPR Builder fornece 22 elementos de conteúdo e 6 elementos de esquema. Esta página lista o nome de máquina de cada elemento e os campos na sua janela de definições; a parte de esquema também lista a Column dentro de cada fila. Blocos e vistas Drupal, que o construtor também oferece como elementos, não estão incluídos.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Início item: 'https://dxpr.com/pt-pt' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pt-pt --- [Centro de ajuda](/pt-pt/node/75)/[Documentação](/pt-pt/hc/documentacao) /[Aprender DXPR Builder](/pt-pt/hc/documentation/learn-dxpr-builder) /[Referência](/pt-pt/hc/documentation/learn-dxpr-builder/reference) /[Elementos e CSS](/pt-pt/hc/documentation/learn-dxpr-builder/reference/elements-and-css) # Referência de elementos. Aprender DXPR BuilderReferênciaElementos e CSS ## Neste guia O DXPR Builder fornece 22 elementos de conteúdo e 6 elementos de esquema. Esta página lista o nome de máquina de cada elemento e os campos na sua janela de definições; a parte de esquema também lista a Column dentro de cada fila. Blocos e vistas Drupal, que o construtor também oferece como elementos, não estão incluídos. ## Como ler esta página A primeira tabela de cada elemento lista os campos no seu **General** acordeão. Um campo noutro acordeão fica numa tabela separada com o nome desse acordeão. Label é o rótulo do campo como a janela o mostra, na ortografia americana da interface. Parameter é o `param_name` na definição do elemento. As opções lêem-se `value` (Label). Dois campos General aparecem em todos os elementos e não se repetem nas tabelas: | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | HTML ID | `hash` | text | vazio; o campo mostra o ID gerado como exemplo | Uma letra primeiro, depois letras, números, hífenes e sublinhados | ID personalizado para o elemento. | | HTML classes | `el_class` | multi-select | vazio; as secções novas recebem `py-5` | Classes utilitárias de Bootstrap 5 e as classes que os temas ativados declaram; **Edit as text** aceita qualquer classe | Classes CSS extra para o elemento. | Cada elemento tem também os acordeões **Style** e **Hover style**, documentados na página [Altere o aspeto de um elemento no painel Style](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/separador-de-estilo) página. Todos os elementos exceto Column e os painéis dentro de Tabs, Collapse panel e Carousel também têm o acordeão **Animation** , documentado na página [Separador de animação](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/separador-de-animacao)página. A coluna Control indica o que a janela mostra. Cada controlo vem de um parâmetro `type` na definição do elemento: | Controlo | Código `type` | |---|---| | text | `textfield` | | number | `numericfield` | | link | `link` | | radio | `dropdown` com menos de 7 opções | | select | `dropdown` com 7 ou mais opções | | toggle | `checkbox` com uma opção | | checkboxes | `checkbox` com várias opções | | slider | `dxb_slider` | | colour | `colorpicker` | | icon, image, images, video, datetime | O `type` com o mesmo nome | | ckeditor | `textarea` | | ace | `html` | | social | `social_links` | Um toggle ligado guarda o valor na sua célula Allowed values; um toggle desligado guarda `no` ou um valor vazio. As caixas de seleção guardam os valores marcados como lista separada por vírgulas. Uma opção listada como vazia é guardada como string vazia; na janela, o seu botão de rádio tem a chave `dxpr-default`. Os campos image e images também oferecem uma seleção de estilo de imagem: o estilo `optimize` do site primeiro quando existe, depois **Original image (No resizing)** e os outros estilos de imagem. Alguns campos ficam escondidos até outro campo ter um valor correspondente; a coluna Description indica essa dependência. ## Elementos de conteúdo ### [Adicionar um elemento de texto](/pt-pt/hc/documentation/learn-dxpr-builder/elements/text) Texto rico editado em CKEditor. Nome de máquina: `az_text`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Text | `content` | ckeditor | Placeholder heading and paragraph | HTML | O conteúdo de texto. | ### [Adicionar uma imagem](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/imagem) Uma única imagem, opcionalmente envolvida numa ligação. Nome de máquina: `az_image`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Image | `image` | image | vazio | Imagem do navegador de média | A imagem a mostrar. | | Image width | `width` | text | `100%` | Comprimento CSS, por exemplo `100px` ou `50%` | Um número simples conta como píxeis. | | Image height | `height` | text | vazio | Comprimento CSS, por exemplo `100px` | Um número simples conta como píxeis. | | Image link | `link` | link | vazio | URL ou caminho interno | Envolve a imagem numa ligação. | | Image link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Onde a ligação abre. Mostrado quando `link` está definido. | Campos no acordeão **SEO** : | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Alt attribute | `alt` | text | vazio | Qualquer texto | Texto alternativo da imagem. | | Title attribute | `title` | text | vazio | Qualquer texto | Atributo de título da imagem. | ### [Adicionar um carrossel de imagens](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/carrossel-de-imagens) Uma apresentação de diapositivos Bootstrap de várias imagens. Nome de máquina: `az_images_carousel`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Images | `images` | images | vazio | Imagens do navegador de média | Um diapositivo por imagem. | | Interval | `interval` | slider | 5000 | 0 to 10000, step 1 | Tempo entre diapositivos em milissegundos. Com 0, os diapositivos não avançam sozinhos. | | Hide | `hide` | checkboxes | nenhum marcado | `pagination_control` (Hide pagination control), `prev_next_buttons` (Hide prev/next buttons) | Hides the indicators, the arrows or both. | Campos no acordeão **SEO** : | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Alt attribute | `alt` | text | vazio | Qualquer texto | Texto alternativo das imagens. | | Title attribute | `title` | text | vazio | Qualquer texto | Atributo de título das imagens. | ### [Adicionar um vídeo](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/video) Incorpora um vídeo YouTube ou Vimeo. Nome de máquina: `az_video`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Video link | `link` | text | vazio | URL YouTube ou Vimeo | O vídeo a incorporar. | | Video width | `width` | text | `100%` | Comprimento CSS, por exemplo `100px` ou `50%` | Um número simples conta como píxeis. | | Image | `image` | image | vazio | Imagem do navegador de média | Imagem de capa; o leitor carrega quando o visitante clica nela. | | Themed play button | `play` | toggle | off | `yes` quando ligado | Mostra o botão de reprodução com tema sobre o vídeo. | ### [Adicionar um vídeo local](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/video-local) Reproduz um ficheiro de vídeo autoalojado num leitor HTML5. Nome de máquina: `az_video_local`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Video | `video` | video | vazio | Ficheiro MP4, WEBM, OGG ou OGV, até ao limite de tamanho de carregamento do site | O ficheiro de vídeo. | | Start playing automatically | `autoplay` | toggle | off | `autoplay` quando ligado | Inicia a reprodução ao carregar a página. A reprodução automática silencia sempre o vídeo. | | Muted | `muted` | toggle | off | `muted` quando ligado | Silencia o vídeo. Mostrado enquanto `autoplay` está desligado. | | Controls | `controls` | toggle | off | `controls` quando ligado | Mostra os controlos do leitor. | | Loop | `loop` | toggle | off | `loop` quando ligado | Reinicia o vídeo quando termina. | | Video width | `width` | text | `100%` | Comprimento CSS, por exemplo `100px` ou `50%` | Largura do leitor. | | Image | `image` | image | vazio | Imagem do navegador de média | Imagem de cartaz mostrada antes da reprodução. | ### [Adicionar um elemento HTML](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/html) HTML em bruto editado num editor de código. Nome de máquina: `az_html`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Raw HTML | `content` | ace | Placeholder message "Click the edit button to change this HTML" | HTML | O conteúdo HTML. | ### [Adicionar um Jumbotron](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/jumbotron) Faixa grande com título e texto de abertura; outros elementos podem ser largados dentro dela. Nome de máquina: `az_jumbotron`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Title | `title` | text | vazio | Qualquer texto | Título da faixa. | | Lead | `lead` | text | vazio | Qualquer texto | Texto de subtítulo mostrado por baixo do 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) | Classes de cor de fundo e texto. | | Padding | `padding` | radio | `p-5` (Large) | `p-5` (Large), `p-4` (Medium), `p-3` (Small) | Tamanho do preenchimento. | ### [Adicionar um botão](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/botao) Um botão Bootstrap com ligação para um URL. Nome de máquina: `az_button`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Title | `title` | text | Click to add text | Qualquer texto | Texto no botão. | | Link | `link` | link | vazio | URL ou caminho interno | Ligação do botão. | | Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Onde a ligação abre. Mostrado quando `link` está definido. | | Type | `type` | select | `primary` (Primary) | `primary`, `secondary`, `success`, `info`, `warning`, `danger`, `link`, `light`, `dark`; cada rótulo é o valor com maiúscula | Estilo de botão Bootstrap. | | Block button | `block` | toggle | off | `btn-block` quando ligado | Botão de largura total. | | Outline style | `outlined` | toggle | off | `outline` quando ligado | Apresenta `btn-outline-*` em vez de `btn-*`. | | Size | `size` | radio | empty (Normal) | empty (Normal), `btn-lg` (Large), `btn-sm` (Small) | Tamanho do botão. | ### [Adicionar uma ligação](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/ligacao) Contentor que envolve os elementos lá dentro numa só ligação. Nome de máquina: `az_link`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Link | `link` | link | vazio | URL ou caminho interno | Ligação de conteúdo. | | Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Onde a ligação abre. Mostrado quando `link` está definido. | Campos no acordeão **SEO** : | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Title attribute | `title` | text | vazio | Qualquer texto | Atributo de título da ligação. | | Tell search engines not to follow | `nofollow` | toggle | off | `nofollow` quando ligado | Adiciona `rel="nofollow"` à ligação. | ### [Adicionar um alerta](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/alerta) Uma mensagem de alerta Bootstrap. Nome de máquina: `az_alert`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Message | `content` | ckeditor | Placeholder text | HTML | A mensagem. | | Type | `type` | radio | `alert-success` (Success) | `alert-success` (Success), `alert-info` (Info), `alert-warning` (Warning), `alert-danger` (Danger) | Cor do alerta. | ### [Adicionar um cartão](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/cartao) Um contentor de cartão Bootstrap com cabeçalho e título opcionais. Nome de máquina: `az_card`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Header | `header` | text | vazio | Qualquer texto | Texto do cabeçalho do cartão. | | Title | `title` | text | vazio | Qualquer texto | Título do cartão. | | 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) | Classes de cor do cartão. | ### [Adicionar um painel](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/painel) Um contentor de painel com barra de título. Nome de máquina: `az_panel`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Title | `title` | text | vazio | Qualquer texto | Título do painel. | | 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 do painel. | ### [Adicionar um bloco de citação](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/bloco-de-citacao) Uma citação com referência opcional. Nome de máquina: `az_blockquote`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Text | `content` | ckeditor | Placeholder text | HTML | O texto citado. | | Cite | `cite` | text | vazio | Qualquer texto | Referência mostrada por baixo da citação. | | Reverse | `reverse` | toggle | off | `blockquote-reverse` quando ligado | Alinha a citação ao fim da linha (`text-end`). | ### [Adicionar um elemento de ligações sociais](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/ligacoes-sociais) Uma fila ou coluna de ícones de redes sociais com ligação para páginas de perfil. Nome de máquina: `st_social`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Social links | `st_social_links` | social | linhas de Facebook e YouTube | Uma fila por ícone: uma marca e o URL do perfil | Os ícones e as suas ligações. | | Layout | `st_type` | radio | `inline` (Inline) | `inline` (Inline), `stacked` (Stacked) | Esquema do ícone. | | Style | `st_style` | radio | empty (None) | empty (None), `rounded` (Rounded), `circle` (Circle), `square` (Square) | Forma do fundo do ícone. | | Size | `st_size` | radio | `lg` (Large) | `lg` (Large), empty (Small), `2x`, `3x`, `4x`, `5x`; os últimos quatro rótulos correspondem aos seus valores | Tamanho do ícone. | | CSS3 hover effects | `st_css3_hover_effects` | radio | empty (None) | empty (None), `disc` (Disc), `pulse` (Pulse) | Efeito de pairar. Um efeito torna o ícone estilo círculo. | Campos no acordeão **Icon colors** : | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Color | `st_theme_color` | radio | `custom` (Custom) | `brand` (Brand color), `custom` (Custom), `inherit` (Inherit) | Origem da cor do ícone. | | Color | `st_color` | colour | nenhum | Qualquer cor | Cor de ícone personalizada. Mostrado quando `st_theme_color` é `custom`. | | Background color | `st_theme_bgcolor` | radio | `custom` (Custom) | `brand` (Brand color), `custom` (Custom), `inherit` (Inherit) | Origem da cor de fundo do ícone. | | Background color | `st_bgcolor` | colour | nenhum | Qualquer cor | Cor de fundo personalizada. Mostrado quando `st_theme_bgcolor` é `custom`. | ### [Adicionar um contador numérico](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/contador-numerico) Um número que conta de um valor inicial até um valor final. Nome de máquina: `az_counter`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Start | `start` | number | 0 | Número | Número a partir do qual começar a contar. | | End | `end` | number | 100 | Número | Número até ao qual contar. | | Font size | `fontsize` | slider | 30 | 0 to 200, step 1 | Tamanho da letra do número em píxeis. | | Speed | `speed` | slider | 2000 | 0 to 10000, step 1 | Tempo em milissegundos para a contagem terminar. | | Thousands separator | `seperator` | radio | empty (None) | empty (None), `,` (Comma), `.` (Dot), a space (Space) | Separa os milhares no número final. O código escreve o parâmetro desta forma. | | Prefix | `prefix` | text | vazio | Qualquer texto | Carateres antes do número, por exemplo `$`. | | Suffix | `postfix` | text | vazio | Qualquer texto | Carateres depois do número, por exemplo `%`. | ### [Adicionar um contador circular](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/contador-circular) Indicador de progresso circular com texto opcional, linha de informação e ícone no centro. Nome de máquina: `az_circle_counter`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Foreground color | `fgcolor` | colour | `#333333` | Qualquer cor | Cor do arco de progresso. | | Background color | `bgcolor` | colour | `#999999` | Qualquer cor | Cor da pista por trás do arco. | | Fill color | `fill` | colour | nenhum | Qualquer cor | Cor de preenchimento dentro do círculo. | | Percent | `percent` | slider | 50 | 0 to 100, step 1 | Valor do progresso. | | Dimension | `dimension` | slider | 250 | 100 to 500, step 1 | Diâmetro do círculo em píxeis. | | Foreground width | `width` | slider | 10 | 1 to 100, step 1 | Largura do traço do arco. | | Animation | `animation` | toggle | on | `yes` quando ligado | Anima o arco. | | Animation duration | `duration` | slider | 1500 | 0 to 5000, step 1 | Em milissegundos. Mostrado quando `animation` está ligado. | | Animation delay | `delay` | slider | 0 | 0 to 5000, step 1 | Em milissegundos. Mostrado quando `animation` está ligado. | | Animation in-viewport | `in_viewport` | toggle | on | `yes` quando ligado | Inicia a animação quando o elemento entra na vista por deslocamento. Mostrado quando `animation` está ligado. | Campos no acordeão **Circle content** acordeão. Cada campo depois de **Show progress** só aparece enquanto está desligado: | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Show progress | `show_progress` | toggle | off | `yes` quando ligado | Mostra a percentagem em vez do seu próprio texto e ícone. | | Text | `text` | text | vazio | Qualquer texto | Texto central. | | Font size | `fontsize` | slider | 16 | 0 to 100, step 1 | Tamanho do texto central em píxeis. | | Text color | `text_color` | colour | nenhum | Qualquer cor | Cor do texto central. | | Info | `info` | text | vazio | Qualquer texto | Linha de informação secundária. | | Info font size | `info_fontsize` | slider | 14 | 0 to 100, step 1 | Tamanho da linha de informação em píxeis. | | Info color | `info_color` | colour | nenhum | Qualquer cor | Cor da linha de informação. | | Icon | `icon` | icon | vazio | Ícone dos conjuntos que o seu perfil do construtor permite | Ícone central. | | Icon size | `icon_size` | slider | 16 | 0 to 100, step 1 | Tamanho da letra do ícone em píxeis. | | Icon color | `icon_color` | colour | nenhum | Qualquer cor | Cor do ícone. | ### [Adicionar uma barra de progresso](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/barra-de-progresso) Barra de progresso Bootstrap horizontal com rótulo. Nome de máquina: `az_progress_bar`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Label | `label` | text | Click to add text | Qualquer texto | Texto dentro da barra. | | Progress | `width` | slider | 50 | 0 to 100, step 1 | Progresso em percentagem. | | Bar height | `height` | slider | 45 | 0 to 100, step 1 | Altura da barra em píxeis. | | Back color | `bgcolor` | colour | `#e9ecef` | Qualquer cor | Cor da pista por trás da barra. | | Front color | `fcolor` | colour | `#284ed9` | Qualquer cor | Cor da barra. | | Grow animation | `grow_animation` | toggle | off | `yes` quando ligado | Anima a barra de 0 até ao seu valor. | | Stripes | `options` | checkboxes | nenhum marcado | `progress-bar-striped` (Add striped pattern to bar), `progress-bar-animated` (Animate stripes (requires striped pattern)) | Padrão às riscas e riscas em movimento. | ### [Adicionar um temporizador de contagem decrescente](/pt-pt/hc/documentation/learn-dxpr-builder/elements/countdown-timer) Conta decrescentemente até uma data, hora do dia ou fim de um intervalo repetido. Nome de máquina: `az_countdown`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | 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)) | Até onde o temporizador conta. | | Date | `date` | datetime | vazio | Data no formato `d.m.Y` | Data de destino. Mostrado quando `counter_scope` é `date`. | | Date / Time | `date_time` | datetime | vazio | Data no formato `d.m.Y` mais hora (`H`) | Data e hora de destino. Mostrado quando `counter_scope` é `date_time`. | | Time | `time` | datetime | vazio | Hora (`H`) | Hora de destino de cada dia. Mostrado quando `counter_scope` é `repeating`. | | Reset in hours | `reset_hours` | slider | 0 | 0 to 24, step 1 | Horas no intervalo. Mostrado quando `counter_scope` é `resetting`. | | Reset in minutes | `reset_minutes` | slider | 0 | 0 to 60, step 1 | Minutos no intervalo. Mostrado quando `counter_scope` é `resetting`. | | Reset in seconds | `reset_seconds` | slider | 0 | 0 to 60, step 1 | Segundos no intervalo. Mostrado quando `counter_scope` é `resetting`. | | Page referrer | `referrer` | link | vazio | URL ou caminho interno | Página aberta quando a contagem decrescente expira. Mostrado quando `counter_scope` é `repeating` ou `resetting`. | | Automatic restart | `restart` | toggle | off | `yes` quando ligado | Recomeça o intervalo quando termina. Mostrado quando `counter_scope` é `resetting`. | | Display options | `display` | checkboxes | todas as cinco marcadas | `years` (Show remaining years), `days` (Show remaining days), `hours` (Show remaining hours), `minutes` (Show remaining minutes), `seconds` (Show remaining seconds) | Unidades a mostrar. | ### [Adicionar um letreiro animado](/pt-pt/hc/documentation/learn-dxpr-builder/elements/marquee) Faixa horizontal de imagens que desliza sem parar. Nome de máquina: `az_marquee`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Images | `images` | images | Três cópias do logótipo DXPR | Imagens do navegador de média | As imagens na faixa. | | Speed | `speed` | slider | 3 | 1 to 5, step 1 | Velocidade de deslocamento; 1 é o mais lento, 5 o mais rápido. | | Height | `height` | slider | 50 | 10 to 200, step 1 | Altura da imagem em píxeis. | | Image layout | `image_layout` | radio | `fh` (Fixed height images) | `fh` (Fixed height images), `fw` (Fixed width images) | Se as imagens partilham uma altura ou uma largura. | | Image width | `width` | slider | 400 | 50 to 500, step 1 | Largura da imagem em píxeis. Mostrado quando `image_layout` é `fw`. | | Gray scale | `grayscale` | toggle | off | `apply` quando ligado | Mostra as imagens em escala de cinzentos. | | Fade edges | `fade_edges` | toggle | off | `apply` quando ligado | Esbate a faixa em ambas as bordas. | Campos no acordeão **SEO** : | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Alt attribute | `alt` | text | vazio | Qualquer texto | Texto alternativo das imagens. | | Title attribute | `title` | text | vazio | Qualquer texto | Atributo de título das imagens. | ### [Adicionar um mapa](/pt-pt/hc/documentation/learn-dxpr-builder/elements/map) Mapa Google incorporado para um endereço. Nome de máquina: `az_map`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Address | `address` | text | vazio | Morada | Local a mostrar. | | Map width | `width` | text | `100%` | Comprimento CSS, por exemplo `100px` ou `50%` | Um número simples conta como píxeis. | | Map height | `height` | text | `400px` | Comprimento CSS, por exemplo `100px` | Um número simples conta como píxeis. | ### [Adicionar um ícone](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/icone) Um único ícone, opcionalmente ligado. Nome de máquina: `az_icon`. O módulo traz 14 conjuntos de ícones. Temas e módulos podem adicionar mais, e um perfil do construtor pode limitar que conjuntos os seus utilizadores veem. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Icon | `icon` | icon | `bi bi-heart` | Ícone dos conjuntos que o seu perfil do construtor permite | O ícone. | | 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)) | Tamanho do ícone. | | Link | `link` | link | vazio | URL ou caminho interno | Ligação do ícone. | | Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Onde a ligação abre. Mostrado quando `link` está definido. | Campos no acordeão **Icon utilities** : | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Style | `st_style` | radio | empty (None) | empty (None), `stbe-util-icon-rounded` (Rounded), `stbe-util-icon-circle` (Circle), `stbe-util-icon-square` (Square) | Forma do fundo. | | Icon animation | `animation` | radio | empty (No) | empty (No), `fa-spin` (Spin), `fa-pulse` (Pulse) | Animação do ícone. | | 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) | Rotação ou inversão. | ### [Adicionar um separador](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/separador) Régua horizontal. Nome de máquina: `az_separator`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Color | `bgcolor` | colour | nenhum | Qualquer cor | Cor da linha. | | Thickness | `thickness` | radio | `auto` (Theme default) | `auto` (Theme default), `custom` (Custom thickness) | Se deve sobrepor-se à espessura do tema. | | Thickness | `custom_thickness` | slider | 3 | 0 to 20, step 1 | Espessura da linha em píxeis. Mostrado quando `thickness` é `custom`. | | Length | `width` | radio | `auto` (Theme default) | `auto` (Theme default), `custom` (Custom width) | Se deve sobrepor-se ao comprimento do tema. | | Width | `custom_width` | slider | 100 | 0 to 500, step 10 | Comprimento da linha em píxeis; 0 apresenta largura total. Mostrado quando `width` é `custom`. | | Align | `align` | radio | `left` (Left) | `left` (Left), `center` (Center), `right` (Right) | Alinhamento horizontal. Mostrado quando `width` é `custom`. | ## Elementos de esquema ### [Secções](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/seccoes) Contentor de nível superior para filas, com opções de largura total, altura total e efeito de fundo. Nome de máquina: `az_section`. As secções novas recebem a classe `py-5` em **HTML classes**. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Full width | `fluid` | toggle | off | `yes` quando ligado | Usa um contentor de largura total (`container-fluid`). | | 100% height | `fullheight` | toggle | off | `yes` quando ligado | A secção preenche a altura da janela. | | Vertical centering | `vertical_centering` | toggle | off | `yes` quando ligado | Centra o conteúdo verticalmente. | Campos no acordeão **Background effects** acordeão. Todos exceto **Background effect** dependem do seu valor, como mostra a coluna Description: | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Background effect | `effect` | radio | empty (Simple image) | empty (Simple image), `fixed` (Fixed image), `parallax` (Parallax image), `gradient` (Gradient), `youtube` (YouTube video) | Efeito de fundo. | | Parallax speed | `parallax_speed` | slider | 0 | 0 to 100, step 1 | Velocidade de deslocamento da paralaxe. Mostrado quando `effect` é `parallax`. | | Parallax mode | `parallax_mode` | radio | `fixed` (Fixed) | `fixed` (Fixed), `scroll` (Local) | Anexação do fundo da imagem. Mostrado quando `effect` é `parallax`. | | Disable on mobile | `parallax_mobile_disable` | toggle | off | `yes` quando ligado | Desliga a paralaxe em ecrãs com menos de 481 px. Mostrado quando `effect` é `parallax`. | | Start color | `gradient_start_color` | colour | nenhum | Qualquer cor | Cor inicial do gradiente. Mostrado quando `effect` é `gradient`. | | End color | `gradient_end_color` | colour | nenhum | Qualquer cor | Cor final do gradiente. Mostrado quando `effect` é `gradient`. | | Gradient direction | `gradient_direction` | slider | 180 | 1 to 360, step 1 | Ângulo do gradiente em graus. Mostrado quando `effect` é `gradient`. | | Start position | `gradient_start` | slider | 0 | 0 to 100, step 1 | Posição da cor inicial em percentagem. Mostrado quando `effect` é `gradient`. | | End position | `gradient_end` | slider | 100 | 0 to 100, step 1 | Posição da cor final em percentagem. Mostrado quando `effect` é `gradient`. | | Video options | `video_options` | checkboxes | nenhum marcado | `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) | Opções de fundo YouTube. Mostrado quando `effect` é `youtube`. | | YouTube video URL | `video_youtube` | text | vazio | URL YouTube | Vídeo de fundo YouTube. Mostrado quando `effect` é `youtube`. | | Start time in seconds | `video_start` | text | 0 | Segundos | Hora de início do vídeo. Mostrado quando `effect` é `youtube`. | | Stop time in seconds | `video_stop` | text | 0 | Segundos | Hora de paragem do vídeo. Mostrado quando `effect` é `youtube`. | ### [Adicionar uma fila](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/filas-e-colunas) Fila de grelha Bootstrap que contém colunas. Uma fila nova começa com duas colunas de meia largura. Nome de máquina: `az_row`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Equal-height columns | `equal` | toggle | off | `yes` quando ligado | Dá a todas as colunas a mesma altura. | | Mirror row | `reverse_horizontal` | toggle | off | `yes` quando ligado | Inverte a ordem das colunas em ecrãs de 768 px e mais largos. | ### [Adicionar uma fila](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/filas-e-colunas) Uma coluna dentro de uma fila. As filas criam as suas colunas, por isso Column não está no seletor de elementos. Nome de máquina: `az_column`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Vertical centering | `vertical_centering` | toggle | off | `yes` quando ligado | Centra o conteúdo da coluna verticalmente. | ### [Adicionar um painel de separadores](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/painel-de-separadores) Contentor com painéis de separadores alternáveis; cada separador é adicionado com o **Add tab** controlo. Nome de máquina: `az_tabs`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Tab direction | `az_dirrection` | radio | empty (Default) | empty (Default), `tabs-left` (Left), `tabs-right` (Right) | Posição da barra de separadores. O código escreve o parâmetro desta forma. | | Style | `tab_style` | radio | empty (Default) | empty (Default), `modern` (Modern), `accordion` (Accordion) | Estilo do separador. | | Mobile friendly | `responsive` | toggle | on | `yes` quando ligado | Apresenta os separadores como dobrável em ecrãs pequenos. | Cada separador (`az_tab`) tem as suas próprias definições: | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Tab title | `title` | text | Title | Qualquer texto | Rótulo do separador. | | Tab description | `subtitle` | ckeditor | vazio | HTML | Linha curta opcional mostrada no separador ativo. | ### [Adicionar um painel dobrável](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/painel-dobravel) Contentor de painéis dobráveis; cada painel é adicionado com o **Add toggle** controlo. Nome de máquina: `az_accordion`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Collapse | `collapsed` | toggle | off | `yes` quando ligado | Começa com todos os painéis fechados. Quando desligado, o primeiro painel começa aberto. | | Expand icon | `expandicon` | radio | empty (None) | empty (None), `az-accordion--icon-plusminus` (+), `az-accordion--icon-arrow` (﹀) | Ícone junto ao título de cada painel. | Cada painel (`az_toggle`) tem as suas próprias definições: | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Toggle title | `title` | text | Title | Qualquer texto | Título do painel. | ### [Adicionar um esquema de carrossel](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/esquema-de-carrossel) Contentor de diapositivos; cada diapositivo contém outros elementos e é adicionado com o **Add slide** controlo. Os diapositivos (`az_slide`) não têm campos próprios. Nome de máquina: `az_carousel`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Frames per slide | `items` | slider | 1 | 1 to 10, step 1 | Diapositivos mostrados lado a lado. Ecrãs mais estreitos mostram menos. | | Disable auto-play | `autoplay` | toggle | off | `yes` quando ligado | Impede os diapositivos de avançarem sozinhos. | | Auto-play interval | `interval` | slider | 5000 | 1000 to 20000, step 100 | Tempo entre diapositivos em milissegundos. | | Stop on hover | `stoponhover` | toggle | off | `yes` quando ligado | Pausa a reprodução automática enquanto o ponteiro está sobre o carrossel. | Campos no acordeão **Dots** acordeão. Cada campo depois de **Dots navigation** só aparece enquanto está ligado: | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Dots navigation | `pagination` | toggle | on | `yes` quando ligado | Mostra um ponto por diapositivo. | | Dots orientation | `pagination_orientation` | radio | `outside` (Outside slider) | `outside` (Outside slider), `inside` (Inside slider) | Posição dos pontos. | | Dot shape | `pagination_shape` | radio | `bar` (Bar) | `bar` (Bar), `circle` (Circle), `square` (Square), `triangle` (Triangle) | Forma do ponto. | | Active dot transformation | `pagination_transform` | radio | empty (None) | empty (None), `growTaller` (Grow taller), `growWider` (Grow wider), `scaleUp` (Scale up) | Efeito no ponto ativo. | | Dot color | `pagination_color` | colour | nenhum | Qualquer cor | Cor do ponto. | | Active dot color | `pagination_active_color` | colour | nenhum | Qualquer cor | Cor do ponto ativo. | Campos no acordeão **Next/Previous** acordeão. Cada campo depois de **Next/Previous** só aparece enquanto está ligado: | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Next/Previous | `navigation` | toggle | off | `yes` quando ligado | Mostra as setas seguinte e anterior. | | Orientation | `navigation_orientation` | radio | `outside` (Outside slider) | `outside` (Outside slider), `inside` (Inside slider) | Posição das setas. | | Dot shape | `navigation_shape` | radio | empty (No background) | empty (No background), `circle` (Circle), `square` (Square), `bar` (Bar) | Forma do fundo da seta. A janela também o rotula **Dot shape** também. | | Icon color | `navigation_icon_color` | colour | nenhum | Qualquer cor | Cor do ícone da seta. | | Icon hover color | `navigation_icon_hover_color` | colour | nenhum | Qualquer cor | Cor do ícone da seta ao pairar. | | Background color | `navigation_background_color` | colour | nenhum | Qualquer cor | Cor do fundo da seta. | | Background hover color | `navigation_background_hover_color` | colour | nenhum | Qualquer cor | Cor do fundo da seta ao pairar. | | 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) | Posição das setas fora do controlo deslizante. | ### [Adicionar um contentor de camadas posicionadas](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/camadas-posicionadas) Tela onde os elementos filhos são arrastados e redimensionados livremente. Um elemento Positioned layers não pode ser aninhado dentro de outro. Nome de máquina: `az_layers`. Cada filho guarda o seu lugar em parâmetros escondidos: `pos_left`, `pos_top`, `pos_width`, `pos_height` e `pos_zindex`. | Rótulo | Parâmetro | Controlo | Predefinição | Valores permitidos | Descrição | |---|---|---|---|---|---| | Width | `width` | text | `100%` | Comprimento CSS, por exemplo `100px` ou `50%` | Largura da tela. Um número simples conta como píxeis. | | Height | `height` | slider | 500 | 0 to 10000, step 1 | Altura da tela em píxeis. | | Responsive | `responsive` | toggle | off | `yes` quando ligado | Ajusta a altura da tela e os tamanhos de letra à largura disponível. | ## E a seguir? - [Visão geral dos elementos](/hc/documentation/learn-dxpr-builder/elements) - [Visão geral do esquema](/hc/documentation/learn-dxpr-builder/layout/overview) - [Definições de elementos](/hc/documentation/learn-dxpr-builder/element-settings)