Thomas
-
Child Theme
Do not edit any of the theme core files directly, as all your changes will be lost, when updating the theme. Use the Bricks child theme to add any custom code.…
-
Create Your Own Elements
The Bricks child theme, which you can download from youraccount includes a simple custom element for demonstration purposes. The article below explains in more detail how to create your own…
-
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…
-
Mobile Editing With Breakpoints
What looks great on a large desktop screen usually needs some refinement for smaller devices. Typically this involves applying smaller font sizes, margin, padding, or hiding certain elements on mobile…
-
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 most generous community…
-
An Intro To Templates
Templates are a central feature of Bricks. There are different types of templates. A template can contain a single section (such as your website header, footer, hero section, etc.) or…
-
Template Library
Use the Template Library to browse through dozens of pre-designed templates that you can insert with a single click right within the builder. It also hosts all of your own…
-
Hover Effects
Bring your site to life, increase interactivity, and highlight important actions on your website by adding hover effects to any element, column, row, or section. Switch into Hover Effect Mode…
-
Gradients & Overlays
Spice up your site by adding background, overlay, and text gradients to any element, column, row, or section. Gradients & Overlays are located under the Style. Settings: Apply to: Select the…
-
Context Menu
When editing with Bricks use the custom right-click context menu to edit, clone, delete and copy & paste styles of sections, rows, columns, and elements with a single click. Even…
-
Global Elements
Want to use an existing element somewhere else on your site and keep all instances of this element in sync? This is exactly what Global Elements in Bricks are for.…
-
Shape Dividers
Give your design an edge by adding and combining Bricks' shape dividers such as tilts, drops, grids, clouds, strokes, triangles, waves, etc. https://youtu.be/WCNE536gAN0
-
Requirements
To equip you with a cutting edge WordPress website builder Bricks uses a modern technology stack while keeping sufficient backward compatibility. Those are a few requirements your server should meet…
-
Best Practices
The following points are important to keep in mind when working with Bricks: Permalink SettingsGo to Settings > Permalinks, select Post name, and click Save Changes.Min. Image DimensionsUpload images with…
-
Create Your Own Sidebars
Bricks comes with a built-in sidebar generator. Located in your WordPress dashboard under Bricks > Sidebars it allows you to create unlimited sidebars (widgetized areas). All you need to do…
-
Installation & Activation
Installing The Bricks Theme The installation of Bricks is exactly the same as for any other WordPress theme. After downloading the latest version of Bricks from your account head over…
-
Convert WordPress Content to Bricks And Vice Versa
With Bricks, you have complete freedom over which pages you want to edit with it. You can build all your pages with Bricks, or just a selected few. And the…
-
Start Editing With Bricks
https://youtu.be/h3Sk6NNRBqM After activating your license head over to Bricks > Settings > Post Types and select the post types you want to edit with Bricks. To enter the builder click…
-
Creating Your First Template
Now that you are familiar with all template concepts and the template library it's time to create our first template. We will actually create two templates: your website header and…
-
An Intro To The Builder
Bricks is a pure frontend drag & drop website builder for WordPress. It enables you to visually build and design your entire site in real-time, on one screen. The Interface…
-
Understanding The Layout
Being a fully-fledged site builder, Bricks lets you design your entire site visually. That includes your site header, footer, and of course the content of every page. Complete page with…
-
Adding & Editing Elements
To add an element to the canvas simply drag it from the panel and drop it anywhere on the canvas. Click on your newly added element to start editing it.…
-
Theme Styles
Theme Styles allow you to overwrite the default styling of any element, your site layout, colors, links, typography, etc. https://youtu.be/1E1XdjFcfvc To access Theme Styles click the Settings (gear) icon in…
-
Global Settings
You can access the global settings by clicking the Gear icon in the builder toolbar. They are organized into the following groups: General: Miscellaneous settings such as the favicon.Performance: Various…
-
Page Settings
Page settings let you customize the markup and styling of the page you are currently editing. They precede your global settings. To access page settings click the Gear icon in…
-
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
With Bricks you can use web-safe fonts, choose from the entire Google fonts library, but also upload and manage your own custom fonts in your WordPress dashboard under "Bricks >…
-
Custom Code (CSS & JS)
There are two types of custom code: Custom CSS and Custom JavaScript Use the Custom Code controls under Settings > Global Settings to add styles and scripts to your entire…
-
Save & Publish
Bricks automatically saves your builder changes every 60 seconds (default). To set your own autosave interval or disable autosave altogether head over to Settings > Global Settings > Builder. Bricks…
-
Revisions
Every time the builder saves your data a snapshot is automatically created using WordPress Revisions API. To view all your revisions click Revisions (clock icon) in the builder toolbar. Select…
-
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 settings…
-
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
Rather than having to manually navigate with your mouse and clicking certain actions over and over again, you can access and perform those most common actions by using the following…
-
Builder Access
Define who receives which levels of access to Bricks. Choose between No access", "Edit content" only access, or "Full access". You as the site admin will always have full access.…