diff --git a/bb-theme/defaults-for-layouts-content/headers-nav-menus/merge-page-content-into-the-header.md b/bb-theme/defaults-for-layouts-content/headers-nav-menus/merge-page-content-into-the-header.md index 98116c13..d885190a 100644 --- a/bb-theme/defaults-for-layouts-content/headers-nav-menus/merge-page-content-into-the-header.md +++ b/bb-theme/defaults-for-layouts-content/headers-nav-menus/merge-page-content-into-the-header.md @@ -30,7 +30,7 @@ Here's an overview of how it can be done in Beaver Builder Theme and the Beaver 4. Add the content you want to the row. :::tip -If you plan to apply a transparent header to every page, you might want to [save this row](/beaver-builder/layouts/saved-content), so you can easily add it to the new pages on your site and change the content as you like. +If you plan to apply a transparent header to every page, you might want to [save this row](/beaver-builder/layouts/reusable-content), so you can easily add it to the new pages on your site and change the content as you like. ::: ## 3 Add CSS to move the page content up and the header down diff --git a/beaver-builder/settings/layouts-menu.md b/beaver-builder/settings/layouts-menu.md index df28c886..79c9345c 100644 --- a/beaver-builder/settings/layouts-menu.md +++ b/beaver-builder/settings/layouts-menu.md @@ -21,7 +21,7 @@ The **Themer Layouts** menu item only appears when you have the Beaver Themer in 2. Navigate to **Beaver Builder**. You can choose from the following options: - - [Themer Layout](/beaver-themer/category/layout-types--modules) _(requires Beaver Themer)_ + - [Themer Layout](/beaver-themer/layout-types-modules) _(requires Beaver Themer)_ - [Templates](layouts/templates/saved-templates.md) - [Reusable Content](layouts/reusable-content/index.md) - Categories diff --git a/beaver-builder/troubleshooting/debugging/known-beaver-builder-incompatibilities.md b/beaver-builder/troubleshooting/debugging/known-beaver-builder-incompatibilities.md index 16f73e06..9ef27c8d 100644 --- a/beaver-builder/troubleshooting/debugging/known-beaver-builder-incompatibilities.md +++ b/beaver-builder/troubleshooting/debugging/known-beaver-builder-incompatibilities.md @@ -146,7 +146,7 @@ functions such as opening module settings. ### [Icelander](https://www.webmandesign.eu/project-type/themes/) Theme prior to Version 1.1.8 -Icelander Theme Version 1.1.8 or higher is compatible with both Beaver Builder plugin and [Beaver Themer](/beaver-themer/management-compatibility/beaver-themer-supported-themes). +Icelander Theme Version 1.1.8 or higher is compatible with both Beaver Builder plugin and [Beaver Themer](/beaver-themer/getting-started/supported-themes). ### Kleo Theme diff --git a/beaver-themer/introduction/faq.md b/beaver-themer/introduction/faq.md index 83a7ee55..4f3f7923 100644 --- a/beaver-themer/introduction/faq.md +++ b/beaver-themer/introduction/faq.md @@ -1,6 +1,6 @@ --- id: faq -title: Beaver Builder FAQ +title: Beaver Themer FAQ sidebar_label: FAQ description: Frequently asked questions for the Beaver Themer add-on plugin. --- @@ -53,7 +53,7 @@ pages. Beaver Themer requires the Beaver Builder plugin, but it doesn't require the Beaver Builder Theme, even though all three are designed to integrate well -together. See the [list of themes that are fully supported by Beaver Themer](/beaver-themer/management-compatibility/beaver-themer-supported-themes). +together. See the [list of themes that are fully supported by Beaver Themer](getting-started/supported-themes.md). ## Which Licenses include Beaver Themer? @@ -69,7 +69,7 @@ Unfortunately, Beaver Themer is an add-on for the premium version of Beaver Buil Most themes support archive, singular, and 404 layout types out of the box. However, to support the Theme Builder header, footer, and part layouts, themes must be built a certain way. -Currently, Beaver Themer pairs well with the [Beaver Builder Theme](https://www.wpbeaverbuilder.com/wordpress-framework-theme/) and is supported by [several 3rd party themes listed here](/beaver-themer/management-compatibility/beaver-themer-supported-themes). +Currently, Beaver Themer pairs well with the [Beaver Builder Theme](https://www.wpbeaverbuilder.com/wordpress-framework-theme/) and is supported by [several 3rd party themes listed here](getting-started/supported-themes.md). ## Does Beaver Themer require Page Builder? diff --git a/docusaurus.config.js b/docusaurus.config.js index f82462b8..2064a346 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -62,11 +62,17 @@ module.exports = { className: "header-home-icon", "aria-label": "Docs Home", }, + // { + // type: "docsVersionDropdown", + // position: "left", + // dropdownItemsAfter: [{ to: "/versions" }], + // dropdownActiveClassDisabled: true, + // }, { - type: "docsVersionDropdown", + label: "Beaver Builder", + type: "doc", + docId: "introduction/index", position: "left", - dropdownItemsAfter: [{ to: "/versions" }], - dropdownActiveClassDisabled: true, }, { label: "Beaver Themer", @@ -222,17 +228,17 @@ module.exports = { path: "beaver-builder", routeBasePath: "beaver-builder", sidebarPath: require.resolve("./sidebarBeaverBuilder.js"), - lastVersion: "2.9", - versions: { - current: { - label: "Beaver Builder 2.10", - path: "", - }, - 2.9: { - label: "Beaver Builder 2.9", - path: "2.9", - }, - }, + // lastVersion: "2.9", + // versions: { + // current: { + // label: "Beaver Builder 2.10", + // path: "", + // }, + // 2.9: { + // label: "Beaver Builder 2.9", + // path: "2.9", + // }, + // }, }, theme: { customCss: require.resolve("./src/css/custom.css"), diff --git a/versioned_docs/version-2.9/account/affiliate-program.md b/versioned_docs/version-2.9/account/affiliate-program.md deleted file mode 100644 index 1bb8c663..00000000 --- a/versioned_docs/version-2.9/account/affiliate-program.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: affiliate-program -title: Affiliate Program -sidebar_label: Affiliate Program ---- - -This section contains information about the Beaver Builder Affiliate Program. - -## Signup fee - -Registering is free! Just complete our [affiliate application](https://www.wpbeaverbuilder.com/affiliates/) to apply to our program. - -## Where can I find your Affiliate Agreement? - -You'll find the Affiliate Agreement on our website via this URL: [https://www.wpbeaverbuilder.com/affiliate-program-terms-conditions/](https://www.wpbeaverbuilder.com/affiliate-program-terms-conditions/). - -## What are the payment options and minimum payout limits? - -All affiliate payouts are paid via PayPal and all payouts will be made when the affiliate's accumulated eligible earnings meet or exceed the threshold of US$100. - -## What is your cookie duration? - -Our affiliate program uses cookies to track sales generated by your affiliate link. The cookies will remain valid for 60 days. - -## Do I need to have an active Beaver Builder subscription? - -No, you do not need to have an active subscription to be an affiliate. However, the more familiar you are with Beaver Builder, the easier it will be to recommend and sell. - -## How often will I be paid? - -Affiliate earnings will be eligible for payout 30 days after the end of the month in which they accrue. - -For example, earnings accrued any time during the month of January will be eligible for payment when payouts are processed in March. All eligible payouts will be processed for payment by the Company by the 20th of each month. - -## How do I get banners and text links for affiliate ads? - -You can find all of the banners and affiliate links with your unique affiliate link within your [Affiliate area](https://www.wpbeaverbuilder.com/affiliate-area/). All banners are found on the Creatives tab. - -## How much can I earn with your Affiliate Program? - -There is no limit on your earning. As long as the sales you refer are made legitimately, we are happy to pay for them. - -## Am I allowed to bid for Beaver Builder related keywords on Search Engines? - -Affiliates are not allowed to bid on keywords or phrases containing the "Beaver Builder" trademark or any variation of the trademarked term on Pay-Per-Click or Pay per Impression campaigns on any search engine, including but not limited to Google, Yahoo, MSN, Ask, or Bing. - -## Am I allowed to use Beaver Builder in my domain or website name? - -We do not permit using any of the Company intellectual property (IP) or any confusingly similar variation of the Company IP. This includes a restriction on using the Company IP in any domain or website name, in any keywords or advertising, in any metatags or code, or in any way that is likely to cause consumer confusion. - - - diff --git a/versioned_docs/version-2.9/account/billing-info.md b/versioned_docs/version-2.9/account/billing-info.md deleted file mode 100644 index 0c5cee98..00000000 --- a/versioned_docs/version-2.9/account/billing-info.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -id: billing-info -title: Billing Information -sidebar_label: Billing Info ---- - -If you elected to store your credit card information during a Beaver Builder -purchase that information is available in the **Payment methods** section on -your [My Account](https://www.wpbeaverbuilder.com/my-account/) page. - -You can manage stored credit card information in the following ways: - -* You can delete a stored credit card entry. -* You can add more than one credit card and choose whether to apply the new card to existing subscriptions. -* You can change which card is the default for new purchases. - -:::caution -You cannot edit information for existing entries, so if you need to update information for a particular card, follow the procedures below to delete the old entry and add a new one. -::: - -## Delete a saved credit card entry - -In the **Payment methods** section, click the **Delete** button next to the credit card entry you want to delete. - -## Add a new credit card - -:::tip -Be sure to check the box in Step 3 if you want your new card to apply to existing subscriptions. -::: - -1. Do one of the following: - 1. In the **Payment methods** section, click **Add payment method**. - 2. Mouse over **Account** in the menu at the top of the [My Account](https://www.wpbeaverbuilder.com/my-account/) page and choose **Add/change payment method**. -2. Add the card number, the expiration date, and the CVC security number on the back of the card. -3. **Important:** If you want to use this card to renew subscriptions (automatic or manual), select the checkbox **Update the Payment Method used for all of my active subscriptions (optional)**. -If you don't select this checkbox, the renewal process will continue to charge -your previous card. See the last procedure in this article if you want to -change the credit card used for existing subscriptions. - -4. Click **Add payment method**. - -## Change the default credit card for new purchases - -:::caution -Changing the default card only applies to new purchases, not to existing subscriptions. To change the default for subscriptions, see the next procedure. -::: - -In the **Payment methods** section, click **Make default** next to the credit card that you want to use by default for new purchases. - -:::info -The card that does not have a **Make default** button is the current default. -::: - -## Change the credit card used to renew existing subscriptions - -If you added a credit card but didn't select the checkbox **Update the Payment -Method used for all of my active subscriptions (optional)** at that time and -want to use that credit card for your existing subscription renewals, you have -to delete the card and add it back, following this procedure. - -1. In the **Payment methods** section, click **Delete** next to the card that you want to use for your recurring subscriptions. -The resulting screen shows your remaining payment methods. - -2. Click **Add payment method**. -3. Add the card number, the expiration date, and the CVC security number on the back of the card. -4. Select the checkbox **Update the Payment Method used for all of my active subscriptions (optional)**. -5. Click **Add payment method**. diff --git a/versioned_docs/version-2.9/account/domain-manager.md b/versioned_docs/version-2.9/account/domain-manager.md deleted file mode 100644 index 732ba45b..00000000 --- a/versioned_docs/version-2.9/account/domain-manager.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: domain-manager -title: Domain Manager -sidebar_label: Domain Manager -description: Learn what the Domain Manager is, and how to use it. ---- - -The Domain Manager is a tool that displays a list of all domains utilizing your license key, along with the products installed on those domains and their respective versions. - -With this feature, you can remotely deactivate and remove a domain, effectively preventing it from using your license key or receiving updates. Additionally, you have the ability to reactivate any previously deactivated domain. - -## Accessing the Domain Manager - -To access the Domain Manager, follow these steps: - -1. Log in to your Beaver Builder [My Account](https://www.wpbeaverbuilder.com/my-account/) page. -2. Navigate to the **Domain Manager** section. -3. Click on **Manage Domains**. - -## Notifications - -Enabling notifications means you will receive an email whenever a new website is added to the Domain Manager through the activation of your license key on the new website. - -## Site Limit Checker - -The Site Limit Checker is a useful tool for determining whether a domain will count against your site limit before adding it to the Domain Manager. - -To use the Site Limit Checker: - -1. Enter the domain name (e.g., `dev.example.com`) in the provided field. -2. Click the **Submit** button. - -After submitting, the Site Limit Checker evaluates the domain against our [ruleset](license/activations.md) and displays the result. - -:::info - -The Site Limit Checker is only available to users with a Starter or Professional license. Unlimited license holders and legacy license holders are not subject to site limits. - -::: - -## Staging Label - -A **"Staging"** label will appear next to the domain name if it is a staging or development domain. This label helps identify domains that are not intended for production use. - -You can also enter the term **"staging"** into the search field to filter all staging domains. This is especially useful if you have many domains using your license key and want to quickly exclude all production websites. - -## Product & PHP Version - -Within the Domain Manager, you can obtain information about the products currently installed on each domain, including their version numbers and the PHP version being used. - -![Domain Manager product info and version](/img/beaver-builder/account--domain-manager--1.jpg) - -:::info -Domains running the latest product version will display the version info text in Green, while out-of-date products will be highlighted in Red. -::: - -## Search - -Utilizing the search function in the Domain Manager allows you to filter the list of domain names, making it easier to locate a specific website. You can search by domain name, product name, or version to identify domains with outdated products. - -For example, if you are interested in finding websites using Beaver Themer version 1.0, you can search using the term `Beaver Themer: 1.0`. Domains not using Beaver Themer version 1.0 will be excluded from the list. - -## Deactivate a Domain - -Deactivating a domain disables the site from receiving remote updates from our server. However, the existing version of Beaver Builder will continue to function normally. - -Deactivation prevents the activation of the Beaver Builder license on the local site via **Settings > Beaver Builder > License**. If you wish to restrict a client from using your Beaver Builder license, this option should be chosen. - -:::tip -The Domain Manager stores deactivated sites for future reactivation. You can delete deactivated domains from the Domain Manager by clicking the Remove button. -::: - -## Reactivate a Domain - -The Reactivate option allows previously deactivated domains to once again receive remote updates from our servers. - -## Remove a Domain - -The Remove option provides the ability to delete a domain from the Domain Manager. - -:::warning Warning - -The Remove option **does not** result in the removal of the license key from the website. Beaver Builder does not possess the functionality to remotely delete license keys from websites. - -If the license key remains active and you choose to proceed with the Remove option, the specific domain will be reintegrated into the Domain Manager when it performs its subsequent check for Beaver Builder updates. - -::: - -:::tip - -In scenarios where you intend to prevent former clients from utilizing your license key to update their website(s), the recommended course of action involves deleting your license key from the website and then utilizing the Remove option. If you lack access to the website of a former client, the [Deactivate](#deactivate-a-domain) option is more suitable. - -::: - -## Restore Removed Domain - -1. Visit the **WordPress Admin Dashboard** of the website whose domain you want to restore. -2. Go to **Settings > Beaver Builder > License**. -3. Enter or paste your license key and click the **Save License Key** button. -4. Return to the Domain Manager, and the domain should be listed again. diff --git a/versioned_docs/version-2.9/account/index.md b/versioned_docs/version-2.9/account/index.md deleted file mode 100644 index e7db157e..00000000 --- a/versioned_docs/version-2.9/account/index.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: index -title: My Account -sidebar_label: My Account ---- - -Beaver Builder’s [My Account](https://www.wpbeaverbuilder.com/my-account/) page gives you access to essential items and information such as your downloads, license, orders, support, documentation and more. - -![Beaver Builder Account page](/img/beaver-builder/account--index--1.jpg) - -## Create Account - -To create a Beaver Builder account, you must first purchase a Beaver Builder license. During the purchase, you'll need to provide your first and last name, along with your email address. After completing the purchase, a password will be sent to the email address you provided. - -:::info - -If you have not received an email with your password, check your spam folder. If you still can't find it, you can reset your password by visiting the [password reset page](https://www.wpbeaverbuilder.com/my-account/lost-password/). - -::: - -## Access My Account - -1. Access your Beaver Builder account by visiting our [website](https://www.wpbeaverbuilder.com/). -2. Click **Account** in the main menu, then **Downloads & Order** from the drop-down menu. - -### My Downloads - -In the My Downloads section, you will find all product .zip files included with your license. It is also possible to download previously released versions in case you encounter a problem with the current release, as well as developer previews, alphas, and beta versions if they are available. - -:::info -By enabling the Prerelease Updates option in Beaver Builder settings, you can easily install Beaver Builder product alpha and beta releases. -::: - -### Domain Manager - -The Domain Manager displays a comprehensive list of all domains utilizing your license key, along with detailed information on the products being used on each domain, including their versions. - -See the [Domain Manager](domain-manager.md) article for more information. - -### My Subscriptions - -In the My Subscriptions section, you can view, upgrade, or cancel your subscription, and change your payment method. - -See the [License](license/index.md) section and [Billing Info](billing-info.md) article for more information. - -## In this Section - -import DocCardList from '@theme/DocCardList'; - - diff --git a/versioned_docs/version-2.9/account/license/activations.md b/versioned_docs/version-2.9/account/license/activations.md deleted file mode 100644 index 21ffdd36..00000000 --- a/versioned_docs/version-2.9/account/license/activations.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -id: activations -title: Site Activations -sidebar_label: Site Activations ---- - -Site activation is required to enable automatic updates and qualify for support on a domain. Activating your license key connects your website to our update server and adds it to the [domain manager](../domain-manager.md) in your account. - -## Development & Staging Activations - -Beaver Builder license types have a site limit on the number of production websites they can be activated on. However, we allow unlimited activations on development and staging websites. - -We detect if a site is a development or staging website using the following ruleset: - -- **IP address:** 192.168.0.1 -- **Subdomain:** test.example.com, testing.example.com, sandbox.example.com, dev.example.com, local.example.com, stage.example.com, staging.example.com. -- **TLD:** example.local, example.loc, example.localhost, example.test, example.dev. -- **No TLD:** localhost. -- **Host Staging:** .flywp.xyz, .instawp.xyz, .temp-site.link, .wp1.site, bigscoots-staging.com, closte.com, cloudwaysapps.com, cloudwayssites.com, flywheelstaging.com, kinsta.cloud, myftpupload.com, onrocket.site, tempurl.host, wpcomstaging.com, wpengine.com, wpenginepowered.com. - -When your development or staging URL aligns with any of the above, it will be categorized as a development or staging site and will not be included in your license site limit count. - -:::tip - -The Domain Manager displays a **"Staging"** label next to the domain name if it is a staging or development domain. This label helps identify sites that are not intended for production use. - -::: - -:::info - -We use the [WordPress Site URL](https://wordpress.org/documentation/article/settings-general-screen/#site-address-url) to determine the website domain. Therefore, any website served in a subdirectory (e.g., _https://example.com/staging_) will be treated as a production URL. - -::: - -## WordPress Multisite - -In WordPress Multisite network installations, subsites are not considered separate sites and do not count towards your license site activation limit. diff --git a/versioned_docs/version-2.9/account/license/cancel.md b/versioned_docs/version-2.9/account/license/cancel.md deleted file mode 100644 index dd5f2d09..00000000 --- a/versioned_docs/version-2.9/account/license/cancel.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: cancel -title: Cancel License -sidebar_label: Cancel License ---- - -You can cancel your Beaver Builder license at any time. Cancelling your license will prevent it from renewing automatically at the end of the billing period. - -## Cancel License - -To cancel your Beaver Builder license, follow these steps: - -1. Log into your Beaver Builder [My Account page](../index.md). -2. Scroll to the **Subscriptions** tab. -3. Click the **Cancel** button next to the subscription you want to cancel. - -:::info - -If you don't see the **Cancel** button, it means your subscription is not set to [renew automatically](renew.md). You'll need to renew it manually each year. - -::: - -## What Happens After Cancelling - -Once you cancel your subscription, you will still have access to Beaver Builder until the end of the billing period. After that, your license will expire, and you will no longer have access to updates, support, or the ability to download Beaver Builder products. - -See the [License Expiry](expiry.md) article for more information. - -## PayPal Billing Agreement - -One of the payment options available is PayPal. When you pay for your Beaver Builder license using PayPal, you’re entering a billing agreement with us. A PayPal Billing Agreement functions much like keeping a credit card on file for automated payments. This is facilitated by our payment administrator PayPal and allows us to collect the payment for your purchase and/or renewal. - -### Cancelling Agreement - -You can cancel your PayPal Billing Agreement at any time. Cancelling your PayPal Billing Agreement will cancel your Beaver Builder subscription at the end of the billing period. - -If you do not want your subscription to renew automatically, you can [cancel auto-renew](renew.md#cancel-automatic-renewal) within your Beaver Builder account area. You’ll then need to renew manually each year. - -:::warning - -Once the subscription cancels, it cannot be reactivated. A new subscription will need to be purchased to continue using Beaver Builder. - -::: - -## Reactivating License - -If you decide to reactivate your license after cancelling, you can do so by purchasing a new subscription. You can purchase a new subscription from the Beaver Builder website. diff --git a/versioned_docs/version-2.9/account/license/downgrade.md b/versioned_docs/version-2.9/account/license/downgrade.md deleted file mode 100644 index 5c835798..00000000 --- a/versioned_docs/version-2.9/account/license/downgrade.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -id: downgrade -title: Downgrade License -sidebar_label: Downgrade license ---- - -You can downgrade from one premium version either to another, or downgrade to the free Beaver Builder Lite plugin. - -## Downgrade License - -If you've purchased a Beaver Builder license, you may downgrade your license within 30 days of purchase. Upon downgrading, we'll refund the difference in price between the licenses. - -For more information, please refer to our refund policy in the [Terms and Conditions](https://www.wpbeaverbuilder.com/terms-and-conditions/). - -### Request a Downgrade - -To request a downgrade, simply [submit a support ticket](https://www.wpbeaverbuilder.com/beaver-builder-support/) and specify the plan you'd like to switch to. Please include the email address associated with your purchase or your subscription number to help us locate your account efficiently. - -:::caution - -Please note that downgrading will result in the loss of features from the higher-tier version. You can view the specific features of each plan on our [pricing page](https://www.wpbeaverbuilder.com/pricing/). - -For example, downgrading from the Professional license to the Starter license reduces your license usage from 50 sites to 1 site and removes Multisite Support and Multisite Network Settings. - -::: - -Once your downgrade has been processed and confirmed, you will have access to the new plugin version in your Beaver Builder Account area. - -## Legacy Licenses - -For users on legacy licenses (Standard, Pro, Agency, and Ultimate), your plan and pricing will remain unchanged as long as you continue renewing your subscription. - -These legacy licenses are no longer available for new purchases or downgrades. If you wish to downgrade, we recommend allowing your legacy subscription to expire, after which you can select a plan from our current [pricing page](https://www.wpbeaverbuilder.com/pricing/). - -## Downgrade to Lite Version - -Alternatively, you may opt to switch to our free Beaver Builder Lite Version plugin. To do so, navigate to the Plugins page, deactivate and delete the premium version, then [install the Lite version](https://wordpress.org/plugins/beaver-builder-lite-version/). diff --git a/versioned_docs/version-2.9/account/license/expiry.md b/versioned_docs/version-2.9/account/license/expiry.md deleted file mode 100644 index aa0023d6..00000000 --- a/versioned_docs/version-2.9/account/license/expiry.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: expiry -title: License Expiry -sidebar_label: License Expiry ---- - -Your Beaver Builder license will expire under any of the following conditions: - -- Your subscription renewal payment fails due to issues with your payment method. -- Your subscription has been cancelled. -- You have requested a refund. - -You can view your subscription renewal date by logging into your Beaver Builder [My Account page](../index.md). - -## What Happens After? - -When your Beaver Builder license expires, the following will occur: - -- Updates will no longer be available. -- No longer eligible for support. -- Ability to download any Beaver Builder products from your account page is no longer available. - -:::info - -You can still install and use any copies you've already downloaded. However, you're restricted to the Beaver Builder version that was available at the time your license expired. - -::: - -## Functionality After Expiry - -Beaver Builder will continue to function as expected even after your license expires. However, we can only guarantee compatibility with the latest version of Beaver Builder and its add-ons. If you are using an outdated version, you may eventually encounter compatibility issues, particularly when updating other components of your website, such as WordPress, PHP, or third-party plugins and themes. - -If you decide not to renew your license, we recommend exploring alternative solutions and planning a migration to another page builder plugin. diff --git a/versioned_docs/version-2.9/account/license/index.md b/versioned_docs/version-2.9/account/license/index.md deleted file mode 100644 index 4bf99929..00000000 --- a/versioned_docs/version-2.9/account/license/index.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -id: index -title: License -sidebar_label: License ---- - -The articles in this section explain what Beaver Builder licenses are, why you need one, how they work, and how to obtain one. They also detail the different types of Beaver Builder licenses, what each one offers, and how to manage and use your license keys effectively. - -## What is a License? - -Licenses are used to activate premium versions of Beaver Builder products on your website by connecting them to our update server. Activating your license on a site enables automatic updates and support for that domain. - -## License Key - -After purchasing a Beaver Builder license, you will receive a unique license key that can be found in [your account page](https://www.wpbeaverbuilder.com/my-account) on the Beaver Builder website. - -:::danger - -We recommend not sharing your license key with others. This may lead to unauthorized use of your license and may require the creation of a new license key. Please note that issuing a new license key is not an automated process, may take time, and will only be performed a limited number of times. - -When a license key is regenerated, the previous key becomes invalid. It is necessary to update the new key on all sites where the original key was previously utilized. - -::: - -## License Length - -All Beaver Builder licenses work on an annual subscription basis. After the first year, you can [renew your license](renew.md) to continue receiving updates and support. Your existing installations will continue to work even if you don't renew, but you won't receive new features or support. - -:::info - -Lifetime licenses **are not** available for purchase. In order to continue receiving updates and support, you must renew your license annually. If you choose not to renew, you can still use the software, but you will not receive updates or support. - -See our [License Renewal](renew.md) article for more information on how to renew your license. - -::: - -## Benefits of a License? - -While there is a [free version of Beaver Builder](https://wordpress.org/plugins/beaver-builder-lite-version/) available, a premium license offers several benefits: - -1. Access to advanced features and modules. -2. Premium templates and pre-built layouts. -3. Access to dedicated support from the Beaver Builder team. -4. Regular updates and improvements. -5. Use on multiple websites (depending on the license tier). - -## Obtain a License - -A Beaver Builder license **can only** be obtained by purchasing one from the official Beaver Builder website. There are different license tiers available, each offering different features, support levels, and the number of sites where Beaver Builder products can be installed and used. - -Visit the [Beaver Builder pricing page](https://www.wpbeaverbuilder.com/pricing/) to view the available license options and choose the one that best suits your needs. - -## In this Section - -import DocCardList from '@theme/DocCardList'; - - diff --git a/versioned_docs/version-2.9/account/license/renew.md b/versioned_docs/version-2.9/account/license/renew.md deleted file mode 100644 index 419d72de..00000000 --- a/versioned_docs/version-2.9/account/license/renew.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: renew -title: Renew License -sidebar_label: Renew License ---- - -Beaver Builder licenses renewal every year and are set to auto-renew by default for purchases made after May 1st, 2017. - -If you purchased Beaver Builder license before May 1st, 2017, you will need to manually renew your license from your account page. You’ll be able to renew one month before your subscription expires. - -:::info - -You can view your subscription renewal date by logging into your Beaver Builder [My Account page](../index.md). - -::: - -## Cancel Automatic Renewal - -If you cancel autorenewal, you will need to manually renew your subscription each year. You can cancel autorenewal at any time from your account page and follow these steps: - -1. Go to your [My Account](https://www.wpbeaverbuilder.com/my-account/) page and scroll to the **My Subscriptions** section. -2. Click the **Cancel Renewal** button next to the subscription you'd like to cancel. - If you don't see the **Cancel Renewal** button, it means you're not in the autorenewal program and you'll have to renew it manually each year. - -:::caution - -We cannot reinstate auto-renewal once you cancel it, but you can still renew your subscription manually. - -::: - -If you do not renew your Beaver Builder license, see the [License Expiry](expiry.md) article for more information. - -## Renew Notifcations - -You will receive an email notification one week before your subscription expires and another email one week after your subscription expires. These emails will contain a link to renew your subscription. - -## Renewal Discount - -You're eligible for a 40% discount if you purchased Beaver Builder **before October 13, 2022**. Your subscription discount pricing will remain unchanged as long as you renew within 2 weeks of the expiration date. - -In addition, licenses can be renewed up to 30 days early without changing the renewal date. So in total, you have 44 days to renew and still receive the renewal discount. - -You'll receive an email the day your subscription expires with a reminder to renew. You can renew your subscription after logging into your Beaver Builder account area. We will also send out a reminder email one week from the day your subscription expires. - -If for some reason you don't receive these emails, [contact us](https://www.wpbeaverbuilder.com/contact/) and we'll get you fixed right up! - -### Legacy Plans - -If a customer is currently eligible for a renewal discount on their legacy plan and decides to upgrade to one of our new plans, they will no longer be eligible for that discount. - -:::warning Important - -The new plans do not include renewal discounts, and once the upgrade is made, any previously applied renewal discounts from the legacy plan will not transfer to the new plan. Customers should carefully consider this when deciding whether to upgrade, as the pricing structure differs between the legacy and new plans. - -::: diff --git a/versioned_docs/version-2.9/account/license/suspension.md b/versioned_docs/version-2.9/account/license/suspension.md deleted file mode 100644 index aae1d316..00000000 --- a/versioned_docs/version-2.9/account/license/suspension.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -id: suspension -title: License Suspension -sidebar_label: License Suspension ---- - -As a license holder of our product(s), you are allowed to use Beaver Builder products on websites that you own or manage. However, you cannot distribute, freely give away, or resell your license. - -If we believe license abuse is occurring, as per our [terms and conditions](https://www.wpbeaverbuilder.com/terms-and-conditions/) we reserve the right to suspend or even terminate subscriptions when necessary. - -If you feel this was in error, please [contact us immediately](https://www.wpbeaverbuilder.com/beaver-builder-support/). - -## License Suspension Errors - -In the case of a suspended license, you'll see errors on the Beaver Builder [My Account page](https://www.wpbeaverbuilder.com/my-account/) and when attempting to enter your license key. - -### My Account - -You will receive the following error when visiting Beaver Builder's [My Account page](https://www.wpbeaverbuilder.com/my-account/): - -> The key associated with this account has been blocked. Your downloads may be unavailable. - -![My Account license key blocked message](/img/beaver-builder/account--license-suspended--1.jpg) - -### Entering License Key - -The following error will appear when you attempt to enter your license key on a website: - -> Key has been blocked - -![WordPress Admin Dashboard license key blocked message](/img/beaver-builder/account--license-suspended--2.jpg) diff --git a/versioned_docs/version-2.9/account/license/transfer.md b/versioned_docs/version-2.9/account/license/transfer.md deleted file mode 100644 index 185902a8..00000000 --- a/versioned_docs/version-2.9/account/license/transfer.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -id: transfer -title: Transfer License -sidebar_label: Transfer License ---- - -As a license holder of our products, you cannot distribute, freely give away, or resell your license key. You may not transfer the license key to a new owner. In the event that an [email address changes](../update-email-password.md), ownership of the license does not transfer as a result. - -Visit our [terms and conditions](https://www.wpbeaverbuilder.com/terms-and-conditions/) to see our full policy regarding Licenses. diff --git a/versioned_docs/version-2.9/account/license/types.md b/versioned_docs/version-2.9/account/license/types.md deleted file mode 100644 index f5b4c55c..00000000 --- a/versioned_docs/version-2.9/account/license/types.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: types -title: License Types -sidebar_label: License Types ---- - -Each license type has its own set of features and limitations, such as the level of support and the number of sites where Beaver Builder products can be installed and used. - -## Current License Types - -We offer the following licenses for sale through our website: - -- Starter License -- Professional License -- Unlimited License - -For more information and a detailed comparison of each license type, see our [Pricing](https://www.wpbeaverbuilder.com/pricing) page. - -## Legacy License Types - -Legacy licenses refer to any Beaver Builder license purchased before September 10th, 2024. This date marks when Beaver Builder introduced its current licensing structure, which includes the Starter, Professional, and Unlimited license tiers. - -The following license types are considered legacy licenses: - -- Standard License -- Pro License -- Developer License -- Agency License -- Ultimate License - -You can continue to use your legacy license as long as you maintain an active subscription. - -### Can I Switch to a New License? - -If your legacy license was purchased or renewed more than 30 days ago, you will have the option to switch to one of our new plans at your next renewal. - -:::caution - -Please note that any renewal discounts associated with your legacy license will not transfer to the new license, and some of the new licenses may have site usage limits. - -You can explore the new licenses and their features on our pricing page before making your decision. - -::: diff --git a/versioned_docs/version-2.9/account/license/upgrade.md b/versioned_docs/version-2.9/account/license/upgrade.md deleted file mode 100644 index b3dae4ea..00000000 --- a/versioned_docs/version-2.9/account/license/upgrade.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: upgrade -title: Upgrade License -sidebar_label: Upgrade License -description: Instructions for how to upgrade from one premium version of Beaver Builder to a higher one. ---- - -You can upgrade your license from one premium version to another at any time. When you upgrade, you’ll only be charged the cost difference between your license and the one you’re upgrading to, prorated to expire one year after your original purchase. - -For example, if you buy a license on January 1 and upgrade on July 1, you will be charged for a half year of the difference between the two licenses' annual prices. The license expiration date remains the same, so on the following January 1, your license expires and you can renew at the price of your current package. - -:::warning Legacy License Upgrades - -When customers who are eligible for a renewal discount on their legacy plan choose to upgrade to one of our new plans, they should be aware that this discount eligibility will be lost. - -Our new plans have a different pricing structure that doesn't include renewal discounts. After upgrading, any renewal discounts that were previously available under the legacy plan cannot be carried over to the new plan. We encourage customers to take this into consideration when evaluating whether to upgrade, since the pricing structures between legacy and new plans are different. - -::: - -## 1. Purchase Upgrade - -1. Go to your [My Account](https://www.wpbeaverbuilder.com/my-account/) page and scroll to the **My Subscriptions** section. - -![My Subscriptions section](/img/beaver-builder/account--upgrade--1.jpg) - -2. Click the **Upgrade** button and on the pricing page select the package that you want. - Only eligible upgrades are shown in this section. If you already have the - Ultimate license, you won't see any upgrade options. - -3. Complete the checkout process. - Your license number remains the same but is now associated with the upgrade - version. - -## 2. Download and Install the Upgrade - -1. Download the Beaver Builder .zip file from your [My Account](https://www.wpbeaverbuilder.com/my-account/). -2. [Install](../../getting-started/install.md) the Beaver Builder .zip file and replace the current version of Beaver Builder. - - :::info - If you don't install the upgraded version immediately, your previous premium version of the plugin will continue to notify you of updates on the WordPress **Plugins** menu. - ::: - -3. Activate the plugin and [enter your license key](index.md#activate-license-key). diff --git a/versioned_docs/version-2.9/account/license/view-activate.md b/versioned_docs/version-2.9/account/license/view-activate.md deleted file mode 100644 index 77d5f19d..00000000 --- a/versioned_docs/version-2.9/account/license/view-activate.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -id: view-activate -title: View & Activate License -sidebar_label: View & Activate License ---- - -This article explains how to view and activate your Beaver Builder license key. - -## View License Key - -You can view your license key by logging into your Beaver Builder account. The license key is located at the top of the [My Account page](../index.md). - -:::tip - -Clicking on the license key will copy it to your clipboard. You can then paste it into the [Beaver Builder License tab](settings/license.md) on your WordPress site. - -::: - -## Activate License Key - -To activate your Beaver Builder license key, follow these steps: - -1. Log into your Beaver Builder [My Account page](../index.md). -2. Copy the license key to your clipboard by clicking it. -3. Access your site's WordPress Admin Dashboard. -4. Navigate to **Settings > Beaver Builder**. -5. Click the **License** tab and paste your license key. - -:::tip - -If you have a [WordPress Multisite network](https://codex.wordpress.org/Create_A_Network) and want to activate your license key on all sites, you can network activate the license key. - -See our [Network-wide settings](settings/index.md) section for more information. - -::: diff --git a/versioned_docs/version-2.9/account/request-invoice.md b/versioned_docs/version-2.9/account/request-invoice.md deleted file mode 100644 index dea53c79..00000000 --- a/versioned_docs/version-2.9/account/request-invoice.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -id: request-invoice -title: Request Invoice -sidebar_label: Request Invoice ---- - -To request your invoice, simply login to your [My Account](https://www.wpbeaverbuilder.com/my-account/) page and submit a support request. - -It's important that you also send along your billing address and any other pertinent information you would like to see on the invoice. diff --git a/versioned_docs/version-2.9/account/suggest-new-features.md b/versioned_docs/version-2.9/account/suggest-new-features.md deleted file mode 100644 index 04e6cfd2..00000000 --- a/versioned_docs/version-2.9/account/suggest-new-features.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: suggest-new-features -title: Suggest New Features -sidebar_label: Suggest New Features ---- - -We're always happy to get feedback from you about features you would like to -see in our products. - -To suggest a new feature or an enhancement of an existing feature, [submit a request](https://github.com/beaverbuilder/feature-requests) via our GitHub feature requests and roadmap board. diff --git a/versioned_docs/version-2.9/account/update-email-password.md b/versioned_docs/version-2.9/account/update-email-password.md deleted file mode 100644 index 8f2e3449..00000000 --- a/versioned_docs/version-2.9/account/update-email-password.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: update-email-password -title: Update Email Address & Password -sidebar_label: Update Email & Password ---- - -In this article, you will learn how to update your Beaver Builder account's email address and password. - -## Change Email Address - -It is not possible to update your email address through your Beaver Builder account page. If you need to update your account email address, please [contact our support team](https://www.wpbeaverbuilder.com/beaver-builder-support/). - -:::warning Warning -Ownership of the license **does not** transfer when the email address is changed. - -See the [Transfer License](license/transfer.md) article for more information. -::: - -## Change Password - -1. Log into your Beaver Builder [My Account](https://www.wpbeaverbuilder.com/my-account/). -2. Once logged in, hover your mouse cursor over the **Account** menu item in the Beaver Builder website navigation. -3. In the drop-down menu, select [Edit Account](https://www.wpbeaverbuilder.com/my-account/edit-account/). -4. Enter your current password, then add a new one and confirm it. -5. Click the **Save Changes** button. - -You can change your password for your Beaver Builder account on the [Edit Account](https://www.wpbeaverbuilder.com/my-account/edit-account/) page at the Beaver Builder website. - -## Reset Password - -In the event that you forget your account password, you can reset your password if you have forgotten it. - -1. Visit the [Beaver Builder website](https://www.wpbeaverbuilder.com/). -2. Click the [Account](https://www.wpbeaverbuilder.com/my-account/) menu item in the Beaver Builder website navigation. -3. Click the **Lost your password?** link on the login form and enter the email address associated with your account. -4. An email with instructions on how to reset your password should be sent to you. - -:::info - -Check your junk or spam folder if you don't receive the email within 5 minutes. If you still don't receive the email, please [contact our support team](https://www.wpbeaverbuilder.com/beaver-builder-support/). - -::: diff --git a/versioned_docs/version-2.9/advanced/adding-pdf.md b/versioned_docs/version-2.9/advanced/adding-pdf.md deleted file mode 100644 index 990bf528..00000000 --- a/versioned_docs/version-2.9/advanced/adding-pdf.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -id: adding-pdf -title: Add a PDF to your Layout -sidebar_label: Add a PDF to your Layout ---- - -There are two ways to add a PDF file to your layout, depending on whether you -want to merely provide a download link or to view the contents of a PDF file -on-screen. - -## Download a PDF file through a link - -Sometimes viewers don't need to see the PDF file contents before they -download, you'd rather just provide a download button or link. Use the -following procedure. - -1. On the WordPress Admin Dashboard, click **Media**. - -2. Upload the PDF file by dragging it into the Media window or click **Add new** and select the file for upload. - -3. Click the file you added to open the **Attachment details** sidebar and copy the URL and close the **Media Library**. - -4. [Launch Beaver Builder](getting-started/launch-builder.md) on your page or post and open the module into which you want to insert the link. - We recommend using the Button module - -5. Enter the URL to the PDF in the appropriate field and save changes. - -## Display a PDF for viewing - -If you want to display the contents of a PDF in a viewport on your web page, you'll have to use a plugin. Use one that lets you insert a shortcode into your layout. Make sure you're happy with the plugin's responsive capabilities so the PDFs can be viewed on small devices. If you also want your users to be able to download the PDF they're viewing, make sure the plugin offers that as well. diff --git a/versioned_docs/version-2.9/advanced/convert-content.md b/versioned_docs/version-2.9/advanced/convert-content.md deleted file mode 100644 index 40d00c07..00000000 --- a/versioned_docs/version-2.9/advanced/convert-content.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: convert-content -title: Convert content -sidebar_label: Convert Content -description: This article explains how to convert content from the Standard (block) or Classic editor in WordPress 5 to Beaver Builder and vice versa. ---- - -This article explains how to convert content from the Standard (block) or Classic editor in WordPress 5 to Beaver Builder and vice versa. It also describes the result of each type of conversion. [Follow this link](getting-started/launch-builder.md) for how to install the Classic Editor plugin and how to open the Beaver Builder editor in WordPress 5. - -:::warning **Warning:** - -You can start editing a new page in either WordPress editor -(Standard or Classic) and convert to Beaver Builder and vice versa, but beware -of switching back and forth after that--you may lose data. - -If you open a Beaver Builder layout in the Standard or Classic editor and -make further edits, and then you convert back to Beaver Builder, you'll see -your previous Beaver Builder layout. You won't see the new WordPress edits -that you made. If you publish the Beaver Builder layout and open the page -again in Standard or Classic Editor, you'll lose the previous edits that you -made in the Standard or Classic Editor. - -::: - -:::tip - -Unless you enable Posts in **Settings > Beaver Builder > Post -types**, you will only see the option to [launch Beaver Builder](getting-started/launch-builder.md) for Pages, not Posts. - -::: - -## Standard (block) Editor to Beaver Builder - -This section applies when a page has content created with the WordPress Standard (block) Editor and you want to convert that content to Beaver Builder. You can use [any of the methods for opening a page in Beaver Builder](getting-started/launch-builder.md), or you can convert directly from within the Standard Editor, as follows. No matter what method you use to open Beaver Builder, -the content is automatically converted. Pay attention to the warning above. - -**Convert content to Beaver Builder from within the WordPress Standard Editor:** - -1. Click the **More** icon (three vertical dots) in the upper right corner of the standard edit screen. -2. In the **Plugins** section, choose **Convert to Beaver Builder**, as shown in the following screenshot. - -![](/img/beaver-builder/advanced--convert-content--1.jpg) - -**Result:** The block content is converted to a single Beaver Builder Text -Editor module. - -## Classic Editor to Beaver Builder - -This section applies when you have the Classic Editor plugin activated and -allow it to be used in **Settings > Writing**, and you have a page or post of -content in Classic Editor that you want to convert to Beaver Builder. - -1. From the WordPress admin panel, choose **Pages > All Pages**. -2. Mouse over the page that you want to convert. -The dot following the Beaver Builder link will be light gray, as in the -following screenshot, showing that the layout is not currently in Beaver -Builder. - -![](/img/beaver-builder/advanced--convert-content--2.jpg) - -3. Click the **Beaver Builder** link to open the page in the Beaver Builder editor. - -**Result:** The Classic Editor text and images are converted to a single Text -Editor module in Beaver Builder. - -## Beaver Builder to the Standard (block) Editor - -This section applies when you have a page or post with Beaver Builder content -that you want to convert to the Standard (block) Editor. - -1. From the WordPress admin panel, choose **Pages > All Pages**. -2. Mouse over the page that you want to convert to reveal the choices. -The dot following the Beaver Builder link will be green, showing that the -layout is currently in Beaver Builder. - -3. Click either **Edit** or **Block Editor**, depending on your editor settings in **Settings > Writing**. -If you have the Classic Editor installed, then click either **Edit** or **Block Editor**, depending on your editor settings in **Settings > Writing**. - -**Result:** Opening a Beaver Builder layout in the Standard Editor -converts the layout into a single Classic block. From there, you can select -the option to convert the item to blocks, as shown in the following screenshot. - -![](/img/beaver-builder/advanced--convert-content--3.jpg) - -## Beaver Builder to Classic Editor - -This section applies when you have the **Classic Editor** plugin activated and -allow it to be used in **Settings > Writing**, and you have a page or post -with Beaver Builder content that you want to convert to the Classic Editor. - -1. From the WordPress admin panel, choose **Pages > All Pages**. - -2. Mouse over the page that you want to convert and check to ensure that the dot following the Beaver Builder link is green, as shown in the following screenshot. -This ensures that there is an existing Beaver Builder layout for this page. If -there is no existing Beaver Builder layout, the dot is light gray or white. - -![](/img/beaver-builder/advanced--convert-content--4.jpg) - -3. Click **Edit**. -If you have the Classic Editor installed, then click either **Edit** or **Classic Editor**, depending on your settings in **Settings > Writing**. - -**Result:** The text and images are converted from Beaver Builder to Classic -Editor. diff --git a/versioned_docs/version-2.9/advanced/css-gradients.md b/versioned_docs/version-2.9/advanced/css-gradients.md deleted file mode 100644 index 2e9b85b6..00000000 --- a/versioned_docs/version-2.9/advanced/css-gradients.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -id: css-gradients -title: CSS Gradients -sidebar_label: CSS Gradients -description: This article explains how to convert content from the Standard (block) or Classic editor in WordPress 5 to Beaver Builder and vice versa. ---- - -If you want to add a gradient to the background of a row or column, you can do so with the color gradient background options built into the rows and columns. Alternatively, if you need a gradient effect with more complexity, such as one created using a gradient generator, you can follow the steps below. - -## Get the CSS for your Gradient - -There are many gradient generators on the internet that generate CSS code. -Here are just a few: - -- [Ultimate CSS gradient generator](http://www.colorzilla.com/gradient-editor/) -- [CSS Gradient](https://cssgradient.io/) -- [Web gradients](https://webgradients.com/) -- [UI gradients](https://uigradients.com/) - -Once you've generated the gradient you want, copy the CSS and save it -somewhere. - -## Add a Custom CSS Class to your Row or Column - -Adding custom styling is possible by using the unique node class name, however, we recommend that you create your own class. - -1. Open your row or column for editing and click the [Advanced tab](layouts/advanced-tab/index.md). -2. Scroll to the [HTML Element](layouts/advanced-tab/html-element.md#class) section and enter a custom name in the **Class** field. _(Do not use a period.)_ - -:::tip -It's a best practice to add a custom prefix to your class names to avoid conflict with other class names used by the theme and plugins. In this example, we'll use the class name `bb-gradient`. Repeat this step for any other rows or columns that you want to have the same color gradient background. -::: - -3. Click **Save**. - -## Add the Custom CSS for the Gradient - -Your custom CSS should use the [class name you added to the row or column](#add-a-custom-css-class-to-your-row-or-column). Based on our `bb-gradient` class name example, here's what the CSS should look like. - -```css -.bb-gradient { - background-image: linear-gradient( - -225deg, - #231557 0%, - #44107a 29%, - #ff1361 67%, - #fff800 100% - ); -} -``` - -Copy the CSS from the gradient generator and paste into your preferred location. See the [Custom Code](basics/custom-code.md) article for more information on where to place your custom CSS. - -:::tip -If your CSS gradient doesn't appear on your row or column, make sure that the row or column background is set to **None**. -::: - -As soon as you add your custom class name you should see the row or column on your page take on the background gradient color. diff --git a/versioned_docs/version-2.9/advanced/custom-image-sizes.md b/versioned_docs/version-2.9/advanced/custom-image-sizes.md deleted file mode 100644 index 123550c3..00000000 --- a/versioned_docs/version-2.9/advanced/custom-image-sizes.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: custom-image-sizes -title: Custom image sizes -sidebar_label: Custom Image Sizes -description: This article explains how to add custom image sizes to Beaver Builder modules. ---- - -Suppose you want a custom panorama background image that is sized exactly to your content width and height. Or, you want your Callout modules to have photos of an identical size. - -With the following code, you can create custom image size options that appear in the size selection box for anywhere in Beaver Builder that you can insert an image from the media library: row and column backgrounds, Photo module, Callout module, and so on. - -In the following screenshot, there are two custom image size options, labeled "Video gallery" and "Full panorama." - -![](/img/beaver-builder/advanced--custom-image-sizes--1.jpg) - -## Code - -Add the following code to the _functions.php_ file in your [child theme](/bb-theme/getting-started/do-i-need-to-install-the-beaver-builder-child-theme) and see the tips below for customizing it further. - -```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"); -``` - -### Reserved Names - -When adding your own image sizes with this code, you can't use any of the following image size names that WordPress has reserved. - -- `thumb` -- `thumbnail` -- `medium` -- `medium_large` -- `large` -- `post-thumbnail` - -You can learn more from the [WordPress Developer docs](https://developer.wordpress.org/reference/functions/add_image_size/#reserved-image-size-names). - -### Image Names - -The custom image name must be a string, such as `my-img-size` or `my-img-600`. Do not use integers on their own: for example, `add_image_size( '400', 500, 750, true );` does NOT work. - -## Regenerate Thumbnails - -The custom size choice only applies to images that you upload to your media library **after** adding this custom code. If you want to apply the custom size to an image that's already in your media library, either upload it again, or use a plugin such as [Regenerate Thumbnails](https://wordpress.org/plugins/regenerate-thumbnails/) to change the sizes of all your previously uploaded images. - -## Tips - -- Change the labels and the image widths and heights as you like. If you want the image to have a relatively unlimited height, use `9999` for the second value. For example: - - ```php - add_image_size("full-panoramica", 1920, 9999, true); - ``` - -- A hyphen in the custom image name converts to a space in the front-end selection label, and the first word is automatically capitalized. For example, `video-gallery` converts to **Video gallery**, as you can see in the screenshot above. diff --git a/versioned_docs/version-2.9/advanced/diy-website-builder-platform.md b/versioned_docs/version-2.9/advanced/diy-website-builder-platform.md deleted file mode 100644 index 09c4e4d6..00000000 --- a/versioned_docs/version-2.9/advanced/diy-website-builder-platform.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -id: diy-website-builder-platform -title: DIY Website Builder Platform -sidebar_label: DIY Website Builder Platform ---- - -This article explains how Beaver Builder can be used to provide page builder functionality for DIY website builder platforms using WordPress Multisite. - -## Introduction - -In general, DIY website-building platforms are SaaS (software as a service) that offer an all-in-one solution to create a website, similar to Wix or SquareSpace. - -A similar platform can be created using [WordPress Multisite](https://wordpress.org/support/article/create-a-network/), where each subsite on the network represents a customer site. By using [Beaver Builder Unlimited License](https://www.wpbeaverbuilder.com/pricing/), you can provide page builder functionality as well as create and offer your own templates. In addition to this, you can also white label the Beaver Builder plugin and BB Theme with your own brand and logo by using the [Branding options](settings/branding.md) available in the Unlimited license. - -:::caution -Although Beaver Builder Unlimited license may be used as part of a DIY Hosted Website Builder, we **do not permit** the bundling or reselling of Beaver Builder as part of a traditional hosting package. - -However, if you wish to include Beaver Builder in a traditional hosting package, you may auto-install or bundle the [Beaver Builder Lite version](https://wordpress.org/plugins/beaver-builder-lite-version/). -::: - -## Caveat - -The Beaver Builder Unlimited only provides page building features; there is no functionality for registering a customer, managing user accounts, or creating packages/plans. This functionality can either be achieved through custom coding or using third-party plug-ins. - -:::info -As most of the functionality is provided by WordPress Multisite and either custom code or third-party plugins, we cannot provide assistance or support in setting up DIY website builder platforms. -::: diff --git a/versioned_docs/version-2.9/advanced/index.md b/versioned_docs/version-2.9/advanced/index.md deleted file mode 100644 index 2d5af5f0..00000000 --- a/versioned_docs/version-2.9/advanced/index.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -id: index -title: Advanced -sidebar_label: Advanced ---- - -The articles in this section are intended for advanced users since some of the articles require familiarity with coding or server configuration. - -## In this Section - -import DocCardList from '@theme/DocCardList'; - - diff --git a/versioned_docs/version-2.9/advanced/migration.md b/versioned_docs/version-2.9/advanced/migration.md deleted file mode 100644 index 595a2c6b..00000000 --- a/versioned_docs/version-2.9/advanced/migration.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: migration -title: Migration -sidebar_label: Migration -description: This article explains the different methods for adding custom code to Beaver Builder layouts. ---- - -There are third-party plugins you can use to migrate Beaver Builder sites to a -new domain or location, but you can also migrate manually if you are careful -about a couple things: updating the database and clearing the Beaver Builder -cache. See the [Moving WordPress](https://wordpress.org/support/article/moving-wordpress/) -article for information about migrating sites manually, and pay attention to the -following sections. - -## Always use serialized search & replace - -It’s important to use a serialized search and replace tool when changing URLs -in the WordPress database, because many plugins, themes, and WordPress itself -store arrays and objects in a serialized format, which becomes corrupted if -you try to do a standard search and replace. If you use a backup plugin, make -sure it uses serialized search and replace. - -## Database Search and Replace Script in PHP - -The proper way to manually migrate a WordPress database is by doing a -serialized search and replace on the database. The fine folks at -**inter.connect/it** offer a [Serialized Search and Replace](https://interconnectit.com/products/search-and-replace-for-wordpress-databases/) tool. - -If you prefer to use a plugin, we recommend the [Better Search Replace plugin](https://wordpress.org/plugins/better-search-replace/) by Delicious Brains. - -:::danger **Warning:** -Always make a backup of your database before running a search and replace! -::: - -## Clear the Beaver Builder Cache - -The Beaver Builder plugin caches image and asset URLs, so it’s also important -to [clear the Beaver Builder cache](settings/tools.md#cache) after migrating. diff --git a/versioned_docs/version-2.9/advanced/performance.md b/versioned_docs/version-2.9/advanced/performance.md deleted file mode 100644 index 2677fba0..00000000 --- a/versioned_docs/version-2.9/advanced/performance.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: performance -title: Performance -sidebar_label: Performance -description: This article provides suggestions and recommendations for improving your website's performance. ---- - -Beaver Builder is optimized for speed and efficiency, but your website’s performance depends on more than just the builder. Factors like hosting, server configuration, image optimization, active plugins, and your theme all play a role in how fast your site loads. In this article, we’ll share best practices and recommendations to help you maximize performance and deliver a faster, smoother experience for your visitors. - -## Hosting - -When it comes to WordPress hosting, there are several options to choose from, each with its own advantages and trade-offs. The most common entry point is shared hosting, where multiple websites share the same server resources such as CPU, memory, and storage. While this makes it the cheapest option, the downside is that your site’s performance depends on how those shared resources are being used by others. Even a well-optimized site can feel slow or experience downtime because of limits outside your control. - -For that reason, we don’t recommend shared hosting if you care about speed, stability, or long-term growth. Better options include managed WordPress hosting, VPS hosting, or dedicated hosting. - -:::tip - -To check if your site is on shared hosting, visit [ViewDNS.Info](https://viewdns.info/reverseip/) and run a reverse IP lookup using only your domain (e.g., enter `my-website.com`, not the full URL). - -The results will show other domains on the same server. If you see many, it likely means your site is on shared hosting, where resources are divided among multiple users and performance can suffer. If only your domain or a few others appear, you’re likely on VPS, managed WordPress hosting, or dedicated hosting, which generally provide stronger performance, security, and control. - -::: - -## PHP - -You can further improve your website’s performance by making sure your server is running the latest version of PHP, or at least the [minimum version required by WordPress](https://wordpress.org/about/requirements/). - -:::tip - -To check your PHP version, enable Beaver Builder [Debug Mode](settings/tools.md#debug-mode) or visit the [WordPress Site Health screen](https://wordpress.org/support/article/site-health-screen/). - -::: - -## CDN - -Using a content delivery network (CDN) can significantly improve the performance of your Beaver Builder website because it stores and distributes assets like HTML pages, JavaScript files, stylesheets, images, and videos across a global network of servers. By serving these files from a location closer to each visitor, a CDN reduces latency, speeds up load times, and ensures a smoother, more reliable browsing experience, even during traffic spikes or high demand. - -:::info - -By default, Beaver Builder’s CSS and JavaScript do not use your CDN URL. For instance, row background images load directly from your site URL instead of the CDN. - -To ensure Beaver Builder’s CSS and JavaScript use your CDN URL, you can apply the hooks [`fl_builder_render_css`](/beaver-builder/developer/tutorials-guides/common-beaver-builder-plugin-filter-examples.md#modify-beaver-builder-css-for-cdns) and [`fl_builder_render_js`](/beaver-builder/developer/tutorials-guides/common-beaver-builder-plugin-filter-examples/#modify-beaver-builder-javascript-for-cdns). - -::: - -## Plugins & Themes - -The suggestions below can improve the performance of your website, particularly in [shared hosting environments](#hosting). - -- Ensure WordPress, all plugins and themes are up-to-date. -- Only use plugins and themes that are maintained by the developer. -- Deactivate and delete any unnecessary plugins. - -## Caching - -Installing and configuring a caching plugin can significantly improve your website’s performance by reducing server load and speeding up page delivery. Caching works by storing static versions of your website’s pages and assets, so they can be served quickly to visitors without repeatedly processing the same requests. This results in faster load times, improved user experience, and better overall efficiency. All [caching plugins](settings/tools.md#cache-clearing-tool) should be compatible with Beaver Builder. - -:::warning - -Avoid using multiple caching solutions at the same time, also known as *compound caching*. Combining a cache plugin, server-side caching, and a service like Cloudflare adds unnecessary complexity and increases the risk of conflicts. If your host already provides server-side caching, choose either a caching plugin *or* a service like Cloudflare, but not both. Overlapping caching layers can cause issues such as outdated content being displayed, broken layouts, or difficulties when making updates to your site. Keep your setup simple and streamlined to get the best performance results. - -::: - - -## Optimize Assets - -Optimizing assets like images, videos, and scripts is essential for improving website performance. Large or uncompressed files can slow down your site, increase bandwidth usage, and negatively impact the user experience. Many plugins and services are available to help with image optimization, such as tools that automatically compress and resize images without sacrificing quality. - -For videos, we strongly recommend **not** uploading them directly to your WordPress media library. Hosting videos on your server can quickly consume storage space, slow down load times, and put unnecessary strain on your hosting resources. Instead, upload your videos to a platform such as YouTube or Vimeo, then embed them on your site using the [Video module](../layouts/modules/video/video.md). This reduces server load, improves streaming quality, and provides a smoother experience for your visitors. - -Managing scripts and stylesheets with optimization plugins requires caution when configuring settings. Minifying files is safe and reduces file size, but options like “combine CSS” or “combine JavaScript” should generally be avoided. Combining CSS can cause styling issues, while combining JavaScript may load assets out of order and break layouts or functionality. Since HTTP/2 efficiently manages multiple requests, combining is unnecessary. For best results, stick to minification and only combine files if absolutely required and thoroughly tested. - -## WordPress Revisions - -Just like published posts and pages, [revisions](https://wordpress.org/support/article/revisions/) are stored in your database. Each time a revision is created, a new record is added, and these can accumulate over time. By default, WordPress does not limit the number of revisions, but setting a limit helps reduce database size and improve efficiency. - -For instance, 50 posts with 5 revisions each would add 250 extra records. Limiting or disabling revisions keeps your database lean and enhances overall performance. - -### Limit Revisions via Advanced Settings - -You can increase or decrease the number of revisions for any page, post, or custom post type built with Beaver Builder. To update these settings, go to WordPress Admin Dashboard > Settings > Beaver Builder > [Advanced tab](../settings/advanced#limit-wp-revisions-for-layouts) and find the Limit WP revisions for layouts option. Once enabled, a Revisions Limit field will appear where you can set the maximum number of revisions allowed for Beaver Builder layouts. - -:::tip - -We recommend setting the revision limit to 5, as it provides a balanced approach between functionality and performance. With five revisions, you’ll have enough history to roll back recent changes if needed, while keeping your database from becoming overloaded with unnecessary records. - -::: - -### Disable Revisions via Advanced Settings - -To disable revisions entirely for any page, post, or custom post type, enter a value of 0. - - -### Limit Revisions via `wp-config.php` - -The Revision Limit option in Beaver Builder’s Advanced settings allows you to increase, decrease, or completely disable revisions for any page, post, or custom post type built with Beaver Builder. This setting does not affect content created with the WordPress editor. To apply a global revision limit across all post types, add the following line to your `wp-config.php` file, replacing `5` with the maximum number of revisions you’d like to keep for each post or page: - -```php -define( 'WP_POST_REVISIONS', 5 ); -``` -:::tip - -Setting the value to `0` disables revisions globally, preventing WordPress from storing them for any post type. - -::: - -## Beaver Builder History - -[History](basics/undo-redo.md) enables you to undo and redo changes, but it can sometimes make the editor feel sluggish, especially on shared hosting environments or when working with pages that contain many rows, columns, and modules. By default, it tracks 20 changes, but you can reduce this number—or disable it entirely—either temporarily or permanently using several methods: - -### Disable History Temporarily - -Add &`nohistory` to the end of your Beaver Builder editor URL to disable history tracking. For example: - -```markup -https://mysite.com/?fl_builder&nohistory -``` - -When this parameter is active, clicking **History** in the [Tools menu](user-interface/tools-menu.md) will show that changes are no longer being tracked. - -### Reduce or Disable History via Advanced Settings - -You can control the number of history records in the [Advanced tab settings](/beaver-builder/settings/advanced.md#limit-the-amount-of-undoredo-history-in-builder-ui). Entering a value sets the maximum number of history items stored, while setting the value to 0 completely disables Beaver Builder’s history tracking. - -## Beaver Builder Shortcode - -Beaver Builder includes a [layout shortcode](../shortcode/index.md) that makes it easy to display reusable content within pages, posts, custom post type layouts, and even inside other modules such as accordions and tabs. However, using too many shortcodes on a single page or post can negatively impact performance. Each shortcode loads the CSS and JavaScript assets required for the content it represents, so the more shortcodes you add, the more assets are loaded. In some cases, this can result in dozens of additional files, slowing down page performance. - -The impact will vary depending on your site’s setup and how important load time optimization is for your needs. As a general rule, using a handful of shortcodes is fine, but adding several dozen or more may lead to noticeable performance issues. - -:::tip - -Consider using [Beaver Themer](/beaver-themer/) as a more efficient way to add content to posts and pages. It’s often easier to manage and delivers better performance than relying heavily on shortcodes. - -::: diff --git a/versioned_docs/version-2.9/advanced/smooth-scrolling-tweaks.md b/versioned_docs/version-2.9/advanced/smooth-scrolling-tweaks.md deleted file mode 100644 index be69aaa8..00000000 --- a/versioned_docs/version-2.9/advanced/smooth-scrolling-tweaks.md +++ /dev/null @@ -1,180 +0,0 @@ ---- -id: smooth-scrolling-tweaks -title: Smooth scrolling tweaks -sidebar_label: Smooth Scrolling Tweaks -description: This article explains how to customize the Beaver Builder smooth scrolling. ---- - -You can use JavaScript to customize the following aspects of Beaver Builder smooth scrolling: duration, -the type of animation, and the offset of the target from the top of the -screen. - -Here's the JavaScript that you can use to tweak all these changes. - -```js -jQuery(function () { - if ("undefined" != typeof FLBuilderLayoutConfig) { - FLBuilderLayoutConfig.anchorLinkAnimations.duration = 1000; - FLBuilderLayoutConfig.anchorLinkAnimations.easing = "swing"; - FLBuilderLayoutConfig.anchorLinkAnimations.offset = 100; - } -}); -``` - -These lines are explained in the following sections. - -## Change the duration - -By changing the duration of the scroll, you can make it slower or faster. The -value is in milliseconds. The default duration is one second ( which is 1000 -milliseconds). - -To change the duration of the scroll, change the value in this line in the JQuery example above: - -```js -FLBuilderLayoutConfig.anchorLinkAnimations.duration = nn; -``` -where `nn` is the duration in milliseconds. - -## Change animation type - -Type of animation, in this case, refers to the speed of scroll throughout the scroll time. The values are `swing` and `linear`. The default value is `swing`. [Here's a visual demonstration of the difference](https://jqueryui.com/easing/). - -To change to linear animation, change the value in this line in the JQuery example above: - -```js -FLBuilderLayoutConfig.anchorLinkAnimations.easing = 'linear'; -``` - -## Change the target offset - -By default, when smooth scrolling finishes, the target sits `100px` below the -top of the page. This vertical displacement downwards is called the *offset*. - -The default of `100px` works for the Beaver Builder Theme and other themes with -normal-sized headers, but in other cases, you might want the target to sit -higher or lower on the page when the scroll finishes, to ensure it's high -enough on the page but not obscured by something like a fixed or shrink -header. - -To change the offset, change the value in this line in the JQuery example above: - -```js -FLBuilderLayoutConfig.anchorLinkAnimations.offset = nn; -``` -where `nn` is the value you want to use. - -## More complex offset examples - -You can add `if` conditional statements to change the offset for each screen size or add an offset when the WordPress admin bar is present. This will make use of a longer jQuery code block, so we'll show you that first and then show how to make some additional tweaks to customize smooth scrolling offsets. - -### The full jQuery code block for smooth scrolling - -Here's a longer jQuery code block for smooth scrolling. This example contains the default settings, so if you copied in this code with no changes, nothing would change. In the following sections, we'll show you how to tweak this code block to get the effects you want. - -```js -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); -}); -``` - -### Adjust offset depending on screen width - -If you have different fixed header settings on smaller devices or no fixed header at all, you can add an offset that applies only to smaller devices. - -In the following line from the full jQuery example above, the value is changed so the offset is 0 if the -window width is less than `992px`, which means both medium and small devices -will have no offset, but large devices will. - - -```js - if ( FLBuilderLayout._isMobile() && win.width() < 992 ) { - offset = 0; - } - } -}); -``` - -Next is a full jQuery example where the offset for medium devices (`<992px`) is `10px` and the offset for small devices (`<768px`) is `0px`. Large devices retain the default offset of `100px`. - -```js -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); -}); -``` - -### Adjust the offset to compensate for the WordPress admin bar - -You can add an extra offset to compensate for the height of the WordPress admin bar when a user is logged in. In this section from the full code example, 32 pixels are added to the offset value to accommodate the WordPress admin bar. - -```js -jQuery(function () { - if ("undefined" != typeof FLBuilderLayoutConfig) { - var offset = 100; - if ( $( 'body.admin-bar' ).length > 0 ) { - offset += 32; - } - } -}); -``` - -In this example, the standard offset is `100px`, so when the admin bar is present the total offset is `132px`. - -## How to add the code - -Depending on where you add the code, you can make these smooth scrolling tweaks specific to one page or apply them globally across your site. - -For more information, see the [Custom Code](basics/custom-code.md) article. diff --git a/versioned_docs/version-2.9/basics/border.md b/versioned_docs/version-2.9/basics/border.md deleted file mode 100644 index 49e6456c..00000000 --- a/versioned_docs/version-2.9/basics/border.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -id: border -title: Border -sidebar_label: Border -description: Each row, column, and some modules have a Border section that lets you decide how your content is framed with borders, radius, and shadows. ---- - -Each row, column, and some modules have a Border section that lets you decide how your content is framed using CSS [borders](https://www.w3schools.com/css/css_border.asp), [border-radius](https://www.w3schools.com/css/css_border_rounded.asp), and [box-shadow](https://www.w3schools.com/css/css3_shadows_box.asp). - -![](/img/beaver-builder/editor-basics--borders--1.jpg) - -## General - -The General subsection has the following settings: - -![](/img/beaver-builder/editor-basics--borders--2.jpg) - -:::tip -The [Responsive Toggle](layouts/responsive-design/toggle.md) can be used to adjust all border settings on a per-device basis. -::: - -### Style - -Let's you choose what kind of [`border-style`](https://www.w3schools.com/cssref/pr_border-style.asp) to display. The following values are allowed: - -- **Default** - Inherit from the theme. -- **None** - Defines no border -- **Solid** - Defines a solid border -- **Dashed** - Defines a dashed border -- **Dotted** - Defines a dotted border -- **Double** - Defines a double border - -### Color - -Set the [`border-color`](https://www.w3schools.com/css/css_border_color.asp) using the [Color Picker](color-picker.md). - -### Width - -Set the [`border-width`](https://www.w3schools.com/css/css_border_width.asp) for each side (top, right, bottom, and left) of a row, column, or module using the `px` CSS unit. - -When you click on any of the **Width** value fields, a slider appears allowing you to quickly adjust the value. You can also type a **Width** value instead of using the slider. By clicking the [Link Values](user-interface/link-values.md) icon, you can set all four corners to the same value. - -## Radius & Shadow - -The Radius & Shadow subsection has the following settings: - -![](/img/beaver-builder/editor-basics--borders--3.jpg) - -### Radius - -Set the [`border-radius`](https://www.w3schools.com/css/css_border_rounded.asp) for each side (top, right, bottom, and left) of a row, column, or module using the `px` CSS unit. - -When you click on any of the **Radius** value fields, a slider appears to allow you to quickly adjust the value. You can also type a **Radius** value instead of using the slider. By clicking the [Link Values](user-interface/link-values.md) icon, you can set all four corners to the same value. - -### Box Shadow - -Set the [`box-shadow`](https://www.w3schools.com/cssref/css3_pr_box-shadow.asp) of a row, column, or module using the `px` CSS unit. When you click on any of the **Box Shadow** value fields, a slider appears allowing you to quickly adjust the value. You can also type a **Box Shadow** value. - -- **Color** - Set the `box-shadow` color using the [Color Picker](color-picker.md). - -- **X** allows you to adjust the horizontal offset of the shadow. When the value is positive, the shadow appears on the right side of the content, when the value is negative, the shadow appears on the left side of the content. - -- **Y** allows you to adjust the vertical offset of the shadow. When the value is positive, the shadow appears on the bottom side of the content, when the value is negative, the shadow appears on the top side of the content. - -- **Blur** is optional and allows you to adjust the blur radius. A higher number will result in a blurrier shadow. - -- **Spread** is optional and allows you to adjust the size of the shadow. A negative value will decrease the shadow size, while a positive value will increase it. diff --git a/versioned_docs/version-2.9/basics/color-picker.md b/versioned_docs/version-2.9/basics/color-picker.md deleted file mode 100644 index 9fa8b3fe..00000000 --- a/versioned_docs/version-2.9/basics/color-picker.md +++ /dev/null @@ -1,249 +0,0 @@ ---- -id: color-picker -title: Color Picker -sidebar_label: Color Picker ---- - -The Color Picker is used to select and adjust color values throughout the Beaver Builder user interface, such as backgrounds, buttons, text, and links. You can also adjust hue, alpha, and save your favorite color presets. - -## Using the Color Picker - -To pick a color, click and drag your cursor inside the color selection area to select a color. The color picker will display the color value in either `rgb` (red, green, blue) format or `rgba` (red, green, blue, alpha) format if you adjust the alpha slider. - -To select a color, click and drag your cursor inside the color selection area. The color picker displays the value in either `rgb` (red, green, blue) format or `rgba` (red, green, blue, alpha) format when you adjust the alpha slider. - -:::tip - -You can also enter a color value manually in the input field at the top of the color picker. This field accepts hex, rgb, rgba, hsl, hsla, and CSS variables. When entering a CSS variaable, make sure to include the `var()` function. - -```css -var(--css-var-name) -``` - -::: - -## sRGB Tab - -The sRGB (Standard Red Green Blue) tab allows you to view and adjust colors within the sRGB color space, the standard used for displaying colors on the web. You can adjust the hue and alpha of the selected color, as well as switch between multiple color spaces for more precise color adjustments. - -### Color Scale - -The color scale can be found to the bottom of color selection area and offers an easy way to select transparent, white, or black. It also includes a smooth gradient of grey tones, ranging from light grey near white to dark grey approaching black, providing a quick way to select a shade of grey. - -### Hue - -The Hue slider allows you to modify the hue of the selected color, enabling you to change it to any shade across the color spectrum. As you adjust the slider, the RGB values are updated in real time to reflect the new hue. - -### Alpha - -The Alpha slider lets you adjust the opacity of the selected color, enabling the creation of transparent or semi-transparent colors. As you move the slider, the color’s opacity changes, and the RGB value is updated to include an alpha channel, transitioning from rgb to rgba. For example, `rgb(255, 255, 255)` becomes `rgba(255, 255, 255, 0.5)` when the alpha value is set to 0.5. - -## Mix Tab - -The Mix tab allows you to blend two colors together using the `color-mix()` function. This feature is perfect for creating unique shades or transitioning smoothly between two colors. - -The Mix tab includes a grid that visually represents how two colors blend at different percentages across multiple color spaces. This grid makes it easy to compare and choose the perfect mix for your needs. Each row corresponds to a different color space, and each column represents a percentage mix between the two selected colors, starting from 0% (completely the first color) on the left and progressing to 100% (completely the second color) on the right. - -If you're familar with `color-mix()` already, you can use the input field at the top of the color picker to enter the `color-mix()` function directly. The color picker will display the result of the mix. For example, entering `color-mix(#ff0000, #00ff00, 50%)` will display the color that results from mixing red and green at a 50% ratio. - -
How to use the Mix Tab - -1. **Select Two Colors:** Choose the first and second colors you want to mix. These colors will serve as the starting points for blending. - -2. **Adjust the Mix Ratio:** Use the slider to control how much of each color is blended. For example, setting the slider to 50% will create an even mix of both colors, while shifting it closer to one color will make that color more dominant. - -3. **Choose a Color Space:** From the dropdown menu, select a color space to define how the colors are blended. Options include: - - - **sRGB:** The standard color space for web use. - - **Linear sRGB:** A more precise version of sRGB for smoother transitions. - - **OKLAB and OKLCH:** Modern color spaces designed for perceptual accuracy. - - **LCH:** A color space based on lightness, chroma, and hue. - - **display-P3:** A wider color space for vibrant colors on supported devices. - -Each color space provides a slightly different result, so feel free to experiment to see how it affects the final blend. - -:::tip - -If you’re unsure which color space to use, start with sRGB, as it’s the most commonly used and widely supported. As you gain confidence, you can explore other color spaces for more advanced mixing and fine-tuned results. - -::: - -
- -## Presets Tab - -The Presets tab displays a list of color presets that you can use. These presets can be added manually, or automatically loaded from your theme or WordPress Core colors. - -You can add a color preset by clicking the plus (+) icon in the top right corner of the color picker. To remove a color preset, click the X icon in the top right corner of the color preset item. - -
Theme Colors - -If you have enabled the **Load Theme Colors** option in the [Advanced tab](settings/advanced.md#load-theme-colors) of the Beaver Builder settings, the color picker presets will automatically include the colors defined in Block themes or themes that register colors using the Block theme JSON API, such as BB Theme. - -
- -
WordPress Core Colors - -If you have enabled the **Load WordPress Colors** option in the [Advanced tab](settings/advanced.md#load-wordpress-colors) of the Beaver Builder settings, the color picker presets will automatically include the WordPress Core colors. - -
- -
CSS Variable - -You can add CSS variables as color presets by entering the variable name into the input field at the top of the Color Picker. Then, click the **plus (+)** icon in the top-right corner. The CSS variable will be saved as a preset under the Saved Colors section. - -
- -## Eyedropper Tool - -The Eyedropper tool allows you to select a color from any part of your screen. This feature is particularly useful when you want to quickly match a color from something you see on your screen, such as a logo or image. - -1. Click the Eyedropper icon located at the top-left of the color picker. -2. Move your cursor to the desired color on your screen and click to select it. -3. The color picker will automatically update to display the selected color. - -:::info - -The Eyedropper tool uses the Eyedropper API, which is currently only supported in Google Chrome (version 95+), Microsoft Edge (version 95+), and Opera (version 81+). - -::: - -## Legacy Color Picker - -Version 2.9 of Beaver Builder introduces a redesigned color picker, offering users greater flexibility, precision, and ease of use when working with colors. This update includes several new features, such as support for multiple color spaces. - -:::info - -The information below pertains to the legacy color picker, for users who are still using Beaver Builder version 2.8 or earlier. - -We recommend upgrading to version 2.9 for improved color picker functionality. - -::: -![Beaver Builder color picker](/img/beaver-builder/basics--color-picker--1.jpg) - -
Legacy Color Picker Features - -### Opacity - -The opacity slider located on the right-hand side uses the RGBa alpha channel (`rgba(red, green, blue, alpha)`) and when you adjust the opacity, you'll see the `hex` color value (`#ffffff`) change to the RGBa value (`rgba(255,255,255,0.8)`). Additionally, you can enter your own RGBa values in the input field at the top of the color picker. - -![Opacity slider](/img/beaver-builder/basics--color-picker--2.jpg) - -### Saturation - -You can adjust the saturation of colors using the saturation slider located at the bottom. Color saturation is defined as the intensity of a color. For example: - -- There are no shades of gray in 100%, it is pure color. -- 50% is 50% gray, but you can still see the color. -- 0% is completely gray and you cannot discern the color. - -![Saturation slider](/img/beaver-builder/basics--color-picker--3.jpg) - -### CSS Variables - -Instead of selecting a color from the color picker or entering a hex or rgba value, you have the option to use CSS variables. This is particularly useful when you intend to utilize a color that's already established in [Global Styles](user-interface/global-styles.md#colors-tab), your theme, or a color defined in your custom CSS. - -To integrate a CSS variable, input the name into the field at the upper part of the color picker. Remember to enclose the CSS variable name within `var()`. - -```css -var(--css-var-name) -``` - -![Add colors manually](/img/beaver-builder/basics--color-picker--4.jpg) - -### Color Presets - -You can add single colors or color palettes to the Beaver Builder editor both -manually and programmatically. - -
- -
- -These two procedures will not replace existing colors in existing modules, but it makes it easier for you to select the new color in the future. Each of these procedures saves the colors so they are usable wherever you edit in Beaver Builder. - -#### Add color manually - -1. [Launch Beaver Builder](getting-started/launch-builder.md) on your page or post. - -2. Click on any **Color** setting for a row, columns, or module to open the Color Picker. - -3. Select a color in the Color Picker or type/paste in a hex or RGBA color value for one of your colors. - **#1** in the screenshot below. - -4. Click the **Plus** symbol (+) in the upper right corner of the Color Picker to create a preset. - **#2** in the screenshot below. - -5. Review your color presets by clicking the **Color Presets** at the bottom of the Color Picker. - **#3** in the screenshot below. - -![Add colors manually](/img/beaver-builder/basics--color-picker--5.jpg) - -#### Add color programmatically - -You can register custom colors programmatically by using the `fl_builder_color_presets` filter. - -1. Check your current color presets by opening a module for editing in Beaver Builder, then choose a color field and click **Color presets**. Delete any presets that you don't want to keep by clicking the **X** icon next to the color. - -2. Add the following code to your child theme's _functions.php_ file. - -:::tip - -You can edit this file in **Appearance > Editor**, but make sure you choose the correct file. - -::: - -```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"); -``` - -3. Replace the hex values in the code with the hex value for each color you want to define. Add or remove `$colors[]` lines accordingly. - -:::caution - -Do not include the hash symbol (`#`) when specifying hex values. - -::: - -:::tip - -You can also [add color presets to the Customizer settings](/bb-theme/defaults-for-styles/colors/add-color-presets-to-customizer) in the Beaver Builder child theme. - -::: - -#### CSS Variable Preset - -You can also include CSS Variables as color presets. To do this, [input the name of your CSS Variable](#css-variables) into the field at the top of the Color Picker and then click the **Plus** symbol (+) situated in the top-right corner of the Color Picker. The CSS variable will be incorporated as a color preset. - -Please be aware that the name of the CSS variable will function as the color preset's name, and it cannot be altered. - -![CSS Variable Preset](/img/beaver-builder/basics--color-picker--6.jpg) - -#### Theme Colors - -Theme Colors support are disabled by default and can be enabled by visiting the Beaver Builder settings page in the WordPress admin area and enabling the **Load Theme Colors** option in the [Advanced tab](settings/advanced.md#load-theme-colors). - -When enabled, the color picker presets will automatically include the colors defined in Block themes or themes that register colors using the Block theme JSON API, such as BB Theme. - -#### WordPress Core Colors - -WordPress Core Colors are disabled by default and can be enabled by visiting the Beaver Builder settings page in the WordPress admin area and enabling the **Load WordPress Colors** option in the [Advanced tab](settings/advanced.md#load-wordpress-colors). - -When enabled, the color picker presets will automatically include the WordPress Core colors. - -
diff --git a/versioned_docs/version-2.9/basics/custom-code.md b/versioned_docs/version-2.9/basics/custom-code.md deleted file mode 100644 index 823418df..00000000 --- a/versioned_docs/version-2.9/basics/custom-code.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: custom-code -title: Custom Code -sidebar_label: Custom Code -description: This article explains the different methods for adding custom code to Beaver Builder layouts. ---- - -This article explains the different methods for adding custom code to Beaver Builder layouts. - -## CSS - -You can add custom CSS to any Beaver Builder layout, per-page or sitewide. - -:::tip -To override theme styling, add the CSS to **Customize > Additional CSS** or your child theme's _style.css_ file. -::: - -### Per-Page or Per-Post CSS - -This procedure applies if you only want your CSS to apply to specific page or post using Beaver Builder. For example, suppose you have a contact form and know that you only want your custom CSS to apply to that form on that single page. - -To add CSS code that is restricted to a single Beaver Builder page or post: - -1. Open the [Tools Menu](user-interface/tools-menu.md) from the [Top Bar](user-interface/top-bar.md). -2. Click **Layout CSS & JavaScript**. -3. On the **CSS** tab, enter your CSS code. -4. Click **Save**. - -### Sitewide CSS - -This procedure applies if you want your CSS to apply globally for all pages and posts which are using Beaver Builder. - -To add CSS code that is applied globally to all Beaver Builder pages or posts: - -1. Open the [Tools Menu](user-interface/tools-menu.md) from the [Top Bar](user-interface/top-bar.md). -2. Click [Global Settings](user-interface/global-settings.md#css--javascript). -3. On the **CSS** tab, enter your CSS code. -4. Click **Save**. - -### Utility Classes - -Beaver Builder contains two utility classes that can be helpful when writing custom CSS. - -#### `fl-builder` - -The `fl-builder` class allows your custom CSS to only style pages or posts using Beaver Builder. - -```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 */ -} -``` - -#### `fl-builder-edit` - -The `fl-builder-edit` class is only available when the Beaver Builder editor is active on your page or post. This is useful if your theme styling is impacting the builder UI styling. - -```css -.fl-builder-edit button { - /* CSS here will only apply to buttons when the builder is active */ -} -``` - -You can also use `fl-builder-edit` with the [`:not()`](https://www.w3schools.com/cssref/sel_not.asp) selector to apply complex styling, such as changing the position of a row, column, or module without affecting the builder's functionality. - -```css -body:not(.fl-builder-edit).fl-builder .fl-module-heading { - position: relative; - top: -100px; - left: 200px; -} -``` - -## JavaScript - -You can add custom JavaScript to any Beaver Builder layout, per-page or sitewide. - -:::info -To override theme **JavaScript**, add the code to your theme settings or use the WordPress [wp_enqueue_script()](https://developer.wordpress.org/reference/functions/wp_enqueue_script/) function. -::: - -:::caution -The JavaScript tab does not support JavaScript code wrapped with `` tags. -::: - -### Per-Page or Per-Post JavaScript - -This procedure applies if you only want your JavaScript to apply to specific page or post using Beaver Builder. For example, suppose you have anchor points and wish to tweak the smooth scrolling effect for that page only. - -To do this: - -1. Open the [Tools Menu](user-interface/tools-menu.md) from the [Top Bar](user-interface/top-bar.md). -2. Click **Layout CSS & JavaScript**. -3. On the **JavaScript** tab, enter your JavaScript code. -4. Click **Save**. - -### Sitewide JavaScript - -This procedure applies if you want your JavaScript to apply globally for all pages and posts which are using Beaver Builder. - -To do this: - -1. Open the [Tools Menu](user-interface/tools-menu.md) from the [Top Bar](user-interface/top-bar.md). -2. Click [Global Settings](user-interface/global-settings.md#css--javascript). -3. On the **JavaScript** tab, enter your JavaScript code. -4. Click **Save**. - -### Specific point in the page or post - -You can add the JavaScript code to a specific point in your page or post using the HTML module. - -### Tracking Scripts - -It is not possible to add tracking scripts to Beaver Builder layouts, such as Google Analytics and Facebook pixels. Due to the fact that they need to be added to the `` of your HTML page. In contrast, JavaScript added to either the **Global Settings** or **Layout CSS & JavaScript** is merged into the _layout.js_ file, which loads in the footer of your website. - -If you're using the BB Theme, you can add your tracking code using [these instructions](/bb-theme/code/insert-google-analytics-code). - -For third-party themes, check to see if it has an option to add JavaScript to the `` section. If not, you'll need to use WordPress [`wp_head()`](https://developer.wordpress.org/reference/functions/wp_head/) function. - -## Per-Node CSS & JS - -The Enable Code Settings option in Beaver Builder [Advanced settings](settings/advanced.md) allows you to add CSS and JavaScript to each node (rows, columns, and modules) individually. - -See the [CSS & JavaScript](layouts/advanced-tab/css-js.md) article in the [Advanced tab section](layouts/advanced-tab/index.md) for more information. - -## HTML - -To add custom HTML to your Beaver Builder pages and posts you can use either the Text or HTML modules. - -## PHP - -Beaver Builder doesn't allow you to insert PHP code into post or page layouts. Instead, we recommend using the [WordPress Shortcode API](https://developer.wordpress.org/apis/handbook/shortcode/) to create your own shortcode, then add it to a HTML module. diff --git a/versioned_docs/version-2.9/basics/display-only-bb-content.md b/versioned_docs/version-2.9/basics/display-only-bb-content.md deleted file mode 100644 index b8c42050..00000000 --- a/versioned_docs/version-2.9/basics/display-only-bb-content.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -id: display-only-bb-content -title: Display only Beaver Builder pages or posts -sidebar_label: Display only Beaver Builder content -description: Global settings allow you to configure certain Beaver Builder settings globally. ---- - -When you view the lists of Pages or Posts in WordPress (either **Pages > All Pages** or **Posts > All Posts** from the **WordPress admin dashboard**), you can limit the list to those with Beaver Builder layouts, as shown in the following screenshot. - -![Filter Beaver Builder content](/img/beaver-builder/basics--display-only-bb-content--1.jpg) - -Click the **Beaver Builder** link to limit the display of posts or pages to just the ones that have been edited with Beaver Builder. - -:::info - -- If you don’t see Beaver Builder in the post status line, it means there are no posts in the list that use the Beaver Builder plugin for the content layout or that Beaver Builder is not [enabled for this post type](settings/post-types.md). - -- The Beaver Builder label in the post status line will change if you have used the [Branding](settings/branding.md) options in the Unlimited version of Beaver Builder. - ::: - -:::tip -If you want to remove this Beaver Builder link to limit the display of posts or pages, you can use the `fl_builder_admin_edit_sort_bb_enabled` filter as described here. -::: diff --git a/versioned_docs/version-2.9/basics/duplicate-layout.md b/versioned_docs/version-2.9/basics/duplicate-layout.md deleted file mode 100644 index 6a1d2c36..00000000 --- a/versioned_docs/version-2.9/basics/duplicate-layout.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: duplicate-layout -title: Duplicate Layout -sidebar_label: Duplicate Layout -description: See the ways to duplicate a Beaver Builder page or post with the same layout and metadata. ---- - -You can duplicate any Beaver Builder layout to a new page with the same layout -and metadata. Duplication copies the entire page and all metadata from the back end, including Yoast SEO data. This works with all Beaver Builder layouts: pages and posts, Beaver Themer layouts, and saved layout templates, rows, columns, and modules. - -:::warning -Do not use duplicator plugins to duplicate Beaver Builder layouts. Use one of the following procedures instead. -::: - -When you duplicate the layout, a new page is automatically created and opens for editing. The new page has the following initial title and slug, which you can modify: - -- Title: _`Copy of `_ -- Slug: _`-copy`_ - -:::tip -If your purpose is to use one page as a template for a number of other pages in your site, an alternative is to [save your page as a layout as a template](layouts/templates/saved-templates.md). You can apply layout templates to other pages, [export them to other sites](layouts/templates/saved-templates.md#export--import), or [make them available for clients to use in themes you deliver to them](settings/template-exporter.md#template-author-guide). -::: - -There are two ways to duplicate any page or post that uses a Beaver Builder layout: from the list of all pages or posts in the WordPress admin panel or from the **Tools** menu in the Beaver Builder editor. Both methods have the same result: a duplicate page or post with the same Beaver Builder layout and metadata. - -## From the WordPress admin dashboard - -Here's a screenshot of where this procedure occurs. - -![Duplicate a page or post layout](/img/beaver-builder/basics--duplicate-layout--1.jpg) - -Look for the green or gray dot after **Duplicate page** to know that this functionality is coming from Beaver Builder. Where possible, this feature hides the Duplicate option that comes from other plugins for pages and posts that have Beaver Builder layouts. These other plugins often don't work well with Beaver Builder. - -1. From the WordPress admin panel, go to **Pages > All Pages** or **Posts > All Posts** or the equivalent for your custom post type. -2. Mouse over the page or post you want to duplicate to show the options. -3. Click **Add Duplicate**. - The duplicated page or post opens in the Beaver Builder editor. - -:::tip **Tip** -You can change the page title and slug from within the Beaver Builder editor. From the [Tools menu](user-interface/tools-menu.md#wordpress-admin), click **WordPress admin > Edit page**. A new browser tab opens with the WordPress editor open for that page, where you can change the page title and slug and publish the page, then close that tab. - -The first tab continues to show the old page title in the upper left corner of the Beaver Builder editor, so you can either reload the page in your browser or just save or publish the Beaver Builder page and it will save under the renamed page slug and title. -::: - -## From within the Beaver Builder editor - -Follow this video or use the written instructions below. - -:::caution -Publish or save your current Beaver Builder layout before you duplicate it. If you've made editing changes to the layout and then duplicate it before saving the page, the duplicated page will not show the changes and the changes may be lost on the source page as well. -::: - -
- -
- -1. Open the page you want to duplicate in Beaver Builder. -2. Click the arrow in the page title bar in the upper left corner to open the **Tools** menu. -3. Click **Duplicate layout**. - -The new page opens in the WordPress editor. From there, you can change the page title and slug and launch the Beaver Builder editor. diff --git a/versioned_docs/version-2.9/basics/index.md b/versioned_docs/version-2.9/basics/index.md deleted file mode 100644 index 543a2e11..00000000 --- a/versioned_docs/version-2.9/basics/index.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -id: index -title: Builder Basics -sidebar_label: Builder Basics ---- - -## In this Section - -import DocCardList from '@theme/DocCardList'; - - diff --git a/versioned_docs/version-2.9/basics/inline-editing.md b/versioned_docs/version-2.9/basics/inline-editing.md deleted file mode 100644 index df4b303c..00000000 --- a/versioned_docs/version-2.9/basics/inline-editing.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: inline-editing -title: Inline editing -sidebar_label: Inline Editing -tags: [Editing, Basics, fl_inline_editing_enabled] -description: Inline Editing enables users to make rapid adjustments or create content without having to open the module settings. ---- - -Inline Editing enables users to make rapid adjustments or create content without having to open the module settings. - -:::tip - -Inline editing works best if the [Content panel and settings window are pinned](user-interface/content-panel.md#pinunpin-the-user-interface-ui) to one side of the layout. Use the drag handle at the top of the panel to move it to the right or left of your page until a vertical blue bar appears. - -::: - -## How To Use Inline Editing - -To edit inline, move your cursor into the module you want to edit and click. -The [overlay actions toolbar](user-interface/overlay.md) will change to editing toolbar that vary depending on the type of module you're editing. The cursor also changes to an editing cursor, so click your cursor where you want and start editing. For a new module, drag the -module into your layout as usual, then click inside the empty module in the layout. - -![Using Inline editing](/img/beaver-builder/basics--inline-editing--1.gif) - -:::tip -If you add a shortcode or embed an object such as a video, when you start -editing inline, the shortcode or embed renders and you can edit the text -around it, and when you click outside of the module layout area, the shortcode -or embed code returns. To edit the shortcode or embed code itself, edit it in -the editing window. -::: - -## Editing toolbar - -The formatting actions accessible to you are determined by the type of module you are editing. To use these formatting actions, highlight the text to be formatted and then click the formatting action icon. - -### Text editors - -For Text editor fields (fields that use the WordPress classic editor/TinyMCE editor) the following formatting actions are available. - -![Text editor toolbar actions](/img/beaver-builder/basics--inline-editing--2.jpg) - -- Bold -- Italic -- Strikethrough -- Link -- Underline -- Align Left -- Align Center -- Align Right - -### Headings - -For basic text fields, such as the **Heading** field in a [Heading module](layouts/modules/heading.md) the following formatting actions are available. - -![Text editor toolbar actions](/img/beaver-builder/basics--inline-editing--3.jpg) - -- Bold -- Italic -- Strikethrough -- Underline - -## When should you use Inline Editing? - -Inline editing allows you to see how your content will look while you type and instantly correct any spelling or grammar errors. - -## Modules that can be edited inline - -Any module that contains a text field or text editor area can be edited -inline. Here are some examples: - -- [Button module](layouts/modules/button/button.md) - You can edit the text in the button. - -- [Callout module](layouts/modules/callout-and-call-to-action.md) - You can edit the heading, the text area, and the call-to-action text if you've - selected text rather than a button.. - -- [Number counter module](layouts/modules/number-counter.md) - You can edit both the text and the number inline. - -## Disable inline editing - -You can globally disable inline editing functionality in the Beaver Builder editor by using the `fl_inline_editing_enabled` filter. diff --git a/versioned_docs/version-2.9/basics/multi-layer-backgrounds.md b/versioned_docs/version-2.9/basics/multi-layer-backgrounds.md deleted file mode 100644 index 05063420..00000000 --- a/versioned_docs/version-2.9/basics/multi-layer-backgrounds.md +++ /dev/null @@ -1,148 +0,0 @@ ---- -id: multi-layer-backgrounds -title: Multi-Layer Backgrounds -sidebar_label: Multi-Layer Backgrounds ---- - -Multi-Layer Backgrounds enables you to add multiple backgrounds to an individual row, column, or Box module. - -![Multiple backgrounds](/img/beaver-builder/basics--multiple-backgrounds--1.jpg) - -## Background Types - -You can choose from three background types: Color, Photo, and Gradient. Other background types, such as video, are not available because videos cannot be added as a background using CSS. - -:::info - -Please note that Field Connections and Global Colors are not currently supported. - -::: - -### Color - -The Color background type applies a solid color to the entire row, column, or Box module. You can use the color picker to quickly adjust the color. The background color is then applied using CSS. - -See the [Color Picker](color-picker.md) article for more infomration. - -### Gradient - -The Gradient background type applies a CSS gradient effect to the entire row, column, or Box module. You can add multiple gradient colors to create unique gradient combinations. - -
Adding Gradient Colors - -When you open the gradient color picker, it includes two preset color stop items by default, giving you a basic gradient to work with. To change a color in the gradient: - -1. Click on one of the color stop items in the gradient range control (the bar showing the gradient). -2. The color swtch will update to show the color of the selected color stop. -3. Click the color swatch to open the color picker. -4. Choose your preferred color from the picker. Once selected, the gradient updates automatically. -5. Repeat these steps to change the other color in the gradient. - -
- -
Adding More Colors - -You can add more color stops to the gradient: - -1. Click anywhere on the gradient range control where there isn’t already a color stop item. -2. A new color stop item will appear at that spot. -3. Click the new color stop item, then the color swatch, and use the color picker to choose a color for it. - -
- -
Adjusting the Gradient - -You can drag the color stop items left or right to adjust the position of each color in the gradient. - -
- -
Delete a Gradient Item - -If you want to remove a color from the gradient: - -1. Click the gradient color swatch item you want to delete. -2. Click the **Trash** button to the right-hand side of the color swatch. - -
- -
Distribute Gradient Items - -If your gradient has multiple color stops, you can easily distribute them evenly across the gradient. Simply click the Distribute button, and all color stops will be spaced out evenly. - -This feature is especially helpful when working with several color stops and aiming for a balanced look. After distributing, you can still fine-tune the colors and positions to achieve your desired gradient effect. - -
- -### Photo - -The Photo background type applies an image to the entire row, column, or Box module. You can choose images from the WordPress media library, a URL, or an SVG using SVG code. - -The Photo background type offers the following options: - -
WordPress Media Library - -- **Select Image** - The Select Image button allows you to choose an image from the WordPress media library. -- **WordPress Image Size** - Choose the WordPress media image size to use. You can choose from the default thumbnail, medium, large, or full size and any custom image size you have added. -- **Replace** - Allows you to select a different image from the WordPress Media Library to replace the current background image. -- **Remove** - Remove the image from the background. - -
- -
URL - -- **URL** - Enter or paste the URL of the image you want to use into the URL field. - -
- -
SVG - -- **SVG Code** - Enter or paste the SVG code into the SVG Code field for the SVG you want to use. For best results, use simple SVG code, such as: - - ```html - - - - ``` - -
- -
Background Properties - -The background properties for repeat, position, size and clip to are available for all Photo options (WordPress Media Library, URL, and SVG). - -- **Repeat** - Choose whether to repeat the image or not. -- **Position** - Choose the position of the image. -- **Size** - Choose the size of the image, either default, cover, or contain. -- **Clip To** - Choose whether to clip the image to the background or not. - -
- -## Using Multiple Backgrounds - -You can add as many background types as you like in any order and combination. To add multiple backgrounds to a row, column, or box module: - -1. Open a row, column, or Box module for editing. -2. Navigate to the **Background** section and choose the **Multiple Backgrounds** option. -3. Click the **+** icon to add a background type and select the one you want to add (color, photo, or gradient). -4. Configure the background settings. -5. Click the **+** icon again to add another background type. -6. Repeat steps 3 and 4 for each background type you want to add. -7. Click **Save** to save your changes. - -### Background Layer Order - -The order in which background types are displayed on the page is determined by the order in which you add them to the Multi-layer Backgrounds option. The first background type added appears on top of the background, and the last background type added appears on the bottom. - -For example, if you add a color type first and a photo second, the photo background will appear behind the color background and isn't visible. In order to see the photo behind the color background, you must reduce the [background color alpha value](color-picker.md). - -### Reorder Background Types - -You can change the order of the background types any way you like. To reorder the background types, click and drag them up or down the list to the desired positions. - -### Duplicating Background Types - -To duplicate a background type, click the **Duplicate** icon to the right of the background type you want to duplicate. - -### Remove Background Types - -You can also remove a background type by clicking the **Trash** icon to the right of the background type you want to remove. diff --git a/versioned_docs/version-2.9/basics/restore-previous-version.md b/versioned_docs/version-2.9/basics/restore-previous-version.md deleted file mode 100644 index 6798401b..00000000 --- a/versioned_docs/version-2.9/basics/restore-previous-version.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: restore-previous-version -title: Restore previous version -sidebar_label: Restore Previous Version ---- - -The **Revisions** menu item in the [Tools menu](user-interface/tools-menu.md) uses the native [WordPress revision](https://wordpress.org/support/article/revisions/) functionality to let you restore to previously published versions of WordPress content using Beaver Builder. - -![WordPress Revisions in Beaver Builder](/img/beaver-builder/editor-basics--revisions--1.jpg) - -## What are WordPress revisions? - -Whether you're editing a post, page, or custom post type in WordPress, it keeps track of the changes you make. Every time you click the Save Draft or the Update button, WordPress saves a copy of your content. - -These copies are called revisions. Your revisions can be viewed directly from the -WordPress [Page/Post Settings Sidebar](https://wordpress.org/support/article/settings-sidebar/) or within the Beaver Builder user interface for the page or post you're editing in Beaver Builder. - -:::tip -WordPress Revisions are available for all Beaver Builder layouts: pages, posts, templates, saved rows, columns, modules, and Beaver Themer layout types if Beaver Themer installed. -::: - -## Access Revisions - -1. Launch Beaver Builder on any layout using Beaver Builder. - -2. On the [Tools menu](user-interface/tools-menu.md), click **Revisions**. - The number of revisions available is displayed in brackets. For example, `[10]` means this layout has **10** revisions. - -3. The previous versions of that page or post are displayed in a list. Click one of the revisions to preview the layout. - The preview screen is shown in the following screenshot. - - ![Access WordPress revisions in Beaver Builder](/img/beaver-builder/editor-basics--revisions--2.jpg) - -4. Click **Apply** to accept that revision or **Cancel** to revert to your current layout. - -5. Publish the page to finish accepting the older revision, or discard your changes to return to the currently published page. - -:::info -Any custom CSS and JS code set in a layout version are restored along with the layout. -::: - -:::tip -Only published pages count as revisions. Saved drafts of pages are not available as revisions. -::: diff --git a/versioned_docs/version-2.9/basics/show-hide-page-title.md b/versioned_docs/version-2.9/basics/show-hide-page-title.md deleted file mode 100644 index 00d04361..00000000 --- a/versioned_docs/version-2.9/basics/show-hide-page-title.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: show-hide-page-title -title: Show/Hide Page Title -sidebar_label: Show/Hide Page Title ---- - -If you are using Beaver Builder Theme, the title that you assign to the page -in WordPress is hidden on pages using Beaver Builder by default, though you can set it -to [show if you prefer](user-interface/global-settings.md#default-page-heading). - -
- -
- -## Benefits for hiding page title - -There are several advantages to adding your own page titles in Beaver Builder using the [Heading module](layouts/modules/heading.md). As an example, styling your theme's page title may require custom CSS, whereas you can use the included styling options with the Heading module. - -## Show or hide the page title - -This works for [BB Theme](/bb-theme/) and third-party themes. - -1. Click the title bar in the upper left corner to expose - the [Tools Menu](user-interface/tools-menu.md), then choose [Global Settings](user-interface/global-settings.md#default-page-heading), or just use the keyboard - shortcut: - - - command ⌘ + U ( Mac) - - Ctrl + U ( Windows). - -2. On the **General** tab, navigate to the **Default Page Heading** section. - -3. To display the WordPress page title, set **Show** to **Yes**. To hide the default page title, set **Show** to **No**. - -4. Click **Save**. - If you don't see the change, try publishing, saving, or reloading the page in - your browser. - -If you're using BB Theme, you're done. If you're using a third-party theme and you can't hide the title in your theme's settings, follow the next procedure. - -## Third-Party theme CSS class - -First, you need to find the CSS class selector used by your theme for the page title. The easiest method is to use your browser's developer tools to inspect the page title. This will let you see what class(es) are assigned to the page title. - -The screenshot below, shows an example, where the page title is **"Sample Page"** and the relevant class is `.entry-title`. - -![Use CSS to hide page title](/img/beaver-builder/editor-basics--show-hide-title--1.jpg) - -1. Go to [Global Settings > Default Page Heading](user-interface/global-settings.md#default-page-heading). -2. In the **CSS selector** field, replace `.fl-post-header` with the correct CSS selector for your theme's page title. - The CSS selector must start with a period. In the previous example, you would add `.entry-title`. - -:::tip -You can use the links below to learn how to open your preferred browser's developer tools. - -- [Chrome](https://developer.chrome.com/docs/devtools/overview/) -- [Edge](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/) -- [FireFox](https://firefox-dev.tools/) -- [Safari](https://support.apple.com/en-gb/guide/safari/sfri20948/mac) - ::: diff --git a/versioned_docs/version-2.9/basics/smooth-scrolling.md b/versioned_docs/version-2.9/basics/smooth-scrolling.md deleted file mode 100644 index a45dc407..00000000 --- a/versioned_docs/version-2.9/basics/smooth-scrolling.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: smooth-scrolling -title: Smooth scrolling -sidebar_label: Smooth Scrolling -description: This article explains the different methods for adding custom code to Beaver Builder layouts. ---- - -Smooth scrolling lets you jump to a specific row, column, or module with just one click, without manually scrolling up and down. This is especially useful for navigating one-page websites. - -
- -
- -:::caution -Smooth scrolling is intended to work for links that target nodes on the same page only. Smooth scrolling is not available if the target node is located on another page or post on your site. -::: - -## Add a unique `ID` to the target node - -1. Open the target node's settings. -2. Click the [Advanced tab](../layouts/advanced-tab/index.md) and scroll down to the [HTML Element](layouts/advanced-tab/html-element.md#id) section. -3. In the `ID` option, add a unique value such as `my-unique-id`. - `ID` values must only contain alphanumeric characters, hyphens, or underscores. - -![](/img/beaver-builder/basics--smooth-scrolling--1.jpg) - -## Add the unique `ID` to a link - -You can add the unique `ID` to a a link option in a node, link in text within a [Text](layouts/modules/text.md) or [HTML](../layouts/modules/html.md) modules or WordPress menu item. - -### Node - -1. Open the node settings where you will create the link. -2. In the link option, enter your unique `ID` with a pound sign (`#`) as the prefix. - Following our example, your link will be `#my-unique-id` , as shown in the Button module screenshot below. - -![](/img/beaver-builder/basics--smooth-scrolling--2.jpg) - -### Link within Text - -If the link is created within the [Text](layouts/modules/text.md) or [HTML](layouts/modules/html.md) modules rather than an module with a **Link** option, set up the link the same way, with `#my-unique-id`, as shown in this screenshot. - -![](/img/beaver-builder/basics--smooth-scrolling--3.jpg) - -If you are using the [HTML module](layouts/modules/html.md), create your link using HTML like the example below. - -```markup -My link text -``` - -### WordPress Menu Item - -1. In the **WordPress Admin Dashboard**, navigate to **Appearance > Menus**. - -2. Add a new menu item using the **Custom Links** item. - -3. In the **URL** field, enter your unique `ID` with a pound symbol (`#`) as the prefix and enter your menu item name in the **Link Text** field. - Following our example, your link will be `#my-unique-id`, as shown in the screenshot below. - -![](/img/beaver-builder/basics--smooth-scrolling--4.jpg) - -4. Click the **Add to Menu** button, then click **Save Menu**. - -When your link is clicked, it will go to directly to the target node, with a smooth scrolling effect if both are on the same page. - -## Smooth Scroll to Text - -By default, Beaver Builder’s scrolling JavaScript only works with links to nodes (rows, columns, or modules), in which you set the anchor `ID` on the [Advanced tab](layouts/advanced-tab/index.md). If you link to a target HTML element inside a Text Editor or HTML module, such as a `
` element, the link will jump up or down the page rather than smooth scroll. If you are also linking from a Text Editor or HTML link where you can modify the `` link, you can set up smooth scrolling. - -1. Create an `` anchor for the target node. For example, you could create a target anchor called `my-div` for a `
` element in an HTML module, as follows: - -```markup - -
-

I want to link to this spot.

-
-``` - -2. Open the element where the link will be and add the class `fl-scroll-link` to the `` link. For example: - -```markup -Click Here -``` - -## Customize Smooth Scrolling - -You can [use JavaScript to customize aspects of the smooth scroll](advanced/smooth-scrolling-tweaks.md): duration, scroll pattern, and offset for various devices - -## Fixed Header - -You may encounter an issue where the target node is hidden behind the header if you're using a theme with a fixed header. The browser navigates to the anchor by directly scrolling to it, but scrolling that far down places the anchor under the fixed header. - -This can be resolved by adjusting the offset value. For more information, please see the [Smooth Scrolling Tweaks](advanced/smooth-scrolling-tweaks.md) article. - -:::tip -Although not related to Beaver Builder smooth scrolling, the issue can also occur when navigating to an anchor on another page. Adjusting the offset value for smooth scrolling will not solve this problem in these cases. However, the CSS below may resolve your issue. Simply change `-100px` and `100px` values in the example to the height of your fixed header. - -```css -:target:before { - content: ""; - display: block; - margin-top: -100px; /* Height of header */ - height: 100px; /* Height of header */ -} -``` - -::: - -## Disable Smooth Scrolling - -You can disable smooth scrolling for a specific target from any link that occurs on the same page using the `fl-no-scroll` class name. - -1. When you add a unique `ID` to the target element's **ID** field on the [Advanced tab](layouts/advanced-tab/index.md) in the [previous procedure](#add-a-unique-id-to-the-target-node), add `fl-no-scroll` to the **Class** field below it. - -2. Create the link to the ID using the instructions above. diff --git a/versioned_docs/version-2.9/basics/typography.md b/versioned_docs/version-2.9/basics/typography.md deleted file mode 100644 index 09ed0412..00000000 --- a/versioned_docs/version-2.9/basics/typography.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: typography -title: Typography -sidebar_label: Typography ---- - -The Typography section is available for most modules that support custom text. Typography options can be used to format the text in a particular module, overriding the theme's default typography. - -![Typography section in modules](/img/beaver-builder/editor-basics--typography--1.jpg) - -:::tip -The [Responsive Toggle](layouts/responsive-design/toggle.md) can be used to adjust the Typography settings on a per-device basis. - -![Typography responsive toggle](/img/beaver-builder/editor-basics--typography--2.jpg) -::: - -:::info -You can only set the **Family** and **Weight** settings for extra large devices. These settings are not available for large, medium or small devices. -::: - -## Font - -The Font subsection has the following settings: - -![Typography Font subsection](/img/beaver-builder/editor-basics--typography--3.jpg) - -### Family - -Set the font family here: a system font or any of the [Google fonts](https://fonts.google.com/). - -:::tip -If you have a Google font that includes Latin Extended characters, you can add -that capability to your Beaver Builder layouts using the `fl_builder_google_font_args` and for the BB Theme use the `fl_font_subset` filter. -::: - -### Weight - -If you chose a system font in **Family**, you can choose **Light**, -**Normal**, or **Bold** in the **Weight** field. If you choose a Google font, -the **Weight** field lists any of the styles included with that font. For -example, the Google Cabin font includes Normal, Medium, Semi-Bold, and Bold. -The Google italic forms of the font family can be selected in the **Style** -field of the **Style & Spacing** subsection. If you select a custom web font -in **Family**, the **Weight** choices are limited to the weights you -configured for your font. - -### Size - -Choose the font size, with **px**, **em**, **rem**, or **vw** as the unit of measurement. If this field is empty, the default setting is used. - -:::info -The **vw** unit refers to viewport width, where viewport is usually the browser window for purposes of Beaver Builder. - -To use this **vw** unit, check the [**Base font size**](user-interface/global-settings.md#base-font-size) setting in **Global Settings**. Base font size must be set in pixels, and the default is **16px**. As the tooltip for that setting explains, this global setting only applies when vw is used in the **Typography** section of modules. - -When you set a font size in **vw** units in a module's **Typography** section, the actual font size in pixels is calculated using the [CSS `calc()` function](https://www.w3schools.com/cssref/func_calc.asp), with the formula `calc( base-font-size + 1vw)`. If the global **Base font size** is **16px**, the calculation is `calc( 16px + 1vw )`. - -By using a base font size in this calculation, the font size scales more slowly as viewport width decreases, producing a better result at all device sizes. - -Refer to this [CSS-Tricks article](https://css-tricks.com/fun-viewport-units) for insights on creating responsive typography through the implementation of the `calc()` function and viewport units. -::: - -### Line height - -Set the amount of space used for lines of text. Specify a number value and a -unit of measurement. The dash value in the units list, shown in the screenshot -below, means a unit-less value, which means the number value is multiplied by -the element's font size. - -In most cases this is the preferred way to set line -height, but you can also choose **px** or **em**. If this field is empty, the -default line height is used. - -![Typography line-height](/img/beaver-builder/editor-basics--typography--4.jpg) - -### Align - -Select one of the icons to align the text to the left, center or right. These alignment options are toggles, which can be turned on and off. If no option is selected (default), the alignment is set by the theme. - -![Typography align text](/img/beaver-builder/editor-basics--typography--5.jpg) - -## Style & Spacing - -This subsection includes the following settings. - -![Typography Style & Spacing subsection](/img/beaver-builder/editor-basics--typography--6.jpg) - -### Spacing - -Controls the horizontal spacing between letters, in pixels. It corresponds to the CSS `letter-spacing` property. - -### Transform - -Allows you to change the case of the text string without retyping. It -corresponds to the CSS `text-transform` property. - -The choices are, from left to right: Normal (as typed), capitalize the first -letter of every word, convert all letters to uppercase, and convert all -letters to lowercase. - -### Decoration - -The choices are **Default** (whatever decoration is already set in the CSS for -that element), **None** (which overrides any default decoration), -**Underline**, **Overline**, and **Line through**. - -### Style - -This setting corresponds to the font-style property and is used for italic and -oblique settings. The **Style** field offers the choices of **Default** -(whatever style is inherited), **None** (font is regular, meaning upright, not -italic or oblique), **Italic**, or **Oblique**. - -:::info - -- If you set **Style** to **Italic**, Beaver Builder loads the italic version of the font family you selected, if one exists. If not, the browser provides a computer-generated italic version of the font. - -- Here's a good article on the difference between italic and oblique fonts and the difference between glyphs designed by a typographer and computer-generated versions: [TypeTalk: Italic vs. Oblique](https://creativepro.com/typetalk-italic-vs-oblique/). - ::: - -### Variant - -This field offers the choices of **Default** (whatever style is inherited), -**Normal** (font is regular, meaning upright, overriding any inherited variant -setting), or **Small Caps**. - -The difference between **Small Caps** and the **Transform** field's **Uppercase** is that **Small Caps** uses larger letters for letters that are capitalized in the original text, whereas **Uppercase** uses capital letters of uniformly equal height. The **Small Caps** effect is -shown in the screenshot below. - -![Typography Small Caps comparison](/img/beaver-builder/editor-basics--typography--7.jpg) - -## Text shadow - -Adds a shadow effect behind the text, letting you control the -shadow color, direction of offset ( **X** is horizontal, **Y** is vertical), -and blur, as shown in the following screenshot. - -![Typography align text](/img/beaver-builder/editor-basics--typography--8.jpg) diff --git a/versioned_docs/version-2.9/basics/undo-redo.md b/versioned_docs/version-2.9/basics/undo-redo.md deleted file mode 100644 index bd88aac4..00000000 --- a/versioned_docs/version-2.9/basics/undo-redo.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: undo-redo -title: Undo & Redo -sidebar_label: Undo & Redo ---- - -The **History** menu item in the [Tools menu](user-interface/tools-menu.md) allows you to undo or redo any changes you have made. - -![Undo or redo using Beaver Builder History](/img/beaver-builder/editor-basics--undo-redo--1.jpg) - -## Access History - -1. Click **History** in the [Tools menu](user-interface/tools-menu.md). - -2. Click any of the items listed in the history and the layout reverts to the layout at that point. - You can keep clicking in the history at various points to undo or restore layout. - -:::info - -You can't pick and choose which items to keep: whatever item you select, that item and the ones lower on the list remain in the layout, while the higher ones are removed. - -::: - -3. When you're done, click **Done** and then **Publish**, **Save as draft**, or **Discard**. - -:::warning - -When you publish the page, the history is reset, so you'll no -longer have access to the items that you chose not to keep. If the **Save as -Draft** or **Discard** your layout, the history remains and you can undo and -redo the next time you open the editor. For other implications of saving vs. -discarding vs. publishing a page, see [this article](user-interface/top-bar.md#done-button). - -Don't forget you can use the [Revisions feature](user-interface/tools-menu.md/#revisions) to revert to a previously published version. - -::: - -## Keyboard shortcuts - -You can use the undo and redo keyboard shortcuts to cycle backwards and -forwards through the items listed in **Tools > History**. The keystrokes -depend on your operating system, as follows: - -### Undo - -- command ⌘ + Z ( Mac) -- Ctrl + Z ( Windows) - -### Redo - -- command ⌘ + Shift ⇧ + Z ( Mac) -- Ctrl + Shift ⇧ + Z ( Windows) - -## Tracking - -The Beaver Builder editor keeps track of editing changes, recorded at the following level of granularity: - -### Objects tracked - -- Rows -- Columns -- Modules -- Templates and prebuilt rows -- Saved rows, columns, or modules - -### Events tracked - -- Add -- Edit -- Delete -- Move -- Duplicate - -### Initial state - -The initial state of **History** when you [launch Beaver Builder](getting-started/launch-builder.md) is **Draft created**. When you publish or save the layout, the history is erased and the next time you open the Beaver Builder editor, the status is once again **Draft created** until you make further changes. - -## Reduce or disable History - -You can reduce or disable the Beaver Builder history to improve your website performance. - -See the [Advanced Settings](settings/advanced.md#limit-the-amount-of-undoredo-history-in-builder-ui) article for more information. diff --git a/versioned_docs/version-2.9/developer/acf-blocks.md b/versioned_docs/version-2.9/developer/acf-blocks.md deleted file mode 100644 index 857582fc..00000000 --- a/versioned_docs/version-2.9/developer/acf-blocks.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -id: acf-blocks -title: ACF Blocks -sidebar_label: ACF Blocks -description: This article covers everything related to using ACF Blocks in Beaver Builder including why it’s useful, how it works, and how to create your first block. ---- - -This article covers everything related to using ACF Blocks in Beaver Builder including why it’s useful, how it works, and how to create your first block. - -:::caution -ACF Blocks require **[Advanced Custom Fields Pro](https://www.advancedcustomfields.com/pro/)**. -::: - -## What are ACF Blocks? - -ACF blocks allow you to create configurable content (e.g. blocks or modules) that work in both Beaver Builder and Gutenberg. If you use Beaver Builder for site building and page layout and Gutenberg for post content, ACF blocks are for you. - -See the [ACF Blocks documentation](https://www.advancedcustomfields.com/resources/blocks/) for more information. - -## Accessing ACF Blocks in Beaver Builder - -Blocks created with ACF can be found in [The Content Panel](user-interface/content-panel.md) under **Modules > ACF Blocks** subgroup. Any block categories or icons used to organize and display your blocks in Gutenberg will show there as well. - -:::tip -See the [Defining Custom Groups](#defining-custom-groups) section for customizing the group location of your ACF Blocks. -::: - -![Access ACF Blocks in BB UI](/img/beaver-builder/developer--acf-blocks--1.jpg) - -## Creating an ACF Block For Beaver Builder - -The documentation for [ACF Blocks](https://www.advancedcustomfields.com/resources/blocks/) and [WordPress handbook](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/) provide most of the information you need to create an ACF block in Beaver Builder. We have also created an [example ACF blocks plugin](https://github.com/beaverbuilder/bb-example-acf-blocks) you can use for reference. - -The bare minimum required to create an ACF block is two files: ***block.json*** and ***template.php***. It’s also possible to load style and script files specific to your block by defining those in ***block.json***. - -:::caution -There are, however, a few things you should keep in mind. - -* **JSX Support** – Blocks that declare JSX support aren’t currently supported in Beaver Builder and won’t be available. When using `block.json`, you need to explicitly set this to `FALSE` as shown in the example below and in [Configuring `block.json`](#configuring-blockjson) section. - - ```json - "supports": { - "jsx": false - }, - ``` - -* **Block Features** – Beaver Builder doesn’t currently support additional block features that can be configured in block.json including things like alignment, colors, and variations. We only support the basics shown in the examples. -::: - -### Configuring `block.json` - -This is a standard WordPress ***block.json*** file with the addition of the `acf` param for defining where your template is located. Without that, you won’t be able to select it in ACF when building your form. - -Additionally, this is where you need to set **JSX support** to `FALSE`, otherwise, your block won’t load in Beaver Builder. The paths to the template file (and style or script files) are relative to your ***block.json*** file and need to be stored in the same location. - -```json -{ - "name": "acf/bb-example-acf-block", - "title": "ACF Example Block", - "description": "An example ACF block that can be used in Beaver Builder.", - "category": "bb-example-acf-blocks", - "icon": "admin-appearance", - "script": "file:./js/scripts.js", - "style": "file:./css/styles.css", - "supports": { - "jsx": false - }, - "acf": { - "mode": "preview", - "renderTemplate": "template.php" - } -} -``` - -### Defining Custom Groups - -You can assign your block to a group other than **Standard Modules** in The Content Panel by adding the following code to ***block.json***. - -```json -"beaverBuilder": { - "group": "ACF Blocks" -} -``` - -
- Example - -```json -{ - "name": "acf/bb-example-acf-block", - "title": "ACF Example Block", - "description": "An example ACF block that can be used in Beaver Builder.", - "category": "bb-example-acf-blocks", - "icon": "admin-appearance", - "script": "file:./js/scripts.js", - "style": "file:./css/styles.css", - "supports": { - "jsx": false - }, - "acf": { - "mode": "preview", - "renderTemplate": "template.php" - } - // highlight-start - "beaverBuilder": { - "group": "ACF Blocks" - } - // highlight-end -} -``` - -
- -### Configuring template.php - -The ***template.php*** file is where you output the content for your block. In it, you can query ACF fields like normal with `get_field` and use the result in your output. You should be familiar with this if you have previously worked with ACF. - -```php - -
-

-

-
-``` - -### Loading the Block - -Once you’ve created the code for your block, you need to load it using the core function [`register_block_type`](https://developer.wordpress.org/reference/functions/register_block_type/). Your block won’t be available to select in ACF when building your form until you do this. - -```php -add_action( 'init', function() { - register_block_type( 'path/to/block.json' ); -} ); -``` - -## Creating the Block Form - -Now create the form for your block. You can do this before or after you code the block — it’s entirely up to you. The block won’t appear in the field group rules until you create the form. - -If you’ve created an ACF form before, this should all be fairly standard. Simply create a form, set the location to your block, and your block is ready. - -![Creating Block Form](/img/beaver-builder/developer--acf-blocks--3.jpg) - -## Exporting the Block Form - -This step is optional but can come in handy if you’d like to ship your blocks in a plugin. Under ACF’s tools, you have the option to export or import fields as JSON. This will allow you to store your block’s form in a plugin and even manage it with version control. - -![Exporting Block Form](/img/beaver-builder/developer--acf-blocks--4.jpg) - -After exporting your block’s form, you can always reimport it later if you need to make changes. Once you’re done, just export it again and push those changes to your git repo. - -ACF does provide a way to automatically handle `JSON` files but unfortunately, it only works with a single location. If you do that in a plugin, it could break something else on your site using ACF’s local JSON. - -If you’re interested in working with fields this way, here’s how we’re loading them in the example plugin. - -```php -add_action( 'acf/init', function() { - $fields = json_decode( file_get_contents( 'path/to/fields.json' ), 1 ); - - /** - * Only load if no fields exist in the database with this key. - * This allows you to work on the fields if they have been imported. - */ - if ( empty( acf_get_fields( $fields[0]['key'] ) ) ) { - acf_add_local_field_group( $fields[0] ); - } -} ); -``` diff --git a/versioned_docs/version-2.9/developer/conditionally-hidden-content.md b/versioned_docs/version-2.9/developer/conditionally-hidden-content.md deleted file mode 100644 index d4b15ad8..00000000 --- a/versioned_docs/version-2.9/developer/conditionally-hidden-content.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: conditionally-hidden-content -title: Conditionally Hidden Content -sidebar_label: Conditionally Hidden Content ---- - -# The Problem with Conditionally Hidden Content - -We were alerted to an issue with content that is hidden by Beaver Builder's visibility options or Beaver Themer's conditional logic. When viewed via the REST API or on archive layouts with modules that show a post loop, content that should be hidden was being displayed to all. - -## How did this happen? - -When you add a text-based or image-based module to a page, the raw text and image data are saved to the native WordPress `post_content`. This ensure that if you deactivate Beaver Builder you will still have that data for WordPress to display. - -Up until now, visibility settings were ignored when you published your layout. This meant that when WordPress displayed the post excerpt, it used everything it found in the `post_content`, which included anything that was supposed to be hidden. - -## The Fixes We Implemented - -We added some clever filters for the REST API so it respects any node visibility settings, so from 2.5.1 onwards, only visible text is added to the backup `post_content`. - -## How To Get The Fixes - -Update to Beaver Builder 2.5.1. All of the fixes with conditionally hidden content are contained within the Beaver Builder Plugin 2.5.1 release. - -If you are using hidden content in your layouts and hidden text is showing up in post modules or archives, we have a small utility plugin that removes the hidden content from the `post_content`. This does not change your layouts in any way. - -### Download the utility plugin - -Download here: https://updates.wpbeaverbuilder.com/public/bb-excerpt-data-fix.zip - -### How to use the plugin - -1. Make a full backup of your site, following best practice before updating WordPress, plugins or themes or adding new themes or plugins. - -2. Install and activate the `Beaver Builder Excerpt Fix` plugin. Upon activation, it will fix your data to make sure the hidden content is not in `post_content`. - -3. Check your post modules and archives and make sure the hidden data is not showing in the excerpt. - -4. After the plugin runs, it deactivates itself and you can then delete it. diff --git a/versioned_docs/version-2.9/developer/container-modules.md b/versioned_docs/version-2.9/developer/container-modules.md deleted file mode 100644 index 7bb4a53b..00000000 --- a/versioned_docs/version-2.9/developer/container-modules.md +++ /dev/null @@ -1,130 +0,0 @@ ---- -id: container-modules -title: Container Modules -sidebar_label: Container Modules ---- - -Container modules are modules that can accept other modules as children, similar to rows and columns. The Box module in Beaver Builder and Loop module in Beaver Themer are examples of container modules. - -Creating a container module is very similar to creating a regular module, with a few additional things you need to do. - -### Excluding Wrappers - -While this isn't necessary for container modules, it's often desired. By default, the builder will include legacy wrapper divs on modules. To exclude those, you need to set [`'include_wrapper' => false`](custom-modules/08-module-property-reference.md#include_wrapper-boolean) in the module config and render the module attributes on the top-level element in the `frontend.php` file. - -```php - [ - 'my-class-name', - ], -]; - -?> -
render_attributes( $custom_attrs ); ?>> -... -
-``` - -:::info - -The module will not work correctly in the builder if you fail to render attributes on the top-level element. - -::: - -### Define Accepted Children - -In order for the module to act as a container, you need to define what children it can accept. By placing `'accepts' => 'all'` in the module config, your module will be able to accept any type of module, including itself. - -If you'd like to limit it to only certain modules, you can define an array of modules slugs you want it to accept like so: - -```php -class MyModule extends FLBuilderModule { - public function __construct() { - parent::__construct( [ - 'name' => __( 'My Module' ), - 'accepts' => [ 'heading', 'rich-text', 'button' ], - ... - ] ); - } -} -``` - -### Render Children - -In order for your module to display its children, you need to render them in the `frontend.php` file for the module by calling `$module->render_children`. Once you've set `accepts` in the module config and rendered the children, the module will act as a container. - -```php -
render_attributes(); ?>> - render_children(); ?> -
-``` - -:::info - -Calling `$module->render_children` should be done in the top-level element for the module. The builder expects the top-level element to be the sortable element for drag and drop operations. If you need to render children in a nested structure, use the following instead: - -```php -$module->render_children_with_wrapper( 'div', [ - 'class' => [ - 'my-class-name', - ], -] ); -``` - -::: - -### Child Template (Optional) - -By default, when you drop a container module on the page, it is empty without any children. However, it is possible to define a default layout for container modules by setting a `template` in the module config. - -The template config is an array of arrays for each child module you'd like rendered when the container is added to the page. - -The format for each child array is: - -```php] -[ $slug, $settings, $children ] -``` - -#### `$slug` String - -The child module's slug such as `heading`, `button`, or `rich-text`. - -#### `$settings` Array - -An array of default settings for this child module. - -#### `$children` Array - -An array of child module arrays if this is a nested container module. Has no effect on regular modules. - -#### Example Template - -This is an example child module template with a heading and rich text. - -```php -class MyModule extends FLBuilderModule { - public function __construct() { - parent::__construct( [ - 'name' => __( 'My Module' ), - 'template' => [ - [ - 'heading', - [ - 'heading' => 'Lorem Ipsum Dolor', - 'tag' => 'h3', - ], - ], - [ - 'rich-text', - [ - 'text' => 'Suspendisse condimentum non nulla.' - ], - ], - ], - ... - ] ); - } -} -``` diff --git a/versioned_docs/version-2.9/developer/custom-modules/01-create-a-plugin.md b/versioned_docs/version-2.9/developer/custom-modules/01-create-a-plugin.md deleted file mode 100644 index fc171121..00000000 --- a/versioned_docs/version-2.9/developer/custom-modules/01-create-a-plugin.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: 01-create-a-plugin -title: '01: Create a plugin' -sidebar_label: '01: Create a plugin' -slug: create-a-plugin ---- - -To create custom modules, you will first need to create a simple plugin. This will ensure that your modules are not overwritten when updating Beaver Builder via the remote updates interface. - -## Create a Plugin - -To create a plugin, navigate to the WordPress plugins directory located in _`/wp-content/plugins`_ and create a new folder. You should give this folder a unique name using lowercase letters and dashes such as _`my-builder-modules`_. - -Next, create a PHP file within your new folder and give it the same name such as _`my-builder-modules.php`_. - -Finally, copy and paste the code below into your plugin's PHP file and edit the information such as Plugin Name and Author. You should also rename the constants `MY_MODULES_DIR` and `MY_MODULES_URL` to match your plugin's -namespace, keeping the `_DIR` and `_URL` suffixes. - -```php -/** - * Plugin Name: My Custom Modules - * Plugin URI: http://www.mywebsite.com - * Description: Custom modules for the Beaver Builder Plugin. - * Version: 1.0 - * Author: Your Name - * Author URI: http://www.mywebsite.com - */ -define( 'MY_MODULES_DIR', plugin_dir_path( __FILE__ ) ); -define( 'MY_MODULES_URL', plugins_url( '/', __FILE__ ) ); - -function my_load_module_examples() { - if ( class_exists( 'FLBuilder' ) ) { - // Include your custom modules here. - } -} -add_action( 'init', 'my_load_module_examples' ); -``` - -Now that you've created a plugin, you can activate it within the WordPress Admin Dashboard and move on to the next step. diff --git a/versioned_docs/version-2.9/developer/custom-modules/02-add-a-module-to-your-plugin.md b/versioned_docs/version-2.9/developer/custom-modules/02-add-a-module-to-your-plugin.md deleted file mode 100644 index 9ae3dad7..00000000 --- a/versioned_docs/version-2.9/developer/custom-modules/02-add-a-module-to-your-plugin.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 02-add-a-module-to-your-plugin -title: '02: Add a module to your plugin' -sidebar_label: '02: Add a module to your plugin' -slug: add-a-module-to-your-plugin ---- - -To add a module, create a folder in your plugin folder and **give it a unique name using lowercase letters and dashes** such as _`my-module`_. - -:::caution -Module folders and file names must be namespaced with a prefix to avoid conflicts with core modules. - -For example, if your name is **John** and you would like to create a button module, your module path -would be `john-button/john-button.php`, because a non-prefixed `button/button.php` would be overridden by the core button module. - -If two modules have the same folder name or slug, even if they are in different plugins, there will be -a conflict. -::: - -Next, create a PHP file within your module folder and give it the same name, such as _`my-module.php`_. - -Finally, you will need to configure your module's class so it can be registered with Beaver Builder in the next step. To do so, copy and paste the code below into your module's PHP file. For more detailed information about the module class, see the [Module Property Reference](08-module-property-reference.md) and [Module Method Reference](09-module-method-reference.md) sections. - -This code block contains a `group` item in the array, which defines the group in which your module will appear in the Content Panel in the Beaver Builder editor. - -:::info -Rename the class to reflect the name of your module and change out the module info in the construct method. -::: - -```php -class MyModuleClass extends FLBuilderModule { - - public function __construct() - { - parent::__construct(array( - 'name' => __( 'My Module', 'fl-builder' ), - 'description' => __( 'A totally awesome module!', 'fl-builder' ), - 'group' => __( 'My Group', 'fl-builder' ), - 'category' => __( 'My Category', 'fl-builder' ), - 'dir' => MY_MODULES_DIR . 'my-module/', - 'url' => MY_MODULES_URL . 'my-module/', - 'icon' => 'button.svg', - 'editor_export' => true, // Defaults to true and can be omitted. - 'enabled' => true, // Defaults to true and can be omitted. - 'partial_refresh' => false, // Defaults to false and can be omitted. - 'include_wrapper' => false, // Defaults to true but is recommended to be set to false - )); - } -} -``` - -Once you've configured your module class, you'll need to include it within your plugin. To do so, open your main plugin file and include it as shown in the following example. - -```php -function my_load_module_examples() { - if ( class_exists( 'FLBuilder' ) ) { - require_once 'my-module/my-module.php'; - } -} -``` - - -Now that you've added a module to your plugin, it's time to move on to the next step to register it with Beaver Builder and create the settings form. diff --git a/versioned_docs/version-2.9/developer/custom-modules/03-define-module-settings.md b/versioned_docs/version-2.9/developer/custom-modules/03-define-module-settings.md deleted file mode 100644 index 5bf8793b..00000000 --- a/versioned_docs/version-2.9/developer/custom-modules/03-define-module-settings.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 03-define-module-settings -title: '03: Define module settings' -sidebar_label: '03: Define module settings' -slug: define-module-settings ---- - -Registering your module is done through the `FLBuilder::register_module` -method call. That method accepts two parameters: the name of your module class -and an associative array of information for building your settings form. - -```php -FLBuilder::register_module( 'MyModuleClass', array() ); -``` - -## The Settings Array - -The settings array is a nested set of information that allows you to define -tabs, sections within your tabs and fields within your sections. The top-level -array items should be associative arrays with the slug for the tabs as the -array keys. The title of the tabs should also be defined within these arrays -as shown in the example below. - -```php -FLBuilder::register_module( 'MyModuleClass', array( - 'my-tab-1' => array( - 'title' => __( 'Tab 1', 'fl-builder' ), - ), - 'my-tab-2' => array( - 'title' => __( 'Tab 2', 'fl-builder' ), - ), -) ); -``` - -Within your tab arrays should be another array that defines your sections, -with the slug for the sections as the array keys. The title of the sections -should also be defined within these arrays, as shown in the example below. - -```php -FLBuilder::register_module( 'MyModuleClass', array( - 'my-tab-1' => array( - 'title' => __( 'Tab 1', 'fl-builder' ), - 'sections' => array( - 'my-section-1' => array( - 'title' => __( 'Section 1', 'fl-builder' ), - ), - 'my-section-2' => array( - 'title' => __( 'Section 2', 'fl-builder' ), - ) - ) - ) -) ); -``` - -Within your section arrays should be another array that defines your fields, with the slug for the fields as the array keys. Please see the [Settings Field Reference](10-setting-fields-reference.md) for an in-depth look at all of the field types as well as additional configuration properties. - -```php -FLBuilder::register_module( 'MyModuleClass', array( - 'my-tab-1' => array( - 'title' => __( 'Tab 1', 'fl-builder' ), - 'sections' => array( - 'my-section-1' => array( - 'title' => __( 'Section 1', 'fl-builder' ), - 'fields' => array( - 'my-field-1' => array( - 'type' => 'text', - 'label' => __( 'Text Field 1', 'fl-builder' ), - ), - 'my-field-2' => array( - 'type' => 'text', - 'label' => __( 'Text Field 2', 'fl-builder' ), - ) - ) - ) - ) - ) -) ); -``` - -:::info -The slug for tabs, sections and fields should be unique or you will run into conflicts. For example, you will run into issues if you have two tabs that use the slug `my-tab-1`. -::: diff --git a/versioned_docs/version-2.9/developer/custom-modules/04-module-settings-css-javascript.md b/versioned_docs/version-2.9/developer/custom-modules/04-module-settings-css-javascript.md deleted file mode 100644 index 528bd31f..00000000 --- a/versioned_docs/version-2.9/developer/custom-modules/04-module-settings-css-javascript.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 04-module-settings-css-javascript -title: '04: Module Settings CSS & JavaScript' -sidebar_label: '04: Module Settings CSS & JavaScript' -slug: module-settings-css-javascript ---- - -Now that you've defined your settings, you're ready to customize them using CSS and JavaScript. Beaver Builder gives you two entry points for doing this. - -:::info -It isn't necessary to include any CSS or JavaScript for your settings to work. Doing so is optional. -::: - -## Module Settings CSS - -Any CSS you add to this file will be loaded when the settings panel for your -module is loaded. - -```bash -/wp-content/my-plugin/my-module/css/settings.css -``` - -## Module Settings JavaScript - -The JavaScript in this file will be loaded when the settings panel for your -module is loaded. This is where you can register a helper object for your -settings for initialization, validation rules, and prechecking before the form -is submitted. - -See the example provided in the [Example plugin](index.md) located in *example/js/settings.js* for detailed info and examples of working with form settings JavaScript. - -```bash -/wp-content/my-plugin/my-module/js/settings.js -``` diff --git a/versioned_docs/version-2.9/developer/custom-modules/05-module-html.md b/versioned_docs/version-2.9/developer/custom-modules/05-module-html.md deleted file mode 100644 index 9ad5879c..00000000 --- a/versioned_docs/version-2.9/developer/custom-modules/05-module-html.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -id: 05-module-html -title: '05: Module HTML' -sidebar_label: '05: Module HTML' -slug: module-html ---- - -It is essential that the *frontend.php* file is present for a module to function. This file should be placed in the `/includes/` directory of your module, as shown in the example below. - -```bash -/wp-content/my-plugin/my-module/includes/frontend.php -``` - -The *frontend.php* file is used to render the HTML markup for each individual instance of your module and provides access to the full WordPress environment in addition to the following variables. - -## `$module` Object - -An instance of your module class that has all of the properties and methods of -the parent `FLBuilderModule` class in addition to the properties and methods -that you define. - -## `$id` String - -The module's node `ID`. - -## `$settings` Object - -An object that contains the module settings you defined when registering your module. Use these to output content or check for certain conditions before doing so. - -```php -
- textarea_field; ?> - example_method(); ?> -
-``` diff --git a/versioned_docs/version-2.9/developer/custom-modules/06-module-css.md b/versioned_docs/version-2.9/developer/custom-modules/06-module-css.md deleted file mode 100644 index 5c671aba..00000000 --- a/versioned_docs/version-2.9/developer/custom-modules/06-module-css.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 06-module-css -title: '06: Module CSS' -sidebar_label: '06: Module CSS' -slug: module-css ---- - -Now that you have a completed module, it's time to style it! Beaver builder -gives you three entry points for defining CSS for your module, all of which -are optional and don't need to be included for your module to work. These -entry points are as follows. - -## Global CSS - -```bash -my-plugin/my-module/css/frontend.css -``` - -This file should contain styles that will be applied to all module instances within a builder layout. - -## Global Responsive CSS - -```bash -my-plugin/my-module/css/frontend.responsive.css -``` - -This file should contain styles that will be applied to all module instances -within a builder layout once the responsive breakpoint has been reached. The -responsive breakpoint can be set or disabled in the global settings panel. - -## Instance CSS - -```bash -my-plugin/my-module/includes/frontend.css.php -``` - -This file is used to render the CSS for each individual instance of your module. Note that this is CSS that applies to each instance, such as a color, not global styles that should be applied to all instances. Use -*css/frontend.css* if you would like to include global module styles for your layouts. - -In addition to the full WordPress environment, within this file, you have access to these variables. - -### `$module` Object - -An instance of your module class that has all of the properties and methods of the parent `FLBuilderModule` class in addition to the properties and methods that you define. - -### `$id` String - -The module's node `ID`. - -### `$settings` Object - -An object that contains the module settings you defined when registering your module. Use these to output styles or check for certain conditions before doing so. - -```php -.fl-node- { - background-color: #bg_color; ?>; -} -``` - -## Auto CSS - -Auto-css is a system for using a module’s form preview settings to generate the server-side CSS rules for the module rather than needing to create a separate frontend.css.php file. Fields that use preview ’type' ⇒ 'css’ can opt into auto-css by setting the preview configuration's ’auto' ⇒ true. Auto-css works for most simple css scenarios and the following compound fields: `border, dimension` - -```php -'preview' => [ - 'type' => 'css', - 'auto' => true, - 'property' => 'display' -] -``` diff --git a/versioned_docs/version-2.9/developer/custom-modules/07-module-javascript.md b/versioned_docs/version-2.9/developer/custom-modules/07-module-javascript.md deleted file mode 100644 index ffd78f3f..00000000 --- a/versioned_docs/version-2.9/developer/custom-modules/07-module-javascript.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -id: 07-module-javascript -title: '07: Module JavaScript' -sidebar_label: '07: Module JavaScript' -slug: module-js ---- - -Beaver Builder gives you two entry points for defining JavaScript for your -module, both of which are optional and don't need to be included for your -module to work. - -## Global JavaScript - -```bash -my-plugin/my-module/js/frontend.js -``` - -This file should contain JavaScript that will be applied to all module -instances within a builder layout. - -## Instance JavaScript - -```bash -my-plugin/my-module/includes/frontend.js.php -``` - -This file is used to render the JavaScript for each individual instance of -your module. Note that this is JavaScript that applies to each instance, not -global JavaScript that should be applied to all instances. Use -_js/frontend.js_ if you would like to include global JavaScript for your -module. - -In addition to the full WordPress environment, within this file, you have -access to the following variables: - -### $module object - -An instance of your module class that has all of the properties and methods of -the parent `FLBuilderModule` class in addition to the properties and methods -that you define. - -### $id string - -The module's node ID. - -### $settings object - -An object that contains the module settings you defined when registering your -module. Use these to output JavaScript or check for certain conditions before -doing so. - -Example: - -```js -console.log('Module ID: '); -console.log('Text: text_field; ?>'); -``` diff --git a/versioned_docs/version-2.9/developer/custom-modules/08-module-property-reference.md b/versioned_docs/version-2.9/developer/custom-modules/08-module-property-reference.md deleted file mode 100644 index 3ec27acf..00000000 --- a/versioned_docs/version-2.9/developer/custom-modules/08-module-property-reference.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -id: 08-module-property-reference -title: "08: Module property reference" -sidebar_label: "08: Module property reference" -slug: module-property-reference ---- - -## `$category` string - -The category that your module will appear in the Beaver Builder editor's -module list. - -## `$description` string - -A short description of what your module does. It is not currently used within -Beaver Builder but may be in the future. - -## `$dir` string - -The directory path to your module. This should include the trailing slash. - -## `$editor_export` boolean - -Set this to false if you do not want a stripped down version of your module -exported to the default WordPress editor when publishing a layout. - -## `$enabled` boolean - -Set this to false to disable your module and keep it from appearing in Beaver -Builder's module list. - -## `$group` string - -The group that your module will appear in Beaver Builder's group selector. You -may omit this property if you would like your module to appear in the main -Standard Modules group. - -## `$icon` string - -An SVG icon for your module. Check out the guide [adding icons to your custom modules](/beaver-builder/developer/tutorials-guides/add-icons-to-your-custom-modules.md) for a complete reference. You may omit this property if you would -like to use the default icon. - -## `$name` string - -The name of your module that will appear in Beaver Builder's module list. - -## `$node` string - -The module's unique ID that doesn't change, even if it is exported and -imported into another database. - -## `$partial_refresh` boolean - -Set this to true if you would like to enable partial refresh for your module. -Please see the [partial refresh reference](17-partial-refresh-reference.md) before doing so. - -## `$url` string - -The URL path to your module. This should include the trailing slash. - -## `$include_wrapper` boolean - -This determines whether the normal wrapper divs are included when rendering this module. Defaults to true for backwards compatibility but is recommended to be set to false. - -If set to false, the module attributes need to be rendered in the frontend.php file. - -```php -
render_attributes(); ?>> - -
-``` - -:::info - -This does not currently work with self-closing tags like ``. A top level element must exist and there must only be one. There cannot be two root elements side by side. - -::: - -## `$accepts` string or array - -Accepts an array of module slugs that can be nested inside the module. Or use the string `all` to allow all modules to be nested. - -Defaults to an empty string so that no modules can be nested. diff --git a/versioned_docs/version-2.9/developer/custom-modules/09-module-method-reference.md b/versioned_docs/version-2.9/developer/custom-modules/09-module-method-reference.md deleted file mode 100644 index 300e752f..00000000 --- a/versioned_docs/version-2.9/developer/custom-modules/09-module-method-reference.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 09-module-method-reference -title: '09: Module method reference' -sidebar_label: '09: Module method reference' -slug: module-method-reference ---- - -### add_css( $handle, $src, $deps, $ver, $media ) - -Use this method to register and enqueue additional styles for your module. -Using this method ensures that your styles will only be loaded when the module -is present on the page, instead of loading it on every page. This method can -be used just like you would use the `wp_enqueue_style` function. - -Example: - -```php -// Already registered by Beaver Builder. -$this->add_css( 'font-awesome' ); - -// Register and enqueue your own. -$this->add_css( 'example-lib', $this->url . 'css/example-lib.css' ); -``` - -### add_js( $handle, $src, $deps, $ver, $in_footer ) - -Use this method to register and enqueue additional scripts for your module. -Using this method ensures that your scripts will only be loaded when the -module is present on the page, instead of loading it on every page. This -method can be used just like you would use the `wp_enqueue_script` function. - -Example: - -```php -// Already registered by Beaver Builder. -$this->add_js( 'jquery-bxslider' ); - -// Register and enqueue your own. -$this->add_js( 'example-lib', $this->url . 'js/example-lib.js', array(), '', true ); -``` - -### remove() - -This method should not be called directly by developers. It is called by -Beaver Builder when a module is being removed from the page. Developers should -override this method in their module class if they need to work with a module -before it is removed from the page. - -Example: - -```php -public function remove() { - if( !empty( $this->settings->photo_path ) ) - unlink( $this->settings->photo_path ); -} -``` - -### delete() - -This method should not be called directly by developers. It is called by -Beaver Builder when a module is being deleted. Developers should override this -method in their module class if they need to work with a module before it is -deleted. - -:::info - -This method is called when a module is updated and when it's removed -from the page and should be used for things like clearing photo cache from -Beaver Builder's cache directory. If you only need to run logic when a module -is actually removed from the page, use the remove method instead. - -::: - -Example: - -```php -public function delete() { - if( !empty( $this->settings->photo_path ) ) - unlink( $this->settings->photo_path ); -} -``` - -### enqueue_scripts() - -This method should not be called directly by developers. It is called by -Beaver Builder when module scripts and styles are being enqueued. Developers -should override this method in their module class if they need to -conditionally enqueue styles and scripts for their modules. - -Example: - -```php -public function enqueue_scripts() -{ - if ( $this->settings && $this->settings->link_type == 'lightbox' ) { - $this->add_js( 'jquery-magnificpopup' ); - $this->add_css( 'jquery-magnificpopup' ); - } -} -``` - -### update( $settings ) - -This method should not be called directly by developers. It is called by -Beaver Builder when a module is being updated and passed the module settings -that can be modified before they are saved to the database. Developers should -override this method in their module class if they need to work with settings -before they are saved. - -Example: - -```php -public function update( $settings ) -{ - if( empty( $settings->my_field ) ) - $settings->my_field = 'Default Text'; - - return $settings; -} -``` diff --git a/versioned_docs/version-2.9/developer/custom-modules/10-setting-fields-reference.md b/versioned_docs/version-2.9/developer/custom-modules/10-setting-fields-reference.md deleted file mode 100644 index fd3cf51f..00000000 --- a/versioned_docs/version-2.9/developer/custom-modules/10-setting-fields-reference.md +++ /dev/null @@ -1,992 +0,0 @@ ---- -id: 10-setting-fields-reference -title: '10: Setting fields reference' -sidebar_label: '10: Setting fields reference' -slug: setting-fields-reference ---- - -:::caution - -Please refrain from using the `type` or `connection` keys within the settings fields, as they have been designated for internal purposes and should not be used. - -::: - -### Align field - -The align field displays a button group used to select either left, center or right values. The following screenshot shows the **Alignment** field button group in the UI and what the choices are: - -![Align field](/img/developer/custom-modules--10-settings-fields-reference--1.jpg) - -You can also set custom return values using the optional `values` param as shown in the example. - -**Return value** -Returns left, center or right unless custom values have been defined. - -```php -'text-align' => array( - 'type' => 'align', - 'label' => 'Text Align', - 'default' => 'center', - 'preview' => array( - 'type' => 'css', - 'selector' => '.my-selector', - 'property' => 'text-align', - ), -), -``` - -Here is an example of an align field with custom return values. - -```php -'text-align' => array( - 'type' => 'align', - 'label' => 'Text Align', - 'values' => array( - 'left' => '0 auto 0 0', - 'center' => '0 auto', - 'right' => '0 0 0 auto', - ), -), -``` - -### Border field - -The border field displays a compound field with inputs for constructing borders. Using [our live preview system](16-live-preview-reference.md) will take care of the complexities of previewing the border field for you. - -**Return value** -An array of border data. - -```php -'my_border' => array( - 'type' => 'border', - 'label' => 'My Border', - 'responsive' => true, - 'preview' => array( - 'type' => 'css', - 'selector' => '.my-selector', - ), -), -``` - -To render the CSS for your border field, use the `FLBuilderCSS::border_field_rule` helper method in your `frontend.css.php` file as shown below. - -```php -FLBuilderCSS::border_field_rule( array( - 'settings' => $settings, - 'setting_name' => 'my_border', - 'selector' => ".fl-node-$id .my-selector", -) ); -``` - -### Button Group field - -The button group field displays a group of buttons for selecting a single value when one of the buttons is clicked. Only one button can be selected at a time. When no button is selected, the default setting applies. Here's a screenshot example of a button group used in the **Typography** section. - -![Button Group field](/img/developer/custom-modules--10-settings-fields-reference--2.jpg) - -**Return value** -The selected string value. - -```php -'my_setting' => array( - 'type' => 'button-group', - 'label' => 'My Setting', - 'default' => 'two', - 'options' => array( - 'one' => 'One', - 'two' => 'Two', - 'three' => 'Three', - ), -), -``` - -#### Align Icons - -Horizontal by default, but vertical sets icon above label - -```php -'my_setting' => array( - 'type' => 'button-group', - 'label' => 'My Setting', - 'default' => 'two', - 'align_icons' => 'vertical', - 'options' => array( - 'one' => 'One', - 'two' => 'Two', - 'three' => 'Three', - ), -), -``` - -#### Custom Icons - -Takes an array matching the options keys for icon HTML. - -```php -'my_setting' => array( - 'type' => 'button-group', - 'label' => 'My Setting', - 'options' => [ - 'flex' => __( 'Flex', 'fl-builder' ), - 'grid' => __( 'Grid', 'fl-builder' ), - 'z_stack' => __( 'Layers', 'fl-builder' ), - ], - 'icons' => [ - 'flex' => '', - 'z_stack' => '', - 'grid' => '', - ], - -), -``` - -#### More Padding - -Normal by default, but ‘padded’ gives more space around the buttons - -```php -'my_setting' => array( - 'type' => 'button-group', - 'label' => 'My Setting', - 'default' => 'two', - 'appearance' => 'padded', - 'options' => array( - 'one' => 'One', - 'two' => 'Two', - 'three' => 'Three', - ), -), -``` - - -#### Fill Space - -False by Default. True causes the button group to take up the entire horizontal area -```php -'my_setting' => array( - 'type' => 'button-group', - 'label' => 'My Setting', - 'default' => 'two', - 'fill_space' => true, - 'options' => array( - 'one' => 'One', - 'two' => 'Two', - 'three' => 'Three', - ), -), -``` - -### Code field - -The code field displays an Ace editor for working with code. - -**Return value** -A string containing the user-submitted code. - -```php -'my_code_field' => array( - 'type' => 'code', - 'editor' => 'html', - 'rows' => '18' -), -``` - -### Color field - -The color field displays a color picker that can be used to pick a custom color. If `show_reset` is set to true, users will also be able to clear the color which results in an empty value. You can also set `show_alpha` to true -to show the alpha slider in the picker. - -**Return value** -The hexadecimal color value excluding the hash (#) sign. - -```php -'my_color_field' => array( - 'type' => 'color', - 'label' => __( 'Color Picker', 'fl-builder' ), - 'default' => '333333', - 'show_reset' => true, - 'show_alpha' => true -), -``` - -#### Rendering Color Fields - -There are helper functions to render color fields. - -##### FLBuilderColor::hex_or_rgb -This function ensures that the right color is rendered no matter the format. - -**Example Usage** -```php -FLBuilderCSS::rule( array( - 'enabled' => 'flat' === $settings->style && ! empty( $settings->bg_hover_color ), - 'selector' => ".fl-builder-content .fl-node-$id a.fl-button:hover, .fl-page .fl-builder-content .fl-node-$id a.fl-button:hover, .fl-page .fl-builder-content .fl-node-$id a.fl-button:hover, .fl-page .fl-page .fl-builder-content .fl-node-$id a.fl-button:hover", - 'props' => array( - 'background-color' => FLBuilderColor::hex_or_rgb( $settings->bg_hover_color ), - ), -) ); -``` - -### Date field - -The date field displays a simple date picker input. This field uses the native browser picker instead of a third-party JavaScript library. - -**Return value** -A date/time string. - -```php -'my_date' => array( - 'type' => 'date', - 'label' => 'My Date', - 'min' => '2000-01-01', // Optional - 'max' => '2018-12-31', // Optional -), -``` - -### Dimension field - -The dimension field displays four number inputs for top, right, bottom, and left values. - -**Return value** -The dimension field doesn’t return a single value on your `$settings` object. Instead, it will return four values corresponding to top, right, bottom, and left, using the key for your setting as a prefix. For example, if -my setting has a key of `margin`, the values returned will be as follows: - -```php -$settings->margin_top -$settings->margin_right -$settings->margin_bottom -$settings->margin_left -``` - -The dimension field is configured as follows. - -```php -'margin' => array( - 'type' => 'dimension', - 'label' => 'Margins', - 'description' => 'px', -), -``` - -The dimension field type allows custom unit selects and popup value sliders. -See the code examples for the unit field. - -### Editor field - -The editor field displays a WordPress editor that can be used to insert text just as you would on the post edit screen. If `media_buttons` is set to true, the Add Media button will be available above the editor. - -**Return value** -The HTML content generated by the editor. - -```php -'my_editor_field' => array( - 'type' => 'editor', - 'media_buttons' => true, - 'wpautop' => true -), -``` - -If you would like to enable oEmbed in your editor fields, set the `wpautop` param to `false` and output your text in frontend.php like so. - -```php -global $wp_embed; -echo wpautop( $wp_embed->autoembed( $settings->text ) ); -``` - -### Font field - -The font field displays a select for choosing a font family and a select for choosing a corresponding weight. - -**Return value** -An array with the family and weight values as shown below. - -```php -Array -( - [family] => Helvetica - [weight] => 300 -) -``` - -```php -'my_font_field' => array( - 'type' => 'font', - 'label' => __( 'Font', 'fl-builder' ), - 'default' => array( - 'family' => 'Helvetica', - 'weight' => 300 - ) -), -``` - -### Form field - -A form field is a nested form that can be launched from within an existing form. For a live example of this, check out the Items tab of the Accordion module. There you will see that when you click the Edit Item link, a nested form is displayed for you to edit that particular item. - -:::caution -Form fields cannot be nested. -::: - -**Return value** -An object containing a property for each of the settings defined in the form. - -**Usage** -In order to use the form field, you must have a form defined. That is done similar to registering a module but instead uses the `FLBuilder::register_settings_form` method. That method takes your form ID as well as an array of form config data (again similar to a module's form). - -```php -FLBuilder::register_settings_form('my_form_field', array( - 'title' => __('My Form Field', 'fl-builder'), - 'tabs' => array( - 'general' => array( - 'title' => __('General', 'fl-builder'), - 'sections' => array( - 'general' => array( - 'title' => '', - 'fields' => array( - 'label' => array( - 'type' => 'text', - 'label' => __('Label', 'fl-builder') - ) - ) - ), - ) - ) - ) -)); -``` - -Once you have a form defined, you can reference it in your field's config array by setting the `form` value to the ID of the form you registered. You should also set the `preview_text` value to the ID of a field that is defined in your form. - -```php -'my_form_field' => array( - 'type' => 'form', - 'label' => __('My Form', 'fl-builder'), - 'form' => 'my_form_field', // ID of a registered form. - 'preview_text' => 'label', // ID of a field to use for the preview text. -) -``` - -### Gradient field - -The gradient field displays a compound field with color, stop, type, angle, and position inputs for constructing a gradient. Using [our live preview system](15-helpers.md) will take care of the complexities of previewing the gradient field for you. - -**Return value** -An array of gradient data. - -```php -'my_gradient' => array( - 'type' => 'gradient', - 'label' => 'Gradient', - 'preview' => array( - 'type' => 'css', - 'selector' => '.my-selector', - 'property' => 'background-image', - ), -), -``` - -To render the CSS for your gradient field, use the `FLBuilderColor::gradient` helper method in your `frontend.css.php` as shown below. - -```php -background-image: my_gradient ); ?> -``` - -### Icon field - -The icon field displays an icon selector that can be used to pick a custom icon. If `show_remove` is set to true, users will also be able to clear the icon, which results in an empty value. - -**Return value** -The icon class names, such as `fa fa-flag`. - -```php -'my_icon_field' => array( - 'type' => 'icon', - 'label' => __( 'Icon Field', 'fl-builder' ), - 'show_remove' => true -), -``` - -You can toggle other fields like the [select field](#select-field) type using the `show` value, as seen in the following code example. - -```php -'icon' => array( - 'type' => 'icon', - 'label' => 'My Icon', - 'show' => array( - 'fields' => array( 'field_1', 'field_2' ), - 'sections' => array( 'section_1', 'section_2' ), - 'tabs' => array( 'tab_1', 'tab_2' ), - ), -), -``` - -### Link field - -The link field displays a text input for entering a URL and a select button that shows a dialog when clicked for selecting a post of any type to link to. - -**Return value** -The link entered by the user. - -```php -'my_link_field' => array( - 'type' => 'link', - 'label' => __('Link Field', 'fl-builder') - 'placeholder' => __( 'http://www.example.com', 'fl-builder' ), -), -``` - -You can show **Target** or **No Follow** checkboxes without having to code those fields yourself. The following screenshot shows how they appear in the UI. - -![Link field](/img/developer/custom-modules--10-settings-fields-reference--3.jpg) - -To enable these checkboxes, set the `show_target`, `show_nofollow`, or `show_download` values to `true` in your field config, as shown in the following code example. - -```php -'link' => array( - 'type' => 'link', - 'label' => 'Link', - 'placeholder' => __( 'http://www.example.com', 'fl-builder' ), - 'show_target' => true, - 'show_nofollow' => true, - 'show_download' => true, -), -``` - -### Loop Settings fields - -Loop settings aren't actually a single field but a collection of fields that make up a tab in the settings panel. That tab allows users to select things like Post Type, Order, Terms and more that you can use to create a WordPress loop using the `FLBuilderLoop::query` method. - -**Return value** -All of the values for the loop settings will be stored in your module's settings object. You shouldn't need to access those settings directly (although you can if you want to). Instead, just pass them to the `FLBuilderLoop::query` method, as shown below, and it will take care of everything for you. - -**Usage** -To use the loop settings, simply create a new tab array that links to the _ui-loop-settings.php_ file instead of defining sections and fields like a standard tab array. - -```php -'my_loop_settings' => array( - 'title' => __( 'Loop Settings', 'fl-builder' ), - 'file' => FL_BUILDER_DIR . 'includes/ui-loop-settings.php', -) -``` - -When a user saves your module, you can create a loop in your _frontend.php_ file, as follows: - -```php -$query = FLBuilderLoop::query( $settings ); - -if ( $query->have_posts() ) { - while ( $query->have_posts() ) { - $query->the_post(); - } -} - -wp_reset_postdata(); -``` - -You can also display pagination for your loop: - -```php -if ( $query->have_posts() ) { - FLBuilderLoop::pagination( $query ); -} -``` - -### Multiple Audios field - -The multiple audios field displays a WordPress media lightbox that allows users to select multiple audio files. - -**Return value** -A JSON-encoded array of attachment IDs for each audio file selected. - -```php -'my_multiple_audios_field' => array( - 'type' => 'multiple-audios', - 'label' => __( 'Multiple Audios Field', 'fl-builder' ) -), -``` - -### Multiple Photos field - -The multiple photos field displays a WordPress media lightbox that allows users to select multiple photos. - -**Return value** -A JSON encoded array of attachment ids for each photo selected. - -```php -'my_multiple_photos_field' => array( - 'type' => 'multiple-photos', - 'label' => __( 'Multiple Photos Field', 'fl-builder' ) -), -``` - -### Photo field - -The photo field displays a WordPress media lightbox that allows users to select a single photo. - -**Return value** -The attachment ID for the selected photo. In addition to the attachment ID, the photo field also provides the photo URL as a separate variable in your module's settings object. That variable has the same name as your photo field with the suffix `_src` appended to it, such as `my_photo_field_src`. - -This is useful if all you need is the URL and don't need to deal with the attachment ID or data. If `show_remove` is set to true, users will also be able to clear the photo which results in an empty value. - -```php -'my_photo_field' => array( - 'type' => 'photo', - 'label' => __('Photo Field', 'fl-builder'), - 'show_remove' => false, -), -``` - -You can toggle other fields like the [select field](#select-field) type using the `show` value. See the Icon field section for a code example. - -### Photo sizes field - -The photo sizes field displays a select input containing the available WordPress photo sizes as values. - -**Return value** -The photo size string that can be used in functions such as `the_post_thumbnail($size)` to retrieve a specific photo size. - -```php -'my_photo_sizes_field' => array( - 'type' => 'photo-sizes', - 'label' => __('Photo Sizes Field', 'fl-builder'), - 'default' => 'medium' -), -``` - -### Post Type field - -The post type field displays a select input containing the available WordPress post types as values. - -**Return value** -The post type slug, such as post or page. - -```php -'my_post_type_field' => array( - 'type' => 'post-type', - 'label' => __('Post Type', 'fl-builder'), - 'default' => 'post' -), -``` -You can also make a post type field that has the ability to select multiple values by setting the multi-select config value to true as shown below. If that is set, this field will return an array of selected values. -```php -'my_post_type_field' => array( - 'type' => 'post-type', - 'label' => __('Post Type', 'fl-builder'), - 'default' => 'post', - 'multi-select' => true -), -``` - -### Raw HTML field - -The raw HTML field displays raw HTML specified using the `content` param. It does not return a value to your settings because it is only meant for output, not input. - -**Return value** -This field does not return a value. - -```php -'my_date' => array( - 'type' => 'raw', - 'label' => 'My Raw Field', - 'content' => '

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

', -), -``` - -### Select field - -The select field displays a standard HTML select input. Select fields can also be setup to show/hide other tabs, sections and fields within your settings by using the toggle array as shown in the example below. If the value selected by the user matches one defined in your toggle array, those tabs, sections and fields will be shown; otherwise, they will be hidden. - -**Return value** -The value selected by the user. - -```php -'my_select_field' => array( - 'type' => 'select', - 'label' => __( 'Select Field', 'fl-builder' ), - 'default' => 'option-1', - 'options' => array( - 'option-1' => __( 'Option 1', 'fl-builder' ), - 'option-2' => __( 'Option 2', 'fl-builder' ) - ), - 'toggle' => array( - 'option-1' => array( - 'fields' => array( 'my_field_1', 'my_field_2' ), - 'sections' => array( 'my_section' ), - 'tabs' => array( 'my_tab' ) - ), - 'option-2' => array() - ) -), -``` - -You can also make a select field that has the ability to select multiple values by setting the multi-select config value to true as shown below. If that is set, this field will return an array of selected values. - -```php -'my_multi_select_field' => array( - 'type' => 'select', - 'label' => __( 'Multi Select Field', 'fl-builder' ), - 'default' => 'option-1', - 'options' => array( - 'option-1' => __( 'Option 1', 'fl-builder' ), - 'option-2' => __( 'Option 2', 'fl-builder' ) - ), - 'multi-select' => true -), -``` - -### Service fields - -The service field isn't actually a single field but a collection of fields that make up a section in a settings form tab. These fields allow users to enter account information for a specific service (such as MailChimp) and save API connection data. You can then use the saved data in your modules to do things such as subscribe someone to a mailing list. - -**Return value** -The values for the service fields will be stored in your module's settings object. - -**Usage** -To use the service fields, simply create a new section array that links to the _service-settings.php_ file instead of defining fields like a standard section array. You also need to define the type of services that you would like available in the services list. Beaver Builder currently supports the `autoresponder` type. - -```php -'service' => array( - 'title' => __( 'Service Settings', 'fl-builder' ), - 'file' => FL_BUILDER_DIR . 'includes/service-settings.php', - 'services' => 'autoresponder' -), -``` - -Once your module is saved, you can access the service instance: - -```php -// Subscribe to an autoresponder service. -$instance = FLBuilderServices::get_service_instance( $settings->service ); -$response = $instance->subscribe( $settings, $email, $name ); -``` - -You can also access the saved account data by doing the following... - -```php -$instance = FLBuilderServices::get_service_instance( $settings->service ); -$account_data = $instance->get_account_data( $settings->service_account ); -``` - -### Shadow field - -The shadow field displays a compound field with inputs for constructing a shadow effect. Using [our live preview system](15-helpers.md) will take care of the complexities of previewing the shadow field for you. - -**Return value** -An array of shadow data. - -```php -'my_shadow' => array( - 'type' => 'shadow', - 'label' => 'My Shadow', - 'show_spread' => true, - 'preview' => array( - 'type' => 'css', - 'selector' => '.my-selector', - 'property' => 'box-shadow', - ), -), -``` - -To render the CSS for your shadow field, use the `FLBuilderColor::shadow` helper method in your `frontend.css.php` file as shown below. - -```php -box-shadow: my_shadow ); ?> -``` - -### Suggest field - -The suggest field displays a text input that returns a list of suggested results as the user types. It is currently designed to work with posts (of any type), terms (tags, categories, etc.), users and links (to a post of any type). - -The action value of the config array currently accepts one of four values. - -* `fl_as_posts` \- Search posts. The data value of the config array must be the slug of the post type you want to search. Returns an array of post IDs. -* `fl_as_terms` \- Search terms. The data value of the config array must be the slug of the term you want to search. Returns an array of term IDs. -* `fl_as_users` \- Search users. Returns an array of user IDs. -* `fl_as_links` \- Search links. Returns an array of permalinks. - -**Return value** -A string of comma-separated values that the user has selected. - -```php -// Search all pages. -'my_suggest_field' => array( - 'type' => 'suggest', - 'label' => __( 'Suggest Field', 'fl-builder' ), - 'action' => 'fl_as_posts', // Search posts. - 'data' => 'page', // Slug of the post type to search. - 'limit' => 3, // Limits the number of selections that can be made. -), -``` - -### Text field - -The text field displays a standard HTML text input. - -**Return value** -The text entered by the user. - -```php -'my_text_field' => array( - 'type' => 'text', - 'label' => __( 'Text Field', 'fl-builder' ), - 'default' => '', - 'maxlength' => '2', - 'size' => '3', - 'placeholder' => __( 'Placeholder text', 'fl-builder' ), - 'class' => 'my-css-class', - 'description' => __( 'Text displayed after the field', 'fl-builder' ), - 'help' => __( 'Text displayed in the help tooltip', 'fl-builder' ) -), -``` - -### Textarea field - -The textarea field displays a standard HTML textarea input. There is an optional `maxlength` key-value pair, shown in this example, and you can set any value you want. Beaver Builder has no maximum number of characters in its textareas, but you can use `maxlength` if you want to limit the number of characters that a user can enter. - -**Return value** -The text entered by the user. - -```php -'my_textarea_field' => array( - 'type' => 'textarea', - 'label' => __( 'Textarea Field', 'fl-builder' ), - 'default' => '', - 'placeholder' => __( 'Placeholder Text', 'fl-builder' ), - 'maxlength' => '255', - 'rows' => '6' -), -``` - -### Time field - -The time field displays inputs for selecting the hour, minutes and period of the day (am/pm). - -**Return value** -An array containing the hour, minutes and period. - -```php -'my_time_field' => array( - 'type' => 'time', - 'label' => __( 'Time', 'fl-builder' ), - 'default' => array( - 'hours' => '01', - 'minutes' => '00', - 'day_period' => 'am' - ) -), -``` - -Once your module is saved, you can access the values: - -```php -$settings->my_time_field['hour']; -$settings->my_time_field['minutes']; -$settings->my_time_field['day_period']; -``` - -### Time Zone field - -The time zone field displays an input for selecting a specific time zone. - -**Return value** -The time zone string. - -```php -'my_timezone_field' => array( - 'type' => 'timezone', - 'label' => __( 'Time Zone', 'fl-builder' ), - 'default' => 'UTC', -), -``` - -### Typography field - -The typography field displays a compound field with font, style, spacing, and shadow inputs for customizing the look of text. - -![Link field](/img/developer/custom-modules--10-settings-fields-reference--4.jpg) - -Using [our live preview system](15-helpers.md) will take care of the complexities of previewing the typography field for you. - -**Return value** -An array of typography data. - -```php -'my_typography' => array( - 'type' => 'typography', - 'label' => 'Typography', - 'responsive' => true, - 'preview' => array( - 'type' => 'css', - 'selector' => '.my-selector', - ), -), -``` - -To render the CSS for your typography field, use the `FLBuilderCSS::typography_field_rule` helper method in your `frontend.css.php` file as shown below. - -```php -FLBuilderCSS::typography_field_rule( array( - 'settings' => $settings, - 'setting_name' => 'my_typography', - 'selector' => ".fl-node-$id .my-selector", -) ); -``` - -### Unit field - -The unit field displays a text input for entering a number. - -**Return value -**The number entered by the user. - -```php -'font_size' => array( - 'type' => 'unit', - 'label' => 'Font Size', - 'description' => 'px', -), -``` - -#### Custom Unit select - -You can add a custom unit select (such as `px`, `vh`, `%`) to unit fields. These selects allow you to choose from a predefined list of values, as shown below. When using custom unit selects, you don't have to define the unit in your preview config, also shown below. - -```php -'width' => array( - 'type' => 'unit', - 'label' => 'Width', - 'units' => array( 'px', 'vw', '%' ), - 'default_unit' => '%', // Optional - 'preview' => array( - 'type' => 'css', - 'selector' => '.my-class', - 'property' => 'width', - ), -), -``` - -Settings with a custom unit select will receive a related setting with the `_unit` suffix, as shown in the example below. Together with the original setting, you can build the full value. - -```php -$value = $settings->width . $settings->width_unit -``` - -:::info -If you choose to set only one value for your custom unit select (such as `px`), it will still show up but won't be a selectable field. -::: - -#### Popup Value slider - -You can enable a popup slider control for unit fields when they are focused. This lets users change the values using a slider instead of the keyboard. - -To enable the popup slider for a field, simply set the `slider` value in your field config to `true`. - -```php -'width' => array( - 'type' => 'unit', - 'label' => 'Width', - 'slider' => true, -), -``` - -Examples of more advanced setups are shown below, allowing you to customize the `min`, `max`, and `step` values for the slider. If you are using custom units, you can customize the values for each unit as well. - -```php -'width' => array( - 'type' => 'unit', - 'label' => 'Width', - 'slider' => array( - 'min' => 0, - 'max' => 1000, - 'step' => 10, - ), -), -``` - -```php -'width' => array( - 'type' => 'unit', - 'label' => 'Width', - 'units' => array( 'px', 'vw', '%' ), - 'slider' => array( - 'px' => array( - 'min' => 0, - 'max' => 1000, - 'step' => 10, - ), - ), -), -``` - -### Video field - -The video field displays a WordPress media lightbox that allows users to select a single video. - -**Return value** -The attachment id for the selected video. - -```php -'my_video_field' => array( - 'type' => 'video', - 'label' => __( 'Video Field', 'fl-builder' ) -), -``` - -### Field Modifiers - -#### Toggle - -The Toggle array can be used to show or hide other tabs, sections, or fields. If the value selected by the user matches one defined in your toggle array, those tabs, sections and fields will be shown; otherwise, they will be hidden. - -The following field types support the toggle array: - -* button group -* select - -```php -'my_select_field' => array( - 'type' => 'select', - 'label' => __( 'Select Field', 'fl-builder' ), - 'default' => 'option-1', - 'options' => array( - 'option-1' => __( 'Option 1', 'fl-builder' ), - 'option-2' => __( 'Option 2', 'fl-builder' ) - ), - 'toggle' => array( - 'option-1' => array( - 'fields' => array( 'my_field_1', 'my_field_2' ), - 'sections' => array( 'my_section' ), - 'tabs' => array( 'my_tab' ) - ), - 'option-2' => array() - ) -), -``` - -#### Set - -The Set array can be used to set another field's value. - -The following field types support the set array: - -* button group -* select - -```php - 'my_set_field' => array( - 'type' => 'select', - 'label' => __('Set Field', 'fl-builder'), - 'default' => 'option-1', - 'description' => 'Choose Option 2 and see the Set Text get populated', - 'options' => array( - 'option-1' => __('Option 1', 'fl-builder'), - 'option-2' => __('Option 2', 'fl-builder') - ), - 'set' => [ - 'option-2' => [ - 'set_text' => 'Hello', - ], - ], -), -``` - diff --git a/versioned_docs/version-2.9/developer/custom-modules/11-responsive-fields-reference.md b/versioned_docs/version-2.9/developer/custom-modules/11-responsive-fields-reference.md deleted file mode 100644 index bcf1ad8a..00000000 --- a/versioned_docs/version-2.9/developer/custom-modules/11-responsive-fields-reference.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 11-responsive-fields-reference -title: '11: Responsive fields reference' -sidebar_label: '11: Responsive fields reference' -slug: responsive-fields-reference ---- - -Users can enter different responsive breakpoint values for a single field by clicking on the device toggle icon associated with that field. You can see an example of this in the Beaver Builder editor if you visit the margins setting for rows, columns or modules. - -The following field types support responsive breakpoints: - -* [`align`](10-setting-fields-reference.md#align-field) -* [`border`](10-setting-fields-reference.md#border-field) -* [`button-group`](10-setting-fields-reference.md#button-group-field) -* [`dimension`](10-setting-fields-reference.md#dimension-field) -* [`photo`](10-setting-fields-reference.md#photo-field) -* [`select`](10-setting-fields-reference.md#select-field) -* [`typography`](10-setting-fields-reference.md#typography-field) -* [`unit`](10-setting-fields-reference.md#unit-field) - -The easiest way to enable this for your fields is to define `responsive` as `true` in your field config, as shown below. - -```php -'font_size' => array( - 'type' => 'unit', - 'label' => 'Font Size', - 'description' => 'px', - 'placeholder' => 24, - 'responsive' => true, -), -``` - -You can have more granular control by defining `responsive` as an array of standard field config keys, with each providing a value for the `default`, `large`, `medium`, and `responsive` breakpoints, as follows. - -```php -'font_size' => array( - 'type' => 'unit', - 'label' => 'Font Size', - 'description' => 'px', - 'responsive' => array( - 'placeholder' => array( - 'default' => 36, // Extra Large - 'large' => 26, // Large Breakpoint - 'medium' => 20, // Medium Breakpoint - 'responsive' => 16, // Small Breakpoint - ), - ), -), -``` diff --git a/versioned_docs/version-2.9/developer/custom-modules/12-repeater-fields-reference.md b/versioned_docs/version-2.9/developer/custom-modules/12-repeater-fields-reference.md deleted file mode 100644 index bf692018..00000000 --- a/versioned_docs/version-2.9/developer/custom-modules/12-repeater-fields-reference.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -id: 12-repeater-fields-reference -title: '12: Repeater fields reference' -sidebar_label: '12: Repeater fields reference' -slug: repeater-fields-reference ---- - -A repeater field is a field that can be duplicated multiple times, reordered -and deleted. For a live example of this, check out the Items tab of the -Accordion module. There you will see that when you click the Add Item button, -another item field is added. This works for any field type, including form -fields (as in the Accordion module). The only field types it currently doesn't -work with are Border Fields, Editor Fields, Loop Settings Fields, Photo Fields, Service -Fields and Typography Fields. - -## Return value -An array of values for each of the repeated fields. - -## Usage -Creating a repeater field is simple. Just set the `multiple` value in the -field config array to true and your field will automatically become a -repeater. - -```php -'my_text_field' => array( - 'type' => 'text', - 'label' => __( 'My Text Field', 'fl-builder' ), - 'limit' => 5, // limit the number of repeaters - 'multiple' => true, -), -``` diff --git a/versioned_docs/version-2.9/developer/custom-modules/13-sanitize-field-values.md b/versioned_docs/version-2.9/developer/custom-modules/13-sanitize-field-values.md deleted file mode 100644 index 85324431..00000000 --- a/versioned_docs/version-2.9/developer/custom-modules/13-sanitize-field-values.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -id: 13-sanitize-field-values -title: '13: Sanitize field values' -sidebar_label: '13: Sanitize field values' -slug: sanitize-field-values ---- - -You can provide a sanitization callback function for your field's value. For -example, you may want to ensure that the value entered by a user for your -field is returned as a number no matter what they enter. - -To do that, first define your sanitization callback function that returns the -sanitized value: - -```php -function sanitize_number( $value ) { - return absint( $value ); -} -``` - -Then specify that function in your field config using the `sanitize` -parameter: - -```php -'font_size' => array( - 'type' => 'unit', - 'label' => 'Font Size', - 'description' => 'px', - 'sanitize' => 'sanitize_number', -), -``` diff --git a/versioned_docs/version-2.9/developer/custom-modules/14-create-custom-fields.md b/versioned_docs/version-2.9/developer/custom-modules/14-create-custom-fields.md deleted file mode 100644 index 364290e5..00000000 --- a/versioned_docs/version-2.9/developer/custom-modules/14-create-custom-fields.md +++ /dev/null @@ -1,109 +0,0 @@ ---- -id: 14-create-custom-fields -title: '14: Create custom fields' -sidebar_label: '14: Create custom fields' -slug: create-custom-fields ---- - -In addition to creating custom modules, developers can also define custom -fields for use in settings forms using their own HTML. - -:::info -The custom fields in settings forms are purely JavaScript-based. -::: - -## Create custom field files - -Create a new PHP or HTML file for your custom field. This file should contain -markup for an Underscores JavaScript template in the same flavor that -WordPress core uses for wp.template. If you're not familiar with those type of -templates, read up on [Underscores templates](http://underscorejs.org/#template) and -[wp.template](https://codex.wordpress.org/Javascript_Reference/wp.template). - -:::info -You do not need to wrap your template in `` tags -with an ID. Beaver Builder will handle that for you. -::: - -Inside your field file you will have access to the following properties on the -`data` object. - -### data.field object -The config that you defined for this field in your module's PHP file. - -### data.globalSettings object -The global settings object for Beaver Builder. - -### data.name string -The name (or key) for this field as it will be stored on the settings object -when saved. - -### data.settings object -The saved settings for the form this field is a part of. - -### data.value string -The saved value for this field. - -Using those properties, you can create any type of field markup that you wish. -Just make sure something is using the `data.name` and `data.value` properties -so it can be properly saved. Here is an example of a simple text field file. - -```html - -``` - -## Register custom field files - -Once you have created your custom field files, you'll need to register them -using the `fl_builder_custom_fields` filter. That filter will pass a `$fields` -array to your callback function with the array keys being the field types and -the array values being the paths to the fields. The field type you enter will -be what you need to use in your module's form config to use that field. - -:::info -Your field type should be prefixed so it doesn't clash with core -field types or other custom fields. For example, if you have a field type -`toggle`, it should be `my-toggle` in case the core plugin ever introduces a -`toggle` field type. -::: - -Register your custom fields to be autoloaded by Beaver Builder, as shown -below. - -```php -function my_custom_builder_fields( $fields ) { - $fields['my-field'] = '/path/to/my/fields/my-field.php'; - $fields['my-other-field'] = '/path/to/my/fields/my-other-field.php'; - return $fields; -} -add_filter( 'fl_builder_custom_fields', 'my_custom_builder_fields' ); -``` - -After you have registered your custom field file, it can be used in your -module settings as follows. - -```php -'example_custom_field' => array( - 'type' => 'my-field', - 'label' => 'My Field', - 'default' => '', - 'foo' => 'bar' -), -``` - -## Enqueue custom field assets - -Developers may also wish to enqueue CSS and JavaScript assets for their fields -while Beaver Builder is active. This is done in the same way you typically -enqueue assets, except that the enqueue calls are wrapped in an if statement -that checks to see if Beaver Builder is active: - -```php -function fl_my_custom_field_assets() { - if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_active() ) { - wp_enqueue_style( 'my-custom-fields', FL_MODULE_EXAMPLES_URL . 'assets/css/fields.css', array(), '' ); - wp_enqueue_script( 'my-custom-fields', FL_MODULE_EXAMPLES_URL . 'assets/js/fields.js', array(), '', true ); - } -} -add_action( 'wp_enqueue_scripts', 'fl_my_custom_field_assets' ); -``` diff --git a/versioned_docs/version-2.9/developer/custom-modules/15-helpers.md b/versioned_docs/version-2.9/developer/custom-modules/15-helpers.md deleted file mode 100644 index d2f0a388..00000000 --- a/versioned_docs/version-2.9/developer/custom-modules/15-helpers.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -id: 15-helpers -title: '15: Helpers' -sidebar_label: '15: Helpers' -slug: helpers ---- - -There are helpers for CSS rendering and settings compatibility, as follows. - -## CSS Rendering Helper - -The CSS helper makes it simple to render complex CSS rules with your settings, -especially settings for multiple device sizes. Just use the methods described -below in your `frontend.css.php` and we'll handle the rest for you. - -### Render a single rule for a single device size - -```php -/** - * Render a single rule for a single device size. - */ -FLBuilderCSS::rule( array( - 'selector' => ".fl-node-$id .some-element", - 'media' => 'max-width: 980px', // Optional. Can be 'default', 'medium', 'responsive' or a custom statement. - 'enabled' => 'bar' === $settings->foo, // Optional. - 'props' => array( - 'background-image' => $settings->bg_image_src, - 'background-repeat' => $settings->bg_repeat_responsive, - ), -) ); -``` - -### Render a single rule/property for all device sizes - -```php -/** - * Render a single rule/property for all device sizes (default, medium, responsive). - * For this to work, your field must be defined as 'responsive' => `true`. - */ -FLBuilderCSS::responsive_rule( array( - 'settings' => $settings, - 'setting_name' => 'align', // As in $settings->align. - 'selector' => ".fl-node-$id .some-element", - 'prop' => 'text-align', -) ); -``` - -### Render the rule/properties for a dimension field - -```php -/** - * Renders the rule/properties for a dimension field. - */ -FLBuilderCSS::dimension_field_rule( array( - 'settings' => $settings, - 'setting_name' => 'padding', - 'selector' => ".fl-node-$id .some-element", - 'unit' => 'px', // Omit if custom unit select is used. - 'props' => array( - 'padding-top' => 'padding_top', // As in $settings->padding_top - 'padding-right' => 'padding_right', - 'padding-bottom' => 'padding_bottom', - 'padding-left' => 'padding_left', - ), -) ); -``` - -### Render the rule/properties for a typography field - -```php -/** - * Renders the rule/properties for a typography field. - */ -FLBuilderCSS::typography_field_rule( array( - 'settings' => $settings, - 'setting_name' => 'typography', // As in $settings->typography - 'selector' => ".fl-node-$id .some-element", -) ); -``` - -### Render the rule/properties for a border field - -```php -/** - * Renders the rule/properties for a border field. - */ -FLBuilderCSS::border_field_rule( array( - 'settings' => $settings, - 'setting_name' => 'item_border', // As in $settings->item_border - 'selector' => ".fl-node-$id .some-element", -) ); -``` - -## Settings Compatibility Helper - -You can change or remove settings for a module in a backwards compatible way -using the settings compatibility helper. All module instances receive a -`filter_settings` method that can be overridden to transform your settings -before they are consumed by Beaver Builder, as in the following example. - -```php -class FLExampleModule extends FLBuilderModule { - - public function __construct() { - parent::__construct( array( - 'name' => 'Example', - ) ); - } - - public function filter_settings( $settings ) { - - /** - * Convert an old setting to a new setting. - * Don't forget to unset the old setting! - */ - if ( isset( $settings->old_setting ) ) { - $settings->new_setting = do_something_with_old_setting( $settings->old_setting ); - unset( $settings->old_setting ); - } - - /** - * Change an existing setting. - */ - if ( isset( $settings->existing_setting ) ) { - $settings->existing_setting = do_something( $settings->existing_setting ); - } - - /** - * Always return the settings when you are done. - */ - return $settings; - } -} -``` diff --git a/versioned_docs/version-2.9/developer/custom-modules/16-live-preview-reference.md b/versioned_docs/version-2.9/developer/custom-modules/16-live-preview-reference.md deleted file mode 100644 index 2a5d4cb6..00000000 --- a/versioned_docs/version-2.9/developer/custom-modules/16-live-preview-reference.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 16-live-preview-reference -title: '16: Live preview reference' -sidebar_label: '16: Live preview reference' -slug: live-preview-reference ---- - -By default, whenever a user changes a module setting, the Beaver Builder -layout will refresh to reflect that change. The default refresh functionality -works in many cases but can be overridden as detailed in the examples below -for an instant preview that doesn't require a refresh. - -Additionally, when developing a module, you must write it in a way that you -account for the default settings as modules are rendered as soon as they are -dropped into a layout. As such, your code should never expect that it's -dealing with user submitted settings as it could be dealing with the default -settings. - -## Important Preview - -You can declare preview rules as important using the `important` param. - -```php -'text_color' => array( - 'type' => 'color', - 'label' => 'Text Color', - 'preview' => array( - 'type' => 'css', - 'selector' => '.my-selector', - 'property' => 'color', - 'important' => true, - ), -), -``` - -## Attribute Preview - -Attribute previews allow you to preview an HTML attribute change on an -element. For example, you can have a text field update the `data-foo` -attribute on an element as shown below. - -```php -'my_text' => array( - 'type' => 'text', - 'label' => 'My Text', - 'preview' => array( - 'type' => 'attribute', - 'attribute' => 'data-foo', - 'selector' => '.my-selector', - 'format_callback' => '', // Optional JS format callback. - ), -), -``` - -## Callback Preview - -Callback previews allow you to specify the name of a JavaScript function in -your field config for implementing custom preview logic. - -```php -'my_color' => array( - 'type' => 'color', - 'label' => 'My Color', - 'preview' => array( - 'type' => 'callback', - 'callback' => 'myPreviewCallback', - ), -), -``` - -Then define your callback function in JavaScript: - -```php -function myPreviewCallback( args ) { - /** - * Use `args` for any kind of preview logic you can dream of! - */ - console.log( args ) -} -``` - -## Text Preview - -A text preview will insert the text of a field into the element specified by -the selector value. The selector value for all preview types is scoped to your -module and only needs to include the selector of the element you wish to -modify. - -```php -'my_text' => array( - 'type' => 'text', - 'label' => __('My Text', 'fl-builder'), - 'preview' => array( - 'type' => 'text', - 'selector' => '.fl-example-text' - ) -), -``` - -## CSS Preview - -A CSS preview will use the value of a field combined with the property value -to change the style of the element specified by the selector value. A unit -value (as shown below) must also be specified for style properties such as -font-size or line-height. - -```php -'my_font_size' => array( - 'type' => 'text', - 'label' => __('My Font Size', 'fl-builder'), - 'description' => 'px', - 'preview' => array( - 'type' => 'css', - 'selector' => '.fl-example-text', - 'property' => 'font-size', - 'unit' => 'px' - ) -), -``` - -You can also define an array of rules for your CSS previews that allows a -field to affect more than one selector and property. - -```php -'my_color' => array( - 'type' => 'color', - 'label' => __('My Color', 'fl-builder'), - 'preview' => array( - 'type' => 'css', - 'rules' => array( - array( - 'selector' => '.selector-1', - 'property' => 'color' - ), - array( - 'selector' => '.selector-2', - 'property' => 'background-color' - ), - ) - ) -), -``` - -## CSS Color Preview - -A CSS color preview is similar to the standard CSS preview except that it only -applies to color picker fields. The value of the color picker field will be -combined with the property value to change the style of the element specified -by the selector value. - -```php -'my_color' => array( - 'type' => 'color', - 'label' => __('My Color', 'fl-builder'), - 'preview' => array( - 'type' => 'css', - 'selector' => '.fl-example-text', - 'property' => 'color' - ) -), -``` - -## None - -A preview type of none will prevent any preview from occurring when a module -setting field is changed. This preview type can be useful if you wish to code -your own custom preview functionality in the module's _settings.js_ file. - -```php -'my_select' => array( - 'type' => 'select', - 'label' => __('My Select', 'fl-builder'), - 'default' => 'option-2', - 'options' => array( - 'option-1' => __('Option 1', 'fl-builder'), - 'option-2' => __('Option 2', 'fl-builder') - ), - 'preview' => array( - 'type' => 'none' - ) -), -``` - -## JavaScript Events - -There are two JavaScript events available to you when working with live -previews that may come in handy: - -### fl-builder.layout-rendered -This event fires on the main builder content wrapper `.fl-builder-content` -every time the layout is rendered or rerendered, typically when saving -settings. It can be used to run additional logic once the render has been -completed. - -**Example:** - -```js -$( '.fl-builder-content' ).on( 'fl-builder.layout-rendered', myCallbackFunction ); -``` - -### fl-builder.preview-rendered -This event fires on the main builder content wrapper `.fl-builder-content` -every time the layout _preview_ is rendered or rerendered when editing -settings. It can be used to run additional logic once the render has been -completed. - -**Example:** - -```js -$( '.fl-builder-content' ).on( 'fl-builder.preview-rendered', myCallbackFunction ); -``` diff --git a/versioned_docs/version-2.9/developer/custom-modules/17-partial-refresh-reference.md b/versioned_docs/version-2.9/developer/custom-modules/17-partial-refresh-reference.md deleted file mode 100644 index e4cc2369..00000000 --- a/versioned_docs/version-2.9/developer/custom-modules/17-partial-refresh-reference.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 17-partial-refresh-reference -title: '17: Partial refresh reference' -sidebar_label: '17: Partial refresh reference' -slug: partial-refresh-reference ---- - -Current versions of Beaver Builder plugin employ Partial Refresh for layout, -in which only the row, column, or module that you are currently editing is -updated when you click Save (or a preview refresh is triggered). However, -custom module developers need to enable this for their modules and be sure -that they are compatible for partial refresh to work. Custom modules that do -not support partial refresh will trigger a full layout refresh when edited. - -### Partial refresh compatibility - -:::info -If your module doesn't use JavaScript, you can skip this section and -enable partial refresh. -::: - -To make your custom modules compatible with partial refresh, any JavaScript -written for them must only run for the current instance that is being edited. -If it doesn't, then when your module is refreshed, the JavaScript will run for -all instances on the page (if any are present) potentially causing things to -break. - -Here's an example of JavaScript code that is NOT partial-refresh compatible -and runs for all instances on the page. - -```js -$( '.my-module-class' ).each( function(){ - // Do something to each module on the page. -} ); -``` - -As you can see, that code will run the same function for each module on the -page, even when just a single module is updated. - -Here's an example of JavaScript code that **is** partial-refresh compatible -and only runs for an individual instance. **Note:** this should be in -_frontend.js.php_. - -```js -$( '.fl-node-' ).css( 'background', '#ffffff' ); -``` - -That code will only run for a module with a specific ID. - -At this point, you may be wondering how you can accomplish this without having -to use _frontend.js.php_ for everything. We typically do that by using -_frontend.js.php_ for the instance code and _frontend.js_ to house the bulk of -the logic. Here's an example: - -In _frontend.js.php_ , we instantiate the module's JavaScript logic for the -individual instance. Any number of parameters can be passed here. We're just -using `id` for this module. - -```js -(function($) { - $(function() { - new FLBuilderAccordion({ - id: '' - }); - }); -})(jQuery); -``` - -In _frontend.js_ we build the `FLBuilderAccordion` object, which has all of -the module's JavaScript logic and uses the parameters passed in < -_frontend.js.php_ (some code omitted for brevity). - -```js -(function($) { - - FLBuilderAccordion = function( settings ) { - this.settings = settings; - this.nodeClass = '.fl-node-' + settings.id; - this._init(); - }; - - FLBuilderAccordion.prototype = { - - _init: function() { - $( this.nodeClass + ' .fl-accordion-button' ).click( $.proxy( this._buttonClick, this ) ); - }, - - _buttonClick: function( e ) { - ... - }, - - _slideUpComplete: function() { - ... - }, - - _slideDownComplete: function() { - ... - } - }; - -})(jQuery); -``` - -### Enable partial refresh - -Once your module is compatible, enabling partial refresh is easy. Just set the -partial_refresh parameter in your module's constructor to true as shown in the -example below and partial refresh will be enabled for your module. - -```php -class MyModuleClass extends FLBuilderModule { - - public function __construct() - { - parent::__construct(array( - 'partial_refresh' => true // Set this to true to enable partial refresh. - )); - } -} -``` diff --git a/versioned_docs/version-2.9/developer/custom-modules/18-override-modules.md b/versioned_docs/version-2.9/developer/custom-modules/18-override-modules.md deleted file mode 100644 index 18473066..00000000 --- a/versioned_docs/version-2.9/developer/custom-modules/18-override-modules.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 18-override-modules -title: '18: Override modules' -sidebar_label: '18: Override modules' -slug: override-modules ---- - -Overriding Beaver Builder modules can be beneficial when you need to modify the module's functionality beyond what is available through its settings or options. This approach can be applied to all Beaver Builder modules. - -:::caution -This article assumes you're using a child theme. -::: - -## Getting Started - -To begin overriding Beaver Builder modules, you must have access to your website's files. This can be achieved by using a file manager plugin or an FTP/SFTP client. Once you have access, follow these steps: - -1. Create a folder named _`fl-builder`_ inside the directory of your child theme: _`/wp-content/themes/THEME_NAME/`_ - -2. Inside the _`fl-builder`_ folder, create another folder named _`modules`_. - -3. Copy the entire folder of the module that you want to override from _`/wp-content/plugins/bb-plugin/modules`_ to your theme's _`fl-builder/modules`_ folder located at _`/wp-content/themes/THEME_NAME/fl-builder/modules`_. - -:::caution -For the module override to work correctly, make sure to copy the entire module folder, including all of its files, instead of just the specific files you want to customize. -::: - -After copying the folder, you can customize the module's code to your liking, but ensure that the module's folder name, main PHP file name, and main class name remain the same as the original module to be recognized by Beaver Builder. - -:::tip -If you’re not seeing your changes, try clearing the Beaver Builder cache. -::: - -## Example - -Although overridden modules can work with any theme, it's recommended to use a child theme to safeguard them from theme updates. In the example below, you can see the folder and file structure that would result from duplicating the Audio, Button, Menu, and Post modules into a BB Theme Child. - -```bash -/bb-theme-child -├── /fl-builder -│   └── /modules -│   ├── /audio -│   ├── /button -│   ├── /menu -│   └── /post-grid -├── functions.php -└── style.css -``` - -## Outdated Modules - -Overridden modules remain unaffected by Beaver Builder updates, which may introduce new features and bug fixes to modules. If you want to ensure that your overridden modules stay current, you need to update the overridden module files on your own. - -To compare the changes made in the Beaver Builder update, you can examine the default module files located in the Beaver Builder modules directory (_`/wp-content/plugins/bb-plugin/modules`_). - diff --git a/versioned_docs/version-2.9/developer/custom-modules/19-localization.md b/versioned_docs/version-2.9/developer/custom-modules/19-localization.md deleted file mode 100644 index 79ecf246..00000000 --- a/versioned_docs/version-2.9/developer/custom-modules/19-localization.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -id: 19-localization -title: '19: Localization' -sidebar_label: '19: Localization' -slug: localization ---- - -You will notice that in all of the examples we are using WordPress' built-in -translation functions such as `__()` and `_e()`. The default text domain that -we have provided, `fl-builder`, should be changed out to your plugin folder's -name should you decide to translate your plugin. See the [WordPress codex](https://make.wordpress.org/polyglots/handbook/) for more info on translating your plugin. diff --git a/versioned_docs/version-2.9/developer/custom-modules/20-module-aliases.md b/versioned_docs/version-2.9/developer/custom-modules/20-module-aliases.md deleted file mode 100644 index bda819d2..00000000 --- a/versioned_docs/version-2.9/developer/custom-modules/20-module-aliases.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: 20-module-aliases -title: '20: Module Aliases' -sidebar_label: '20: Module Aliases' -slug: module-aliases ---- -Module aliases are a way to create copies of modules with pre-configured settings without having to completely write a new module from scratch. While the module aliases settings are pre-configured when a user drops the module on the page, the settings can still be changed by the user. - -## Registering your Module Alias -Registering your Module Alias is done through the `FLBuilder::register_module_alias` method call. That method accepts two parameters: the name of your module class and an associative array of information for building your settings form with the pre-configured settings. - -You can see examples uses of Module Aliases in Beaver Themer and with the Box Module preset options in Beaver Builder. -## Examples - -### Box Module Example -This creates an alias of the Box Module that then is a module for Horizontal Flex Columns. - -```php -FLBuilder::register_module_alias( 'horizontal-stack', [ - 'module' => 'box', - 'name' => __( 'Flex Columns', 'fl-builder' ), - 'description' => __( 'A simple flex column', 'fl-builder' ), - 'category' => __( 'Box', 'fl-builder' ), - 'icon' => 'layout.svg', - 'settings' => [ - 'layout' => 'flex', - 'flex_direction' => 'row', - 'child_flex' => [ 'grow' => '1' ], - 'margin_top' => '0', - 'margin_right' => '0', - 'margin_bottom' => '0', - 'margin_left' => '0', - ], - 'template' => [ - [ 'box', [] ], - [ 'box', [] ], - [ 'box', [] ], - ], -] ); -``` -### Themer Example -This creates a Module alias of the Heading module to create an Archive Title Module by pre-configuring the Heading field to be connected to the Archive title field connection. - -```php -FLBuilder::register_module_alias( 'fl-archive-title', array( - 'module' => 'heading', - 'name' => __( 'Archive Title', 'bb-theme-builder' ), - 'description' => __( 'Displays the title for the current archive.', 'bb-theme-builder' ), - 'group' => __( 'Themer Modules', 'bb-theme-builder' ), - 'category' => __( 'Archives', 'bb-theme-builder' ), - 'enabled' => FLThemeBuilderLayoutData::current_post_is( 'archive' ), - 'settings' => array( - 'tag' => 'h1', - 'connections' => array( - 'heading' => (object) array( - 'object' => 'archive', - 'property' => 'title', - 'field' => 'text', - ), - ), - ), -) ); -``` - diff --git a/versioned_docs/version-2.9/developer/custom-modules/index.md b/versioned_docs/version-2.9/developer/custom-modules/index.md deleted file mode 100644 index 62d2d6f8..00000000 --- a/versioned_docs/version-2.9/developer/custom-modules/index.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: index -title: Custom Modules -sidebar_label: Custom Modules ---- - -Creating custom modules for [Beaver Builder](https://wpbeaverbuilder.com) can -open up a world of possibilities for you and your clients. You can extend and -modify our existing modules to fit a specific use case, or create brand new -modules. - -:::info Beaver Builder Course - -We highly recommend taking advantage of our [Custom Module Developer Course](https://courses.wpbeaverbuilder.com/create-a-custom-beaver-builder-module), which offers a comprehensive guide on creating an Image Comparison Slider module. - -::: - -## Getting Started - -To begin, feel free to download our example plugin below. You can explore the code or refer to the [step-by-step](#step-by-step-guide) guide provided below. - -1. [Download the Example Plugin](https://github.com/beaverbuilder/bb-custom-module-examples/releases/latest/download/bb-custom-module-examples.zip) zip to your computer. -2. Go to your website's **WordPress Admin Dashboard > Plugins > Add New > Upload Plugin**. -3. Upload the *`bb-custom-module-examples-2.0.zip`* file. -4. **Activate** the plugin. -5. Launch Beaver Builder on a page and find the new **Example Modules** section in the Content Panel, containing the **Basic Example** and **Example** modules. - -:::tip -You can override any of the built-in modules by following the steps in the [Override Built-In Modules](18-override-modules.md) article. -::: - -## Step by Step Guide - -In this step-by-step guide, we'll go over how to code custom modules with -their own settings panel just like the modules included with the builder. - -import DocCardList from '@theme/DocCardList'; - - diff --git a/versioned_docs/version-2.9/developer/how-to-tips/add-custom-attributes-to-rows-columns-or-modules.md b/versioned_docs/version-2.9/developer/how-to-tips/add-custom-attributes-to-rows-columns-or-modules.md deleted file mode 100644 index d4672b7e..00000000 --- a/versioned_docs/version-2.9/developer/how-to-tips/add-custom-attributes-to-rows-columns-or-modules.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -id: add-custom-attributes-to-rows-columns-or-modules -title: Add custom attributes to rows, columns or modules -sidebar_label: Add custom attributes to rows, columns or modules ---- - -You can easily add custom attributes when you need them for a particular row, -column or module. The code examples below use filters to add the attributes to -a row, column or module that has a custom ID. - -In all of these examples, assign your own custom ID to the **ID** field in the -**HTML attributes** section of the **Advanced** tab. Substitute your own -attribute name and value and your custom ID in the code and place the code in -the _functions.php_ file of your child theme. - -![](/img/custom-attributes-1.png) - -## Add an attribute to a row - -This example adds an attribute of `data-foo="bar"` to a row that has a custom -ID of `my-row-id`. - -```php -add_filter('fl_builder_row_attributes', function ($attrs, $row) { - if ('my-row-id' == $row->settings->id) { - $attrs['data-foo'] = 'bar'; - } - return $attrs; -}, 10, 2); -``` - -## Add an attribute to a column - -This example adds an attribute of `data-foo="bar"` to a column that has a -custom ID of `my-column-id`. - -```php -add_filter('fl_builder_column_attributes', function ($attrs, $row) { - if ('my-column-id' == $row->settings->id) { - $attrs['data-foo'] = 'bar'; - } - return $attrs; -}, 10, 2); -``` - -## Add an attribute to a module - -This example adds an attribute of `data-foo="bar"` to a module that has a -custom ID of `my-module-id`. - -```php -add_filter('fl_builder_module_attributes', function ($attrs, $row) { - if ('my-module-id' == $row->settings->id) { - $attrs['data-foo'] = 'bar'; - } - return $attrs; -}, 10, 2); -``` - -## Add multiple attributes to a row - -This example demonstrates how to use the filter to add multiple attributes to -a row that has an ID of `my-row-id`. Use this code for columns by changing the -`fl_builder_row_attributes` filter to the column -`fl_builder_column_attributes` filter. Use this code for modules by changing -it to the `fl_builder_module_attributes` filter. - -```php -add_filter('fl_builder_row_attributes', function ( $attrs, $row ) { - if ( 'my-row-id' == $row->settings->id ) { - $attrs['data-foo'] = 'bar'; - $attrs['data-foo-2'] = 'bar-2'; - } - return $attrs; -}, 10, 2); -``` diff --git a/versioned_docs/version-2.9/developer/how-to-tips/create-a-video-lightbox-for-an-amazon-s3-video.md b/versioned_docs/version-2.9/developer/how-to-tips/create-a-video-lightbox-for-an-amazon-s3-video.md deleted file mode 100644 index 2eb4f50a..00000000 --- a/versioned_docs/version-2.9/developer/how-to-tips/create-a-video-lightbox-for-an-amazon-s3-video.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -id: create-a-video-lightbox-for-an-amazon-s3-video -title: Create a video lightbox for an Amazon S3 video -sidebar_label: Create a video lightbox for an Amazon S3 video ---- - -These instructions assume that you haven't uploaded your video to Amazon S3 yet but also describe the folder structure and file permissions you need to get the video lightbox to work. Thanks to one of our members for providing this information! - -1. Create a folder on Amazon S3 that ends as a domain name. - For example, create a folder with your domain name at the end, such as -*name.myurl.com*. - -2. Under that folder, create another folder with any name. -3. Upload the video. -4. Change the permissions of the video file to the following: - * Group: **All user** - * Privilege: **Read Only** - * ACP: **None** - - The method to change the permissions varies depending on the tool you’re using to access the file on Amazon S3. [This article](http://docs.aws.amazon.com/AmazonS3/latest/UG/EditingPermissionsonanObject.html) may be helpful. - -5. In the Beaver Builder editor, create an HTML module where you want your video to appear in your layout. - -6. Add the following code to the HTML module. Substitute an `ID`, your video URL, and your cover image or text URL in the `` tag. See the previous procedure for an example of how to add the cover image tag or text. - - ```markup - ADD TEXT or IMAGE URL - - - ``` - -:::info -If you use this code more than once on the same page, make sure the -ID is unique in each occurrence. In CSS, classes can repeat, but ID values -must always be unique on a page. -::: diff --git a/versioned_docs/version-2.9/developer/how-to-tips/data-storage.md b/versioned_docs/version-2.9/developer/how-to-tips/data-storage.md deleted file mode 100644 index 32d1a315..00000000 --- a/versioned_docs/version-2.9/developer/how-to-tips/data-storage.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -id: data-storage -title: Data storage -sidebar_label: Data storage ---- - -Layout data for Beaver Builder is stored in the WordPress postmeta table in a -serialized array. - -Live Beaver Builder data is stored using the postmeta key `_fl_builder_data,` , -while draft data is stored using the postmeta key `_fl_builder_draft`. - -When you activate Beaver Builder, any content that is already in the WordPress -editor is migrated to a text module within Beaver Builder. In addition, every -time you make changes and publish a Beaver Builder layout, a stripped-down -version of the layout is saved to the WordPress editor so your content is -available should you ever decide to deactivate Beaver Builder. diff --git a/versioned_docs/version-2.9/developer/how-to-tips/disable-minification-and-caching-with-wpdebug.md b/versioned_docs/version-2.9/developer/how-to-tips/disable-minification-and-caching-with-wpdebug.md deleted file mode 100644 index be5a9d16..00000000 --- a/versioned_docs/version-2.9/developer/how-to-tips/disable-minification-and-caching-with-wpdebug.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: disable-minification-and-caching-with-wpdebug -title: Disable minification and caching with WP_DEBUG -sidebar_label: Disable minification and caching with WP_DEBUG ---- - -It is a best practice to set [WP_DEBUG](https://wordpress.org/support/article/debugging-in-wordpress/) -to `true` during development to catch errors that might not otherwise show. -Setting `WP_DEBUG` to **true** in your *wp-config.php* file will have the -following effects: - -* The compiled css/js files that are normally stored in the */uploads/bb-plugin/cache* directory will be unminified and regenerated on every page load. -* It will disable minification and concatenation of the core UI files in the */plugins/bb-plugin/js/_ and */plugins/bb-plugin/css/* directories. - -By default, `WP_DEBUG` is set to false in *wp-config.php*. - -**To change the WP_DEBUG setting:** - - 1. In the main WordPress directory for your site, open *wp-config.php* for editing. - 2. Search for `WP_DEBUG` and change the setting to **true**, as follows: - - ```php - define( 'WP_DEBUG', true ); - ``` - -This is especially useful during the development of custom modules. The CSS -and JavaScript for the current layout will be refreshed on each page load -instead of cached, as it is by default. - -When WP_DEBUG is set to **false**, all of the core UI files in the */plugins -/bb-plugin/js/* and **/plugins/bb-plugin/css/** directories will be minified -and concatenated into *fl-builder.min.css* and *fl-builder.min.js*. - -:::tip **Tip** -Alternatively, you can use the `fl_is_debug` filter which performs the same as setting `WP_DEBUG` to `true`. Simply add the snippet below to your child theme's *functions.php* file. - -```php -add_filter( 'fl_is_debug', '__return_true' ); -``` -::: \ No newline at end of file diff --git a/versioned_docs/version-2.9/developer/how-to-tips/disable-schema-markup-beaver-builder.md b/versioned_docs/version-2.9/developer/how-to-tips/disable-schema-markup-beaver-builder.md deleted file mode 100644 index 31f5e1e9..00000000 --- a/versioned_docs/version-2.9/developer/how-to-tips/disable-schema-markup-beaver-builder.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -id: disable-schema-markup-beaver-builder -title: Disable schema markup in Beaver Builder -sidebar_label: Disable schema markup in Beaver Builder ---- - -If you'd like to disable [Schema](https://schema.org/) markup within Beaver Builder, use the filter: - -```php -add_filter( 'fl_builder_disable_schema', '__return_true' ); -``` diff --git a/versioned_docs/version-2.9/developer/how-to-tips/display-subset-typography-controls.md b/versioned_docs/version-2.9/developer/how-to-tips/display-subset-typography-controls.md deleted file mode 100644 index 60a7eab8..00000000 --- a/versioned_docs/version-2.9/developer/how-to-tips/display-subset-typography-controls.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -id: display-subset-typography-controls -title: Limit Typography section controls -sidebar_label: Limit Typography section controls ---- - -You can add code that displays only a subset of the **Typography** section in modules that include it. For example, if you add the following code to a modules typography array, it will disable font size controls for mobile device settings. - -``` -'disabled' => array( 'responsive' => array( 'font_size' ) ) -``` \ No newline at end of file diff --git a/versioned_docs/version-2.9/developer/how-to-tips/html-css-and-javascript-reference.md b/versioned_docs/version-2.9/developer/how-to-tips/html-css-and-javascript-reference.md deleted file mode 100644 index 0ff7638f..00000000 --- a/versioned_docs/version-2.9/developer/how-to-tips/html-css-and-javascript-reference.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: html-css-and-javascript-reference -title: 'HTML, CSS, and JavaScript reference' -sidebar_label: 'HTML, CSS, and JavaScript reference' ---- - -Each Beaver Builder layout has a dynamically generated and compressed CSS and -JavaScript file, which is cached each time you update or save a layout. - -Each file name starts with the current post ID, followed by either _-layout_ , -_-layout-draft_ , or _-layout-preview_. - -Additionally, instead of loading the CSS and JavaScript for every possible -module, Beaver Builder only loads the CSS and JavaScript for the modules -currently on the page. That includes only enqueuing when needed third-party -libraries such as sliders, tabs, or accordions. - -Beaver Builder’s markup is based on a grid system that consists of five types -of responsive elements. Each element gets a unique class name (for example, -`.fl-node-530d81d3093f5`), which developers can style accordingly. Here are -the five responsive elements and their corresponding CSS classes: - -## Layout (.fl-builder-content) -There is only one layout element per page. It contains all of the other Beaver -Builder elements. - -## Rows (.fl-row) -Rows are child elements of the main layout and contain column groups. - -## Column Groups (.fl-col-group) -Column groups can be thought of as rows within rows. A column group can -contain any number of columns, but column groups cannot be nested. - -## Columns (.fl-col) -Columns come in many shapes and sizes and can contain as many modules as you -want to put in them. As the screen size becomes smaller, a row of columns will -be stacked vertically. Larger columns become 100% width when viewed on smaller -screens, while smaller columns have a max width of 400 px. - -## Modules (.fl-module) -Modules are the last level of elements that can be added to a builder layout. -They contain the dynamically generated markup for each unique module. diff --git a/versioned_docs/version-2.9/developer/how-to-tips/load-css-and-javascript-inline.md b/versioned_docs/version-2.9/developer/how-to-tips/load-css-and-javascript-inline.md deleted file mode 100644 index 9f381a18..00000000 --- a/versioned_docs/version-2.9/developer/how-to-tips/load-css-and-javascript-inline.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -id: load-css-and-javascript-inline -title: Load CSS and JavaScript inline -sidebar_label: Load CSS and JavaScript inline ---- - -Instead of loading Beaver Builder CSS and JavaScript as an asset file, you can -render the CSS inline in the `` tag and the JavaScript inline right -before the closing `` tag. - -This can be a solution to some rare caching issues, but in most cases you -don’t need to do it. - -Add the following line of code to your _functions.php_ file in your child -theme: - -```php -add_filter( 'fl_builder_render_assets_inline', '__return_true' ); -``` diff --git a/versioned_docs/version-2.9/developer/how-to-tips/load-google-fonts-locally-gdpr.md b/versioned_docs/version-2.9/developer/how-to-tips/load-google-fonts-locally-gdpr.md deleted file mode 100644 index fe50fc7c..00000000 --- a/versioned_docs/version-2.9/developer/how-to-tips/load-google-fonts-locally-gdpr.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -id: load-google-fonts-locally-gdpr -title: Load Google Fonts Locally (GDPR) -sidebar_label: Load Google Fonts Locally (GDPR) ---- - -Beaver Builder accesses Google Fonts through its Content Delivery Network (CDN). Google claims to be compliant with GDPR in their use of personal information. If you still want to load Google fonts locally from your own server, this article has the procedure to disable the remote calls to Google Fonts server. - -:::caution - -The complete Google Fonts library will continue to appear in the typography dropdown menu within Beaver Builder modules and the BB Theme Customizer options, but cannot be used unless you load them locally. - -::: - -## Beaver Builder (plugin) - -You can stop all remote calls to Google Fonts made by Beaver Builder by adding the following code to your child theme’s _functions.php_ file. - -```php -// Beaver Builder module enqueued Google Fonts -add_filter( 'fl_builder_google_fonts_pre_enqueue', function( $fonts ) { - return array(); -} ); -``` - -## BB Theme - -You can stop all remote calls to Google Fonts made by the BB Theme by adding the following code to your child theme’s _functions.php_ file. - -```php -// BB Theme enqueued Google Fonts -add_action( 'wp_enqueue_scripts', function() { - global $wp_styles; - if ( isset( $wp_styles->queue ) ) { - foreach ( $wp_styles->queue as $key => $handle ) { - if ( false !== strpos( $handle, 'fl-builder-google-fonts-' ) ) { - unset( $wp_styles->queue[ $key ] ); - } - } - } -}, 101 ); -``` - -## Loading Google Fonts Locally - -If you want to load Google Fonts locally, you need to download the font files and add them to your site. You can do this by following the steps in the [Google Fonts self-hosting guide](https://fonts.google.com/knowledge/using_type/self_hosting_web_fonts) or by using a third-party font plugin. diff --git a/versioned_docs/version-2.9/developer/how-to-tips/map-module-filter-google.md b/versioned_docs/version-2.9/developer/how-to-tips/map-module-filter-google.md deleted file mode 100644 index c1ec7f02..00000000 --- a/versioned_docs/version-2.9/developer/how-to-tips/map-module-filter-google.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -id: map-module-filter-google -title: Filter Google Map arguments in the Map module -sidebar_label: Google Map arguments in the Map module ---- - -The `fl_builder_map_args` filter lets you add or change Google map arguments to filter the location on the map, add language parameters for WPML, or even change the key. Here's an example. - -```php -add_filter( 'fl_builder_map_args', function( $args, $settings ) { - if ( defined( 'ICL_LANGUAGE_CODE' ) ) { - $args['language'] = ICL_LANGUAGE_CODE; - } - return $args; -}, 10, 2 ); -``` diff --git a/versioned_docs/version-2.9/developer/how-to-tips/prevent-css-and-javascript-from-loading-on-archive-pages.md b/versioned_docs/version-2.9/developer/how-to-tips/prevent-css-and-javascript-from-loading-on-archive-pages.md deleted file mode 100644 index d0ad020e..00000000 --- a/versioned_docs/version-2.9/developer/how-to-tips/prevent-css-and-javascript-from-loading-on-archive-pages.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -id: prevent-css-and-javascript-from-loading-on-archive-pages -title: Prevent CSS and JavaScript from loading on archive pages -sidebar_label: Prevent CSS and JavaScript from loading on archive pages ---- - -When you have blog posts or custom posts displayed on an archive page that was -built with Beaver Builder, the CSS and JavaScript might be loaded onto the -archive page. - -Sometimes you want this functionality, other times, not. This behavior occurs -because of the way Beaver Builder taps into the loop to know which CSS and -JavaScript files to load. - -To prevent the CSS and JavaScript files from loading on archive pages, add the -following code to your child theme’s _functions.php_ file. - -```php -if ( is_archive() ) { - remove_action( 'wp_enqueue_scripts', 'FLBuilder::layout_styles_scripts' ); -} -``` diff --git a/versioned_docs/version-2.9/developer/how-to-tips/render-layouts-with-php.md b/versioned_docs/version-2.9/developer/how-to-tips/render-layouts-with-php.md deleted file mode 100644 index 9878afcb..00000000 --- a/versioned_docs/version-2.9/developer/how-to-tips/render-layouts-with-php.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -id: render-layouts-with-php -title: Render layouts with PHP -sidebar_label: Render layouts with PHP ---- - -You can render Beaver Builder layouts using PHP. This is typically done in -theme files to create editable headers and footers, but there are other uses -as well, such as an editable callout below your posts. - -Use the `FLBuilder::render_query` method for this purpose. It accepts an array -of query parameters and works exactly the same way `WP_Query` works, except -that it renders Beaver Builder layout for any posts that are found instead of -returning them. - -See the [WordPress Codex on WP_Query](https://developer.wordpress.org/reference/classes/wp_query/) for -more information about the query parameters that can be passed to this method. - -### Examples - -* Render a page with the ID of 123. - - ```php - FLBuilder::render_query( array( - 'page_id' => 123 - ) ); - ``` - -* Render a Beaver Builder template with the ID of 123. Note that templates, saved rows, and saved modules are all stored using the `fl-builder-template` post type. - - ```php - FLBuilder::render_query( array( - 'post_type' => 'fl-builder-template', - 'p' => 123 - ) ); - ``` diff --git a/versioned_docs/version-2.9/developer/iframe-ui.md b/versioned_docs/version-2.9/developer/iframe-ui.md deleted file mode 100644 index 802f2b9b..00000000 --- a/versioned_docs/version-2.9/developer/iframe-ui.md +++ /dev/null @@ -1,194 +0,0 @@ ---- -id: iframe-ui -title: Beaver Builder Responsive iFrame UI -sidebar_label: Responsive iFrame UI -description: The purpose of this article is to explain what the responsive iframe UI is, how it works, and how it can be extended and integrated. ---- - -The purpose of this article is to explain what the responsive iframe UI is, how it works, and how it can be extended and integrated. - -## Introduction - -Responsive iFrame User Interface (UI) displays the layout that you are editing for accurate previews on a variety of devices. The interface has been updated so that you can preview the layout at any size you choose while you are editing. - -The iframe UI works by using two "windows." One is the browser window you use to view the builder, also referred to as the parent window. The other is an iframe window used to render the page content for you to edit. - -### What's in the Parent Window? - -The parent window contains everything needed for the iframe to load and function properly. Once loaded, the iframe also renders the builder's UI. This includes the majority of the UI including the toolbar, menu, panels, and settings. The parent window loads everything, but the iframe controls the majority of the execution. - -### What's in the iFrame? - -The iframe currently contains the entire page and the builder. When the builder loads, if it is in an iframe, its UI will be displayed in the parent window rather than in the window in which it is loaded. The overlays are the only UI elements rendered within the iframe. - -## How the iFrame UI Loads - -### Loading the UI - -The iframe UI works by intercepting the `template_redirect` hook and rendering a custom HTML document with only what's needed to render the iframe when the `fl_builder_ui` `GET` variable is present. - -As the iframe loads the same page, the builder knows to load the iframe's content rather than the iframe's parent by including the `fl_builder_ui_iframe` `GET` variable. This allows the builder to send AJAX requests from both the parent and the child because the URL is the same. - -### Loading Scripts - -The majority of scripts are loaded within the iframe, allowing the builder to continue working in the legacy UI. In contrast to legacy, the UI renders itself in the parent window once loaded instead of the current one. - -Some scripts are loaded in the parent window as they work on the current window and cannot be adjusted through the config to render and work on the parent window. The media library, for example, must render in the parent in order for it to span the width of the page with smaller devices, which we cannot do with the iframe. - -:::info -See `FLBuilderUIIFrame::enqueue_scripts` in `classes/fl-builder-ui-iframe.php` for more information on script loading in the parent window. Script loading in the iframe remains the same. -::: - -### Loading Styles - -In order to provide a consistent UI for the iframe and the parent window, styles are loaded in both. The reason for this is that the styles for the iframe (mainly overlays) and the parent window UI (toolbar, settings, etc.) are all combined within a few files and plugins, especially if you have Beaver Themer installed. - -It is currently necessary to load those stylesheets in both the iframe and parent window so that they can be applied to elements rendered in both. Third-party developers may also encounter this issue since we recommend enqueuing builder assets using `wp_enqueue_scripts` and checking `FLBuilderModel::is_builder_active`. - -## Developing in the IFrame UI - -### Accessing the Parent Window - -```js -// Within the iframe -const win = window.parent - -// Within the parent window -const win = window -``` - -Since the builder's iframe is loaded on the same domain, we do not have to use `postMessage` to communicate. We can access the parent window from the iframe using `parent.window`, which enables you to execute scripts attached to the parent window or manipulate its DOM with native functions. - -Despite not being in an iframe, `parent.window` is still set. In that legacy context, it'll resolve to the only window that's available, the current window, and your logic should still function as expected. For example, if you called `parent.window.document.getElementById` in your script to access a UI element in the parent window, it would still access that same UI element in the legacy UI. - -### Accessing the IFrame Window - -```js -// Within the iframe -const win = window - -// Within the parent window -const win = FLBuilder.UIIFrame.getIFrameWindow() -``` - -When executing code within the parent window, you can access the iframe's window object by using the `FLBuilder.UIIFrame.getIFrameWindow()` helper function. That will return the iframe's window object or the current window object if the legacy UI is enabled. - -In an iframe, you can access the `window` object or call any globals directly if you need something on the iframe window. If you use the legacy user interface, that will fall back to the current window. - -### Selecting Elements with jQuery - -```js -// Accessing parent UI from within the iframe -$( '.fl-builder-bar', parent.window.document ) -$( 'body', parent.window.document ).find( '.fl-builder-bar' ) - -// Accessing iframe UI from within the parent -var win = FLBuilder.UIIFrame.getIFrameWindow(); -$( '.fl-row', win.document ) -$( 'body', win.document ).find( '.something' ) -``` - -Selecting elements with jQuery works the same, however, there are cases when you need to specify which document you are checking in. jQuery's select function has a second parameter that's not often used (shown above) that lets you specify the document you'd like it to check in. - -That matters because only calling `$( '.fl-builder-bar' )` won't select it if you're selecting from a script within the iframe. That element is rendered in the parent window, so to select it, you need to tell jQuery to look there. Both of the examples above will also fallback to the same window object in the legacy UI. - -When the builder is loaded, jQuery's select function is modified at runtime to also check in the parent window. That will help catch most of the time you forget to specify which document to check but it won't catch everything. The rule of thumb going forward is to know what window you're executing in and to specify the document if you're accessing something outside of that window. - -### Triggering Events with jQuery - -```js -// Triggering parent events within the iframe -parent.window.jQuery( '.fl-button' ).trigger( 'click' ) - -// Triggering iframe events within the parent -var win = FLBuilder.UIIFrame.getIFrameWindow(); -win.jQuery( '.fl-row' ).trigger( 'mouseenter' ) -``` - -Triggering events across windows using jQuery requires you to use that window's copy of jQuery to select the element. That's because jQuery internally stores event data that won't be available if you trigger using the wrong copy. Triggering in the same window requires no changes. - -### Working with TinyMCE - -```js -// When working with settings forms in the iframe -const t = parent.window.tinymce - -// When working with inline editing in the iframe -const t = tinymce -``` - -TinyMCE is one of the scripts that's loaded in both the iframe and parent window. This is because TinyMCE needs to load in the window that it renders. The parent window's copy of TinyMCE is used to work with settings forms since that's where they render. The iframe's copy is used to work with inline editing since that is rendered in the iframe. - -### Enqueuing in the Parent Window - -```php -add_action( 'fl_builder_ui_enqueue_scripts', function() { - // Enqueue builder UI assets. -} ); -``` - -Even though we lock down script loading in the parent window, we still allow scripts to be explicitly enqueued using the `fl_builder_ui_enqueue_scripts` action. Most scripts should still be enqueued in the `FLBuilder` class for backwards compatibility with the legacy UI until we decide to sunset that. - -### Disabling the IFrame UI - -The iframe UI can be disabled with a filter or by going to **Admin > Settings > Beaver Builder > Advanced** and toggling the **Responsive IFrame UI** setting. - -```php -add_filter( 'fl_builder_iframe_ui_enabled', '__return_false' ); -``` - -## Migrating Existing Code - -In most cases, existing code should continue to work in the iFrame UI. However, there are some cases where it will need to be adjusted. - -### Selecting Elements with jQuery - -The most common issue is selecting elements with jQuery. If you have been selecting an element that is now located in the parent window, your code will need to be updated to target it there. If the element is in the iframe window, your code can stay the same. - -```js -// OLD WAY - Only targets elements in the iframe. -$( '.my-element' ) - -// NEW WAY - Targets elements in the parent window. -$( '.my-element', parent.window.document ) -``` - -### Loading Scripts - -The majority of scripts are loaded within the iframe. However, there are some cases where you need to load a script in the parent window. That can be done by enqueuing on the `fl_builder_ui_enqueue_scripts` action. - -Additionally, there may be times where a script reference needs to be shared across windows. TinyMCE is a great example of this. We only want to load it in one place but we need the global variable available to both windows. Below are examples of passing global variables between windows. - -```js -// Passing from the iframe to the parent window. -window.parent.FooBar = FooBar - -// Passing from the parent to the iframe window. -var win = FLBuilder.UIIFrame.getIFrameWindow() -win.FooBar = FooBar -``` - -## Frontend Code Reference - -* `FLBuilder.UIIFrame.isEnabled` - Returns `TRUE` if the iFrame UI is enabled. The legacy UI is enabled if this returns `FALSE`. - -* `FLBuilder.UIIFrame.isUIWindow` - Returns `TRUE` if the script is currently executing in the parent window that renders the builder's UI. - -* `FLBuilder.UIIFrame.isIFrameWindow` - Returns `TRUE` if the script is currently executing in the iframe window. - -* `FLBuilder.UIIFrame.getIFrameWindow` - Returns the iframe's window object. Falls back to the current window for the legacy UI. - -## Backend Code Reference - -* `FLBuilderUIIFrame::is_enabled` - Returns `TRUE` if the iFrame UI is enabled. The legacy UI is enabled if this returns `FALSE`. - -* `FLBuilderUIIFrame::is_ui_request` - Returns `TRUE` if the current request is for the iframe's parent window. - -* `FLBuilderUIIFrame::is_iframe_request` - Returns `TRUE` if the current request is for what should load in the iframe. diff --git a/versioned_docs/version-2.9/developer/module-blocks.md b/versioned_docs/version-2.9/developer/module-blocks.md deleted file mode 100644 index dae4ca21..00000000 --- a/versioned_docs/version-2.9/developer/module-blocks.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -id: module-blocks -title: Module Blocks -sidebar_label: Module Blocks ---- - -Module blocks are modules that work in the WordPress block editor. This is useful if you want to create a module that can be used in both Beaver Builder and the WordPress block editor. - -These modules are built the same way regular modules are built and can be set up to work in the block editor by setting `'block_editor' => true` in your module config. - -```php -class MyModule extends FLBuilderModule { - public function __construct() { - parent::__construct( [ - 'name' => __( 'My Module' ), - 'block_editor' => true, - ... - ] ); - } -} -``` - -While modules should work the same in both editors, they are two very different environments, so inconsistencies may occur. The most common issues are almost always with module JavaScript. So, be sure to double check that if you run into issues. - -:::info - -Modules in the block editor are disabled by default. To enable modules in the block editor, go to Settings > Beaver Builder > Blocks and select the modules you'd like to enable. - -::: diff --git a/versioned_docs/version-2.9/developer/module-deprecations.md b/versioned_docs/version-2.9/developer/module-deprecations.md deleted file mode 100644 index b91d32ef..00000000 --- a/versioned_docs/version-2.9/developer/module-deprecations.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: module-deprecations -title: Module Deprecations -sidebar_label: Module Deprecations ---- - -Module deprecations is a new API in Beaver Builder that allows you to deprecate certain parts of a module in favor of newer code without affecting existing layouts. - -### Why is This Important - -Module deprecations are important because making significant changes to a module could change the layout of published pages, leading to a poor user experience. - -Additionally, we're working towards leaner data handling in Beaver Builder. Currently, when you save a module, _all_ of the settings are saved, even ones you didn't change. In the future, we'd like to only save the settings you changed, making it imperative we have a way to deprecate defaults. Otherwise, if you changed a default that wasn't saved, a module in a published layout could change. - -:::info - -For those building modules as blocks, this is already the case. Only the settings that have changed are saved, making it imperative you deprecate any changes to the defaults. - -::: - -### Filtering Settings Instead of Deprecation - -In some cases, you won't need to deprecate anything. Instead, you can filter the module's settings to make backward-compatible changes before it is saved or rendered. Our [Settings Compatibility documentation](custom-modules/helpers/#settings-compatibility-helper) has more info if that is a better approach for what you are trying to do. - -### Module Deprecation Examples - -We've already used this new API in Beaver Builder 2.9 to remove the wrapper divs from all of the basic modules. You'll see this most notably in the heading module, though others serve as good examples as well. If you need more references than this doc covers, those modules are a good place to look. - -### How Does it Work? - -The module deprecations API works by sticking a version number on each module when added to the layout. If no deprecated versions are defined, the version will be 1. If deprecated versions are defined, the highest version number + 1 will be used as the latest instead. - -That version number is used to load the code associated with it. For example, let's say you deprecated a module's `frontend.php` file and are now on version 2 of the module. For any modules on version 1, `my-module/deprecated/v1/includes/frontend.php` will be loaded instead of the latest at `my-module/includes/frontend.php`. - -### Registering Deprecations - -Three parts of a module can currently be deprecated: **config, files, and defaults.** That is done by adding a `deprecated.php` file in the top-level module directory and calling `FLBuilder::register_module_deprecations` as shown below. - -All of the deprecations for a module must live under an array key in the deprecations array that corresponds to the version with the letter `v` as a prefix. Version numbers must be integers resulting in `v1`, `v2`, `v3`, etc. for versions. - -```php -FLBuilder::register_module_deprecations( 'my-module', [ - 'v1' => [ - 'config' => [ - 'include_wrapper' => true, - ], - 'files' => [ - 'includes/frontend.php', - 'css/frontend.css', - ], - 'defaults' => [ - 'key' => 'value' - ], - ], -] ); -``` - -In the example above, we are deprecating all three parts of the module as version 1. Any existing module will use these deprecations, while any new module added to the page will be version 2 and use the default code. - -#### Deprecating Config - -In the example, we are deprecating the `include_wrapper` config for the module by setting it to `true` for version 1. In our main module file, we set it to `false` so version 2 modules won't have the wrapper. - -```php -class MyModule extends FLBuilderModule { - public function __construct() { - parent::__construct( [ - 'name' => __( 'my-module' ), - 'include_wrapper' => false, - ... - ] ); - } -} -``` - -While that's all that needs to be done to deprecate the wrapper for new modules, you may have HTML, CSS, or JS code that expects it to be present. If so, you'll need to deprecate some files as well. - -#### Deprecating Files - -Any module file except the main class can be deprecated using relative paths in the `files` array, as shown in the example above. Those files must live in a top-level directory named `deprecated` followed by a subdirectory with the version number (e.g., `v1`). - -If you deprecate the files in the example, your directory structure should look like this... - -```bash -my-module -├── css -│ └── frontend.css -├── includes -│ └── frontend.php -├── deprecated -│ └── v1 -│ ├── css -│ │ └── frontend.css -│ └── includes -│ └── frontend.php -├── deprecated.php -└── my-module.php -``` - -By deprecating these files, any modules on version 1 will use the files under `deprecated/v1`, while new modules will use the latest code at the top level. - -#### Deprecating Defaults - -Deprecating defaults allows you to deprecate the defaults for any of the settings your module has defined. For example, if you have a text field... - -```php -'my_text' => [ -'type' => 'text', -'label' => __( 'My Text' ), -'default' => 'Hello World!', -], -``` - -The default can be deprecated like so... - -```php -FLBuilder::register_module_deprecations( 'my-module', [ - 'v1' => [ - 'defaults' => [ - 'my_text' => 'Foo Bar!' - ], - ], -] ); -``` diff --git a/versioned_docs/version-2.9/developer/tutorials-guides/add-a-custom-shape-layer.md b/versioned_docs/version-2.9/developer/tutorials-guides/add-a-custom-shape-layer.md deleted file mode 100644 index ecfe0dde..00000000 --- a/versioned_docs/version-2.9/developer/tutorials-guides/add-a-custom-shape-layer.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: add-a-custom-shape-layer -title: Add a custom shape layer -sidebar_label: Add a custom shape layer ---- - -This tutorial provides instructions on how to register a custom shape programmatically, allowing you to select it from the list of available shapes when configuring top or bottom shapes in row settings. - -Even if you don't have a background in development, you should be able to follow this tutorial successfully. For further details on SVG art and an overview of the process involved in registering shape art in Beaver Builder, along with a screenshot showcasing the final outcome, refer to the article on custom shape art. - -:::tip - -Another way to include Custom Row Shapes is by copying and pasting your shape's SVG code into the Custom Row Shape user interface (UI) within the Beaver Builder Global Settings. - -For additional details, please refer to the [Global Settings](user-interface/global-settings.md#custom-row-shapes) article. - -::: - -## 1. Copy the SVG shape markup - -You'll need an SVG file that defines a shape. If you need to create one, you -can use a vector graphics tool to create a vector shape and export it in SVG -format (or use Inkscape, which uses SVG as its native file format). - -1. Open the SVG file in a text editor. You should see an XML and Doctype declaration at the top of the file, followed by an `` tag. -In the boomerang example, the XML markup for the shape in the exported file is -shown below. (Click the file name to see the XML and Doctype declarations at -the top of the file.) - - ```html - - - - - - - - - - - - - - ``` - -2. Make a note of the values in the `viewBox` attribute, which appears in Line 1 in this example, because you'll use at least the width and height values in the plugin code. The four values (in this example, "0 0 347 85") represent the following information. - - * x position (horizontal position: `0` means the left edge of the viewbox). The value `10` means 10px to the right of the left edge of the viewbox. This is an optional value to set in the plugin code, generally used in cases in which the value is other than 0. - - * y position (vertical position: 0 means the top edge of the viewbox). The value `15` means 15px below the top edge of the viewbox. This is also an optional value in the plugin settings. - - * width (initial width of the shape, in pixels). This is a required value in the plugin code. - - * height (initial height of the shape, in pixels). This is a required value in the plugin code. - -3. Copy the contents of the `` tag, in other words everything in between `` and ``. - - -## 2. Embed the SVG markup in a PHP file - -1. Create a new file in a text editor and paste in the SVG markup that you copied in the previous task. - -2. Add the `fl-shape` class to the outermost element of the SVG shape definition. In the boomerang example, this is the `` tag in Line 5 of the following file: - - ```php - element with fl-shape class added */ - ?> - - - - - - - - - ``` - -3. Copy Lines 1-4 of the code displayed in the previous step and paste it into the top of your file. - -4. Save the file with a *.php* extension. -The name of the example file is *boomerang.svg.php*. - -## 3. Create the folder structure for the plugin - -Here's a screenshot of the folder structure created for the boomerang example -to help visualize the following instructions. The example plugin is named _bb- -custom-shapes-boomerang_. - -![](/img/dev-custom-shape-1.png) - - 1. Create a folder and give it the name (ID) of the plugin. Hyphens are allowed, but no spaces. - 2. Create a subfolder called _shapes_. Move the PHP file you created in the previous task into the _shapes_ folder. - -## 4. Create the plugin code - -1. Create a new file in a text editor and paste in the following code. - - ```php - - Version: 1.0 - */ - - function bb_register_custom_shapes() { - - if ( ! class_exists( 'FLBuilder' ) ) { - return; - } - FLBuilder::register_shape(array( - - 'label' => __( 'Boomerang', 'bb-custom-shapes-boomerang' ), - 'name' => 'boomerang', - - /* Optional x and y origin values, from SVG viewBox - ex: viewBox="x y width height" */ - // 'x' => 0, - // 'y' => 0, - /* Required width and height values from SVG definition */ - 'width' => 347, - 'height' => 85, - /* Optional aspect ratio setting, from the SVG element - see svg spec */ - // 'preserve_aspect_ratio' => 'none' - - /* Include the path to your artwork */ - 'render' => dirname(__FILE__) . '/shapes/boomerang.svg.php', - )); - } - add_action('init', 'bb_register_custom_shapes'); - ``` - -2. Make the following changes to the plugin description in Lines 2-7. This information appears in the plugin title and description in **Plugins > All plugins** on the WordPress admin panel. - - Line 3: Change the plugin name to what you want to appear as the plugin title. - Line 4: Change the description to match your shape. - Line 5: Change to the name of the plugin author. - Line 6: Leave the version 1.0 for a new plugin, or bump this up if you revise the published code. - -3. Change the label and name: - - Line 12: Change the first value (`Boomerang`) to the name that you want to - appear in the list of shapes in the Beaver Builder row settings. Change the - second value (`bb-custom-shapes-boomerang`) to the name you assigned to the - plugin folder in the previous task. - Line 13: Give the shape an ID in lowercase, no spaces. - -4. Insert the values from the `viewBox` attribute of the `` tag (described in the first task above), as follows. - - Lines 17-18: (Optional) If the `viewBox` attribute's x and y values are other - than 0 and you want the upper left corner of the shape to be offset from the - upper left corner of the row by default, uncomment these lines (remove the - double slash) and add the values from the `viewBox` attribute or the values - you prefer. - - Lines 20-21: Add the width and height values from the `viewBox` attribute from - the first task above. - Line 23: (Optional) If you want the default aspect ratio of the shape to stay - the same regardless of the aspect ratio of the viewport (in other words, the - shape of the row), uncomment this line and add a value. By default, the value - is `none`. See [this article](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) for a description of the possible values. - -5. In Line 26, change the name of the file to your PHP file in the _shapes_ folder that contains the SVG shape definition. - -6. Save the file to the top-level folder with the plugin name. In other words, the plugin folder should be structured as shown in the following screenshot. -![](/img/dev-custom-shape-2.png) - -## 5. Compress the file and install the plugin - - 1. Create a zip file containing the top-level folder (in this example, _bb-custom-shapes-boomerang_ ) and its content. - 2. In the WordPress admin panel, go to **Plugins > Add new**. Upload, install, and activate the zip file in the normal fashion. -When the plugin is installed, you should see your plugin title in the list of -installed plugins (in this example, "Boomerang Custom Shape for Beaver -Builder"). - -## 6. Test the plugin - - 1. Open a page for editing in Beaver Builder. - 2. Add a row or open an existing row. - 3. On the **Settings** tab, scroll down to the **Top shape** or **Bottom shape** section and click the **Shape** field to see the list of shapes. Your shape should appear at the bottom of the list. - 4. Select the shape and test the other fields, such as width, height, color, transformations, and skew, to make sure they are all working correctly. - -:::tip **Tip** -If these fields don't respond to the values you enter, verify that -you inserted the `fl-shape` class into the outermost tag of the SVG -definition. -::: diff --git a/versioned_docs/version-2.9/developer/tutorials-guides/add-icons-to-your-custom-modules.md b/versioned_docs/version-2.9/developer/tutorials-guides/add-icons-to-your-custom-modules.md deleted file mode 100644 index 263404f8..00000000 --- a/versioned_docs/version-2.9/developer/tutorials-guides/add-icons-to-your-custom-modules.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: add-icons-to-your-custom-modules -title: Add icons to your custom modules -sidebar_label: Add icons to your custom modules ---- - -If you're a developer and have created a custom module, there are several ways to add an icon to its display in the **Content** panel. - -* You can reuse any icon used by a Beaver Builder module. -* You can add a custom icon by copying it into the module's root directory. -* You can add an icon programmatically. - -## Reuse an Existing Icon - -Icons used for Beaver Builder modules are stored in _wpcontent/bb-plugin/img/svg_ , and you are welcome to use any of those icons for your own module. - -To use an existing icon, modify the `construct` method shown in the chapter on -[adding a module](/beaver-builder/developer/custom-modules/02-add-a-module-to-your-plugin.md) in the custom module developer guilde. Add an `icon` key and reference any icon file in that directory. (You don't need a -path.) For example: - -```php -'icon' => 'button.svg' -``` - -## Add Custom Icon - -You can easily use your own SVG icon. Name it `icon.svg` and place it in the module’s root directory. The icon will be used automatically. No coding required. - -```bash {6} -/my-custom-module -├── /css -├── /includes -├── /js -├── my-custom-module.php -└── icon.svg -``` - -Custom icons should be prepared and tested for 20x20 pixels, which is the size the Content Panel displays them. Avoid any fills or strokes applied to the icon markup because the system will style them differently according to UI circumstances such as dark vs light mode. - -All of the current icons come from the [Dashicons](https://developer.wordpress.org/resource/dashicons/) set, though they may come from other sources in future. Dashicons are a good reference for anyone not familiar with SVG. - -See the Dashicons GitHub repository's [`/svg-min` directory](https://github.com/WordPress/dashicons) for a comprehensive list of all available SVG names. - -## Add an Icon Programmatically - -If you need more programmatic control over which icon displays or want to use -a custom icon with a different file name, you can override your module’s -`get_icon()` method and return an svg string. - -```php -public function get_icon( $icon = '' ) { - return file_get_contents( 'path/to/icon.svg' ); -} -``` diff --git a/versioned_docs/version-2.9/developer/tutorials-guides/change-how-css-and-javascript-are-loaded.md b/versioned_docs/version-2.9/developer/tutorials-guides/change-how-css-and-javascript-are-loaded.md deleted file mode 100644 index 077faa4d..00000000 --- a/versioned_docs/version-2.9/developer/tutorials-guides/change-how-css-and-javascript-are-loaded.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -id: change-how-css-and-javascript-are-loaded -title: Change how CSS and JavaScript are loaded -sidebar_label: Change how CSS and JavaScript are loaded ---- - -Instead of loading Beaver Builder CSS and JavaScript as an asset file, you can -render the CSS inline in the `` tag and the JavaScript inline right -before the closing `` tag. This can be a solution to some rare caching -issues, but in most cases you don’t need to do it. - -Add the following line of code to your functions.php file in your child theme: - -```php -add_filter( 'fl_builder_render_assets_inline', '__return_true' ); -``` - -You'll also see a change in the name of the installed Beaver Themer plugin on -the **Plugins** page. It's now displayed as **Beaver Builder - Themer Add-On**. This change makes it more apparent that Beaver Themer requires the Beaver Builder Plugin to work. diff --git a/versioned_docs/version-2.9/developer/tutorials-guides/common-beaver-builder-plugin-filter-examples.md b/versioned_docs/version-2.9/developer/tutorials-guides/common-beaver-builder-plugin-filter-examples.md deleted file mode 100644 index 2a70aeea..00000000 --- a/versioned_docs/version-2.9/developer/tutorials-guides/common-beaver-builder-plugin-filter-examples.md +++ /dev/null @@ -1,625 +0,0 @@ ---- -id: common-beaver-builder-plugin-filter-examples -title: Common Beaver Builder filter examples -sidebar_label: Common Beaver Builder filter examples -description: Beaver Builder has many filters. This article describes how to use some of the common ones. ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -There is a comprehensive [Hook & Filter Reference](https://hooks.wpbeaverbuilder.com/bb-plugin/) but here's a list of some commonly used filters with their potential uses. This article is aimed at developers and assumes that you know where to put the code and how to tweak it. - -## Remove Beaver Builder filter option in WP post lists - -**Filter:** `fl_builder_admin_edit_sort_bb_enabled` - -In WP admin lists of pages, posts, and custom post types in the back end, there's a Beaver Builder link in the list of post display filters, which limits the display to items that have Beaver Builder layouts. The Beaver Builder link to filter the display is shown in this screenshot. - -![Screenshot of Beaver Builder filter link in WP lists of pages and posts](/img/beaver-builder--bb-common-filter-examples-1.png) - -:::info -The link for the Beaver Builder display filter will only be visible on post types where Beaver Builder has been enabled under **WordPress Admin Dashboard > Settings > Beaver Builder > Post types**. -::: - -If you'd like to remove this Beaver Builder display filter link, add the following line of code to the _functions.php_ file in your child theme. - -```php -add_filter("fl_builder_admin_edit_sort_bb_enabled", "__return_false"); -``` - -## Adding SVG & Other File Type Support - -**Filter:** `fl_module_upload_regex` - -The `fl_module_upload_regex` filter allows developers to modify the regular expression used to validate the file types that can be uploaded to Beaver Builder image fields. These fields are used for incorporating background images in rows and adding images to modules, such as the Photo module. You can also add support for multiple file types by listing each file extension separated by the pipe symbol (`|`). - -:::tip -The [Regex101](https://regex101.com/) website is a valuable resource for obtaining assistance with regular expressions. -::: - -:::caution -The `fl_module_upload_regex` filter only provides support for Beaver Builder and not for WordPress as a whole. In order for it to function, support must also be added to WordPress, which can be achieved through custom code or a third-party plugin. Failing to add support to WordPress will prevent the `fl_module_upload_regex` filter from functioning properly. -::: - -The example code demonstrates how to enable support for SVG files in Beaver Builder image fields. To add support for more file types, you can adjust the code by substituting `svg` with the extension of the desired file type. - -```php -add_filter( - "fl_module_upload_regex", - function ($regex, $type, $ext, $file) { - $regex["photo"] = "#(jpe?g|png|gif|bmp|tiff?|webp|svg)#i"; - - return $regex; - }, - 10, - 4 -); -``` - -## Filter to add a mail service to the Subscribe module - -**Filter:** `fl_builder_subscribe_form_services` - -The fl_builder_subscribe_form_services filter lets you add a service to the list displayed in the Subscribe Form module. Here's an example. - -```php -function bb_subscribe_form_custom_service($services) -{ - $services["convertkit_custom"] = [ - "type" => "autoresponder", - "name" => "ConvertKitCustom", - "class" => "FLBuilderServiceConvertKitCustom", - "file" => - FL_CHILD_THEME_DIR . "/classes/class-fl-builder-service-convertkit.php", - ]; - return $services; -} -add_filter( - "fl_builder_subscribe_form_services", - "bb_subscribe_form_custom_service" -); -``` - -## Add Latin-Extended capabilities for a Google font - -If you have a Google font that includes Latin Extended characters, you can add -that capability to your Beaver Builder layouts. - -Add the following filter to the _functions.php_ file of your child theme and -replace the font name in Line 2 with the name of your Google font family. - -```php {2} -function my_font_subset($subset, $name) -{ - if ($name == "Acme") { - $subset = "&subset=latin,latin-ext"; - } - return $subset; -} -add_filter("fl_font_subset", "my_font_subset", 10, 2); -``` - -:::info - -Not all Google fonts have Latin-extended characters, so make sure the Google font you choose has them. - -::: - -## White label the Ajax crash message - -When Beaver Builder detects a fatal PHP error in AJAX, a popup appears with -instructions for what to do to troubleshoot, as shown in the following -screenshot. - -![](/img/tutorial-guides-white-label-crash.png) - -Add the following filter to your child theme's functions.php file and replace -the placeholder text in this example with your white-labeled product name. - -```php -add_filter("fl_builder_crash_white_label_text", function () { - return "My white-labeled product name"; -}); -``` - -## Lightbox & Special Characters - -**Filter:** `fl_photocaptionregex` - -The Beaver Builder lightbox supports a limited number of special characters as a security measure. -Default allowed characters: `'":() !.,-_|` - -In the example below, the `$` Dollar and `£` Pound Sterling are added to the list of allowed characters. - -```php -add_filter("fl_photocaptionregex", function ($regex) { - return 'a-zA-Z0-9\$£'; -}); -``` - -:::tip -The `$` Dollar symbol is a regex control character, so it must be escaped (`\$`). -::: - -## Always open first tab in row/column/module settings - -**Filter:** `fl_remember_settings_tabs_enabled` - -The Beaver Builder editor remembers the last tab used in the row/column/module settings window. If you want to disable that behavior and have the row, column, or module settings window always open at the first tab, add the following line of code to the _functions.php_ file in your child theme. - -```php -add_filter("fl_remember_settings_tabs_enabled", "__return_false"); -``` - -## Show which modules are in use in a website - -**Filter:** `is_module_disable_enabled` - -You can use this filter to show which Beaver Builder modules and how many of each type are used on the front end of your website. This information is displayed on the **Modules** tab at **Settings > Beaver Builder**, as shown in the following screenshot. - -![Screenshot of the Modules tab in Beaver Builder settings showing which modules are in use](/img/beaver-builder--bb-common-filter-examples-2.png) - -You can see how many times each module is used in pages, posts, and "Templates." The "Templates" category applies both to [saved layout templates](layouts/templates/saved-templates.md) and to [saved rows, columns, and modules](layouts/saved-content.md). - -To display these module counts, add the following line of code to the _functions.php_ file in your child theme. - -```php -add_filter("is_module_disable_enabled", "__return_true"); -``` - -:::info -If you uncheck modules on this tab with this filter applied, it will prevent them from being displayed on the front end of your site. See the following section about [preventing modules from loading site-wide](#prevent-modules-from-loading-site-wide). -::: - -## Prevent modules from loading site-wide - -**Filter:** `is_module_disable_enabled` - -By default, when you disable modules in **Settings > Beaver Builder > Modules**, they do not appear in the module list in the Beaver Builder editor, but any modules of that type already used in layouts are still displayed on web pages. - -If you apply the `is_module_disable_enabled` filter, then when you clear a checkbox to disable a module, it will not be visible in the editor and existing modules of that type will not load or render on the front end either. - -This filter is the same one [described in the previous section about displaying module counts](#show-which-modules-are-in-use-in-a-website). After you apply the filter as shown there, go to **Settings > Beaver Builder** and click the **Modules** tab to view which modules are used where, then uncheck the box for any modules that you don't want to display either on the front end or in the editor. - -:::caution -The Slideshow module is required for row background slideshows to function. -::: - -## Disable inline editing - -**Filter:** `fl_inline_editing_enabled` - -You can use this filter to completely disable inline editing in the Beaver Builder editor. Add the following line of code to the _functions.php_ file in your child theme. - -```php -add_filter("fl_inline_editing_enabled", "__return_false"); -``` - -## Disable notifications from Beaver Builder in the UI - -**Filter:** `fl_disable_notifications` - -There's a bell icon in the Beaver Builder editor UI that, when clicked, shows notifications that are issued by Beaver Builder. You can use this filter to disable these notifications. Add the following line of code to the _functions.php_ file in your child theme. - -```php -add_filter("fl_disable_notifications", "__return_true"); -``` - -## Enable double opt-in for MailChimp integrations - -**Filter:** `fl_builder_mailchimp_double_option` - -Use this filter to enable double opt-in for MailChimp integrations. Returning `true` enables double opt-in; returning `false` enables single opt-in. The default return value for this filter is `false`. - -**Example:** - -```php -// Enable double opt-in. -add_filter("fl_builder_mailchimp_double_option", "__return_true"); -``` - -## Filter front-end AJAX actions in Beaver Builder - -**Filters:** `fl_ajax_*` , appended with an AJAX action listed in _classes/class-fl-builder-ajax.php_ - -Use this set of filters to filter the results of Beaver Builder’s front-end AJAX actions. For example, for the `save_settings` action, the filter would be `fl_ajax_save_settings`, as shown in this example. - -**Example:** - -```php -function my_ajax_save_settings($result, $args) -{ - return $result; -} -add_filter("fl_ajax_save_settings", "my_ajax_save_settings"); -``` - -See the _classes/class-fl-builder-ajax.php_ file for a complete list of core AJAX actions that can be appended to the `fl_ajax_*` filter. - -## Modify the post types that are shown in Beaver Builder Settings - -**Filter:** `fl_builder_admin_settings_post_types` - -Use this filter to modify the post types that are shown at **Settings > Beaver Builder > Post types**, where you can choose which post types have the Beaver Builder editor enabled. - -Add the following code to the _functions.php_ file in your child theme and modify it for the post types you want to filter. In this example, the `unset( $post_types['post'] );` line means that standard posts do not appear in the **Settings > Beaver Builder > Post types** list and cannot have the Beaver Builder editor enabled. - -**Example:** - -```php -function my_builder_admin_settings_post_types($post_types) -{ - unset($post_types["post"]); - return $post_types; -} -add_filter( - "fl_builder_admin_settings_post_types", - "my_builder_admin_settings_post_types" -); -``` - -## Modify custom class names for rows - -**Filter:** `fl_builder_row_custom_class` - -Use this filter to work with the custom class a user adds to a row under **Row Settings > Advanced > Class**. In the following example, if the user enters a custom class called **my-red-class** for a particular column, it appears on the front end as `my-blue-class`. - -**Example:** - -```php -function my_builder_row_custom_class($class) -{ - $class = str_replace("red", "blue", $class); - return $class; -} -add_filter("fl_builder_row_custom_class", "my_builder_row_custom_class"); -``` - -## Modify custom class names for columns - -**Filter:** `fl_builder_column_custom_class` - -Use this filter to work with the custom class a user adds to a column under **Column Settings > Advanced > Class**. In the following example, if the user enters a custom class called **my-red-class** for a particular column, it appears on the front end as `my-blue-class`. - -**Example:** - -```php -function my_builder_column_custom_class($class) -{ - $class = str_replace("red", "blue", $class); - return $class; -} -add_filter("fl_builder_column_custom_class", "my_builder_column_custom_class"); -``` - -## Modify custom class names for modules - -**Filter:** `fl_builder_module_custom_class` - -Use this filter to work with the custom class a user adds to a module in the **Class** field on the **Advanced tab**. In the following example, if the user enters a custom class called **my-red-class** for a particular module, it appears on the front end as `my-blue-class`. - -**Example:** - -```php -function my_builder_module_custom_class($class) -{ - $class = str_replace("red", "blue", $class); - return $class; -} -add_filter("fl_builder_module_custom_class", "my_builder_module_custom_class"); -``` - -## Modify the cache directory path - -**Filter:** `fl_builder_get_cache_dir` - -Use this filter to modify the cache directory path and URL that the Beaver Builder editor uses to store cached images, JavaScript, and CSS files. - -**Example:** - -```php -function my_builder_get_cache_dir($dir_info) -{ - $dir_info["path"] = "/your/custom/path/cache/"; - $dir_info["url"] = "http://www.yourdomain.com/your/custom/url/cache/"; - return $dir_info; -} -add_filter("fl_builder_get_cache_dir", "my_builder_get_cache_dir"); -``` - -## Modify the upload directory path - -**Filter:** `fl_builder_get_upload_dir` - -Use this filter to modify the upload directory path and URL that the builder uses to store things like the cache and custom icons. - -**Example:** - -```php -function my_builder_get_upload_dir($dir_info) -{ - $dir_info["path"] = "/your/custom/path/"; - $dir_info["url"] = "http://www.yourdomain.com/your/custom/url/"; - return $dir_info; -} -add_filter("fl_builder_get_upload_dir", "my_builder_get_upload_dir"); -``` - -## Specify posts to load CSS and JavaScript assets globally - -**Filter** `fl_builder_global_posts` - -Use this filter to specify a post or posts whose CSS and JavaScript assets should be loaded globally. This is useful when you want to display a Beaver Builder layout on every page of your site, such as in a sidebar. This filter is passed in an array to which you can add post IDs that should be loaded globally. - -**Example:** - -```php -function my_global_builder_posts($post_ids) -{ - $post_ids[] = "123"; - return $post_ids; -} -add_filter("fl_builder_global_posts", "my_global_builder_posts"); -``` - -## Add dependencies to the dependency array - -**Filter:** `fl_builder_layout_style_dependencies` - -Use this filter to add dependencies to the dependency array when the main builder layout CSS file is enqueued using `wp_enqueue_style()`. - -**Example:** - -```php -function my_builder_layout_style_dependencies($deps) -{ - $deps[] = "font-awesome"; - return $deps; -} -add_filter( - "fl_builder_layout_style_dependencies", - "my_builder_layout_style_dependencies" -); -``` - -## Add custom module categories before default module categories - -**Filter:** `fl_builder_module_categories` - -Use this filter to add custom module categories that will show up before the default module categories in the Beaver Builder UI. These categories only display if they contain modules. - -**Example:** - -```php -function my_builder_module_categories($categories) -{ - $categories[] = "My Custom Category"; - return $categories; -} -add_filter("fl_builder_module_categories", "my_builder_module_categories"); -``` - -## Modify the post types that can use Beaver Builder - -**Filter:** `fl_builder_post_types` - -Use this filter to modify the post types that the Beaver Builder editor works with. - -**Example** - -```php -function my_builder_post_types($post_types) -{ - $post_types[] = "post"; - return $post_types; -} -add_filter("fl_builder_post_types", "my_builder_post_types"); -``` - -## Override modules enabled in Beaver Builder - -**Filter:** `fl_builder_register_module` - -Use this filter to override the modules that are enabled in the Beaver Builder editor. - -**Example:** - -```php -function my_builder_register_module($enabled, $instance) -{ - $disable = ["accordion", "button", "separator"]; - - if (in_array($instance->slug, $disable)) { - return false; - } - - return $enabled; -} -add_filter("fl_builder_register_module", "my_builder_register_module", 10, 2); -``` - -## Customize a Beaver Builder settings form - -**Filter:** `fl_builder_register_settings_form` - -Use this filter to modify the config array for a settings form when it is registered. See [this article on customizing settings](/beaver-builder/developer/tutorials-guides/customize-settings-forms.md) for a more complete description of the code. - -**Example:** - -```php -function my_builder_register_settings_form($form, $id) -{ - if ("row" == $id) { - // Modify the row settings $form config array. - } elseif ("button" == $id) { - // Modify the button settings $form config array. - } - return $form; -} -add_filter( - "fl_builder_register_settings_form", - "my_builder_register_settings_form", - 10, - 2 -); -``` - -## Modify the CSS compiled and cached - -**Filter:** `fl_builder_render_css` - -Use this filter to modify the CSS that is compiled and cached for each Beaver Builder layout. - -```php -function my_builder_render_css($css, $nodes, $global_settings) -{ - $css .= "#my-selector { property:value; }"; - return $css; -} -add_filter("fl_builder_render_css", "my_builder_render_css", 10, 3); -``` - -## Modify Beaver Builder CSS for CDNs - -**Filter:** `fl_builder_render_css` - -You can utilize the filter to modify URLs, adapting Beaver Builder CSS for CDNs and cloud storage buckets. - -```php -add_filter( - "fl_builder_render_css", - function ($css, $nodes, $global_settings, $include_global) { - $site_url = "https://example.com"; - $cdn_url = "https://123456abcdef.mycdn.net"; - - $css = str_replace($site_url, $cdn_url, $css); - return $css; - }, - 10, - 4 -); -``` - -:::tip -This filter can also be used to solve a [403 error when CloudFlare or another CDN is used to serve images](/beaver-builder/troubleshooting/common-issues/cloudflare-and-403-errors-when-loading-background-images.md/#add-a-filter). -::: - -## Modify the JavaScript compiled and cached - -**Filter:** `fl_builder_render_js` - -Use this filter to modify the JavaScript that is compiled and cached for each Beaver Builder layout. - -```php -function my_builder_render_js($js, $nodes, $global_settings) -{ - $js .= 'console.log( "Hello World!" );'; - return $js; -} -add_filter("fl_builder_render_js", "my_builder_render_js", 10, 3); -``` - -## Modify Beaver Builder JavaScript for CDNs - -**Filter:** `fl_builder_render_js` - -You can utilize the filter to modify URLs, adapting Beaver Builder JS for CDNs and cloud storage buckets. - -```php -add_filter( - "fl_builder_render_js", - function ($js, $nodes, $global_settings, $include_global) { - $site_url = "https://example.com"; - $cdn_url = "https://123456abcdef.mycdn.net"; - - $js = str_replace($site_url, $cdn_url, $js); - return $js; - }, - 10, - 4 -); -``` - -## Modify the config array for a field - -**Filter:** `fl_builder_render_settings_field` - -Use this filter to modify the config array for a field before it is rendered. - -**Example:** - -```php -function my_builder_render_settings_field($field, $name, $settings) -{ - $field["default"] = "My Default Value"; - return $field; -} -add_filter( - "fl_builder_render_settings_field", - "my_builder_render_settings_field", - 10, - 3 -); -``` - -## Don't render shortcodes in the Beaver Builder editor - -**Filter:** `fl_builder_render_shortcodes` - -Use this filter to prevent Beaver Builder from rendering shortcodes in the editor. It is useful if you don’t want shortcodes rendering while the builder UI is active. - -**Example:** - -```php -function my_builder_render_shortcodes($render) -{ - if (FLBuilderModel::is_builder_active()) { - remove_filter("the_content", "do_shortcode", 11); - return false; - } - return $render; -} -add_filter("fl_builder_render_shortcodes", "my_builder_render_shortcodes"); -``` - -## Change defaults for editor settings - -**Filter:** `fl_builder_settings_form_defaults` - -Use this filter to change the defaults for any of the settings forms in Beaver Builder, including global, row, column, and module settings. - -**Example:** - -```php -function my_builder_settings_form_defaults($defaults, $form_type) -{ - if ("global" == $form_type) { - $defaults->default_heading_selector = ".my-heading-selector"; - } - - return $defaults; // Must be returned! -} -add_filter( - "fl_builder_settings_form_defaults", - "my_builder_settings_form_defaults", - 10, - 2 -); -``` - -## Modify the upgrade URL in Beaver Builder Lite - -**Filter:** `fl_builder_upgrade_url` - -Use this filter to modify the upgrade URL in Beaver Builder Lite. This is useful to add an affiliate ID. - -**Example:** - -```php -function my_bb_upgrade_link() -{ - return "YOUR_LINK_HERE"; -} -add_filter("fl_builder_upgrade_url", "my_bb_upgrade_link"); -``` diff --git a/versioned_docs/version-2.9/developer/tutorials-guides/create-a-custom-module-to-compare-images-with-a-slider.md b/versioned_docs/version-2.9/developer/tutorials-guides/create-a-custom-module-to-compare-images-with-a-slider.md deleted file mode 100644 index cc29e662..00000000 --- a/versioned_docs/version-2.9/developer/tutorials-guides/create-a-custom-module-to-compare-images-with-a-slider.md +++ /dev/null @@ -1,248 +0,0 @@ ---- -id: create-a-custom-module-to-compare-images-with-a-slider -title: Create a custom module to compare images with a slider -sidebar_label: Create a custom module to compare images with a slider ---- - -In this tutorial, you'll create a module plugin for Beaver Builder that lets you -add a third-party jQuery plugin called TwentyTwenty to your layouts. - -The [TwentyTwenty jQuery plugin by ZURB](https://github.com/Pross/custom-module-example-twentytwenty) compares two images with a sliding bar, as shown in the following animation. This is useful for comparing two images with the -same dimensions. - -![](/img/dev-create-slider-module-1.gif) - -You can see a working example and all the code contained in this tutorial at -. - -## 1. Create the plugin - -Create the folders, files, and code for WordPress to recognize the plugin -correctly, display the information on the WordPress plugins admin screen, and -load the module correctly. - -1. Navigate to your WordPress plugins folder, typically *wp-content/plugins/*, and create a new subfolder named *custom-module-example-twentytwenty*. -2. Create a file in that subfolder called *fl-module-twentytwenty.php*. -3. Add the following code to create the name, description, and version information that WordPress uses on the plugins admin screen. - - ```php - __( 'Twenty Twenty', 'fl-builder' ), - 'description' => __( 'An basic example module using jQuery TwentyTwenty.', 'fl-builder' ), - 'category' => __( 'Example Modules', 'fl-builder' ), - 'dir' => __DIR__, - 'partial_refresh' => true, - 'url' => plugins_url( '', __FILE__ ), - )); - } -} -``` - -## 4. Add module assets - -Put three jQuery plugin files into the right folders and add code for the -module assets. - -1. Download the TwentyTwenty zip file from . -2. Unzip the file. -3. In the *modules/twentytwenty* folder create two new folders named *css* and *js*. -4. Upload *twentytwenty.css* into the *css* folder. -5. Upload *jquery.twentytwenty.js* and *jquery.event.move.js* into the *js* folder. -6. Open the module file again and add the following code into the `__construct` function. - This code enqueues the assets properly when the module is on the page. - - ```php - __( 'Twenty Twenty', 'fl-builder' ), - 'description' => __( 'An basic example module using jQuery TwentyTwenty.', 'fl-builder' ), - 'category' => __( 'Example Modules', 'fl-builder' ), - 'dir' => __DIR__, - 'partial_refresh' => true, - 'url' => plugins_url( '', __FILE__ ), - )); - - /** - * Now we include our js and css files using the module classes built in methods. - */ - $this->add_js( 'jquery-event-move', $this->url . 'js/jquery.event.move.js', array( 'jquery' ) ); - $this->add_js( 'jquery-twentytwenty', $this->url . 'js/jquery.twentytwenty.js', array( 'jquery' ) ); - $this->add_css( 'twentytwenty', $this->url . 'css/twentytwenty.css' ); - } - } - ``` - -## 5. Add module options - -The module will have two options, one for each photo. The following code uses -the `FLBuilder::register_module` method to register the two options. - -Add the following code to the bottom of *twentytwenty.php*. - -```php -/** - * Register the module and its form settings. - * We are using a very simple form here with only two options, photo_one and photo_two. - */ -FLBuilder::register_module( 'TwentyTwentyExampleModule', array( - 'general' => array( - 'title' => __( 'General', 'fl-builder' ), - 'sections' => array( - 'general' => array( - 'title' => __( 'Section Title', 'fl-builder' ), - 'fields' => array( - 'photo_one' => array( - 'type' => 'photo', - 'label' => __( 'Photo One', 'fl-builder' ), - 'preview' => array( - 'type' => 'none', - ), - ), - 'photo_two' => array( - 'type' => 'photo', - 'label' => __( 'Photo Two', 'fl-builder' ), - 'preview' => array( - 'type' => 'none', - ), - ), - ), - ), - ), - ), -)); -``` - -## 6. Create frontend.php to render the module - -For any Beaver Builder module to render, it needs a *frontend.php* file. - -1. Create a new folder called *includes* inside the *modules/twentwenty* folder. -2. Create a new file *frontend.php* in the *includes* folder. -3. Add the following code. - This will be the HTML output by the module when it is inserted into a layout. - - ```php - -
- - - - - -
- ``` - -As you can see this code simply creates a `
` with the two classes `fl- -twenty-twenty` and `twentytwenty-container` and includes the two images using -the settings we previously registered. - -The TwentyTwenty jQuery plugin will do the rest. - -## 7. Create frontend.js.php to tie it together - -Now add the jQuery snippet needed to make all this work. - -1. Create a file named *frontend.js.php* in the *includes* folder. -2. Add the following code. - - ```js - jQuery(function($) { - $('.fl-node- .fl-twenty-twenty').twentytwenty(); - }); - ``` - - -## 8. Test your new module - -1. In the WordPress admin panel, click **Plugins** and find your new plugin listed. As determined by the code you added in Task 1, the plugin name is **Beaver Builder TwentyTwenty Module**. -2. Activate the plugin. -3. Open a page for editing in Beaver Builder and click the Plus button to open the Content panel. -4. Search for **TwentyTwenty** or scroll to the last section labeled **Example modules** and try using your new module in a layout -If you can't see the images, clear your caches. diff --git a/versioned_docs/version-2.9/developer/tutorials-guides/create-a-filter-to-customize-the-display-of-post-data.md b/versioned_docs/version-2.9/developer/tutorials-guides/create-a-filter-to-customize-the-display-of-post-data.md deleted file mode 100644 index a50a364b..00000000 --- a/versioned_docs/version-2.9/developer/tutorials-guides/create-a-filter-to-customize-the-display-of-post-data.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: create-a-filter-to-customize-the-display-of-post-data -title: Create a filter to customize the display of post data -sidebar_label: Create a filter to customize the display of post data ---- - -If you want to display a custom set of posts and custom post types (CPTs) in a Posts or Search module, you can create a filter to override query args in the `FLBuilderLoop` class. - -:::info -This code applies to custom queries only and doesn't work with the main query. If you want to override the main query, see [this WordPress codex article.](https://developer.wordpress.org/reference/hooks/pre_get_posts/) -::: - -## Code for a custom query that applies to the entire site - -The following code applies to the whole site, so wherever you use a Posts or Search module, the display will show the post types that you enumerated in your array. - -Add the following code to the _functions.php_ file in your child theme. - -```php -function fl_builder_loop_query_args_filter( $query_args ) { - $query_args['post_type'] = array( 'post', 'another-post-type', 'or-another-post-type' ); - return $query_args; -} -add_filter( 'fl_builder_loop_query_args', 'fl_builder_loop_query_args_filter' ); -``` - -In Line 2, replace the post types in the array with the posts types that you want the custom query to display. In this example, the Posts or Search module will display three post types: standard posts, the posts belonging to a CPT called "another-post-type," and the posts from another CPT called "or-another-post-type". - -:::info -In the Custom Query list on the **Content** tab in the Posts or Search module, -you'll still see the list of post types (Posts Pages, and any CPTs that you -have), but it won't matter which one you choose because this custom query is -overriding that selection. -::: - -## Code that applies to specific pages, nodes, or custom IDs - -In actual use, you probably want to add a conditional to make this query apply only to certain pages, nodes, or custom IDs. Here are a couple of code examples. - -### Apply an override only to a Posts module on the home page - -Suppose you want the Posts and Search modules to display both standard posts and WooCommerce products on the front page of your site. Use this code instead of the code in the previous section. - -```php -function bb_custom_loop_query_args( $args ) { - if ( is_front_page() ) { - $args['post_type'] = array( 'post', 'product' ); - } - return $args; -} -add_filter( 'fl_builder_loop_query_args', 'bb_custom_loop_query_args' ); -``` - -### Apply an override to a specific Posts or Search module - -The following code example displays both standard posts and WooCommerce products for a specific Posts module or Search module ID. Note that the conditional statement for the Search module is slightly different from that of the Posts module so we provide both code examples here. - -1. Set a custom ID on the Posts or Search module. -![](/img/dev-filter-post-data-1.png) -2. Add the following code, replacing `id` in Line 2 with the ID you assigned in the previous step. - -**Posts module:** -```php -function fl_builder_loop_query_args_filter( $query_args ) { - if ( 'example-module' == $query_args['settings']->id ) { - $query_args['post_type'] = array( 'post', 'product' ); - } - return $query_args; -} -add_filter( 'fl_builder_loop_query_args', 'fl_builder_loop_query_args_filter' ); -``` - -**Search module:** -```php -function fl_builder_loop_query_args_filter( $query_args ) { - if ( isset($query_args['settings']->settings->id) && 'example-module' == $query_args['settings']->settings->id ) { - $query_args['post_type'] = array( 'post', 'product' ); - } - return $query_args; -} -add_filter( 'fl_builder_loop_query_args', 'fl_builder_loop_query_args_filter' ); -``` diff --git a/versioned_docs/version-2.9/developer/tutorials-guides/customize-keyboard-shortcuts.md b/versioned_docs/version-2.9/developer/tutorials-guides/customize-keyboard-shortcuts.md deleted file mode 100644 index bd51e976..00000000 --- a/versioned_docs/version-2.9/developer/tutorials-guides/customize-keyboard-shortcuts.md +++ /dev/null @@ -1,203 +0,0 @@ ---- -id: customize-keyboard-shortcuts -title: Customize keyboard shortcuts -sidebar_label: Customize keyboard shortcuts ---- - -The [keyboard shortcut system](user-interface/tools-menu.md#keyboard-shortcuts) in the Beaver Builder editor offers many keyboard shortcuts, and they are customizable. You can remove keyboard -shortcuts, modify them, or register your own. - -:::info -Some browsers or operating systems may override particular keyboard -combinations with actions of their own. Be sure to test! Also, if your -keyboard shortcut does override a browser or operating system's keyboard -shortcut, keep in mind that you may have some unhappy users. -::: - -## Find the keys of currently registered keyboard shortcuts - -Each keyboard shortcut has both a key (the string you use to access an item in -an associative array, which we refer to as the dictionary) and a `keyCode` -(the particular key or key combination that is associated with the action). - -To remove or modify a keyboard shortcut, you'll need to find its key in the -`$shortcuts` dictionary. Here's how to find it. As an example, we'll use the -_Open Global Settings_ shortcut. - -### To find the keys for currently registered keyboard shortcuts - -1. Open the Beaver Builder editor. -2. Open the browser’s JavaScript console. - The procedure to open the console depends on your browser. Here are - [instructions for Google Chrome](https://developers.google.com/web/tools/chrome-devtools/console/). - -3. Type `FLBuilderConfig.keyboardShortcuts` into the console and press _Enter_. - In Google Chrome, you'd type this command directly into the console, as shown - in the following screenshot. - ![](/img/dev-keyboard-shortcuts-1.png) - -4. If necessary, expand the `showModules` line, as shown in this screenshot from Google Chrome. - ![](/img/dev-keyboard-shortcuts-2.png) - This produces a list of all of the currently registered keyboard shortcuts. - -5. Find the command you want to modify and make a note of its key, which is the first item in each row. In this example, it's `showGlobalSettings.` - ![](/img/dev-keyboard-shortcuts-3.png) - -6. If you plan to modify the shortcut, inspect the `keyCode` values for the entire set of shortcuts to make sure that the key combination you want to use isn't already registered for another keyboard shortcut. - -:::info -The word `mod` in some of the `keyCode` values is a special token -used to signify the current platform’s standard modifier key. On Windows, -`mod` will be translated to Ctrl for the control key, while on macOS, mod -will be translated to the command ⌘ key. -::: - -### Keyboard shortcut list - -- **showModules:** j -- **showRows:** k -- **showTemplates:** l -- **showSaved:** ; -- **saveTemplate:** mod + j -- **previewLayout:** p -- **responsiveEditing:** r -- **showGlobalSettings:** mod + u -- **showLayoutSettings:** mod + y -- **toggleUISkin:** o -- **showSearch:** mod + i -- **showSavedMessage:** mod + s -- **publishAndRemain:** mod + p -- **cancelTask:** esc -- **undo:** mod + z -- **redo:** shift + mod + z - -## The fl_builder_keyboard_shortcuts filter - -The `fl_builder_keyboard_shortcuts` filter is used to remove or modify -existing keyboard shortcuts or to register new ones. It expects one argument – -the `$shortcuts` array – which is a dictionary of all the registered -shortcuts. - -:::tip **Tip** -Since this is a filter, not an action, always return the `$shorcuts` -variable at the end of your filter function, as shown in the code examples -below. -::: - -## Remove a keyboard shortcut - -Remove any keyboard by unsetting its key. The following code removes the _Go -to Previous Tab_ keyboard shortcut. - -```php -add_filter("fl_builder_keyboard_shortcuts", function ($shortcuts) { - unset($shortcuts["goToPrevTab"]); - return $shortcuts; -}); -``` - -This will remove the _Go to previous tab_ command from Beaver Builder and also -remove it from the list displayed at **Tools > Keyboard shortcuts**. - -To remove another keyboard shortcut, replace `goToPrevTab` with the key of the -shortcut you want to remove. - -## Modify a keyboard shortcut - -You can change the key combination that a shortcut uses by using the -`fl_builder_keyboard_shortcuts` filter with the key value of that particular -shortcut entry. - -### To change the keyboard shortcut - -1. Add the following code to the _functions.php_ file in your child theme and modify it as described in the following steps. - -```php -add_filter("fl_builder_keyboard_shortcuts", function ($shortcuts) { - $shortcuts["showGlobalSettings"]["keyCode"] = "mod+b"; - return $shortcuts; -}); -``` - -2. In the `$shortcuts` parameter, change the key to the one you want to modify. -3. Set the new `keyCode` value that you want to use for the keyboard shortcut. You can use the following keys or key combinations. - -### Options for `keyCode` values - -- A single lowercase letter, symbol, or special key -- mod+ a single lowercase letter, symbol, or special key - -**Special keys** use the following values: `backspace`, `tab`, `enter`, -`return`, `capslock`, `esc`, `escape`, `space`, `pageup`, `pagedown`, `end`, -`home`, `left`, `up`, `right`, `down`, `ins`, `del`, `plus`. - -## Register a new keyboard shortcut - -You can use the `fl_builder_keyboard_shortcuts` filter to create an entirely -new keyboard shortcut. Virtually anything that you can accomplish in -JavaScript can be registered as a shortcut – you just need a function or -object method in your JavaScript to fire when your shortcut is invoked. - -### To register a new keyboard shortcut - -1. In your child theme's _functions.php_ file, add a new entry with a key for your keyboard shortcut and assign it a dictionary array containing a `label` and a `keyCode` item. - -:::tip **Tip** -Make a note of the key string you set for your action -(doMyCustomShortcut in this case) because you’ll need it to handle the event -firing in a later step. -::: - -```php -add_filter("fl_builder_keyboard_shortcuts", function ($shortcuts) { - $shortcuts["doMyCustomShortcut"] = [ - "label" => __("Do My Custom Action", "my-plugin"), - "keyCode" => "mod+t", - ]; - return $shortcuts; -}); -``` - -2. Open a page for editing in Beaver Builder or reload a page that's open and check to see if the shortcut is displayed in the list at **Tools > Keyboard Shortcuts**. -3. Enqueue your custom JavaScript to run when Beaver Builder is active, using the following code. - -```php -add_action("wp_enqueue_scripts", function () { - // Check if Beaver Builder is active - if (class_exists("FLBuilderModel") && FLBuilderModel::is_builder_active()) { - /** - * Enqueue your custom JavaScript file - * - * Be sure to use the appropriate url reference function for whether your - * code is contained in a custom plugin or theme. - * - * Include fl-builder-min as a dependency for your script to ensure - * Beaver Builder as well as jQuery are available when your script runs. - */ - wp_enqueue_script( - "my-builder-script", - get_stylesheet_directory_uri() . "/js/my-builder-script.js", - ["fl-builder-min"] - ); - } -}); -``` - -4. Inside your JavaScript file, create a function that will fire when your shortcut is triggered and register the script with Beaver Builder, using the key from the first step. - -```php -(function( $ ) { - // Create a function to fire when your custom shortcut is triggered - function doMyCustomShorcut() { - // Work done here - alert( 'Hey, it worked!' ); - } - $(function() { // Once the document is ready - // Register a hook listener using the key that you registered - // your shortcut with along with the function it should fire. - FLBuilder.addHook('doMyCustomShortcut', doMyCustomShorcut ); - }); -})( jQuery ); -``` - -5. Reload the Beaver Builder editing page in your browser and try out your new keyboard shortcut! diff --git a/versioned_docs/version-2.9/developer/tutorials-guides/customize-row-resizing-behavior.md b/versioned_docs/version-2.9/developer/tutorials-guides/customize-row-resizing-behavior.md deleted file mode 100644 index fe7733fd..00000000 --- a/versioned_docs/version-2.9/developer/tutorials-guides/customize-row-resizing-behavior.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: customize-row-resizing-behavior -title: Customize row resizing behavior -sidebar_label: Customize row resizing behavior ---- - -Row resizing behavior controls the max width of the content container within -rows. Row resizing capability is enabled by default for any user with -unrestricted editing permissions. - -If you don't want to allow rows to be resized or you want to choose a -different max-width limitation, there's a filter to modify this behavior: -`fl_row_resize_settings`. - -## Filter overview - -The filter is passed an array that configures whether or not row resize is -enabled and what the `max` and `min` widths should be, as shown in the -following code. - -```php -$settings = array( - 'userCanResizeRows' => true, - 'minAllowedWidth' => 300, /* Integer or false */ - 'maxAllowedWidth' => false, /* Integer or false */ -); -``` - -The `userCanResizeRows` key accepts a boolean value. If it is set to `false`, -the two other keys (`minAllowedWidth` and `maxAllowedWidth`) are not required. - -The `minAllowedWidth` and `maxAllowedWidth` keys either take an integer -representing a pixel width or `false` to express that there is no limit. - -:::important **Notes:** -* For UI integrity, even if `minAllowedWidth` is set to `false`, the system will not allow rows to shrink lower than 100px in width. -* If you remove unrestricted editing capabilities from certain user roles in **Settings > Beaver Builder > User access > Unrestricted editing**, it will override the code shown here for users with those roles. -::: - -## Filter examples - -Here are some examples that you can just copy and paste into your child -theme's _functions.php_ file. - -### Remove row resize capability - -The following code removes the drag handles from the layout and the max -content width setting from the row settings screen for individual rows. - -```php -//Remove row resize ability -add_filter( 'fl_row_resize_settings', function( $settings ) { - $settings['userCanResizeRows'] = false; - return $settings; -}); -``` - -To re-enable row resizing capabilities, remove the code. - -### Limit minimum or maximum row content width - -The following code sets a minimum and maximum width of the content container. -You can modify the values for each setting to either a specific number of -pixels or `false` for no limit. In this example, there is no limit on the -minimum width, and the maximum width is 1100px. - -```php -add_filter( ‘fl_row_resize_settings’, function( $settings ) { - $settings = array( - ‘userCanResizeRows’ => true, - ‘minAllowedWidth’ => false, /* Integer or false */ - ‘maxAllowedWidth’ => 1100, /* Integer or false */ - ); - return $settings; -}); -``` - -### Disable row resize for a specific post type - -The following code disables row resizing ability for standard posts. - -```php -add_filter( 'fl_row_resize_settings', function( $settings ) { - if ( 'post' == get_post_type() ) { - $settings['userCanResizeRows'] = false; - } - return $settings; -}); -``` - -### Tie the max possible width to global settings - -To cap the max possible width to the global row max width, use the global -`row_width` setting, as shown in the following code. - -```php -add_filter( 'fl_row_resize_settings', function( $settings ) { - $global_settings = FLBuilderModel::get_global_settings(); - $settings['maxAllowedWidth'] = $global_settings->row_width; - return $settings; -}); -``` diff --git a/versioned_docs/version-2.9/developer/tutorials-guides/customize-settings-forms.md b/versioned_docs/version-2.9/developer/tutorials-guides/customize-settings-forms.md deleted file mode 100644 index e5de9444..00000000 --- a/versioned_docs/version-2.9/developer/tutorials-guides/customize-settings-forms.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: customize-settings-forms -title: Customize settings forms -sidebar_label: Customize settings forms -description: Information about using a Beaver Builder filter to customize Beaver Builder settings forms. ---- - - -It is possible to customize any of the settings forms in Beaver Builder, -including the ones built in. - -You'll need a solid grasp of how settings forms are created to understand how to customize them, so If you haven't already, see our [custom module guide](/beaver-builder/developer/custom-modules/index.md) before continuing. That guide has everything you'll need. - -To customize a settings form, use `fl_builder_register_settings_form`, as shown in the following code. - -```php -function my_builder_register_settings_form( $form, $id ) { - if ( 'row' == $id ) { - // Modify the $form array for rows as needed. - } - elseif ( 'button' == $id ) { - // Modify the $form array for button modules as needed. - } - return $form; -} -add_filter( 'fl_builder_register_settings_form', 'my_builder_register_settings_form', 10, 2 ); -``` - -In the callback function for that filter, you will receive the following two variables. - -## $form (array) -This is the configuration array for the form that was passed to the -register method when it was created. You can modify this as needed to -customize a settings form. - -:::tip **Tip** -Removing settings can lead to errors, so it's usually best to add and -not remove core settings. -::: - -## $id (string) -This is the ID for the form that was passed to the register method when it was created. For modules, this is the module's folder slug. - -See also the Beaver Themer information about [adding settings forms](/beaver-themer/developer/customize-field-connections-themer#add-a-settings-form). diff --git a/versioned_docs/version-2.9/developer/tutorials-guides/install-beaver-builder-via-composer.md b/versioned_docs/version-2.9/developer/tutorials-guides/install-beaver-builder-via-composer.md deleted file mode 100644 index 00d3ba0f..00000000 --- a/versioned_docs/version-2.9/developer/tutorials-guides/install-beaver-builder-via-composer.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -id: install-beaver-builder-via-composer -title: Install Beaver Builder via Composer -sidebar_label: Install Beaver Builder via Composer ---- - -You can install Beaver Builder Plugin, Beaver Builder Theme, or Beaver Themer -via [Composer](https://getcomposer.org). - -## Install with composer.json - -Create a composer.json file in your WordPress root folder and add the -following code. Replace KEY with your key from your [My Account](https://www.wpbeaverbuilder.com/my-account/) page. - -```json -{ - "repositories": { - "beaver-builder": { - "type": "composer", - "url": "https://composer.wpbeaverbuilder.com/KEY" - } - }, - "require": { - "beaver-builder/bb-plugin-starter": "*", - "beaver-builder/bb-theme": "*", - "beaver-builder/bb-theme-builder": "*" - } -} -``` - -:::info - -Substitute `-starter` for your license type, for example `-professional` or `-unlimited`. - -::: - -Run `composer install` in CLI to install the latest versions of all three -packages in their correct plugin and theme folders. To install specific -versions, substitute the `*` in the JSON file with the version you require. - -## Using a global config - -You can add your repo link to the global composer config so you can then -install the packages via CLI without even needing a composer.json file. Run -the following command in CLI: - -```bash -composer config --global repositories.beaver-builder composer https://composer.wpbeaverbuilder.com/KEY -``` - -After the global config is added you can then install any version of any -package with a single-line command. Here are a few examples: - -- `composer require beaver-builder/bb-plugin-starter` - Installs the latest available Starter plan of Beaver Builder. - -Substitute `starter` for your license type: - -- Starter license: `bb-plugin-starter` -- Professional license: `bb-plugin-professional` -- Unlimited license: `bb-plugin-unlimited` - -Legacy license types - -- Standard license: `bb-plugin-standard` -- Pro license: `bb-plugin-pro` -- Agency license: `bb-plugin-agency` - -You can also install specific versions of Beaver Builder, BB Theme, or Beaver Themer specific versions: - -- `composer require beaver-builder/bb-plugin-starter:2.8.4.1` - Installs the Starter plan 2.8.4.1 version of Beaver Builder. - -- `composer require beaver-builder/bb-theme` - Installsthe latest version of the Beaver Builder Theme. - -- `composer require beaver-builder/bb-theme-builder` - Ininstall the latest version of Beaver Themer. diff --git a/versioned_docs/version-2.9/developer/tutorials-guides/remove-rename-tools-menu-items.md b/versioned_docs/version-2.9/developer/tutorials-guides/remove-rename-tools-menu-items.md deleted file mode 100644 index 148e3257..00000000 --- a/versioned_docs/version-2.9/developer/tutorials-guides/remove-rename-tools-menu-items.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: remove-rename-tools-menu-items -title: Rename or remove Tools menu items -sidebar_label: Rename or remove Tools menu items ---- - -This tutorial gives you details of how to customize the [Tools menu](user-interface/tools-menu.md), such as removing or renaming menu items. - - -## Remove menu items - -The code example below shows how to remove menu items and includes some of the main **Tools** menu items. You can find all **Tools** menu `$views` item ID's by searching for `// Tools` in the */bb-plugin/classes/class-fl-builder.php* file. - -```php -add_filter( 'fl_builder_main_menu', function( $views ) { - - unset( $views['main']['items'][04] ); //Publish Layout - unset( $views['main']['items'][05] ); //Separator Line - unset( $views['main']['items'][10] ); //Save Layout - unset( $views['main']['items'][20] ); //Duplicate Layout - unset( $views['main']['items'][30] ); //Preview Layout - unset( $views['main']['items'][31] ); //Responsive Editing - unset( $views['main']['items'][35] ); //Revisions - unset( $views['main']['items'][40] ); //Separator Line - unset( $views['main']['items'][50] ); //Layout CSS & Javascript - unset( $views['main']['items'][60] ); //Global Settings - unset( $views['main']['items'][65] ); //Themer Layouts (Beaver Themer required) - unset( $views['main']['items'][70] ); //Separator Line - unset( $views['main']['items'][80] ); //Change UI Brightness - unset( $views['main']['items'][100] ); //WordPress Admin - unset( $views['main']['items'][110] ); //Help - unset( $views['main']['items'][120] ); //Keyboard Shortcuts - - return $views; -}); -``` - -## Rename menu items - -The code example below renames **Save Layout** to **Save My Layout**. - -```php -add_filter( 'fl_builder_main_menu', function( $views ) { - - $views['main']['items'][10]['label'] = 'Save My Layout'; - - return $views; - -}); -``` diff --git a/versioned_docs/version-2.9/developer/tutorials-guides/wp-cli-plugin-theme.md b/versioned_docs/version-2.9/developer/tutorials-guides/wp-cli-plugin-theme.md deleted file mode 100644 index ce935440..00000000 --- a/versioned_docs/version-2.9/developer/tutorials-guides/wp-cli-plugin-theme.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: wp-cli-plugin-theme -title: WP-CLI for Beaver Builder Plugin and Theme -sidebar_label: WP-CLI for Beaver Builder Plugin and Theme -description: Description of Beaver Builder's commands to use with WP-CLI. ---- - -[WP-CLI](https://wp-cli.org/) is a set of command-line tools for managing -WordPress installations without using a web browser. You can perform WordPress tasks such as updating plugins and configuring multisite installs. - -You can also use WP-CLI to perform certain tasks in Beaver Builder. This article describes the commands available for the Beaver Builder plugin and theme. To see a description of the Beaver Themer commands, see [this article](/beaver-themer/developer/wp-cli-for-beaver-themer). - -## Accessing WP-CLI - -After you've installed WP-CLI, use SSH to access your hosting server. Navigate to the WordPress installation directory that you want to work in and enter the following command to get a list of all options: - -```bash -wp beaver -``` - -The on-screen information tells you what commands are available and the -syntax of each command, with options and examples. - -## Clear the Beaver Builder and Beaver Theme cache - -This command clears the Beaver Builder [plugin cache](/beaver-builder/troubleshooting/debugging/issue-fixer-clear-the-cache.md) or both the Beaver Builder plugin and Beaver Builder Theme caches: - -```bash -wp beaver clearcache -``` - -**Options:** - -* `--network` -Clears the Beaver Builder cache for all sites on a network. -* `--all` -Clears both the Beaver Builder plugin and Beaver Builder Theme caches. - -### Examples - -#### Single Site - -* Clear the Beaver Builder Plugin cache on your site. -`wp beaver clearcache` - -* Reset the Beaver Theme cache on your site. -`wp beaver theme clearcache` - -* If the Beaver Builder Theme is active, clear both caches. -`wp beaver clearcache --all` - -#### Multisite - -* Clear the Beaver Builder plugin cache on all subsites of a multisite installation. -`wp beaver clearcache --network` - -* Clear the Beaver Builder plugin cache and reset the Beaver Builder Theme cache on all subsites of a multisite installation. Beaver Theme must be active on the root site. -`wp beaver clearcache --network --all` - -## Activate or deactivate the Beaver Builder license key for a domain - -The following command activates or deactivates the Beaver Builder license key and registration of the domain in your account at *wpbeaverbuilder.com*. - -```bash -wp beaver register -``` - -**Options:** - -* `--deactivate` -Deactivates this domain at *wpbeaverbuilder.com* and removes the license. -* `--license` -License key value to use - -### Examples - -* Activate the license (substitute your license key number) and register the domain whose directory you are in: -`wp beaver register --license=01234567890` - -* Activate the license when the license is defined in *wp-config.php* using `FL_LICENSE_KEY global`: -`wp beaver register` - -* Deactivate the license for the domain whose directory you are in: -`wp beaver register --deactivate` - -## List Beaver Builder global settings - -Returns the list of Beaver Builder global settings. - -```bash -wp beaver global --list -``` - -## Update a Beaver Builder global setting - -Normally you manage global settings at **Tools > Global Settings** in the Beaver Builder editor, but you can also change individual global settings with a WP-CLI command by using the setting's ID and assigning a new value. Here's the basic command: - -```bash -wp beaver global-update -``` - -**Options:** - -* `--id` -The ID for the global option. - -* `--value` -The value for the global option. - -### Example - -Hide the page title for the WordPress theme you're using by changing the value of the **CSS selector** option in **Tools > Global settings** in the Beaver Builder editor. - -```bash -wp beaver global-update --id=default_heading_selector --value=.fl-post-header -``` -This command assigns the value `.fl-post-header` to the **CSS selector** field in **Tools > Global Settings**. - -:::info - -`.fl-post-header` is the selector for the Beaver Builder Theme and is the default **CSS selector** value. [Follow this article](basics/show-hide-page-title.md) to find the selector for your theme. - -::: diff --git a/versioned_docs/version-2.9/getting-started/install.md b/versioned_docs/version-2.9/getting-started/install.md deleted file mode 100644 index 71616439..00000000 --- a/versioned_docs/version-2.9/getting-started/install.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -id: install -title: Install Beaver Builder -sidebar_label: Installation ---- - -This article walks you through every step of installing and activating Beaver Builder on your WordPress site. - -
- -
- -## Download - -Download the Beaver Builder plugin zip from the [My Account](https://www.wpbeaverbuilder.com/my-account/) page. Your license key also appears on that page. - -:::tip -If you're a macOS/Safari user, by default your zip files are unzipped when you download them. This will cause a problem for installing the Beaver Builder plugin because you need to upload the zip file to your WordPress site. - -This is easy to fix by disabling a preference in Safari, either temporarily or permanently, following the instructions below. Alternatively, you can download the Beaver Builder plugin and theme files with a different browser, such as Firefox or Chrome. - -1. In the Safari menu, go to **Safari > Preferences**. At the bottom of the **General** tab, clear the checkbox **Open "safe" files for downloading**. - -2. Go to your [My Account](https://www.wpbeaverbuilder.com/my-account/) page and download the plugin again, and optionally the theme and child theme if you are licensed to use it. - -3. The files will now download as zip files, which you can use to upload to your WordPress site. -::: - -## Install - -1. From your WordPress Admin Dashboard, go to **Plugins > Add New**. - -2. Click the **Upload plugin** button at the top of the screen. - -3. Click **Browse** and select the downloaded zip file on your local system. - -4. After you have selected the file, click on the **Install Now** button. - - :::info - If you have the [Lite version](https://wordpress.org/plugins/beaver-builder-lite-version/) of the plugin installed, it is automatically deactivated when you install a premium version. You can delete the Lite plugin without losing your layouts. - ::: - - :::tip - With the introduction of [WordPress 5.5](https://make.wordpress.org/core/2020/07/29/miscellaneous-developer-focused-changes-in-wordpress-5-5/), it is no longer necessary to uninstall your existing Beaver Builder plugins when upgrading or downgrading to a new version. - - By following the steps mentioned earlier to install the zip file, WordPress will present a prompt that allows you to choose whether you want to replace the currently installed version with the one you are uploading. Simply click on the "Replace current with uploaded" button, and WordPress will handle the rest of the process. - ::: - -5. If you're doing a fresh installation of any premium version, click **Activate** to activate the plugin. - -## Activate your license - -1. From your WordPress Admin Panel, go to **Settings > Beaver Builder**. - -2. Click the **License tab**. - -3. For new installations, add your license key, which you can find on the [My Account](https://www.wpbeaverbuilder.com/my-account/) page. - For upgrades and downgrades, check to make sure your license is still active. The license number should remain the same. diff --git a/versioned_docs/version-2.9/getting-started/launch-builder.md b/versioned_docs/version-2.9/getting-started/launch-builder.md deleted file mode 100644 index ff895675..00000000 --- a/versioned_docs/version-2.9/getting-started/launch-builder.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: launch-builder -title: Launch Beaver Builder -sidebar_label: Launch Beaver Builder -description: Instructions for launching the Beaver Builder editor. ---- - -This article contains both video and written instructions for accessing the Beaver Builder editor from both the WordPress standard and classic editors and from other locations in the WordPress admin dashboard or admin bar. - -
- -
- -## WordPress Gutenberg - -When you create a page or open an existing page in the WordPress block editor, -you'll see the choice of **Launch Beaver Builder** or Use Standard Editor, as shown in the following screenshot. - -![Launch Beaver Builder using WordPress Gutenberg](/img/beaver-builder/getting-started--launch-builder--1.jpg) - -## Classic Editor - -Create a new page and click the **Beaver Builder** tab or open an existing page for editing in WordPress and click **Launch Beaver Builder** on the **Beaver Builder** tab, as in the following screenshot. - -![Launch Beaver Builder using WordPress classic editor](/img/beaver-builder/getting-started--launch-builder--2.jpg) - -## All Pages list - -Mouse over a page in the **WordPress Admin Dashboard > Pages > All Pages** list, then click the **Beaver Builder** link. When a Beaver Builder layout already exists for a page, the Beaver Builder link is followed by a green button, as you can see in the screenshot. - -When a Beaver Builder layout hasn't been created yet, it's followed by a pale -gray or white button. - -![Launch Beaver Builder from the WordPress all pages list](/img/beaver-builder/getting-started--launch-builder--3.jpg) - -:::tip -By default, the Beaver Builder editor is enabled for the Pages post type only. You can [enable posts and custom post types in the Beaver Builder settings](settings/post-types.md). -::: - -## WordPress admin bar - -If you're viewing a page and you're logged in, the WordPress admin bar appears -on a large screen, and you can click the **Beaver Builder** link to edit the -page. - -![Launch Beaver Builder from the WordPress admin bar](/img/beaver-builder/getting-started--launch-builder--4.jpg) - - -When a Beaver Builder layout already exists for the page, the Beaver Builder -link is followed by a green button, as you can see in the screenshot. When a -Beaver Builder layout hasn't been created yet, it's followed by a pale gray -button. - -:::tip **Tip** -After the page is open for editing in Beaver Builder, you can watch a -video with tips on how to create a layout. Click the down arrow in the title -bar in the upper left corner of the editing page to expose the [Tools menu](user-interface/tools-menu.md). -Choose [Help](user-interface/tools-menu.md#help) and then start the video that's displayed. -::: diff --git a/versioned_docs/version-2.9/getting-started/system-requirements.md b/versioned_docs/version-2.9/getting-started/system-requirements.md deleted file mode 100644 index 46174324..00000000 --- a/versioned_docs/version-2.9/getting-started/system-requirements.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: system-requirements -title: System Requirements -sidebar_label: System Requirements ---- - -This article covers the recommended system requirements for installing and using Beaver Builder on your sites. - -## WordPress - -- Beaver Builder is compatible with WordPress version 5.2 or higher. -- The WordPress REST API must be enabled: Beaver Builder relies on the REST API for key features. You can verify it’s active by visiting `/wp-json/` on your site (e.g., `https://yourwebsite.com/wp-json/`). - -We recommend a [WP memory limit](https://wordpress.org/support/article/editing-wp-config-php/#increasing-memory-allocated-to-php) of at least 128 MB, with 256 MB or more preferred for optimal performance. - -## Server - -To ensure smooth functionality of the Beaver Builder user-interface (UI), it is important to configure the server with the following settings, as failure to do so may lead to issues: - -- Set `X-Frame-Options` to `SAMEORIGIN`. -- Configure Content-Security-Policy (CSP) with the directive [`frame-ancestors`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) to `self`. - -Contact your web host provider for assistance with configuring these settings. - -:::caution - -Setting `script-src` to `none` in your Content Security Policy (CSP) will break the Beaver Builder UI, as it prevents all JavaScript from running—including the scripts essential for the builder's functionality. Since CSP configurations can be highly complex and vary widely depending on your setup, it's crucial to thoroughly test your website after making any changes to ensure that the Beaver Builder UI continue to work as expected. - -::: - -## PHP - -Beaver Builder follows the WordPress requirements for PHP version. See the [Wordpress Requirements page](https://wordpress.org/support/article/requirements/) for current recommendations. - -:::info - -PHP 8 is supported for all Beaver Builder products with some warnings, which are fixed in Beaver Builder 2.5, Beaver Builder Theme 1.7.9, and Beaver Themer 1.4. - -::: - -## jQuery - -Beaver Builder enqueues the version of jQuery that is bundled with WordPress core and only supports that version. It is quite possible that other versions of jQuery will work, but use them at your own risk. - -## Browsers - -Beaver Builder supports all modern browsers (Chrome, FireFox, Safari and Edge). - -### Viewing Beaver Builder content - -To view content added by Beaver Builder to your pages, posts, or custom post types we support the latest three versions of Chrome, Firefox, Safari, and Edge. For example, if the latest version is 66, then any release of versions 64-66 is supported. - -:::info - -As of [WordPress 5.8](https://wordpress.org/news/2021/05/dropping-support-for-internet-explorer-11/), Internet Explorer 11 is no longer supported. - -::: - -### Working with the Beaver Builder editor - -We only support the latest browser version when using the Beaver Builder editor. - -## Mobile Devices - -The Beaver Builder editor can be used on tablets and smartphones to edit layouts. Note the functionality is still subject to limitations inherent on smaller screens. diff --git a/versioned_docs/version-2.9/getting-started/what-can-i-do-with-beaver-builder.md b/versioned_docs/version-2.9/getting-started/what-can-i-do-with-beaver-builder.md deleted file mode 100644 index 14efd11f..00000000 --- a/versioned_docs/version-2.9/getting-started/what-can-i-do-with-beaver-builder.md +++ /dev/null @@ -1,203 +0,0 @@ ---- -id: what-can-i-do-with-beaver-builder -title: What can I do with Beaver Builder? -sidebar_label: What can I do with Beaver Builder? ---- - -Here's an overview of the Beaver Builder plugin, Beaver Builder Theme, and a -little bit about what Beaver Themer adds if you need it. See also the article [What can I do with Beaver Themer?](/beaver-themer/getting-started/what-can-i-do-with-beaver-themer) - -## Plugin vs. Theme vs. Beaver Themer - -WordPress makes a distinction between the content area of a web page and all -the other areas, including header, sidebar, and footer, as shown in this -diagram: - -![](/img/what-can-i-do-with-beaverbuilder-1.png) - -Here's how Beaver Builder fits into that. - -- The Beaver Builder plugin lets you create intricate layouts in the _content area_ of the page. Out of the box, Beaver Builder is enabled for pages, but there are settings to enable it for the content area of posts and custom posts. - -- A WordPress _theme_ is a mandatory component of a WordPress site. It controls the header, footer, and sidebar areas of your site. For a single Post, it also controls the display of post information (post title, author, featured images, categories, and so on). Depending on the theme you choose, you may also be able to configure or suppress these areas on individual pages and posts, using [WordPress page templates](/bb-theme/getting-started/built-in-theme-templates-for-single-pages-and-posts). - -- The [Beaver Themer plugin](https://www.wpbeaverbuilder.com/beaver-themer/) lets you build layouts in areas outside the content area, which are normally controlled by the theme. You can specify which pages the Themer layouts apply to and which users can see them. Beaver Themer is an add-on that uses the Beaver Builder plugin to build these layouts. See the examples below. - -The following sections show you the basic concepts underlying content layouts -with the Beaver Builder plugin, the parts of the page controlled by the theme, -and how the Beaver Builder Theme integrates with and enhances the plugin. - -## Beaver Builder Plugin - -The Beaver Builder plugin is a front-end layout and style designer that gives -you a WYSIWYG view of the content area as you develop it. Starting with one of -the Beaver Builder layout templates or a blank page, you can easily modify and -add content modules in complex arrangements of rows and columns, as shown in -this example: - -![](/img/what-can-i-do-with-beaverbuilder-2.png) - -### Start with a layout template, prebuilt rows, or a blank page - -When you create a new WordPress Page, you'll see the Beaver Builder launch -button on posts and pages for which the WordPress Standard (block) editor is enabled: - -![](/img/what-can-i-do-with-beaverbuilder-3.png) - -Or you'll see the **Beaver Builder** tab on posts and pages for which the -WordPress Standard editor is disabled: - -![](/img/what-can-i-do-with-beaverbuilder-4.png) - -On the editing page, you'll see the Beaver Builder admin bar at the top of the -screen. Click the Plus icon on the upper right side, and do any of the -following to get started. - -- Start with a content layout for the page and modify it. Click the **Templates** tab and click any template to insert it. - Choose a different template type in the **Group** field for more choices. [See this article on layout templates](layouts/templates/index.md) for more information. - -![](/img/what-can-i-do-with-beaverbuilder-5.png) - -- Add one or more prebuilt row layouts and modify them. Click the **Rows** tab, in the **Group** field select **Prebuilt rows**, then choose a category and drag your selection into the layout. [See this article on prebuilt rows.](/beaver-builder/layouts/rows/add-prebuilt-rows-to-your-content.md) - -![](/img/what-can-i-do-with-beaverbuilder-6.png) - -- Design your content from scratch by dragging individual modules into the content area. Click the **Modules** tab and drag a module into the layout. - -![](/img/what-can-i-do-with-beaverbuilder-7.png) - -:::tip -After you or your clients open a page for editing, there's a great -quick-start video that you can access by clicking the down arrow in the Beaver -Builder admin bar and then in the **Tools** menu click **Help**. -::: - -### The basics of content area layouts - -When you drag content modules from the Content panel to the layout, the rows and columns are automatically created. As your layouts become more complex, with child columns, sometimes it's easier to drag in row layouts first, then drag content modules into them. - -For example, here is a single row with three _column groups_, which can be thought of as rows within rows. - -![](/img/what-can-i-do-with-beaverbuilder-8.png) - -For more information about how columns work, see the [column layouts overview](/beaver-builder/layouts/columns/column-layouts-overview.md). - -In the screenshot above, all three column groups are inside a single row, -but you could also put each column group into a different row, as shown in -this screenshot: - -![](/img/what-can-i-do-with-beaverbuilder-9.png) - -What determines when you start a new row in your layout? See the article on -[working with rows](/beaver-builder/layouts/rows/work-with-rows.md) for some considerations. - -### Think responsive - -Beaver Builder makes layouts look good on medium devices (tablets) and small -devices (mobile) with no extra effort on your part. You can check the layout -and tweak settings at each device size by entering Responsive Editing Mode -inside your layout. - -![](/img/what-can-i-do-with-beaverbuilder-10.gif) - -For more information about responsive editing settings, start with this -[overview article on responsiveness.](/beaver-builder/layouts/responsive-design/index.md) - -### Save Beaver Builder layouts for use elsewhere - -You can save rows and modules globally, so that any change you make in one -place is reflected everywhere, or you can save the rows and modules so you can -reuse them but can modify them differently in each location. Or you can save -the entire layout as a layout template, which you can [use on any other page of your site](layouts/templates/index.md) or [export for use on another site](layouts/templates/saved-templates.md#export--import). - -If you have the Unlimited license version of the Beaver Builder plugin, you can white-label the Beaver Builder UI. And with any edition of Beaver Builder, you can create custom editing environments for your clients by controlling which -layout templates, rows, and modules are available to them. - -### Use Beaver Builder layouts for posts - -By default, Beaver Builder is enabled only for WordPress pages, not for posts. -When you enable posts or custom post types, you can use Beaver Builder to lay -out the content area of single posts or custom post types. See the article on -[using Beaver Builder with Posts](/beaver-builder/layouts/post-layouts/how-beaver-builder-works-with-blogs-and-custom-post-types-start-here/) for more information. - -:::info -Because WordPress index and archive pages are generated on the fly, you cannot use Beaver Builder to lay out those pages, though you can create Beaver Builder layouts that simulate the generated WordPress pages. For more information, see the article on [generated WordPress archives vs. Beaver Builder layouts](/beaver-builder/layouts/post-layouts/generated-wordpress-archives-versus-beaver-builder-layouts.md). Or, you can use the add-on Beaver Themer plugin to create custom WordPress index, archive, and search result layouts. -::: - -## Beaver Builder Theme - -WordPress requires use of a theme to control areas of the page like the -header, footer, and sidebar areas. Themes allow you some degree of -customization of appearance in these areas. - -The Beaver Builder Theme has many layout and style options to control theme -areas of the page, on both large screens and smaller devices. In addition, the -Beaver Builder Theme is fully compatible with both the Beaver Builder and -Beaver Themer plugins. All theme settings are made in the WordPress -Customizer, which you can access from the **Appearance** menu in the WordPress -admin panel. The Beaver Builder Theme has customizations for the following -general categories: - -- Presets, which apply built-in styling to the page if you don't want to customize all the theme settings yourself. -- Layout and styling of the header (top bar, header, nav bar), footer (widgets and footer bar), and sidebar. -- Layout and options for blog archives, single posts, and WooCommerce. -- Default style settings for Beaver Builder, such as accent color, heading and text fonts, and buttons. -- A section where you can add code to the head or body of your pages. - -### Header, footer, sidebar areas in the Beaver Builder Theme - -The header contains two separate areas: - -- The top bar, an optional strip above the header, which can contain one or two columns. -- The main header, which includes the logo and the nav area with a number of choices of layout. - Some header choices allows separate styling of the nav area. - -The footer also contains two separate areas, each optional: - -- The main footer, similar to the top bar in allowing one or two columns. -- The footer widgets area, which appears above the footer. - -Here's a diagram showing the header and footer subareas. - -![](/img/what-can-i-do-with-beaverbuilder-11.png) - -The sidebar is optional but if enabled, it will appear on every archive and -post page, and also on any individual page when you set the WordPress template setting to display it. - -Note that by default there is only one sidebar in Beaver Builder Theme, whose widget -content will appear wherever you enable it (all Posts or individual Pages). -You can't customize the sidebar widgets differently for individual posts and -pages unless you use a third-party plugin or write code. Another way to -customize the sidebar is to use the Beaver Builder plugin to create a Sidebar -module in your content layout. - -### Beaver Builder Theme default settings for Beaver Builder - -Beaver Builder Theme lets you set some of the defaults for Beaver Builder -layouts. This saves time and makes it easy to get conformity in your page -layouts site-wide unless you choose to override that behavior. - -Here are some Beaver Builder Theme settings that apply to Beaver Builder -layouts: - -- Accent color - Sets the default color of both Theme and Beaver Builder links and buttons. - -- Headings - Sets the default font family, size, and other font properties of headings in - the content area. - -- Text - Sets the default font family, size, and other font properties of non-heading - text in the content area. - -- Background - Sets a background color or image for the entire content area. - -- Lightbox - Controls the default behavior or whether images open in a lightbox when - clicked. - -- Current year shortcode - The theme has a shortcode that automatically inserts the current year, both in - theme areas of the page and in Beaver Builder and Beaver Themer layouts. diff --git a/versioned_docs/version-2.9/integrations/font-awesome.md b/versioned_docs/version-2.9/integrations/font-awesome.md deleted file mode 100644 index e18cc162..00000000 --- a/versioned_docs/version-2.9/integrations/font-awesome.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: font-awesome -title: Font Awesome -sidebar_label: Font Awesome ---- - -The official Font Awesome WordPress plugin seamlessly integrates with Beaver Builder. This integration enables you to utilize the latest Font Awesome version within Beaver Builder, gain access to Font Awesome Pro Kits, use custom icons and leverage DuoTone icons in your Beaver Builder layouts. - -## Getting Started - -To get started using the [Font Awesome WordPress plugin](https://wordpress.org/plugins/font-awesome/) with Beaver Builder, install and activate the plugin on your website. - -## Font Awesome Free - -To utilize the most up-to-date free version of Font Awesome with Beaver Builder: - -1. Install and activate the [Font Awesome WordPress plugin](https://wordpress.org/plugins/font-awesome/). -2. Navigate to the Font Awesome plugin's settings page within your WordPress admin dashboard **(Settings > Font Awesome)**. -3. On the settings page, make the following configurations: - - - **Use CDN**. - - Under Icons, select **Free**. - - For Technology, choose **Web Font**. - - For version, select **Latest**. - -4. Save Changes. - -## Font Awesome Pro - -To utilize the most up-to-date Font Awesome Pro version with Beaver Builder: - -1. Install and activate the [Font Awesome WordPress plugin](https://wordpress.org/plugins/font-awesome/). -2. Log into your [Font Awesome account](https://fontawesome.com/account) and create a kit. - - :::caution - - While setting up your Kit, ensure that it is configured for **Webfont** usage rather than SVG. - - ::: - -3. Copy your [API token](https://fontawesome.com/account#api-tokens) and paste into **WordPress Admin Dashboard > Settings > Font Awesome > API Token**. -4. Select a kit from the dropdown menu and click **Save Changes**. - -:::tip - -You can learn more from the [Font Awesome documentation](https://fontawesome.com/v6/docs/web/use-with/wordpress/). - -::: - -## Confirm Integration & Enable Font Awesome Icons - -Once you have the Font Awesome plugin installed and configured, you will be able to confirm that Font Awesome is integrated with Beaver Builder, and you can enable Font Awesome icons. - -1. Access your **WordPress Admin Dashboard**. -2. Go to **Settings > Beaver Builder > Icons**. -3. You should see a new section titled **Font Awesome Integration** which confirms that Font Awesome plugin is integrated with Beaver Builder. -4. Mark the checkboxes corresponding to the Font Awesome Free or Pro icon styles you want to enable in Beaver Builder. -5. Click **Save Icon Settings**. - -![Font Awesome Integration](/img/beaver-builder/integrations--font-awesome--1.jpg) - -## Access Font Awesome Icons - -Once you have enable the Font Awesome icon styles, you can access them from any module that has an icon picker. - -![Enable Font Awesome Pro icons](/img/beaver-builder/integrations--font-awesome--2.jpg) - -## Using Duotone Icons - -Upon activating Font Awesome Pro icons within Beaver Builder and enabling the duotone icon style, you gain the ability to utilize duotone icons directly within Beaver Builder. - -Upon entering any module that supports icons, choosing a duotone icon prompts the module's icon style choices to adjust, offering the capability to designate both primary and secondary colors for the icon. - -:::info - -The **DuoTone Icon Secondary Color** automatically has reduced opacity. Also, Duotone icons don't have different hover colors. - -::: - -![Duo-Tone icons](/img/beaver-builder/integrations--font-awesome--3.jpg) - -## Custom Icons - -Any custom icons you upload to Font Awesome can be accessed through any Beaver Builder module that supports icons, such as the Icon or Button modules. Simply upload your custom icons to your kit, then [enable the kit within Beaver Builder](#font-awesome-pro). - -To confirm that your kit includes custom icons, navigate to the [Font Awesome Integration section](#confirm-integration--enable-font-awesome-icons) on the Beaver Builder [Icon Settings](settings/icons.md) page. There, you'll see the message: **"Custom Icons: Kit contains X custom icons,"** where **X** represents the number of custom icons you've added to your kit. - -:::tip - -Be sure to follow the [Font Awesome custom icon guidelines](https://docs.fontawesome.com/web/add-icons/upload-icons) to ensure your custom icons are compatible. - -::: diff --git a/versioned_docs/version-2.9/integrations/index.md b/versioned_docs/version-2.9/integrations/index.md deleted file mode 100644 index 67a44a27..00000000 --- a/versioned_docs/version-2.9/integrations/index.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -id: index -title: Beaver Builder Integrations -sidebar_label: Beaver Builder Integrations -description: Beaver Builder Integrations ---- - -Beaver Builder provides integration with a number of third-party plugins and services. This section of the documentation provides information on how to use these integrations. - -## Integrations - -- [Font Awesome](./font-awesome.md) -- [Popup Maker](./popup-maker.md) -- [Query Monitor](./query-monitor.md) -- [Rank Math](./rankmath.md) -- [Woocommerce](./woocommerce.md) -- [Yoast SEO](./yoast.md) - -## Third-Party Integrations - -The following integrations are provided by third-party developers. For support, please contact the developer directly. - -- [FacetWP](https://facetwp.com/) -- [Gridbuilder WP](https://wpgridbuilder.com/) -- [PowerPack Beaver Builder Addon](https://wpbeaveraddons.com/) -- [Ultimate Addons for Beaver Builder](https://www.ultimatebeaver.com/) diff --git a/versioned_docs/version-2.9/integrations/popup-maker.md b/versioned_docs/version-2.9/integrations/popup-maker.md deleted file mode 100644 index 47036bb9..00000000 --- a/versioned_docs/version-2.9/integrations/popup-maker.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -id: popup-maker -title: Popup Maker -sidebar_label: Popup Maker ---- - -The Popup Maker plugin is a WordPress plugin that allows you to create and manage popups on your website. The integration enables you to use Beaver Builder to design the content of your popups. - -## Getting Started - -To get started using the [Popup Maker plugin](https://wordpress.org/plugins/popup-maker/) with Beaver Builder: - -1. Install and activate the Popup Maker plugin on your website. -2. Upon activation, the Popup Maker post type (`popups`) will be automatically enabled within the Beaver Builder settings. - You can locate this setting in your WordPress Admin Dashboard under **Settings > Beaver Builder > Post Types**. - -## Create a Popup - -1. Access your **WordPress Admin Dashboard**. -2. Navigate to **Popup Maker > Create Popup**. -3. Provide a title for your popup. -4. Configure the popup settings to your preferences. -5. Click on the Beaver Builder tab to launch the Beaver Builder interface. -6. Utilize the builder to design your popup layout and remember to save your work. - -## Displaying a Popup - -Once you've successfully created a popup, you can display it within your Beaver Builder layout by using any module that supports the Link option, such as the Button or Callout modules. - -1. Add a module that supports the **Link** option to your layout, such as the Button module. -2. Open the module settings and locate the **Link** option. -3. Click on the **Select** button and search for the name of your popup. -4. Choose your popup from the list and click Save. - -When you or your website visitors click on the link or button associated with that module, your popup will appear on the screen. - -![Displaying a Popup Maker popup](/img/beaver-builder/integrations--popup-maker--1.jpg) diff --git a/versioned_docs/version-2.9/integrations/query-monitor.md b/versioned_docs/version-2.9/integrations/query-monitor.md deleted file mode 100644 index 9d29f12e..00000000 --- a/versioned_docs/version-2.9/integrations/query-monitor.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -id: query-monitor -title: Query Monitor -sidebar_label: Query Monitor ---- - -Beaver Builder offers integration with the Query Monitor plugin, allowing you to conveniently access the Query Monitor interface directly within the Beaver Builder page builder interface. - -## Getting Started - -To get started using the [Query Monitor plugin](https://wordpress.org/plugins/query-monitor/) with Beaver Builder, install and activate the plugin on your website. - -## Access Query Monitor in Beaver Builder - -1. Launch Beaver Builder on your page or post. -2. In the Tool Bar click the **Query Monitor** icon. -3. The Query Monitor interface will open at the bottom of the page. - -![Access Query Monitor in Beaver Builder UI](/img/beaver-builder/integrations--query-monitor--1.jpg) - -:::info - -If the Query Monitor logo is not visible in the Beaver Builder user interface, it indicates that you either have an outdated version of Beaver Builder installed or that the Query Monitor plugin is not installed and activated on your website. - -::: diff --git a/versioned_docs/version-2.9/integrations/rankmath.md b/versioned_docs/version-2.9/integrations/rankmath.md deleted file mode 100644 index 8f659547..00000000 --- a/versioned_docs/version-2.9/integrations/rankmath.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -id: rankmath -title: Rank Math -sidebar_label: Rank Math ---- - -Beaver Builder integrates with Rank Math, allowing you to utilize Rank Math for the analysis and optimization of your Beaver Builder content for SEO. - -## Getting Started - -To get started using the [Rank Math plugin](https://wordpress.org/plugins/seo-by-rank-math/) with Beaver Builder, install and activate the plugin on your website. - -## Analyze Content with Rank Math - -To analyze your Beaver Builder content with Rank Math, follow these steps: - -1. Build your page or post layout as usual and publish your changes. -2. Access your **WordPress Admin Dashboard**. -3. Go to the **WordPress Edit Screen** for the page or post you want to analyze. -4. Access the Rank Math SEO analysis by clicking the **Rank Math** buttons in the WordPress Edit Screen. -5. Launch Beaver Builder on your page or post again to make changes to your content based on the Rank Math recommendations. - -Repeat this process until you are satisfied with the SEO analysis of your content. - -:::tip - -An efficient workflow includes opening two browser tabs: one for your WordPress Edit Screen to review the Rank Math analysis of your content, and the other for Beaver Builder with your page or post loaded. This setup allows you to edit your content in the Beaver Builder browser tab and then switch to the other browser tab containing the WordPress Edit Screen. - -Remember to refresh each time you make a change in Beaver Builder. - -::: diff --git a/versioned_docs/version-2.9/integrations/woocommerce.md b/versioned_docs/version-2.9/integrations/woocommerce.md deleted file mode 100644 index 48a28b4e..00000000 --- a/versioned_docs/version-2.9/integrations/woocommerce.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -id: woocommerce -title: WooCommerce -sidebar_label: WooCommerce ---- - -Beaver Builder is compatible with the WooCommerce plugin, but with some limitations. - -## Limitations - -When utilizing Beaver Builder with WooCommerce, the following limitations apply: - -- **WooCommerce Archive Pages:** - You can not use Beaver Builder to edit the layout of WooCommerce archive pages, such as the Shop/Store, Product Category, and Tag pages. This is due to Beaver Builder not being able to edit the layout for WordPress archive pages. - -- **Individual Products:** - Beaver Builder is limited in editing the content of the entire product page. It can only be used to edit the content within the products' Description tab. - -- **Additional/Review Tabs:** - Editing content for tabs like Additional Information and Review tabs, as well as any tabs added by third-party WooCommerce add-on plugins, is not supported by Beaver Builder. - -:::info - -You can overcome these limitations by combining Beaver Builder with our Beaver Themer add-on plugin. This combination allows you to create archive layouts for your shop/store, product category, and tag pages. Additionally, you can design a layout for individual product pages by creating a singular layout type and assigning it to the Product location. - -::: - -## Using Beaver Builder with WooCommerce - -While Beaver Builder can't be used to edit entire WooCommerce individual product pages due to the structure of WooCommerce templates, you can utilize it to modify the content within the **Description** tab of a product. - -1. Access your website's WordPress Admin Dashboard. -2. Navigate to **Settings > Beaver Builder > Post Types**. -3. Mark the **Products** checkbox and click **Save Post Types**. -4. Launch Beaver Builder on a product page. -5. Scroll down to the **Description** tab and the Beaver Builder overlay interface should be available. -6. Make your desired changes and click **Done** to save your changes. - -![Using Beaver Builder WooCommerce Description Tab](/img/beaver-builder/integrations--woocommerce--1.jpg) - -## WooCommerce Module - -Upon installing WooCommerce and launching Beaver Builder, the WooCommerce module becomes accessible. This module offers various options for displaying WooCommerce content in your layout. It's worth noting that this module utilizes WooCommerce's built-in shortcodes, providing a quicker alternative compared to using WooCommerce shortcodes in an HTML module. - -See the [WooCommerce module](/layouts/modules/woocommerce.md) article for more information. - -## WooCommerce Shortcodes - -In addition to the choices within the WooCommerce module, you have the flexibility to use any WooCommerce shortcodes in an HTML module. - -Visit the [WooCommerce documentation](https://woocommerce.com/document/woocommerce-shortcodes/) for a comprehensive list of available shortcodes. - -## WooCommerce Widgets - -Upon installing WooCommerce, all WooCommerce widgets are accessible in the WordPress Widgets subgroup within the Content Panel. - -Visit the [WooCommerce documentation](https://woocommerce.com/document/woocommerce-widgets/) for a comprehensive list of available widgets. diff --git a/versioned_docs/version-2.9/integrations/yoast.md b/versioned_docs/version-2.9/integrations/yoast.md deleted file mode 100644 index 6fc17ade..00000000 --- a/versioned_docs/version-2.9/integrations/yoast.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -id: yoast -title: Yoast -sidebar_label: Yoast ---- - -Beaver Builder integrates with Yoast, allowing you to utilize Yoast for the analysis and optimization of your Beaver Builder content for SEO. - -## Getting Started - -To get started using the [Yoast SEO plugin](https://wordpress.org/plugins/wordpress-seo/) with Beaver Builder, install and activate the plugin on your website. - -## Analyze Content with Yoast - -To analyze your Beaver Builder content with Yoast, follow these steps: - -1. Build your page or post layout as usual and publish your changes. -2. Access your **WordPress Admin Dashboard**. -3. Go to the **WordPress Edit Screen** for the page or post you want to analyze. -4. Scroll down to the **Yoast SEO** section view the recommendations for your content. -5. Launch Beaver Builder on your page or post again to make changes to your content based on the Yoast recommendations. - -Repeat this process until you are satisfied with the SEO analysis of your content. - -:::tip - -An efficient workflow includes opening two browser tabs: one for your WordPress Edit Screen to review the Yoast analysis of your content, and the other for Beaver Builder with your page or post loaded. This setup allows you to edit your content in the Beaver Builder browser tab and then switch to the other browser tab containing the WordPress Edit Screen. - -Remember to refresh each time you make a change in Beaver Builder. - -::: diff --git a/versioned_docs/version-2.9/introduction/about-release.md b/versioned_docs/version-2.9/introduction/about-release.md deleted file mode 100644 index af869bb3..00000000 --- a/versioned_docs/version-2.9/introduction/about-release.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: about-release -title: About this Release -sidebar_label: About this Release -toc_min_heading_level: 2 -toc_max_heading_level: 2 ---- - -Beaver Builder 2.9 includes the following new features and improvements. - -## :rocket: New Features - -The following features have been added: - -### Color & Gradient Picker - -The Color & Gradient Pickers have been completely redesigned, making it easier than ever to select your preferred colors. You can now switch between different color spaces and take advantage of the powerful `color-mix()` function for even more control. - -See the [Color Picker](basics/color-picker.md) article for more information. - -### Multi-Layer Background Field - -We've introduced a new background field that lets you layer different types of backgrounds on an element. You will see this in the Box Module, Rows and Columns. - -See the [Multi-Layer Background Field](basics/multi-layer-backgrounds.md) article for more information. - -### Module Blocks - -A selection of our modules will be available as Blocks for the Block Editor. This feature is opt-in, so it requires enabling in the Beaver Builder settings in the WordPress Admin. - -See the articles below for more information: - -- [Blocks Tab Settings](settings/blocks.md) -- [Using Module Blocks](layouts/modules/module-blocks.md) - -## :boom: Improvements - -The following improvements have been made: - -### Modules without Wrappers - -All basic modules now have reduced markup output. - -See the [Advanced Tab Settings](settings/advanced.md#force-module-wrapper-divs) article for more information. - -### Top Level Container Modules - -Container modules, such as the Box and Loop modules, can now serve as top-level containers without requiring a row. You can also nest container modules within each other—for example, placing a Loop module inside a Box module or vice versa. - -### Outline Panel - -The Outline Panel has been improved with a search/filter option and Node labels can be added and edited inline. - -See the [Outline Panel](user-interface/outline-panel.md) article for more information. - -### Google Fonts Library - -The Google Fonts library is now updated automatically whenever WordPress checks to update the plugin. - -### Subscribe Module - -Support was added for Active Campaign tags. - -### Accessibility Improvements - -The following accessibility improvements have been made: - -- **Menu Module:** Separated menu item and sub-menu icon -- **Accordion:** Select HTML tag for Label -- **Tabs Module:** Add focus missing on selected tab -- Various improvements for the magnific pop-up script used diff --git a/versioned_docs/version-2.9/introduction/accessibility.md b/versioned_docs/version-2.9/introduction/accessibility.md deleted file mode 100644 index 84b335f0..00000000 --- a/versioned_docs/version-2.9/introduction/accessibility.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -id: accessibility -title: Accessibility -sidebar_label: Accessibility ---- - -This article contains general information about accessibility requirements and -specific information about Beaver Builder plugin and Beaver Builder Theme -accessibility. - -## Why care about accessibility? - -Even if you're not required to make your website accessible, it's a good idea -to follow at least high-level accessibility principles. Why? - -* Your site will be more readable - For example, the site has appropriately sized print. - -* Your site will be more searchable - For example, there are text alternatives for content graphics. - -* Your site will reach a larger audience - Your site becomes more accessible for the estimated 20% of people with -disabilities, but it also becomes easier to use in general, because the basic -principles of accessibility hold true for everyone. - -* Your site's SEO will benefit. - For example, [Google's Mobile-Friendly Test](https://search.google.com/search-console/mobile-friendly), which judges your site on criteria that contribute to Google Search rankings, will fail for some of the same reasons, such as the -text being too small and horizontal scrolling required because the viewport wasn't set. - -* If you're an agency, it's a benefit to say you test for basic accessibility, even when you can't guarantee that the site is fully accessible, for all of the reasons above. - -## WCAG 2.0 accessibility standard - -The current standard for web content accessibility is the [Web Content -Accessibility Guidelines](https://www.w3.org/TR/WCAG20/), or WCAG 2.0, -maintained by the World Wide Web Consortium (W3C). The WCAG 2.0 specification -is based on four _principles_ : - -* Perceivable -Users must be able to perceive the information with at least one of their -senses. - -* Operable -The interface cannot require interaction that a user cannot perform. - -* Understandable -Users must be able to understand the information as well as the operation of -the user interface. - -* Robust -Content must be interpreted reliably by a wide variety of user agents, -including assistive technologies. - -Each of these principles has both _guidelines_ , which define goals to achieve -the principles, and _success criteria_ , which are measurable outcomes. In -addition, the WCAG 2.0 specification assigns one of three levels of -conformance to each of their success criteria: A (lowest), AA, and AAA -(highest). Here's a page that lists the guidelines, success criteria, and -conformance level for each: - -[https://www.w3.org/WAI/WCAG20/quickref/](https://www.w3.org/WAI/WCAG20/quickref/) - -## The WAI-ARIA standard - -The [WAI-ARIA standard](https://www.w3.org/TR/wai-aria/#aria-label) is a set of specifications on how to use "aria labels" to provide semantic information about widgets, structures, and behaviors to assistive devices. Beaver Builder adds default ARIA labels and some modules have an aria setting that lets you assign your own ARIA label. - -Here's an example of HTML output from a [Menu module](/beaver-builder/layouts/modules/menu/menu.md), which has the custom ARIA label set to "primary menu": - -```html -