### Tour Guide Element Settings Configuration Source: https://docs.bricksforge.io/en/elements/tour-guide Details the configuration options for the Tour Guide element, including general settings like scrolling and overlays, trigger mechanisms, and step-specific options such as selectors, positions, and button actions. ```APIDOC Tour Guide Settings: Active the tour: Enable or disable the Tour Guide. Hide in Builder: Enable or disable the Tour Guide in the Builder. General Settings: Scroll to element: Enable to scroll to the element when the step is shown. Use Modal Overlay: Enable to use a modal overlay. Trigger: Choose between “On Page Load” or “On Click”. Trigger Selector: Specify the selector to trigger the tour guide if “On Click” is chosen. Trigger Once: Enable to trigger the tour guide only once (only available when trigger is “On Page Load”). Steps Configuration: ID (optional): Unique identifier for the step. Title: The title of the step. Text: The text content of the step. Element Selector: The selector of the element related to the step. Position: The display position of the step. Show Close Icon: Enable to display a close icon for the step. Overlay Padding: Configure the padding of the overlay. Step Action Buttons: Action: Choose button action: “Next”, “Back”, “Complete”, “Cancel”. Text: The text displayed on the action button. ``` -------------------------------- ### Tour Guide Element Activation and Usage Source: https://docs.bricksforge.io/en/elements/tour-guide Instructions on how to enable the Tour Guide element within Bricksforge and add it to a page. It details the process of finding the element in the Bricks Element List and configuring its basic settings. ```APIDOC Activate Tour Guide: Go to `Bricksforge > Elements` and enable the “Tour Guide” element. A new element “Tour Guide” will be available in the Bricks Element List. How to Use: Drag the “Tour Guide” element into your page structure. Configure the element settings as needed. ``` -------------------------------- ### Bricksforge Maintenance Mode Setup Source: https://docs.bricksforge.io/en/extensions/maintenance-mode Guides users through setting up the Maintenance Mode extension. This includes creating a dedicated maintenance page using Bricks Builder, optionally disabling the header and footer, activating the extension, and configuring its settings. ```English 1. Create a page: Navigate to `Pages > Add New > Edit with Bricks`. 2. Design the page using any Bricks Elements. 3. Optionally disable Header & Footer: Go to `Settings (Icon) > Page Settings > General > Disable Header / Disable Footer`. 4. Activate the Bricksforge Maintenance Mode extension. 5. Configure settings in the **Maintenance** section. ``` -------------------------------- ### Bricksforge JavaScript Example Source: https://docs.bricksforge.io/en/extensions/bricksforge-panel A basic example demonstrating how to use the Bricksforge Panel to trigger a JavaScript action on a page load event. This involves selecting an event and defining the corresponding action. ```JavaScript document.addEventListener('DOMContentLoaded', function() { // Example: Trigger an action on page load // This would typically be configured within the Bricksforge Panel UI console.log('Page loaded and Bricksforge script is running.'); // Example action: Add a class to the body // document.body.classList.add('bricksforge-loaded'); }); // Example of a custom event trigger configuration (conceptual) // Bricksforge.on('customEventName', function(eventData) { // console.log('Custom event triggered:', eventData); // }); ``` -------------------------------- ### Bricksforge Event Trigger Example Source: https://docs.bricksforge.io/en/extensions/bricksforge-panel Illustrates how to set up a basic event trigger in Bricksforge, showing the relationship between an event and its associated actions and conditions. ```JavaScript document.addEventListener('click', function(event) { // Bricksforge event handler logic here console.log('Element clicked:', event.target); }); ``` -------------------------------- ### Conditional Logic Setup Source: https://docs.bricksforge.io/en/extensions/bricksforge-panel Describes the process of setting up conditional logic for actions. Conditions determine whether an action is performed, configured via a modal window. ```APIDOC Conditional Logic: Setup: - Click the 'Conditional Logic' icon. - Configure conditions in the modal window. Purpose: - To perform actions only if specified conditions are met. Reference: - See 'Setup Conditional Logic' section for detailed instructions. ``` -------------------------------- ### Bricksforge Assistant OpenAI API Key Setup Source: https://docs.bricksforge.io/en/extensions/bricksforge-assistant Instructions for setting up your OpenAI API key within Bricksforge to enable AI features. This ensures you are charged directly by OpenAI for your usage. ```APIDOC Bricksforge Assistant - OpenAI API Key Configuration: Purpose: To connect Bricksforge Assistant to OpenAI services for AI functionality. Prerequisites: - An OpenAI account. - A generated OpenAI API key from the OpenAI website. Setup Steps: 1. Obtain your OpenAI API key. 2. In Bricksforge, locate the Bricksforge Assistant extension settings. 3. Click the settings icon for the extension. 4. Enter your OpenAI API key into the designated field. 5. Save the settings. The status should update to "Connected" upon successful validation. ``` -------------------------------- ### Pro Forms Repeater Field Setup and Sync Source: https://docs.bricksforge.io/en/elements/pro-forms Guides on setting up and syncing the Repeater Field with data from ACF, Metabox, JetEngine, or ACPT. Covers field creation, data source selection, post ID, field name, and child element custom IDs. ```English Repeater Field Setup: 1. Add Repeater element. 2. Add child elements (fields). Sync Repeater Field (GET DATA): 1. Create Repeater Field in provider (ACF, Metabox, JetEngine, ACPT). 2. In Pro Forms Repeater settings: - Data Source: Select provider (e.g., 'ACF Repeater'). - Post ID: Enter post ID. - Field Name: Enter repeater field name (e.g., `my_repeater`). 3. For Repeater element children: - Set _Custom ID_ to match the provider field name (e.g., `my_field`). ``` -------------------------------- ### Timeline Settings: ScrollTrigger Controls - Scroll Start Source: https://docs.bricksforge.io/en/extensions/bricksforge-panel Explains the 'Scroll Start' setting for ScrollTriggers, defining the scroll position for timeline initiation. Provides examples of different scroll start configurations. ```English This setting allows you to define the scroll position where the timeline will start. Default: `top bottom`. (The animation will start when the top of the element hits the bottom of the viewport). Examples: * `top top` - The animation will start when the top of the element hits the top of the viewport. * `+=100px` - The animation will start when the top of the element hits the bottom of the viewport, plus 100px. * `-200px top` - The animation will start 200 pixels above the top of the viewport. * `+=50% bottom` – The animation will start when the bottom of the element is 50% of the way down the viewport, plus the height of the element. You can read more about the available possibilities here. ``` -------------------------------- ### Bricksforge Event Conditions Setup Source: https://docs.bricksforge.io/en/extensions/bricksforge-panel Explains how to set up conditional logic for event listeners in Bricksforge. This allows events to be created only when specific conditions are met, managed through a dedicated modal window. ```English Conditional Logic: - Accessible via 'Conditional Logic' icon. - Allows defining conditions for event listener creation. - Refer to 'Setup Conditional Logic' section for details. ``` -------------------------------- ### Timeline Settings: Match Media Rule Source: https://docs.bricksforge.io/en/extensions/bricksforge-panel Explains how to use the Match Media Rule to control when a timeline executes based on viewport conditions. Provides an example of a common media query. ```English This setting allows you to define a match media rule that will be used to determine if the timeline should be executed. If the rule is not met, the timeline will not be executed. Example: ``` (min-width: 768px) ``` In the example above, the timeline will only be executed if the viewport width is greater than or equal to `768px`. ``` -------------------------------- ### Add Elements and Global Classes Source: https://docs.bricksforge.io/en/extensions/bricksforge-terminal Provides examples of adding nested elements and applying global classes using the Bricksforge terminal. It shows how to define parent-child relationships and apply classes to elements. ```Bricksforge CLI > section > container > block > heading + text-basic + text-basic ``` ```Bricksforge CLI >section#testimonials> container.testimonials--wrapper> block.testimonials--inner> heading +text-basic+image ``` ```Bricksforge CLI >section#cto[data-style=primary] > container > block > heading +button ``` -------------------------------- ### Bricksforge Assistant AI Animation Creation Source: https://docs.bricksforge.io/en/extensions/bricksforge-assistant Guide on using the Bricksforge Assistant to generate animations via prompts. It details the steps within the Bricksforge Panel, including selecting timelines, using the AI button, and crafting prompts for animation creation. It also explains how the AI handles different animation tweens and selectors. ```APIDOC Bricksforge Assistant - AI Animation Creation: Functionality: Create animations using natural language prompts via the Bricksforge Panel. Steps: 1. Open the Bricksforge Panel and navigate to the "Timelines" tab. 2. Create a new timeline or select an existing one. 3. Click the "AI" button located next to the "+" button. 4. Enter a descriptive prompt in the provided field (e.g., 'Move the element 200 pixels to the right'). 5. Click "Create Animation". Prompting Guidelines: - Describe the desired animation clearly. - Specify selectors if not using the default trigger selector (e.g., 'Move the element .header-xy 200 pixels to the right'). - Be concrete about animation methods (e.g., 'using fromTo') or timing (e.g., 'wait 500ms'). - The AI will attempt to use existing controls or the "Animation Object" field if no control exists for a specific key. - Multiple tweens for complex animations (e.g., move right then down) will be automatically generated as separate tweens. ``` -------------------------------- ### Turnstile Activation and Settings Source: https://docs.bricksforge.io/en/elements/pro-forms Guide to activating Cloudflare's Turnstile for bot detection in Bricksforge Pro Forms. This involves creating a Cloudflare account, getting site and secret keys, and configuring them in Pro Forms settings. Turnstile offers a user-friendly experience without CAPTCHA challenges. ```APIDOC Bricksforge > Elements > Pro Forms > Settings > Spam Protection Configuration: - Site Key: Enter your Turnstile site key. - Secret Key: Enter your Turnstile secret key. Enable Turnstile: Toggle the switch to enable Turnstile for spam protection. Turnstile Field Settings: - Appearance: Controls visibility (Always, Execute, Interaction Only). - Theme: Sets the visual theme (Dark, Light). - Size: Adjusts the field size (Normal, Compact). - Language: Specifies the field language or auto-detect. - Turnstile Error Message: Custom error message for validation failures. ``` -------------------------------- ### Timeline Settings: Trigger Types Source: https://docs.bricksforge.io/en/extensions/bricksforge-panel Details the available trigger types for starting a timeline, including ScrollTrigger, Pageload, Click, Hover, and Custom triggers. ```English This setting allows you to choose the trigger that will start the timeline. The following triggers are available: * **ScrollTrigger:** This will start the timeline when the element enters the viewport. * **Pageload:** This will start the timeline when the page loads. * **Click:** This will start the timeline when the element is clicked. * **Hover:** This will start the timeline when the element is hovered. * **Custom:** This will not fire the timeline automatically. You can use Event Actions to play the timeline manually. ``` -------------------------------- ### Create Global Classes with CSS Source: https://docs.bricksforge.io/en/features/global-classes-creator Demonstrates how to define CSS rules within the Global Classes Creator to generate reusable classes for Bricks Builder. Includes examples for background colors. ```CSS .bg-default { background-color: #f8f9fa; } .bg-primary { background-color: #007bff; } ``` -------------------------------- ### Bricksforge Builder Customizer - Role Management Source: https://docs.bricksforge.io/en/features/builder-customizer Explains how to create new user roles within the Bricks Builder using the Bricksforge Builder Customizer. It details setting role names, assigning capabilities, and cloning existing roles for easier setup. ```APIDOC Create a new role: - Click 'Add new user role' button. - Enter a name for the new role. - Specify capabilities (permissions). - Option to clone capabilities from an existing role. - Activate 'Expert' mode to see all capabilities. - Click 'Create User Role' to finalize. ``` -------------------------------- ### Bricksforge Dynamic Data Tag with URL Parameter Example Source: https://docs.bricksforge.io/en/extensions/dynamic-data-tags Illustrates how to use a Dynamic Data Tag, such as `brf_post_title`, in conjunction with URL parameters to dynamically fetch content based on the provided ID. ```APIDOC Example Usage: {brf_post_title:{url_parameter:id}} Example URL: https://example.com/my-post/?id=123 Result: Displays the title of the post with ID 123. ``` -------------------------------- ### Using Variables in Formulas Source: https://docs.bricksforge.io/en/elements/pro-forms Shows how to define and use custom variables within formulas to make calculations more readable and maintainable. Includes an example of multiplying a price by a factor. ```Bricksforge Formula factor = 1.19; price = {price}; price * factor ``` -------------------------------- ### Understanding pjax in WordPress Source: https://docs.bricksforge.io/en/extensions/page-transitions Details the pjax (pushState + AJAX) technique for seamless content loading without full page reloads. It highlights challenges in WordPress, including script handling, dependency management, the admin bar, inline scripts, and event listeners. ```English pjax stands for “pushState + AJAX”. It’s a technique used in web development to load new content into a page without a full page reload, making for a smoother user experience. pjax does this by fetching new content via AJAX and then using the pushState method to update the browser’s URL and history, so that users can still use the back and forward buttons as they would expect. This technique offers a faster and more seamless browsing experience compared to traditional full-page loads. For WordPress websites, the use of pjax can introduce complexities, especially since WordPress plugins and themes might load scripts conditionally based on the specific page or post type. Here’s what this means: * **Script Handling:** When using pjax in a WordPress environment, it’s crucial to ensure that any necessary JavaScript files are loaded and initialized correctly on pjax content replacement. If not handled right, scripts might not work as intended after a pjax content load. * **Dependency Management:** WordPress enqueues scripts with dependencies. If a pjax-loaded content requires a script that hasn’t been loaded yet because it wasn’t needed on the initial page, this can cause functionality to break. * **Admin Bar:** WordPress includes elements like the admin bar based on user roles. With pjax, these dynamic elements could potentially be affected if not handled correctly. * **Inline Scripts:** Some plugins or themes might add inline JavaScript that’s intended to run when the page loads. With pjax, since a full page load doesn’t occur, these inline scripts might not execute as expected. * **Event Listeners:** Scripts that bind event listeners to elements on the initial page might not be bound to new elements fetched via pjax, unless they are re-initialized after the pjax content loads. ``` -------------------------------- ### Node Types: Event Nodes Source: https://docs.bricksforge.io/en/extensions/node-editor Describes Event Nodes (Yellow) as triggers and the starting point for any sequence in the Node Editor. It provides examples of common event triggers and emphasizes their mandatory role in initiating a node sequence. ```English Event Nodes (Yellow) Event Nodes are like triggers - they’re always the starting point of any sequence. Think of them as “When this happens…” statements. Common examples include: * When someone clicks something * When someone hovers over an element * When a page finishes loading * When a form gets submitted * When a custom event occurs (for advanced users) Every sequence of nodes MUST start with an Event Node - it’s like the “Start” button that sets everything in motion. ``` -------------------------------- ### Bricksforge Page Transitions Overview Source: https://docs.bricksforge.io/en/extensions/page-transitions Explains the Page Transitions extension, its use of pjax, and animation options with CSS or GSAP. Mentions compatibility with Bricksforge 2.0.0 and the need for custom JavaScript for third-party plugin compatibility. ```English This extension is using the pjax technique to load new pages. It will load the content via ajax and animate it if needed. This will make your website feel much faster and smoother. To animate the pages, you can choose between CSS and GSAP. For GSAP, you can even connect an already created timeline using the Bricksforge Panel. As library, we are using swup. Page Transitions are included since **Bricksforge 2.0.0.** ``` -------------------------------- ### Bricksforge Page Transitions Compatibility Approach Source: https://docs.bricksforge.io/en/extensions/page-transitions Explains Bricksforge's strategy for pjax compatibility within the Bricks ecosystem and the compromise for third-party plugins. It advises users to add custom JavaScript for reinitializing third-party scripts after page transitions. ```English We searched for a solution that would allow us to use pjax in WordPress without having to worry about the complexities mentioned above. In reality, this won’t be possible without some sort of compromise. The good thing: Because Bricksforge is a plugin for Bricks, we know the environment. We can make sure that Bricks & Bricksforge related scripts are loaded correctly and that the dependencies are met. And we did exactly that. The Page Transitions functionality should work fine using Bricks & Bricksforge. But what about Third Party Plugins? That’s the compromise. In the Bricksforge settings page, you have the possibility to use a code area to add your custom javascript. This code is fired after the page transition is done. So you can use this to reinitialize the scripts of the third party plugins. So you need to add the compatibility yourself. > Important: We will not provide support in the form of “how do I make plugin XY compatible with pjax” or “Plugin XY is not working while using page transitions”. If you have problems with a plugin, please contact the plugin author and ask for help to re-initialize the plugin scripts on page change. ``` -------------------------------- ### Multisite Installation Condition Source: https://docs.bricksforge.io/en/extensions/element-conditions Control element visibility based on whether the website is running on a WordPress multisite installation. Supports 'Is' operator with 'True' or 'False' values. ```APIDOC Is Multisite: Description: Show or hide elements if currently on a multisite installation. Operators: Is Value: Expects 'True' or 'False'. Example: Show an element if you are on a multisite installation. ``` -------------------------------- ### Form Submissions: How to Use and Settings Source: https://docs.bricksforge.io/en/extensions/form-submissions Explains how to use the Form Submissions extension by adding the 'Create Submission' action to Pro Forms and configuring its settings. ```English After activating the Form Submissions extension, the element Pro Forms will add a new form action called Create Submission. This action will save all form submissions to the database for this form. Settings: Form Title: Choose a title for the form. This title will be displayed in the submissions table. Maximum Submissions: Set a maximum number of submissions for this form. If the maximum number of submissions is reached, the form will not allow any more submissions. Prevent Duplicates: If checked, the form will not allow duplicate submissions. You can choose to compare the submissions based on existing form fields. Enter the Form Field ID you want to compare the submissions with, for example the ID of an email field. If there is already a submission with the same value in the chosen field, the form will not allow the submission. You can specify an unique message that will be displayed to the user if a duplicate submission is detected. Tip: Using Submit Button Conditions, you can disable the submit button if a duplicate submission is detected. This way the user will not be able to submit the form. ``` -------------------------------- ### GSAP Animation Example Source: https://docs.bricksforge.io/en/extensions/animation-controls An example of a custom GSAP animation object that can be used within the Bricksforge Animation Controls. This object defines properties like opacity, position (x, y), and color. ```javascript { opacity: 0.7, x: 200, y: 50, color: "#FFFFFF" } ``` -------------------------------- ### JavaScript Animation Object Examples Source: https://docs.bricksforge.io/en/extensions/bricksforge-panel Examples of JavaScript objects used to define animations in Bricksforge. These objects can include standard CSS properties and GSAP-specific properties. Properties like color and background-color should be in camelCase, and non-numeric values require quotes. ```JavaScript { x: 100, y: 100, opacity: 0 } ``` ```JavaScript { color: "blue", backgroundColor: "#000000", borderColor: cssVar("--color-primary") } ``` -------------------------------- ### Timeline Creation and Management Source: https://docs.bricksforge.io/en/extensions/bricksforge-panel Instructions on how to create a new timeline, rename it, and manage existing timelines through a context menu. It also explains how to import timelines from JSON files. ```English To create a timeline, click on the “Create Your First Timeline” button. If you already have a timeline, you can click on the `+` icon. This will create a new timeline. To change the name of the timeline, click on the name `# New Timeline` and type a new name. Right clicking on the timeline item, will open a context menu with the following options: * **Duplicate:** This will duplicate the timeline. * **Export:** This will export the timeline as a JSON file. * **Copy Timeline ID:** This will copy the timeline ID to the clipboard. This can be used for the Event Action `JavaScript`, using the helper function `getTimeline(id)` to get the timeline object. * **Disable:** This will disable the timeline. This can be useful when you want to temporarily disable a timeline, without deleting it. Disabled timelines will not be executed. * **Delete:** This will delete the timeline. To import a timeline, click on the “Import” icon. This will open a modal window where you can select a JSON file that contains the timeline data. The imported timeline will be added to the end of the list. ``` -------------------------------- ### Toggle Class on Trigger Source: https://docs.bricksforge.io/en/extensions/bricksforge-panel Toggles a specified CSS class on the trigger element when the timeline starts and ends. ```javascript ScrollTrigger.create({ // ... other ScrollTrigger options toggleClass: { className: "my-active-class", // The CSS class to toggle. targets: ".my-trigger-element" // Selector for the element to toggle the class on. If empty, toggles on the trigger element itself. } }); ``` -------------------------------- ### Styling Disabled Submit Button Source: https://docs.bricksforge.io/en/elements/pro-forms Example CSS to style the submit button when it is disabled, typically by adding the 'disabled' attribute. ```css .submit-button-wrapper button[disabled] { opacity: 0.5; } ``` -------------------------------- ### Bricksforge Conditional Logic Source: https://docs.bricksforge.io/en/extensions/bricksforge-panel Details how to set up conditional logic for events and actions, allowing for more dynamic and responsive website behavior based on specific criteria. ```APIDOC Setup Conditional Logic: - Event Settings - Event Conditions - Action Settings - Action Conditions - Target Element - Selector - Except - Delay ``` -------------------------------- ### Touch Events Source: https://docs.bricksforge.io/en/extensions/bricksforge-panel Documentation for various touch events that can be triggered by user interaction on touch devices. Includes touchstart, touchend, touchmove, and touchcancel. ```APIDOC On Touchstart: Description: Triggered when the user touches the screen while the pointer is inside the element. Useful for mobile and tablets. Related: On Touchend, On Touchmove, On Pointer Down On Touchend: Description: Triggered when the user removes their finger from the screen while the pointer is inside the element. Useful for mobile and tablets. Related: On Touchstart, On Touchmove, On Pointer Up On Touchmove: Description: Triggered when the user moves their finger across the screen while the pointer is inside the element. Useful for mobile and tablets. Related: On Touchstart, On Touchend, On Pointer Move On Touchcancel: Description: Triggered when the user removes their finger from the screen while the pointer is inside the element. Useful for mobile and tablets. Related: On Touchstart, On Touchend, On Pointer Cancel ``` -------------------------------- ### Use Custom Twig Variable (Twig) Source: https://docs.bricksforge.io/en/developer/filter Example of how to use a custom variable within an email template after it has been added via the 'bricksforge/email_designer/allowed_vars' filter. ```twig {{ custom_var }} ``` -------------------------------- ### Bricksforge Terminal Usage Source: https://docs.bricksforge.io/en/extensions/bricksforge-terminal Instructions on how to open and use the Bricksforge Terminal for various tasks within Bricks Builder. ```English To open the terminal, press `Ctrl + T` or `Ctrl + Shift + T`. You can also use the Terminal Icon added to the Bricks Builder toolbar. ``` -------------------------------- ### Bricksforge Email Sending with PHP Source: https://docs.bricksforge.io/en/extensions/email-designer Example of how to send emails using PHP within the Bricksforge environment, likely for custom confirmations or notifications. ```PHP ``` -------------------------------- ### Get Site Locale Source: https://docs.bricksforge.io/en/extensions/email-designer Returns the current locale of the website. This function is compatible with popular multilingual plugins like TranslatePress, WPML, and Polylang. ```HTML {{getLocale()}} ``` -------------------------------- ### Bricksforge Settings Import/Export Source: https://docs.bricksforge.io/en/features/import-export Provides instructions for exporting Bricksforge settings to a JSON file and importing them back. This is useful for transferring or backing up configurations. ```APIDOC Export Settings: Navigate to: General > Export All Settings Action: Downloads a file named 'bricksforge-settings-{id}.json' Content: Contains all Bricksforge settings. Import Settings: Navigate to: General > Import Settings Action: Opens a file selection dialog. Process: Select the settings file to import. Warning: Importing settings will overwrite all current settings. It is recommended to export current settings before importing new ones. ``` -------------------------------- ### Bricksforge Multisite Subdomain Condition Source: https://docs.bricksforge.io/en/extensions/element-conditions Checks if the current context is a subdomain within a multisite installation. Supports 'Is' operator with 'True' or 'False' values. ```APIDOC Is Multisite Subdomain: Operator: Is Value: True | False Description: Checks if the current context is a subdomain of a multisite installation. Example: Show an element if you are on a subdomain of a multisite installation. ``` -------------------------------- ### Flip Everything General Settings Source: https://docs.bricksforge.io/en/elements/flip-everything Configure the global width and height for the Flip Everything element. Units can be pixels, percentage, or viewport, and settings can be adjusted per breakpoint. ```APIDOC Global Width: - Description: Set the width of the flip box. - Units: px, %, vh - Breakpoint Specific: Yes Global Height: - Description: Set the height of the flip box. - Units: px, %, vh - Breakpoint Specific: Yes ``` -------------------------------- ### Stagger Animation Settings Source: https://docs.bricksforge.io/en/extensions/bricksforge-panel Configures staggering for animations across multiple elements. Allows setting the total duration, starting point, and ease function for the stagger effect. ```javascript ScrollTrigger.create({ // ... other ScrollTrigger options stagger: { amount: 0.2, // Default: 0.2 seconds between each stagger. from: "start", // Default: "start". Other values: "end", "center", "edges", "random". ease: "power2.inOut" // Example ease function. } }); ``` -------------------------------- ### Display Loop Index Source: https://docs.bricksforge.io/en/extensions/dynamic-data-tags Displays the index of the current loop, with an optional offset. Defaults to starting at 0 if no offset is provided. ```Bricksforge Dynamic Data Tags Usage: {brf_loop_index:offset} Example: {brf_loop_index:1} ``` -------------------------------- ### Flip Everything Developer Settings Source: https://docs.bricksforge.io/en/elements/flip-everything Add custom JavaScript functionality to the Flip Everything element using developer-specific events like onStart, onComplete, and onReverseComplete. ```APIDOC On Start: - Description: Add custom JavaScript code executed when the animation begins. On Complete: - Description: Add custom JavaScript code executed when the animation finishes. On Reverse Complete: - Description: Add custom JavaScript code executed when the animation is reversed. ``` -------------------------------- ### Bricksforge Email Designer: Send Email with PHP Source: https://docs.bricksforge.io/en/extensions/email-designer Example of how to send an email using PHP within the Bricksforge environment, potentially for custom email triggers or integrations. ```PHP ``` -------------------------------- ### Global Classes Backups - Manual Backup and Restore Source: https://docs.bricksforge.io/en/extensions/global-classes-backups This section describes how to manually create a backup of global classes and how to restore a previously created backup. A 'Create Backup' button is available for manual backups, and a 'Restore Backup' process allows selecting and restoring a specific backup. ```APIDOC Manual Backup: Action: Click the 'Create Backup' button. Restore Backup: Action: Click the 'Restore Backup' button. Process: Select the desired backup from the list and click 'Restore' to confirm. ``` -------------------------------- ### Bricksforge Popup Settings Source: https://docs.bricksforge.io/en/extensions/popups Configuration options for creating and managing popups in Bricksforge. This includes display rules, trigger events, animations, and styling. ```APIDOC Popup Settings: Status: (Active/Inactive) Controls whether the popup is displayed. Name: Internal name for the popup. Template: The Bricksforge template to use for the popup. Display On: (Entire Website | Specific Post/Page) Determines where the popup appears. Page: Specific post or page for display (if 'Specific Post/Page' is chosen). On (Trigger): (Page Load | Click | Scroll Position | Custom Trigger) When the popup should appear. After: Delay in seconds before displaying after page load. How many executions?: Number of times the popup can be displayed. Selector: CSS selector for click triggers. Animation: (Fade In Down | Fade In Up | Fade In Left | Fade In Right | Fade In) Visual effect for popup appearance. Overlay Color: Background color for the popup overlay. Inner BG Color: Background color for the popup content area. Close on overlay click: Boolean to enable closing by clicking the overlay. Add Close Button: Boolean to add a default close button. Is Scrollable: Boolean to make the popup content scrollable. ``` -------------------------------- ### Adding New Elements with Bricksforge Terminal Source: https://docs.bricksforge.io/en/extensions/bricksforge-terminal Demonstrates the syntax for adding new elements, including nesting, using the Bricksforge Terminal. ```Emmet Syntax > element-name > block > div ``` -------------------------------- ### Get WooCommerce Cart Item Price Source: https://docs.bricksforge.io/en/extensions/email-designer The `getItemPrice(item)` helper function, used within a loop of cart items, returns the formatted price of a specific cart item. ```PHP {{getItemPrice(item)}} ``` -------------------------------- ### Node Editor Overview Source: https://docs.bricksforge.io/en/extensions/node-editor Introduces the Bricksforge Node Editor, explaining its purpose as a visual, code-free tool for creating dynamic actions. It highlights the node-based system and its benefits for building logic flows. ```English The Node Editor, introduced in Bricksforge 3.0, empowers you to create dynamic, interactive actions visually without writing a single line of code. Imagine building functionality like connecting puzzle pieces—each node represents a specific task or decision, and linking them together creates logic flows. It replaces the previous “Events” panel (now labeled as “Legacy”) with an intuitive drag-and-drop interface for crafting complex interactions effortlessly. ``` -------------------------------- ### Bricksforge Popups: Disable Header & Footer Source: https://docs.bricksforge.io/en/extensions/popups Guide on disabling the header and footer for a Bricks Template intended for use as a popup. This ensures the popup displays correctly without extraneous page elements. ```APIDOC Disable Header & Footer: 1. Open the Template settings (Settings Icon). 2. Go to 'Page Settings' > 'General'. 3. Enable 'Disable Header' and 'Disable Footer'. ``` -------------------------------- ### Local Font Awesome Pro Hosting Source: https://docs.bricksforge.io/en/elements/font-awesome-pro Instructions on how to host Font Awesome Pro icons locally on your server using the 'SVG with JavaScript' version. This involves toggling an option in element settings and including necessary JavaScript files. ```JavaScript // Enable local hosting in element settings: toggle “Host Fonts Locally” // Include required javascript files: // fontawesome.min.js (required for all icons) // Optional files for specific icon styles ``` -------------------------------- ### Bricksforge Panel Toolbar Options Source: https://docs.bricksforge.io/en/extensions/bricksforge-panel Describes the functionality of buttons and options available in the Bricksforge Panel toolbar, including saving, minimizing/maximizing, focus mode, timeline layout, and grid customization. ```General Toolbar Buttons: - Save: Saves current data. - Minimize / Maximize: Toggles panel visibility. - Focus Mode: Alternative design with controls on the left. - Change Timeline Layout: Adjusts timeline display (single row). Settings (Cog Icon): - Grid Customization: Adjusts grid columns and width. - Horizontal Scroll: Enables/disables horizontal scrolling. - Visible Bricks Panels: Ensures space for Bricks Panels. - Disable Float: Prevents automatic builder height adjustment. - Save also Bricks Builder when saving: Saves Bricks Builder simultaneously. ``` -------------------------------- ### Multi-Step Form Elements Source: https://docs.bricksforge.io/en/elements/pro-forms Details the elements used for creating flexible multi-step forms. Includes the main 'Step' element, navigation buttons ('Previous Step', 'Next Step'), and a 'Summary Button'. Users are responsible for placing navigation buttons. ```APIDOC Multi-Step Form Elements: Step: The primary element to create distinct steps within a form. Previous Step: Adds a button to navigate to the preceding step. Next Step: Adds a button to proceed to the subsequent step. Summary Button: Adds a button to display a summary of the form entries. ``` -------------------------------- ### Twig Conditional Logic Example Source: https://docs.bricksforge.io/en/extensions/email-designer Demonstrates how to use Twig's conditional statements to display personalized greetings in an email template. It checks if a 'user_name' variable is defined and provides a fallback greeting if it is not. ```Twig {% if user_name isdefined %} Hi {{ user_name }}! {% else %} Hi there! {% endif %} ``` -------------------------------- ### Node-Based System Explanation Source: https://docs.bricksforge.io/en/extensions/node-editor Explains the concept of a node-based system using a visual flowchart analogy. It details how nodes represent actions or decisions and connections define the logic flow, making it accessible for visual learners. ```English A node-based system is like a visual flowchart. Each node represents an action, decision, or input/output, and the connections between them define the flow of logic. By connecting nodes, you can create sophisticated workflows in an intuitive and accessible way. For example, you might start with an event like “When a button is clicked,” and then link it to actions such as “Change the background color” or “Display a message.” This approach is user-friendly and ideal for those who prefer visual over textual programming. ``` -------------------------------- ### Event Instance Management Source: https://docs.bricksforge.io/en/extensions/bricksforge-panel Describes the lifecycle and management operations for event instances, including creation, renaming, duplication, export, import, disabling, and deletion via a context menu. ```English To create a new Event Instance, click the `Create Your First Instance` button in the `Events` tab or the `+` button if instances already exist. Rename an event instance by editing the name in the `# New Instance` field. Context menu options for an event instance: * Duplicate: Duplicates the selected event instance. * Export: Exports the selected event instance as a JSON file. * Disable: Prevents the event instance from being triggered. * Delete: Deletes the selected event instance. To import an event instance, click the `Import` icon and select a JSON file. ``` -------------------------------- ### GSAP Timelines Introduction Source: https://docs.bricksforge.io/en/extensions/bricksforge-panel Provides an overview of GSAP Timelines, explaining their purpose in managing complex animations by sequencing and controlling individual animation elements. Mentions their integration with Bricksforge Event Actions. ```APIDOC GSAP Timelines: Purpose: GSAP Timelines are used to create and manage complex animations by sequencing and controlling the timing of individual animation elements. Analogy: Similar to a movie timeline, it allows grouping animations, controlling start times, durations, and sequencing. Functionality: Enables creation of multi-step animations (e.g., slide-in, fade-in, bounce) as a single unit. Control: Allows pausing, restarting, reversing, and adjusting the speed or direction of the entire animation sequence. Integration: Can be controlled using Event Actions within the Bricksforge Panel. ``` -------------------------------- ### Get WooCommerce Cart Item Product Image Source: https://docs.bricksforge.io/en/extensions/email-designer The `getItemProductImage(item)` helper function, used within a loop of cart items, returns the URL of the product image for a given cart item. ```PHP {{getItemProductImage(item)}} ``` -------------------------------- ### Get User Meta Value Source: https://docs.bricksforge.io/en/extensions/email-designer The `getUserMeta(key)` helper function retrieves a user's meta value by providing the meta key as an argument. This is useful for personalizing emails with user-specific data. ```PHP {{getUserMeta('first_name')}} ``` -------------------------------- ### Bricksforge Event Settings Configuration Source: https://docs.bricksforge.io/en/extensions/bricksforge-panel Details the configurable settings for events in Bricksforge, including delay for listener creation, console logging for debugging, and loading conditions to specify where the event should be active. ```English Event Settings: - Delay (milliseconds) - Console Log (boolean) - Loading Conditions: - Everywhere - Specific pages (comma-separated list of page IDs) ``` -------------------------------- ### Create Animation Settings Source: https://docs.bricksforge.io/en/extensions/bricksforge-panel Defines the core settings for creating a new animation, including its name, the target element's selector, and the animation method. ```English Animation Name: Custom name for organization (Bricksforge Panel only). Selector: CSS selector for the element to be animated. Use `Use Trigger` for trigger selector. Method: Animation type: `To`, `From`, `From To`. ``` -------------------------------- ### Node Types: Condition Nodes Source: https://docs.bricksforge.io/en/extensions/node-editor Explains Condition Nodes (Gray with red Output Pin) as decision-making elements ('if/then') in the Node Editor. It provides examples of conditions that can be checked to create different logic paths. ```English Condition Nodes (Gray with red Output Pin) Condition Nodes are your “if/then” decision makers. They check if something is true or false and help you create different paths based on the answer. They can check things like: * Is an element visible on the page? * Does the URL contain certain parameters? * What is the current value of a variable? * Is a custom condition met? For example, you could check “Is the user logged in?” and show different content based on the answer. ``` -------------------------------- ### Before & After Element Settings Source: https://docs.bricksforge.io/en/elements/before-and-after Configuration options for the Bricksforge Before & After element. Allows customization of image display, dimensions, and drag layer appearance. ```APIDOC Before & After Element Settings: - Width: The width of the element. Default: `800px` - Height: The height of the element. Default: `500px` - Keep Image Ratio: If enabled, the image will be resized to fit the container while keeping the original image ratio. - Drag Layer Color: The color of the drag layer. - Drag Layer SVG: You can upload a custom SVG for the drag layer. The SVG will be resized to fit the container. - Render Button: Renders the element again, useful after size changes. ``` -------------------------------- ### Bricksforge Popups: Create Template Source: https://docs.bricksforge.io/en/extensions/popups Instructions on creating a Bricks Template for use as a popup. This involves selecting 'Section' as the template type and designing the popup content using Bricks elements. ```APIDOC Create a Template: 1. Navigate to 'Templates' in Bricks Builder. 2. Click 'Add New'. 3. Select 'Section' as the Template Type. 4. Design your popup content using Bricks elements. ``` -------------------------------- ### Pro Forms Checkboxes and Radio Buttons Source: https://docs.bricksforge.io/en/elements/pro-forms Details the setup and types of checkboxes and radio buttons in Pro Forms, including default, card, and image variations. Emphasizes the use of wrapper elements for proper functionality. ```English Checkbox Wrapper: Parent element for checkboxes. Card Checkbox: Nestable element for custom checkbox designs. Image Checkbox: Checkbox with distinct images for checked and unchecked states. Radio Button: Default radio button. Card Radio Button: Nestable element for custom radio button designs. Image Radio: Radio button with distinct images for checked and unchecked states. ``` -------------------------------- ### JavaScript Event Handling with Bricksforge Source: https://docs.bricksforge.io/en/extensions/bricksforge-panel Explains how Bricksforge Panel simplifies listening to and responding to JavaScript events on web pages without requiring manual coding. It highlights the ability to trigger actions like class changes or GSAP animations. ```General Listen to JavaScript events on any element (document, window, body). Trigger actions: add/remove classes, change attributes, run GSAP Timelines. Utilize Bricks-specific events (e.g., Slider element events). ``` -------------------------------- ### Node Types: Action Nodes Source: https://docs.bricksforge.io/en/extensions/node-editor Details Action Nodes (Gray) as the 'do something' blocks that perform specific tasks within the Node Editor. It lists examples of actions like changing appearance, controlling media, and managing data, and explains how they can be chained. ```English Action Nodes (Gray) Action Nodes are the “do something” blocks. They represent actual tasks you want to perform, such as: * Changing how something looks (color, size, visibility) * Showing or hiding elements on the page * Starting or stopping videos/audio * Changing text content * Making requests to get or send data * Storing information in variables (like temporary storage) You can connect multiple Action Nodes one after another to create a sequence of actions that happen in order. ``` -------------------------------- ### Loading Conditions Setting Source: https://docs.bricksforge.io/en/extensions/bricksforge-panel Specifies where the timeline should be loaded. Options include loading everywhere or on specific pages identified by their IDs. ```English Loading Conditions: `Everywhere` or `Specific pages` (comma-separated IDs, e.g., `1,2,3`). ``` -------------------------------- ### Add Multiple Settings to Heading Source: https://docs.bricksforge.io/en/extensions/bricksforge-terminal Shows how to add multiple settings, 'tag' and 'text', to a 'heading' element simultaneously. ```text > heading{tag: h1, text: Hello World} ``` -------------------------------- ### Use Custom Commands Source: https://docs.bricksforge.io/en/extensions/bricksforge-terminal Explains how to use custom commands created in Bricksforge. Custom commands allow users to define shortcuts for adding complex element structures. To use a custom command, prefix its name with '> *'. ```Bricksforge CLI >* my-command ``` -------------------------------- ### Query Loops for Dynamic Data Source: https://docs.bricksforge.io/en/elements/pro-forms Explains the use of Query Loops to dynamically populate form elements. It lists the elements that support Query Loops, such as Option, Checkbox, Radio, and their card/image variants, enabling dynamic population of choices within these fields. ```APIDOC Elements Accepting Query Loops: - Option - Checkbox - Card Checkbox - Image Checkbox - Radio - Card Radio - Image Radio ```