Referência de elementos.

Aprender DXPR BuilderReferênciaElementos e CSS

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

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

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.

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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?