Get Bricks

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-shadow
  • Border 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…