Thomas

  • Child Theme

    Please do not edit any of the Bricks theme core files directly, as all your changes will be lost, when updating the theme.  Instead, use the Bricks child theme to make…

  • Create Your Own Elements

    The Bricks child theme, which you can download from your account includes a simple custom element for demonstration purposes. The article below explains in more detail how to create your…

  • Element Controls

    Element controls allow the user to change the content and appearance of an element. You can define the controls of an element with the set_controls() method in your element PHP class. Example…

  • Audio Control

    The audio control lets you select an audio file from the media library. It also gives you various options to show/hide artist and title, choose between a light/dark theme, autoplay…

  • Background Control

    The background control lets you set the following background properties: Background colorBackground imageBackground video (requires bricksBackgroundVideoInit script. See code example below) There are various settings for the background image and…

  • 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 illustrates how to apply a border via the css parameter and how to…

  • Responsive Editing

    What looks great on a large desktop screen usually needs some refinement for smaller devices. This typically involves applying smaller font sizes, margins, paddings, column width/stacking, or hiding certain elements…

  • Hover Styles

    Bring your site to life and boost visitor engagement by styling the hover state of any block. Activate the Hover Styles mode by clicking the "cursor" icon in the builder…

  • An Intro To Templates

    Templates are a central feature of Bricks. There are different template types. At the very least you usually create a header, footer, and blog post template. A template can contain…

  • Template Library

    Open the Template Library by clicking the Templates (folder) icon in the builder toolbar. All of your own templates are located under the "My Templates" tab. Browse dozens of pre-designed…

  • Unsplash Integration

    Finding affordable, high-quality, commercially useable photography for your website (that doesn't scream stock photography) is really hard. Bricks is putting an end to it. Unsplash.com, the world's largest and most…

  • Gradients & Overlays

    Spice up the design of your site by adding background, overlay, and text gradients to any block. The Gradients & Overlays control group is located under the Style tab when editing…

  • Context Menu

    Bricks' context menu gives you quick access to various block actions such as edit, clone, delete, copy & paste styles (works also across different browser tabs), and to save elements…

  • Global Elements

    To reuse an existing element somewhere else on your site we can convert this element into a Global Element. How To Create A Global Element Once you've finished editing your…

  • Shape Dividers

    Give your design an edge by adding an unlimited number of shape dividers such as tilts, drops, grids, clouds, strokes, triangles, waves, etc. to any block: https://youtu.be/rXhgQ5fsKDc

  • Requirements

    To provide you with a cutting-edge site builder for WordPress Bricks uses the most modern technology stack (VueJS 3, etc.) while keeping sufficient backward compatibility. Below are a few minimum…

  • Best Practices

    Please keep the points below in mind when working with Bricks: Permalink SettingsGo to Settings > Permalinks, select Post name, and click Save Changes.Min. Image DimensionsUpload images with a minimum…

  • Create Your Own Sidebars

    Bricks provides you with its own, built-in sidebar generator. Located in your WordPress dashboard under Bricks > Sidebars it lets you to create unlimited sidebars (widgetized areas). All you need…

  • Installation & Activation

    How To Install The Bricks Theme You install Bricks the same as any other WordPress theme. First, you have to download the latest version of Bricks from your account. After…

  • Settings

    Before diving into the builder lets have a look at the global settings, which you can define under Bricks > Settings in your WordPress dashboard. They are organized into different…

  • Creating Your First Template

    Now that you are familiar with all template concepts and the template library let's create the most commonly used templates: a website header, footer, and blog post layout in the…

  • Gutenberg

    If you've created your pages with Gutenberg you can continue editing them with Bricks without having to start all over again. Bricks will convert your Gutenberg blocks into Bricks elements.…

  • Start Editing With Bricks

    Once you have activated your license head over to Bricks > Settings and select the post types you want to edit with Bricks. Tip: While you could write your blog…

  • An Intro To The Builder

    Bricks is a drag & drop website builder for WordPress. It enables you to create your entire site visually, and in real-time. All on one screen. The builder is composed…

  • Understanding The Layout

    Being a fully-fledged website builder, Bricks lets you design your entire site visually. That includes your site header, footer, and of course the content of your pages. Complete page consisting…

  • Adding & Editing Elements

    To add an element to the canvas simply drag it from the panel and drop it anywhere onto the canvas. Click on any element to start editing it. The panel…

  • Box Shadow Control

    The box-shadow control is a CSS control and you can set the following properties: Offset XOffset YSpreadBlurColorInset class Prefix_Element_Box_Shadow extends BricksElement { // Set builder controls public function set_controls() {…

  • Checkbox Control

    The checkbox control is a simple on/off switch. If enabled it outputs a boolean value of true. Disabled it returns false. You can use it to conditionally show/hide other content…

  • Code Control

    The code control embeds a code editor utilizing the amazing Ace editor library. Set the mode parameter to css, html or javascript for proper syntax highlighting and error notifications. class…

  • Color Control

    The color control is a custom-built color picker that you won't find anywhere else. It lets you pick and adjust colors in hex, rgba and hsl format. It also includes…

  • Datepicker Control

    The datepicker control provides a great interface for selecting a specific date and time and outputting it in the format of your choice. // Example: Countdown element class Prefix_Element_Countdown extends…

  • 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 directions to anything you want via the directions property. class Prefix_Element_Dimensions…

  • Editor Control

    The editor control provides the default WordPress editor. To directly edit content in the builder preview set the inlineEditing properties. See the code example below: class Prefix_Element_Editor extends BricksElement {…

  • Filters Control

    The filters control offers the following CSS filters: blur, brightness, contrast, hue, invert, opacity, saturation, sepia. class Prefix_Element_Filters extends BricksElement { // Set builder controls public function set_controls() { $this->controls['exampleFilters']…

  • Gradient Control

    The gradient control lets you define an unlimited number of gradients that you can apply to text, background, and as an overlay. You can set the CSS selector in the…

  • Icon Control

    The icon control lets you select and output icons from the following icon font libraries: Fontawesome 5Ionicons 4Themify class Prefix_Element_Icon extends BricksElement { // Set builder controls public function set_controls()…

  • Image Control

    The image control lets you select a single image from your media library. Once an image has been selected you can choose an image size. You can either use the…

  • Image Gallery Control

    The image gallery control lets you select multiple images from your media library. Once images have been selected you can choose the image size. Your selected images are stored in…

  • Info Control

    The info control does not affect the HTML or CSS on the frontend. It serves as a builder-only helper controls to provide additional information. Example: the Alert element displays an…

  • Link Control

    The link control give you the choice of different link types: Internal post/pageExternal URLPopup (image, video) class Prefix_Element_Link extends BricksElement { // Set builder controls public function set_controls() { $this->controls['exampleLink']…

  • Number Control

    The number control represents a simple number input field. It has the following custom properties: unit (string: px, em, rem etc.)min (number)max (number)step (Default: 1) (Custom: '0.1' etc.) Use it…

  • Posts Control

    The posts control lets you set query arguments to retrieve items of any post type. Use the returned value to set up a custom WP_Query to render the matching posts…

  • Repeater Control

    The repeater control lets you create repeatable fields. Fields can be cloned, deleted and sorted via Drag & Drop. Use the fields argument to setup the field controls. class Prefix_Element_Posts…

  • Select Control

    The select control lets you select an option from a dropdown. It can be used to render content or CSS styling. Use the options array to populate the dropdown with…

  • Slider Control

    The slider control shows a draggable range input field. Default units are px, em and rem. You can set the following control parameters: units (array with custom units and min,…

  • SVG Control

    The SVG control lets you select an SVG (Scalable Vector Graphic) file from the media library. The selected SVG returns an array with the following keys: id (media library item…

  • 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: keyup)inlineEditing: Set to true to enable class Prefix_Element_Text extends BricksElement…

  • 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. Default: false)inlineEditing (true to enable) class Prefix_Element_Textarea extends BricksElement {…

  • Text Shadow Control

    The text-shadow control displays a popup that lets you set the CSS text-shadow of a specified HTML text element. class Prefix_Element_Textarea extends BricksElement { // Set builder controls public function…

  • Typography Control

    The typography control provides the following CSS properties: font-familyfont-weighttext-aligntext-transformfont-sizeline-heightletter-spacingcolortext-shadow Use the exclude parameter to hide specific typography properties. Set popup to false to show control inline. class Prefix_Element_Typography extends BricksElement {…

  • Filter: bricks/builder/color_palette

    Place and customize the following filter to display a different default color palette for the color control. add_filter( 'bricks/builder/color_palette', function( $colors ) { // Option #1: Add an individual color…

  • Filter: bricks/builder/i18n

    Place and customize the following filter to add translatable string to the builder. add_filter( 'bricks/builder/i18n', function( $i18n ) { // Example: Provide translatable string for element category 'custom' $i18n['custom'] =…

  • Filter: bricks/builder/map_styles

    This filter allows you to define your own custom map styles for the Map element. The example below shows how we added a custom map style fromhttps://snazzymaps.com/style/38/shades-of-grey to the builder.…

  • Filter: bricks/builder/save_messages

    Place and customize the following filter to display different save message every time you manually save your progress when editing with Bricks. add_filter( 'bricks/save_messages', function( $messages ) { // Option…

  • Filter: bricks/builder/standard_fonts

    Place and customize the following filter to display a different set of web-safe fonts in the typography control. add_filter( 'bricks/builder/standard_fonts', function( $standard_fonts ) { // Option #1: Add individual standard…

  • Custom Fonts

    Your website typography has a huge impact on how your site is perceived, and it'll pay off to spend some time to get this aspect right. Bricks allows you to…

  • Custom Code

    You can add Custom CSS and Custom JavaScript globally, page-wide, or to a specific block. To add custom globally go to Bricks > Settings > Custom Code in your WordPress…

  • Theme Styles

    Adjust the default styling of your site layout, elements, colors, links, typography, etc. throughout your site via Theme Styles. For a consistent and easy to maintain design system for your…

  • Page Settings

    Page Settings allow you to customize the markup and styling of the page you are currently editing. They are located within the Settings panel (gear icon in the builder toolbar).…

  • Template Settings

    When editing a template click the Settings (gear) icon in the builder toolbar to access the Template Settings: Toolbar > Settings > Template Settings You should see the following Template…

  • Remote Templates

    Remote templates is another unique Bricks feature that lets you browse and insert templates of another Bricks installation. No more exporting templates from one site and then importing them on…

  • Keyboard Shortcuts

    Quickly perform the most common in-builder actions through short & simple keyboard shortcuts: Key CombinationDescriptionCMD / CTRL + SSave your changesCMD / CTRL + PToggle preview modeCMD / CTRL +…

  • Builder Access

    By default only site admins have Full Access to Bricks. To allow builder access for a certain user simply edit the users' profile. You can also set builder access for…

  • Dynamic Data

    Use dynamic data to render all sorts of data from your WordPress database with Bricks. For example: Featured image, post title, post date, author name, categories, tags, site title, all…

  • SVG Uploads

    WordPress, by default, does not allow SVG file uploads as this XML-based file format can contain malicious code. It can be especially dangerous when downloaded from unknown/untrusted sources or by…

  • Save & Publish

    Bricks, by default, automatically saves your builder changes every 60 seconds. To adjust or disable the autosave interval go to Bricks > Settings > Builder in your WordPress admin area.…

  • Revisions

    Bricks automatically creates a snapshot/revision of your data on every save using the WordPress Revisions API. To view a list of all your revisions click the Revisions (clock) icon in…

  • Filter: bricks/builder/elements

    Determine which elements to use in Bricks by out-commenting the ones you don't want to use. There is a full example and list of all elements in the Bricks child…