Topic: Controls (Developer)
Text Transform Control
Use the text-transform control to allow users to set the text-transform CSS property like so:Text Decoration Control
Use the text-decoration control to allow users to set the text-decoration CSS property like so:Text Align Control
Use the text-align control to allow users to set the text-align CSS property like so:Direction Control (Flexbox)
Use the direction control to allow users to set the flex-direction CSS property of your CSS flexbox layout.Justify Content Control (Flexbox)
Use the justify-content control to allow users to set the justify-content CSS property (alignment along the main-axis) of your CSS…Align Items Control (Flexbox)
Use the align-items control to allow users to set the align-items CSS property (alignment along the cross-axis) of your CSS…Apply Control
The apply control saves your settings. You can set the reload control property to true in order to trigger a…Typography Control
The typography control provides the following CSS properties: colorfont-sizetext-aligntext-transformfont-familyfont-weightfont-styleline-heightletter-spacingtext-shadowtext-decoration Use the exclude parameter to hide specific typography properties. Set popup to…Text Shadow Control
The text-shadow control displays a popup that lets you set the CSS text-shadow of a specified HTML text element. Resources…Textarea Control
The textarea control displays a textarea input field. You can set the following parameters: rows (number. Default: 5)readonly (true/false. Default: false)spellcheck (true/false.…Text Control
The text control displays a text input field. You can set the following parameters: spellcheck: true/false. (Default: false)trigger: 'keyup'/'enter'. (Default:…SVG Control
The SVG control lets you select an SVG (Scalable Vector Graphic) file from the media library. The selected SVG returns…Slider Control
The slider control shows a draggable range input field. Default units are px, em and rem. You can set the…Select Control
The select control lets you select an option from a dropdown. It can be used to render content or CSS…Repeater Control
The repeater control lets you create repeatable fields. Fields can be cloned, deleted, and sorted via Drag & Drop. Use…Query Control
The query control lets you set query arguments to retrieve items of any post type. Use the returned value to…Number Control
The number control represents a simple number input field. It has the following custom properties: units (optional: boolean or array)unit…Link Control
The link control give you the choice of different link types: Internal post/pageExternal URLPopup (image, video)Info Control
The info control does not affect the HTML or CSS on the frontend. It serves as a builder-only helper controls…Image Gallery Control
The image gallery control lets you select multiple images from your media library. Once images have been selected you can…Image Control
The image control lets you select a single image from your media library. Once an image has been selected you…Icon Control
The icon control lets you select and output icons from the following icon font libraries: Fontawesome 6Ionicons 4Themify The user…Gradient Control
The gradient control lets you define an unlimited number of gradients that you can apply to text, background, and as…Filters Control
The filters control offers the following CSS filters: blur, brightness, contrast, hue, invert, opacity, saturation, sepia. All sections, rows, columns,…Editor Control
The editor control provides the default WordPress editor. To directly edit content in the builder preview set the inlineEditing properties.…Dimensions Control
The dimensions control is perfect for adding multi-directional CSS properties such as margin and padding (top/right/bottom/left). You can set the…Datepicker Control
The datepicker control provides a great interface for selecting a specific date and time and outputting it in the format…Color Control
The color control is a custom-built color picker that you won't find anywhere else. It lets you pick and adjust…Code Control
The code control embeds a code editor utilizing the amazing CodeMirror library. Users for which you've enabled "Code Execution" in…Checkbox Control
The checkbox control is a simple on/off switch. If enabled it outputs a boolean value of true. Disabled it returns…Box Shadow Control
The box-shadow control is a CSS control and you can set the following properties: Offset XOffset YSpreadBlurColorInset Resources https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadowBorder Control
The border control lets you set the following border properties: Border width (top/right/bottom/left)Background style (top/right/bottom/left)Background color (none/solid/double/dotted/dashed)Border radius (top/right/bottom/left) The example below…Background Control
The background control lets you set the following background properties: Background colorBackground imageBackground video (requires bricksBackgroundVideoInit script. See code example…Audio Control
The audio control lets you select an audio file from the media library. It also gives you various options to…Element Controls
Element controls allow the user to change the content and appearance of an element. You can define the controls of an…