Quick Reference
Overview
Logic Hop integrates with Beaver Builder to make personalization easy using Beaver Builder modules.
Installation
- Install and activate Logic Hop
- Install and activate Beaver Builder
- Install and activate Beaver Builder Add-on plugin
- Navigate to the Logic Hop Settings page
- Click Save Changes
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
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.
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.
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.
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.
Note: Conditional Logic Tags can be used within conditional modules when Nested Logic Tags are enabled.
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 Page/Post Settings
To configure Logic Hop page/post settings use the Logic Hop Page/Post Tool before launching the Beaver Builder frontend editor.