Otter Blocks documentation

Otter Blocks is a powerful collection of page-building blocks and templates for the WordPress block editor. The expanding library of page building blocks incorporates all the necessary elements to build your website. 

Combine the blocks with Otter Blocks to build stunning pages and posts with the simplicity of design.

• 🧷 drag and drop efficiency 

• 🖌️ customizable blocks

📝 Note: At this moment, we don't have a trial or demo available for this plugin, but we have you covered with our 30-day money-back guarantee in case the upgraded product doesn't meet your expectations.

📩 Download and Install 

To download and install the Otter Blocks plugin, make sure you follow the steps below:

1

Navigate to the WordPress  Dashboard > Plugins.

2

3

When the plugin appears, click on the Install button and then on  Activate.

📝 Note: For further information about installing the plugin, check this dedicated doc.

🦦 Otter Settings

After installing the plugin, an onboarding section in Dashboard > Otter > Settings contains options for the Modules, Sections, and Integrations through API Keys.

The Modules accordion contains the following options, enabled by default:

• Enable Custom CSS Module - allows you to add custom CSS to each block of the library.
• Enable Blocks Animation Module - allows you to add CSS animation to each block within the library.
• Enable Visibility Condition Module - allows the visibility conditions of the blocks to work correctly.

Other options offered by the Otter Blocks are:

• You can also set the Section block as the default block for Pages so that every time a new Page is generated, the Section block will be appended there.
• Optimize Animation CSS - load CSS only of animations are used on the page for better loading.
• Enable Rich Schema - choose to show the rich schema in the Product Review Block.
• Use 1-5 Scale for Review Block - modify the default scale of the Review Block. 
• Anonymous Data Tracking - allows the user to become a contributor, with the condition of not collecting private data.
• Regenerate Styles - deletes all the Otter-generated CSS files.

You can configure the API Keys from the Integrations tab to use the Google Maps block, the Google reCaptcha for the Form block, and for the Stripe Checkout block. Also, saving Google Fonts Locally can be enabled from this place too.

🧰 Using the blocks

One of the most important  features of Otter Blocks is the drag-and-drop way of functioning. To use the plugin, follow these steps:

1

Navigate to Posts / Pages and  open the  editor.

2

Once the editor is opened, click on the ➕ button to add  new blocks.

3

Scroll until the OTTER section and start adding the desired blocks.

4

Click on the  gear icon above the right sidebar to open their settings.

🗂 Blocks Library

Otter Blocks enlarges Gutenberg blocks by adding more than 30 amazing blocks, easily customizable and that have different settings once the ⚙️ icon is clicked.

➕ Block Tools

Some common settings are available for all of them, which appear in the  right sidebar when you click on the gear (⚙️) icon. Next to the Block Tools, click on the ➕ icon to open the features:

📝 Note: This is available for WP versions above 5.9.

To start using one of the options, click on it, then close the accordion. The option will be added as a new accordion.

Animations

You can use animations to enliven the content of the block. It can be a loading animation, count animation, or typing animation, for which you can set speed and delay. 

📝 Note: Here is a dedicated doc about the animations and use cases.

Visibility Conditions

Conditional  loading is a feature that applies to all blocks and is represented by the Visibility Condition in the Settings panel.

It gives the user  control of the visibility of the blocks based on the conditions inserted, such as Users: Logged In and Date Recurring: Monday. This means that the block will only be displayed for Logged-In users on Mondays. The premium version of the Otter Blocks brings in more conditions that can be used to improve your visitors' experience.

There can be  many Rule Groups, but they will not be applied simultaneously, but one or the other ( OR logical operation ).

📝Note: Here is a dedicated doc about the visibility conditions and the extended options that the premium version includes.

Transform To Sticky

This feature makes the block stick to certain website areas after you scroll down.

📝 Note: For further information about how to use this feature and the pro options, check this doc.

💡Features Library

The Otter Blocks plugin also has a wide palette of features to boost the block's appearance:

Dynamic Values

The Otter Blocks plugin only allows you to insert  dynamic values by adding the " %" symbol anywhere inside the editor. The dynamic values can import information and automatically display it on your website.

📝 Note: For further information about this feature, check this doc.

Dynamic Images

The Otter Blocks plugin allows you to add dynamic images, which will import information depending on the elements you pick from the menu in the editor after adding the Image block and clicking on the Upload / Media Library button. It creates a third tab called Dynamic Images, from which you can start adding the desired elements:

📝 Note: For further information about this feature, check this doc.

Dynamic Links

Automatically import and display information using the dynamic link feature. This will appear in the settings bar under the 🔽 icon. Once inserted, you can choose the data type you want to show through the link.

📝 Note: For further information about this feature, check this doc.

Copy Paste Styles

The copy-paste option allows you to copy the style of a block and paste it into another one. To open it, select a block, click on the three dots, then make the action:

📝 Note: For further information about this feature, check this doc.

🌐 Global Settings

The Global Settings contain the  blocks' default options, which can be set site-wide. These settings become accessible when clicking on the otter icon next to the ⚙️ icon.

After that, click on Block Settings and select the block for which you want to configure global defaults:

You can click on the Open Settings icon to configure or change their visibility by clicking on the 👁 icon.

📝 Note: The Otter Blocks shortcut can be eliminated when the ⭐ button is disabled.

These Global Settings act like a time saver, working well for a long time perspective. You can configure the most common blocks here, and every time you add one of them, they will be shaped as you have previously taken care of. The configurations that you make here do not affect the already added content. 

📝 Note: Find out more about this feature from this doc.

📝 Note: These blocks have the same configurations as the ones added from the blocks library.

🗂 Patterns Collection

A powerful feature of Otter Blocks is the ability to insert predefined templates on your page inside the editor with just a few clicks.

1

2

3

📝 Note: Check the dedicated documentation about this feature here.