Référence des éléments.

Apprendre DXPR BuilderRéférenceÉléments et CSS

DXPR Builder fournit 22 éléments de contenu et 6 éléments de mise en page. Cette page répertorie le nom machine de chaque élément et les champs de sa fenêtre de réglages ; pour la mise en page, elle répertorie aussi la Colonne dans chaque ligne. Les blocs et les vues Drupal, que le builder propose aussi comme éléments, ne sont pas couverts.

Comment lire cette page

Le premier tableau de chaque élément répertorie les champs de son panneau General. Un champ d’un autre panneau se trouve dans un tableau séparé nommé d’après ce panneau. Label est le libellé du champ tel que la fenêtre l’affiche, dans l’orthographe américaine de l’interface. Parameter est le param_name dans la définition de l’élément. Options se lit value (Label).

Deux champs General apparaissent sur chaque élément et ne sont pas répétés dans les tableaux :

Label Parameter Control Default Allowed values Description
HTML ID hash text empty; the field shows the generated ID as a placeholder A letter first, then letters, numbers, hyphens and underscores ID personnalisé pour l’élément.
HTML classes el_class multi-select empty; new sections get py-5 Bootstrap 5 utility classes and the classes that enabled themes declare; Edit as text accepts any class Classes CSS supplémentaires pour l’élément.

Chaque élément a aussi les panneaux Style et Hover style, documentés sur la page Onglet Style. Tous les éléments sauf Column et les panneaux dans Tabs, Collapse panel et Carousel ont aussi le panneau Animation, documenté sur la page Onglet Animation.

La colonne Control nomme ce que la fenêtre affiche. Chaque contrôle vient d’un type de paramètre dans la définition de l’élément :

Control Code type
text textfield
number numericfield
link link
radio dropdown with fewer than 7 options
select dropdown with 7 or more options
toggle checkbox with one option
checkboxes checkbox with several options
slider dxb_slider
colour colorpicker
icon, image, images, video, datetime The type of the same name
ckeditor textarea
ace html
social social_links

Un basculeur activé stocke la valeur de sa cellule Allowed values ; un basculeur désactivé stocke no ou une valeur vide. Les cases à cocher stockent les valeurs cochées comme liste séparée par des virgules. Une option listée comme vide est stockée comme chaîne vide ; dans la fenêtre, son bouton radio a la clé dxpr-default.

Les champs image et images proposent aussi un choix de style d’image : le style optimize du site en premier quand il existe, puis Original image (No resizing) et les autres styles d’images. Certains champs restent masqués jusqu’à ce qu’un autre champ ait une valeur correspondante ; la colonne Description nomme cette dépendance.

Éléments de contenu

Ajouter un élément de texte

Texte riche modifié dans CKEditor. Nom machine : az_text.

Label Parameter Control Default Allowed values Description
Text content ckeditor Placeholder heading and paragraph HTML Le contenu textuel.

Ajouter une image

Une seule image, optionnellement enveloppée dans un lien. Nom machine : az_image.

Label Parameter Control Default Allowed values Description
Image image image empty Image from the media browser L’image à afficher.
Image width width text 100% CSS length, for example 100px or 50% Un nombre seul compte comme pixels.
Image height height text empty CSS length, for example 100px Un nombre seul compte comme pixels.
Image link link link empty URL or internal path Enveloppe l’image dans un lien.
Image link target link_target radio _self (Same window) _self (Same window), _blank (New window) Où le lien s’ouvre. Affiché quand link est défini.

Champs dans le panneau SEO :

Label Parameter Control Default Allowed values Description
Alt attribute alt text empty Any text Texte alternatif de l’image.
Title attribute title text empty Any text Attribut de titre de l’image.

Diaporama Bootstrap de plusieurs images. Nom machine : az_images_carousel.

Label Parameter Control Default Allowed values Description
Images images images empty Images from the media browser Une diapositive par image.
Interval interval slider 5000 0 to 10000, step 1 Temps entre les diapositives en millisecondes. À 0, les diapositives n’avancent pas d’elles-mêmes.
Hide hide checkboxes none ticked pagination_control (Hide pagination control), prev_next_buttons (Hide prev/next buttons) Masque les indicateurs, les flèches ou les deux.

Champs dans le panneau SEO :

Label Parameter Control Default Allowed values Description
Alt attribute alt text empty Any text Texte alternatif des images.
Title attribute title text empty Any text Attribut de titre des images.

Ajouter une vidéo

Intègre une vidéo YouTube ou Vimeo. Nom machine : az_video.

Label Parameter Control Default Allowed values Description
Video link link text empty YouTube or Vimeo URL La vidéo à intégrer.
Video width width text 100% CSS length, for example 100px or 50% Un nombre seul compte comme pixels.
Image image image empty Image from the media browser Image de couverture ; le lecteur se charge quand le visiteur clique dessus.
Themed play button play toggle off yes when on Affiche le bouton de lecture du thème sur la vidéo.

Ajouter une vidéo locale

Lit un fichier vidéo auto-hébergé dans un lecteur HTML5. Nom machine : az_video_local.

Label Parameter Control Default Allowed values Description
Video video video empty MP4, WEBM, OGG or OGV file, up to the site’s upload size limit Le fichier vidéo.
Start playing automatically autoplay toggle off autoplay when on Démarre la lecture au chargement de la page. La lecture automatique rend toujours la vidéo muette.
Muted muted toggle off muted when on Rend la vidéo muette. Affiché pendant que autoplay est désactivé.
Controls controls toggle off controls when on Affiche les contrôles du lecteur.
Loop loop toggle off loop when on Recommence la vidéo quand elle se termine.
Video width width text 100% CSS length, for example 100px or 50% Largeur du lecteur.
Image image image empty Image from the media browser Image d’affiche montrée avant la lecture.

Ajouter un élément HTML

HTML brut modifié dans un éditeur de code. Nom machine : az_html.

Label Parameter Control Default Allowed values Description
Raw HTML content ace Placeholder message "Click the edit button to change this HTML" HTML Le contenu HTML.

Ajouter un jumbotron

Grande bannière avec un titre et un texte d’accroche ; d’autres éléments peuvent y être déposés. Nom machine : az_jumbotron.

Label Parameter Control Default Allowed values Description
Title title text empty Any text Titre de la bannière.
Lead lead text empty Any text Sous-titre affiché sous le titre.
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 couleur de fond et de texte.
Padding padding radio p-5 (Large) p-5 (Large), p-4 (Medium), p-3 (Small) Taille de la marge intérieure.

Ajouter un bouton

Un bouton Bootstrap qui renvoie à une URL. Nom machine : az_button.

Label Parameter Control Default Allowed values Description
Title title text Click to add text Any text Texte sur le bouton.
Link link link empty URL or internal path Lien du bouton.
Link target link_target radio _self (Same window) _self (Same window), _blank (New window) Où le lien s’ouvre. Affiché quand link est défini.
Type type select primary (Primary) primary, secondary, success, info, warning, danger, link, light, dark; each label is the value with a capital letter Style de bouton Bootstrap.
Block button block toggle off btn-block when on Bouton pleine largeur.
Outline style outlined toggle off outline when on Rend btn-outline-* au lieu de btn-*.
Size size radio empty (Normal) empty (Normal), btn-lg (Large), btn-sm (Small) Taille du bouton.

Conteneur qui enveloppe les éléments à l’intérieur dans un seul lien. Nom machine : az_link.

Label Parameter Control Default Allowed values Description
Link link link empty URL or internal path Lien du contenu.
Link target link_target radio _self (Same window) _self (Same window), _blank (New window) Où le lien s’ouvre. Affiché quand link est défini.

Champs dans le panneau SEO :

Label Parameter Control Default Allowed values Description
Title attribute title text empty Any text Attribut de titre du lien.
Tell search engines not to follow nofollow toggle off nofollow when on Ajoute rel="nofollow" au lien.

Ajouter une alerte

Un message d’alerte Bootstrap. Nom machine : az_alert.

Label Parameter Control Default Allowed values Description
Message content ckeditor Placeholder text HTML Le message.
Type type radio alert-success (Success) alert-success (Success), alert-info (Info), alert-warning (Warning), alert-danger (Danger) Couleur de l’alerte.

Élément carte

Un conteneur carte Bootstrap avec un en-tête et un titre optionnels. Nom machine : az_card.

Label Parameter Control Default Allowed values Description
Header header text empty Any text Texte d’en-tête de la carte.
Title title text empty Any text Titre de la carte.
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 couleur de la carte.

Élément panneau

Un conteneur panneau avec une barre de titre. Nom machine : az_panel.

Label Parameter Control Default Allowed values Description
Title title text empty Any text Titre du panneau.
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) Style du panneau.

Ajouter un bloc de citation

Une citation avec une source optionnelle. Nom machine : az_blockquote.

Label Parameter Control Default Allowed values Description
Text content ckeditor Placeholder text HTML Le texte cité.
Cite cite text empty Any text Source affichée sous la citation.
Reverse reverse toggle off blockquote-reverse when on Aligne la citation à la fin de la ligne (text-end).

Une ligne ou une colonne d’icônes de réseaux sociaux qui renvoient à des pages de profil. Nom machine : st_social.

Label Parameter Control Default Allowed values Description
Social links st_social_links social Facebook and YouTube rows One row per icon: a brand and the profile URL Les icônes et leurs liens.
Layout st_type radio inline (Inline) inline (Inline), stacked (Stacked) Disposition des icônes.
Style st_style radio empty (None) empty (None), rounded (Rounded), circle (Circle), square (Square) Forme du fond des icônes.
Size st_size radio lg (Large) lg (Large), empty (Small), 2x, 3x, 4x, 5x; the last four labels match their values Taille des icônes.
CSS3 hover effects st_css3_hover_effects radio empty (None) empty (None), disc (Disc), pulse (Pulse) Effet de survol. Un effet rend l’icône de style cercle.

Champs dans le panneau Icon colors :

Label Parameter Control Default Allowed values Description
Color st_theme_color radio custom (Custom) brand (Brand color), custom (Custom), inherit (Inherit) Source de la couleur des icônes.
Color st_color colour none Any colour Couleur personnalisée des icônes. Affiché quand st_theme_color vaut custom.
Background color st_theme_bgcolor radio custom (Custom) brand (Brand color), custom (Custom), inherit (Inherit) Source de la couleur de fond des icônes.
Background color st_bgcolor colour none Any colour Couleur de fond personnalisée. Affiché quand st_theme_bgcolor vaut custom.

Ajouter un compteur de nombres

Un nombre qui compte d’une valeur de départ à une valeur d’arrivée. Nom machine : az_counter.

Label Parameter Control Default Allowed values Description
Start start number 0 Number Nombre de départ du compte.
End end number 100 Number Nombre d’arrivée du compte.
Font size fontsize slider 30 0 to 200, step 1 Taille de police du nombre en pixels.
Speed speed slider 2000 0 to 10000, step 1 Temps en millisecondes pour terminer le compte.
Thousands separator seperator radio empty (None) empty (None), , (Comma), . (Dot), a space (Space) Sépare les milliers dans le nombre final. Le code orthographie le paramètre ainsi.
Prefix prefix text empty Any text Caractères avant le nombre, par exemple $.
Suffix postfix text empty Any text Caractères après le nombre, par exemple %.

Ajouter un compteur circulaire

Indicateur de progression circulaire avec texte optionnel, ligne d’info et icône au centre. Nom machine : az_circle_counter.

Label Parameter Control Default Allowed values Description
Foreground color fgcolor colour #333333 Any colour Couleur de l’arc de progression.
Background color bgcolor colour #999999 Any colour Couleur de la piste derrière l’arc.
Fill color fill colour none Any colour Couleur de remplissage dans le cercle.
Percent percent slider 50 0 to 100, step 1 Valeur de progression.
Dimension dimension slider 250 100 to 500, step 1 Diamètre du cercle en pixels.
Foreground width width slider 10 1 to 100, step 1 Épaisseur du trait de l’arc.
Animation animation toggle on yes when on Anime l’arc.
Animation duration duration slider 1500 0 to 5000, step 1 En millisecondes. Affiché quand animation est activé.
Animation delay delay slider 0 0 to 5000, step 1 En millisecondes. Affiché quand animation est activé.
Animation in-viewport in_viewport toggle on yes when on Démarre l’animation quand l’élément défile à l’écran. Affiché quand animation est activé.

Champs dans le panneau Circle content. Chaque champ après Show progress n’est affiché que quand celui-ci est désactivé :

Label Parameter Control Default Allowed values Description
Show progress show_progress toggle off yes when on Affiche le pourcentage au lieu de votre propre texte et icône.
Text text text empty Any text Texte au centre.
Font size fontsize slider 16 0 to 100, step 1 Taille du texte au centre en pixels.
Text color text_color colour none Any colour Couleur du texte au centre.
Info info text empty Any text Ligne d’info secondaire.
Info font size info_fontsize slider 14 0 to 100, step 1 Taille de la ligne d’info en pixels.
Info color info_color colour none Any colour Couleur de la ligne d’info.
Icon icon icon empty Icon from the sets your builder profile allows Icône au centre.
Icon size icon_size slider 16 0 to 100, step 1 Taille de police de l’icône en pixels.
Icon color icon_color colour none Any colour Couleur de l’icône.

Ajouter une barre de progression

Barre de progression Bootstrap horizontale avec un libellé. Nom machine : az_progress_bar.

Label Parameter Control Default Allowed values Description
Label label text Click to add text Any text Texte dans la barre.
Progress width slider 50 0 to 100, step 1 Progression en pourcentage.
Bar height height slider 45 0 to 100, step 1 Hauteur de la barre en pixels.
Back color bgcolor colour #e9ecef Any colour Couleur de la piste derrière la barre.
Front color fcolor colour #284ed9 Any colour Couleur de la barre.
Grow animation grow_animation toggle off yes when on Anime la barre de 0 à sa valeur.
Stripes options checkboxes none ticked progress-bar-striped (Add striped pattern to bar), progress-bar-animated (Animate stripes (requires striped pattern)) Motif rayé et rayures animées.

Ajouter un compte à rebours

Compte à rebours vers une date, une heure ou la fin d’un intervalle répété. Nom machine : az_countdown.

Label Parameter Control Default Allowed values Description
Countdown style countdown_style radio plain (Plain) plain (Plain), style1 (Grid), style6 (3D flip), style9 (Disc), style10 (Airport style), style12 (Transparent) Style visuel.
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)) Ce vers quoi le minuteur compte.
Date date datetime empty Date in d.m.Y format Date cible. Affiché quand counter_scope vaut date.
Date / Time date_time datetime empty Date in d.m.Y format plus hour (H) Date et heure cibles. Affiché quand counter_scope vaut date_time.
Time time datetime empty Hour (H) Heure cible de chaque jour. Affiché quand counter_scope vaut repeating.
Reset in hours reset_hours slider 0 0 to 24, step 1 Heures dans l’intervalle. Affiché quand counter_scope vaut resetting.
Reset in minutes reset_minutes slider 0 0 to 60, step 1 Minutes dans l’intervalle. Affiché quand counter_scope vaut resetting.
Reset in seconds reset_seconds slider 0 0 to 60, step 1 Secondes dans l’intervalle. Affiché quand counter_scope vaut resetting.
Page referrer referrer link empty URL or internal path Page ouverte à l’expiration du compte à rebours. Affiché quand counter_scope vaut repeating ou resetting.
Automatic restart restart toggle off yes when on Redémarre l’intervalle quand il se termine. Affiché quand counter_scope vaut 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) Unités à afficher.

Élément Marquee

Bande horizontale d’images qui défile sans s’arrêter. Nom machine : az_marquee.

Label Parameter Control Default Allowed values Description
Images images images Three copies of the DXPR logo Images from the media browser Les images du bandeau.
Speed speed slider 3 1 to 5, step 1 Vitesse de défilement ; 1 est le plus lent, 5 le plus rapide.
Height height slider 50 10 to 200, step 1 Hauteur des images en pixels.
Image layout image_layout radio fh (Fixed height images) fh (Fixed height images), fw (Fixed width images) Si les images partagent une hauteur ou une largeur.
Image width width slider 400 50 to 500, step 1 Largeur des images en pixels. Affiché quand image_layout vaut fw.
Gray scale grayscale toggle off apply when on Affiche les images en niveaux de gris.
Fade edges fade_edges toggle off apply when on Estompe le bandeau aux deux bords.

Champs dans le panneau SEO :

Label Parameter Control Default Allowed values Description
Alt attribute alt text empty Any text Texte alternatif des images.
Title attribute title text empty Any text Attribut de titre des images.

Ajouter une carte

Carte Google intégrée pour une adresse. Nom machine : az_map.

Label Parameter Control Default Allowed values Description
Address address text empty Street address Lieu à afficher.
Map width width text 100% CSS length, for example 100px or 50% Un nombre seul compte comme pixels.
Map height height text 400px CSS length, for example 100px Un nombre seul compte comme pixels.

Ajouter une icône

Icône unique, optionnellement liée. Nom machine : az_icon. Le module fournit 14 jeux d’icônes. Les thèmes et les modules peuvent en ajouter, et un profil de builder peut limiter les jeux que voient ses utilisateurs.

Label Parameter Control Default Allowed values Description
Icon icon icon bi bi-heart Icon from the sets your builder profile allows L’icône.
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)) Taille de l’icône.
Link link link empty URL or internal path Lien de l’icône.
Link target link_target radio _self (Same window) _self (Same window), _blank (New window) Où le lien s’ouvre. Affiché quand link est défini.

Champs dans le panneau Icon utilities :

Label Parameter Control Default Allowed values Description
Style st_style radio empty (None) empty (None), stbe-util-icon-rounded (Rounded), stbe-util-icon-circle (Circle), stbe-util-icon-square (Square) Forme du fond.
Icon animation animation radio empty (No) empty (No), fa-spin (Spin), fa-pulse (Pulse) Animation de l’icône.
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) Rotation ou retournement.

Ajouter un séparateur

Filet horizontal. Nom machine : az_separator.

Label Parameter Control Default Allowed values Description
Color bgcolor colour none Any colour Couleur du filet.
Thickness thickness radio auto (Theme default) auto (Theme default), custom (Custom thickness) S’il faut remplacer l’épaisseur du thème.
Thickness custom_thickness slider 3 0 to 20, step 1 Épaisseur du filet en pixels. Affiché quand thickness vaut custom.
Length width radio auto (Theme default) auto (Theme default), custom (Custom width) S’il faut remplacer la longueur du thème.
Width custom_width slider 100 0 to 500, step 10 Longueur du filet en pixels ; 0 rend toute la largeur. Affiché quand width vaut custom.
Align align radio left (Left) left (Left), center (Center), right (Right) Alignement horizontal. Affiché quand width vaut custom.

Éléments de mise en page

Ajouter une section

Conteneur de plus haut niveau pour les lignes, avec options pleine largeur, pleine hauteur et effet de fond. Nom machine : az_section. Les nouvelles sections reçoivent la classe py-5 dans HTML classes.

Label Parameter Control Default Allowed values Description
Full width fluid toggle off yes when on Utilise un conteneur pleine largeur (container-fluid).
100% height fullheight toggle off yes when on La section remplit la hauteur de la fenêtre.
Vertical centering vertical_centering toggle off yes when on Centre le contenu verticalement.

Champs dans le panneau Background effects. Tous sauf Background effect dépendent de sa valeur, comme la colonne Description le montre :

Label Parameter Control Default Allowed values Description
Background effect effect radio empty (Simple image) empty (Simple image), fixed (Fixed image), parallax (Parallax image), gradient (Gradient), youtube (YouTube video) Effet de fond.
Parallax speed parallax_speed slider 0 0 to 100, step 1 Vitesse de défilement de la parallaxe. Affiché quand effect vaut parallax.
Parallax mode parallax_mode radio fixed (Fixed) fixed (Fixed), scroll (Local) Attachement du fond de l’image. Affiché quand effect vaut parallax.
Disable on mobile parallax_mobile_disable toggle off yes when on Désactive la parallaxe sur les écrans de moins de 481 px. Affiché quand effect vaut parallax.
Start color gradient_start_color colour none Any colour Couleur de début du dégradé. Affiché quand effect vaut gradient.
End color gradient_end_color colour none Any colour Couleur de fin du dégradé. Affiché quand effect vaut gradient.
Gradient direction gradient_direction slider 180 1 to 360, step 1 Angle du dégradé en degrés. Affiché quand effect vaut gradient.
Start position gradient_start slider 0 0 to 100, step 1 Position de la couleur de début en pour cent. Affiché quand effect vaut gradient.
End position gradient_end slider 100 0 to 100, step 1 Position de la couleur de fin en pour cent. Affiché quand effect vaut 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) Options de fond YouTube. Affiché quand effect vaut youtube.
YouTube video URL video_youtube text empty YouTube URL Vidéo de fond YouTube. Affiché quand effect vaut youtube.
Start time in seconds video_start text 0 Seconds Heure de début de la vidéo. Affiché quand effect vaut youtube.
Stop time in seconds video_stop text 0 Seconds Heure de fin de la vidéo. Affiché quand effect vaut youtube.

Ajouter une ligne

Ligne de grille Bootstrap qui contient des colonnes. Une nouvelle ligne commence avec deux colonnes de demi-largeur. Nom machine : az_row.

Label Parameter Control Default Allowed values Description
Equal-height columns equal toggle off yes when on Donne la même hauteur à toutes les colonnes.
Mirror row reverse_horizontal toggle off yes when on Inverse l’ordre des colonnes sur les écrans de 768 px et plus.

Colonne

Une colonne dans une ligne. Les lignes créent leurs colonnes : Column n’est donc pas dans le sélecteur d’éléments. Nom machine : az_column.

Label Parameter Control Default Allowed values Description
Vertical centering vertical_centering toggle off yes when on Centre le contenu de la colonne verticalement.

Ajouter un panneau d’onglets

Conteneur à panneaux d’onglets commutables ; chaque onglet est ajouté avec le contrôle Add tab. Nom machine : az_tabs.

Label Parameter Control Default Allowed values Description
Tab direction az_dirrection radio empty (Default) empty (Default), tabs-left (Left), tabs-right (Right) Position de la barre d’onglets. Le code orthographie le paramètre ainsi.
Style tab_style radio empty (Default) empty (Default), modern (Modern), accordion (Accordion) Style des onglets.
Mobile friendly responsive toggle on yes when on Affiche les onglets comme un panneau repliable sur les petits écrans.

Chaque onglet (az_tab) a ses propres réglages :

Label Parameter Control Default Allowed values Description
Tab title title text Title Any text Libellé de l’onglet.
Tab description subtitle ckeditor empty HTML Court sous-titre optionnel affiché sur l’onglet actif.

Ajouter un panneau repliable

Conteneur de panneaux repliables ; chaque panneau est ajouté avec le contrôle Add toggle. Nom machine : az_accordion.

Label Parameter Control Default Allowed values Description
Collapse collapsed toggle off yes when on Démarre avec chaque panneau fermé. Quand désactivé, le premier panneau démarre ouvert.
Expand icon expandicon radio empty (None) empty (None), az-accordion--icon-plusminus (+), az-accordion--icon-arrow (﹀) Icône à côté du titre de chaque panneau.

Chaque panneau (az_toggle) a ses propres réglages :

Label Parameter Control Default Allowed values Description
Toggle title title text Title Any text Titre du panneau.

Conteneur de diapositives ; chaque diapositive contient d’autres éléments et est ajoutée avec le contrôle Add slide. Les diapositives (az_slide) n’ont aucun champ propre. Nom machine : az_carousel.

Label Parameter Control Default Allowed values Description
Frames per slide items slider 1 1 to 10, step 1 Diapositives affichées côte à côte. Les écrans plus étroits en montrent moins.
Disable auto-play autoplay toggle off yes when on Empêche les diapositives d’avancer d’elles-mêmes.
Auto-play interval interval slider 5000 1000 to 20000, step 100 Temps entre les diapositives en millisecondes.
Stop on hover stoponhover toggle off yes when on Met la lecture automatique en pause pendant que le pointeur est sur le carrousel.

Champs dans le panneau Dots. Chaque champ après Dots navigation n’est affiché que quand celui-ci est activé :

Label Parameter Control Default Allowed values Description
Dots navigation pagination toggle on yes when on Affiche un point par diapositive.
Dots orientation pagination_orientation radio outside (Outside slider) outside (Outside slider), inside (Inside slider) Position des points.
Dot shape pagination_shape radio bar (Bar) bar (Bar), circle (Circle), square (Square), triangle (Triangle) Forme des points.
Active dot transformation pagination_transform radio empty (None) empty (None), growTaller (Grow taller), growWider (Grow wider), scaleUp (Scale up) Effet sur le point actif.
Dot color pagination_color colour none Any colour Couleur des points.
Active dot color pagination_active_color colour none Any colour Couleur du point actif.

Champs dans le panneau Next/Previous. Chaque champ après Next/Previous n’est affiché que quand celui-ci est activé :

Label Parameter Control Default Allowed values Description
Next/Previous navigation toggle off yes when on Affiche les flèches suivante et précédente.
Orientation navigation_orientation radio outside (Outside slider) outside (Outside slider), inside (Inside slider) Position des flèches.
Dot shape navigation_shape radio empty (No background) empty (No background), circle (Circle), square (Square), bar (Bar) Forme du fond des flèches. La fenêtre l’intitule aussi Dot shape.
Icon color navigation_icon_color colour none Any colour Couleur des icônes des flèches.
Icon hover color navigation_icon_hover_color colour none Any colour Couleur des icônes des flèches au survol.
Background color navigation_background_color colour none Any colour Couleur de fond des flèches.
Background hover color navigation_background_hover_color colour none Any colour Couleur de fond des flèches au survol.
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) Position des flèches hors du curseur.

Calques positionnés

Canevas sur lequel les éléments enfants sont glissés et redimensionnés librement. Un élément de calques positionnés ne peut pas être imbriqué dans un autre. Nom machine : az_layers. Chaque enfant stocke sa place dans des paramètres masqués : pos_left, pos_top, pos_width, pos_height et pos_zindex.

Label Parameter Control Default Allowed values Description
Width width text 100% CSS length, for example 100px or 50% Largeur du canevas. Un nombre seul compte comme pixels.
Height height slider 500 0 to 10000, step 1 Hauteur du canevas en pixels.
Responsive responsive toggle off yes when on Adapte la hauteur du canevas et les tailles de police à la largeur disponible.

Et ensuite ?