### Install Alpha/Beta via FTP

Source: https://kb.wpbeaverbuilder.com/beaver-builder/introduction/releases-versioning

Instructions for installing alpha or beta releases of Beaver Builder, Beaver Themer, or BB Theme using FTP. This involves downloading the zip file, deleting the existing plugin folder, and uploading the new version.

```bash
1. Download the alpha/beta zip file from your My Account page via Alpha/Beta Testing Downloads section.
2. FTP to your site and delete the `/wp-content/plugins/bb-plugin/` folder. Then unzip the alpha/beta plugin on your local system and upload the `/bb-plugin` folder to the same location. 
3. Activate the plugin.
```

```bash
The Beaver Themer folder location is `/wp-content/plugins/bb-theme-builder/`.

The BB Theme folder location is `/wp-content/plugins/bb-theme/`.
```

--------------------------------

### Example SVG Code for Background

Source: https://kb.wpbeaverbuilder.com/beaver-builder/basics/multi-layer-backgrounds

This is an example of simple SVG code that can be used as a background image. Ensure the SVG code is valid for optimal results.

```html
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>
```

--------------------------------

### Adjust Offset for Multiple Screen Sizes

Source: https://kb.wpbeaverbuilder.com/beaver-builder/advanced/smooth-scrolling-tweaks

Set different offsets for medium and small devices. Large devices retain the default offset. Medium devices (<992px) get a 10px offset, and small devices (<768px) get a 0px offset.

```javascript
jQuery(function ($) {
  var win = $(window);

  function bbScroll() {
    if ("undefined" != typeof FLBuilderLayoutConfig) {
      var offset = 100;

      if ("undefined" === typeof FLBuilderLayout) {
        return;
      }

      if ( FLBuilderLayout._isMobile() && win.width() < 768 ) {
        offset = 0;
      }
      if ( FLBuilderLayout._isMobile() && win.width() < 992 ) {
        offset = 10;
      }

      if ($("body.admin-bar").length > 0) {
        offset += 0;
      }

      FLBuilderLayoutConfig.anchorLinkAnimations.duration = 1000;
      FLBuilderLayoutConfig.anchorLinkAnimations.easing = "swing";
      FLBuilderLayoutConfig.anchorLinkAnimations.offset = offset;
    }
  }

  bbScroll();
  win.on("resize", bbScroll);
});
```

--------------------------------

### Beaver Builder Semantic Versioning Example

Source: https://kb.wpbeaverbuilder.com/beaver-builder/introduction/releases-versioning

Illustrates the four number positions in Beaver Builder's semantic versioning system: Major Milestone, Major, Minor, and Patch. This format helps categorize the significance of software updates.

```plaintext
2[major-milestone].5[major].4[minor].3[patch]  

```

--------------------------------

### Adjust Offset for Screen Width (Conditional)

Source: https://kb.wpbeaverbuilder.com/beaver-builder/advanced/smooth-scrolling-tweaks

Modify the offset for smaller devices. This example sets the offset to 0 if the window width is less than 992px.

```javascript
    if ( FLBuilderLayout._isMobile() && win.width() < 992 ) {
      offset = 0;
    }
  }
});
```

--------------------------------

### Conditional Styling with `fl-builder-edit` and `:not()`

Source: https://kb.wpbeaverbuilder.com/beaver-builder/basics/custom-code

Combine `.fl-builder-edit` with the `:not()` pseudo-class to apply complex styling that affects the live view but not the builder interface. This example repositions a heading module.

```css
body:not(.fl-builder-edit).fl-builder .fl-module-heading {
  position: relative;
  top: -100px;
  left: 200px;
}

```

--------------------------------

### Adjust Offset for WordPress Admin Bar

Source: https://kb.wpbeaverbuilder.com/beaver-builder/advanced/smooth-scrolling-tweaks

Add an extra offset to accommodate the WordPress admin bar when a user is logged in. This example adds 32 pixels to the standard offset.

```javascript
jQuery(function () {
  if ("undefined" != typeof FLBuilderLayoutConfig) {
    var offset = 100;
    if ( $( 'body.admin-bar' ).length > 0 ) {
      offset += 32;
    }
  }
});
```

--------------------------------

### Style Beaver Builder Pages with `fl-builder` Class

Source: https://kb.wpbeaverbuilder.com/beaver-builder/basics/custom-code

Use the `.fl-builder` utility class to scope custom CSS to pages or posts managed by Beaver Builder. This example targets a heading module on a specific page.

```css
.fl-builder .page-id-1 .fl-module-heading h1 {
  /* CSS here will only apply to the heading module on page ID 1 */
}
.fl-builder .page-id-1 .fl-module-button a {
  /* CSS here will only apply to the button module on page ID 1 */
}

```

--------------------------------

### Directly Use color-mix() Function

Source: https://kb.wpbeaverbuilder.com/beaver-builder/basics/color-picker

Enter the color-mix() function directly into the input field to see the resulting color blend. This is useful if you are already familiar with the function's syntax.

```css
color-mix(#ff0000, #00ff00, 50%)
```

--------------------------------

### HTML Link to a Module ID

Source: https://kb.wpbeaverbuilder.com/beaver-builder/basics/smooth-scrolling

Use this HTML structure to create a link that triggers smooth scrolling to a module with a specific ID. Ensure the ID is prefixed with '#'.

```html
<a href="#my-unique-id">My link text</a>
```

--------------------------------

### Add Custom Image Sizes

Source: https://kb.wpbeaverbuilder.com/beaver-builder/advanced/custom-image-sizes

Add this code to your child theme's functions.php file to define custom image sizes. These sizes will appear in the media library selection.

```php
add_image_size("video-gallery", 300, 169, true);
add_image_size("full-panoramica", 1920, 650, true);
function insert_custom_image_sizes($sizes)
{
  global $_wp_additional_image_sizes;
  if (empty($_wp_additional_image_sizes)) {
    return $sizes;
  }
  foreach ($_wp_additional_image_sizes as $id => $data) {
    if (!isset($sizes[$id])) {
      $sizes[$id] = ucfirst(str_replace("-", " ", $id));
    }
  }
  
  return $sizes;
}
add_filter("image_size_names_choose", "insert_custom_image_sizes");
```

--------------------------------

### Customize Smooth Scrolling Behavior

Source: https://kb.wpbeaverbuilder.com/beaver-builder/advanced/smooth-scrolling-tweaks

Use this JavaScript snippet to configure the duration, easing, and offset for anchor link animations in Beaver Builder. Ensure FLBuilderLayoutConfig is defined before modifying its properties.

```javascript
jQuery(function () {
  if ("undefined" != typeof FLBuilderLayoutConfig) {
    FLBuilderLayoutConfig.anchorLinkAnimations.duration = 1000;
    FLBuilderLayoutConfig.anchorLinkAnimations.easing = "swing";
    FLBuilderLayoutConfig.anchorLinkAnimations.offset = 100;
  }
});
```

--------------------------------

### Custom Image Size with Unlimited Height

Source: https://kb.wpbeaverbuilder.com/beaver-builder/advanced/custom-image-sizes

Modify the height parameter to 9999 to create a custom image size with a relatively unlimited height. This is useful for panoramic backgrounds.

```php
add_image_size("full-panoramica", 1920, 9999, true);
```

--------------------------------

### Register Custom Color Presets in PHP

Source: https://kb.wpbeaverbuilder.com/beaver-builder/basics/color-picker

Add custom color presets to Beaver Builder by defining an array of hex color values and returning them via the 'fl_builder_color_presets' filter. Ensure hex values do not include the '#' symbol.

```php
//Add color presets for Beaver Builder  
function my_builder_color_presets($colors)  
{  
  $colors = [];  
  
  $colors[] = "8E181B";  
  $colors[] = "D11C23";  
  $colors[] = "1A4688";  
  $colors[] = "D6E1EE";  
  $colors[] = "fdfffc";  
  $colors[] = "f1d302";  
  
  return $colors;  
}  

add_filter("fl_builder_color_presets", "my_builder_color_presets");  

```

--------------------------------

### Style Builder UI with `fl-builder-edit` Class

Source: https://kb.wpbeaverbuilder.com/beaver-builder/basics/custom-code

Apply custom CSS only when the Beaver Builder editor is active using the `.fl-builder-edit` class. This is useful for adjusting the builder's UI without affecting the live site.

```css
.fl-builder-edit button {
  /* CSS here will only apply to buttons when the builder is active */
}

```

--------------------------------

### HTML Anchor for Smooth Scrolling

Source: https://kb.wpbeaverbuilder.com/beaver-builder/basics/smooth-scrolling

Create an anchor element with a unique ID to serve as a target for smooth scrolling. This is useful for linking to specific spots within Text or HTML modules.

```html
<a id="my-div"></a>
<div>
     <p>I want to link to this spot.</p>
</div>
```

--------------------------------

### Enter CSS Variable in Color Picker

Source: https://kb.wpbeaverbuilder.com/beaver-builder/basics/color-picker

When entering a CSS variable in the color picker's input field, ensure you include the `var()` function.

```css
var(--css-var-name)
```

--------------------------------

### Apply CSS Gradient Background

Source: https://kb.wpbeaverbuilder.com/beaver-builder/advanced/css-gradients

Use this CSS to apply a linear gradient background to an element with the class 'bb-gradient'. Ensure the element's background is set to 'None' for the gradient to display.

```css
.bb-gradient {
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
}
```

--------------------------------

### Set Custom Smooth Scrolling Offset

Source: https://kb.wpbeaverbuilder.com/beaver-builder/advanced/smooth-scrolling-tweaks

Change the default vertical displacement when smooth scrolling finishes. Replace 'nn' with your desired pixel value.

```javascript
FLBuilderLayoutConfig.anchorLinkAnimations.offset = nn;
```

--------------------------------

### HTML with Custom ARIA Label

Source: https://kb.wpbeaverbuilder.com/beaver-builder/introduction/accessibility

This HTML snippet demonstrates how a custom ARIA label is applied to a navigation element, providing semantic information for assistive devices. It is used in modules like the Menu module in Beaver Builder.

```html
<nav aria-label="primary menu" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement" class="focus">  
```

--------------------------------

### HTML Link with Smooth Scroll Class

Source: https://kb.wpbeaverbuilder.com/beaver-builder/basics/smooth-scrolling

Add the 'fl-scroll-link' class to an anchor tag to enable smooth scrolling to a target element identified by its ID. This is used when the target is within a Text Editor or HTML module.

```html
<a href="#my-div" class="fl-scroll-link">Click Here</a>
```

--------------------------------

### Full jQuery Code for Smooth Scrolling

Source: https://kb.wpbeaverbuilder.com/beaver-builder/advanced/smooth-scrolling-tweaks

This comprehensive jQuery code block includes default settings for smooth scrolling. It can be customized to adjust the offset based on screen size and the presence of the WordPress admin bar.

```javascript
jQuery(function ($) {
  var win = $(window);

  function bbScroll() {
    if ("undefined" != typeof FLBuilderLayoutConfig) {
      var offset = 100;

      if ("undefined" === typeof FLBuilderLayout) {
        return;
      }

      if (FLBuilderLayout._isMobile() && win.width() < 992) {
        offset = offset;
      }

      if ($("body.admin-bar").length > 0) {
        offset += 0;
      }

      FLBuilderLayoutConfig.anchorLinkAnimations.duration = 1000;
      FLBuilderLayoutConfig.anchorLinkAnimations.easing = "swing";
      FLBuilderLayoutConfig.anchorLinkAnimations.offset = offset;
    }
  }

  bbScroll();
  win.on("resize", bbScroll);
});
```

--------------------------------

### Limit WordPress Revisions Globally

Source: https://kb.wpbeaverbuilder.com/beaver-builder/advanced/performance

Set a global limit for WordPress revisions by adding this line to your wp-config.php file. Replace '5' with your desired maximum number of revisions. Setting the value to '0' disables revisions entirely.

```php
define( 'WP_POST_REVISIONS', 5 );
```

--------------------------------

### Disable Beaver Builder History Temporarily via URL Parameter

Source: https://kb.wpbeaverbuilder.com/beaver-builder/advanced/performance

Append '&nohistory' to the Beaver Builder editor URL to temporarily disable history tracking. This is useful for diagnosing performance issues.

```url
https://mysite.com/?fl_builder&nohistory
```

--------------------------------

### Change Animation Easing

Source: https://kb.wpbeaverbuilder.com/beaver-builder/advanced/smooth-scrolling-tweaks

Switch the animation easing between 'swing' and 'linear' to alter the scroll speed's progression. 'swing' is the default.

```javascript
FLBuilderLayoutConfig.anchorLinkAnimations.easing = 'linear';
```