Beaver Builder Add-on

Quick Reference

Overview

Logic Hop integrates with Beaver Builder to make personalization easy using Beaver Builder modules.

Installation

Conditional Modules

Conditional modules use Logic Hop Conditions to determine if the modules should be displayed.

To specify a condition for a modules within the Beaver Builder builder:

  • Select the module
  • In the module settings panel, select the Logic Hop tab
  • Using the Logic Hop Condition menu, select a condition to determine if the module will be displayed
  • To display the module when a condition is not met, set the Display When option to Condition Not Met

Conditional Module Settings

The default display state is set to Always Display.

Note: If you create a new condition in another browser window you will need to reload Beaver Builder for the new condition to be available.

Nested Modules

Nested modules is an experimental feature available in Logic Hop 3.2.2 and higher.

To enable:

  • Open the Logic Hop Settings page
  • Check Enable Nested Logic Tags
  • Click Save Changes

A nested conditional module is:

  • A module with a Logic Hop Condition set to any value other than Always Display
  • Inside another module with the Logic Hop Condition set to any value other than Always Display.

Learn more about Logic Tags

Hiding Conditional Modules

When working with personalization you will often have multiple rows and modules duplicated and visible within the editor. This can make working with content and layouts confusing. Logic Hop provides two methods for hiding conditional modules within the editor.

Toggle Element Visibility

Toggling visibility allows you to temporarily hide elements.

Toggle Visibility

To toggle elements:

  • Open the Beaver Builder Tools Menu
  • Click the Layout CSS & Javascript option
  • Click the Logic Hop tab
  • Click on the Row or Module to toggle its visibility

Elements are listed by the Reference Name which is set within the Logic Hop tab. Elements without a Reference Name will be identified by their Beaver Builder node ID.

Note: Clicking Save will reload the page and reset the default visibility for all elements. To exit without reloading click Cancel.

Hide Elements in Editor

Conditional elements can be hidden at all times within the editor.

Hide Elements

To save editor visibility for elements:

  • Open the Logic Hop tab for an element
  • Set the Editor Display option to Hide in Editor
  • Click Save

The element will immediately be hidden within the editor. Hidden elements will be listed within the Logic Hop tab under the Layout CSS & Javascript settings.

You can also toggle the visibility of hidden elements from the Tools Menu:

  • Open the Beaver Builder Tools Menu
  • Click the Toggle Hidden Logic Hop Modules option

To show elements:

  • Using one of the above methods, show the element in the editor
  • Open the Logic Hop tab for the element
  • Set the Editor Display option to Show in Editor
  • Click Save

Logic Tags

Logic Tags for conditions and data can be used within Divi modules these can be added manually or by using the Logic Hop tool palette.

Logic Tags

Note: Conditional Logic Tags can be used within conditional modules when Nested Logic Tags are enabled.

Learn more about Logic Tags

Logic Hop Tool Palette

The Logic Hop tool palette is active within Beaver Builder modules with a text editor. The tool palette can be used to insert Logic Tags, Logic Blocks, Goals and Data into the text editor content.

To access the Logic Hop tool palette:

  • Select a module with a text editor
  • In the module settings panel, select the Content tab
  • Click the Logic Hop button

Logic Hop Tool Palette

Logic Hop Page/Post Settings

To configure Logic Hop page/post settings use the Logic Hop Page/Post Tool before launching the Beaver Builder frontend editor.

Learn more about Logic Hop Page/Post Settings

Yo ! Thanks for checking out Logic Hop!