Otter Blocks documentation

Otter 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 to build stunning pages and posts with the simplicity of design.

  • 🧷 drag and drop efficiency 

  • πŸ–ŒοΈ customizable blocks


πŸ“© Download and Install 

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

1

Navigate to the WordPress  Dashboard Plugins.

2
Click the Add New button and type in the Search Bar " Otter".
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, there is an onboarding section in Dashboard > Settings > Otter that contains options for the Modules, Section, and 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.
  • 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.

From the Integrations tab, you can configure the API Keys to use the Google Maps block or the Google reCaptcha for the Form block. Also, saving Google Fonts Locally can be enabled from this place too.


🧰 Using the blocks

One of the most outstanding features of the Otter Blocks is the easy 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 down 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 enlarges Gutenberg blocks by adding more than 30 amazing blocks, easily customizable and that have different settings once the βš™οΈ icon is clicked.

Masonry
Review Comparison Table
Business Hours
Accordion
Button Group
Circle Counter
Countdown
Flip Card
Icon
Form
Contact Form
Subscribe Form
Posts
Icon List
Maps
Lottie Animation
Plugin Card
Popup
Google Maps
Progress Bar
Product Review
Add to cart button
Pricing Section
Sharing Icons
Section
Slider
Pricing
Service
Testimonials
Tabs
About Author
Advanced Heading
WooCommerce Comparison Table

There are some common settings available for all of them, such as:

  • Custom CSS - you can add media queries, change colors, and add borders all in one easy-to-follow area.
  • Advanced - here, you can insert HTML anchors or additional CSS classes.


πŸ’‘Features Library

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

Animations
Visibility Conditions
Transform to Sticky
Dynamic Values
Dynamic Images
Dynamic Link

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

The  conditional loading is a feature that applies to all blocks within the Otter Library 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 be displayed for Logged-In users only 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 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 is accessible by clicking on the  three dots with options and clicking on the Transform to Sticky. After that, a new tab will be generated in the right sidebar from which you can configure the desired behavior.

πŸ“ Note: For further information about how to use this feature and the pro options, check this doc.


Dynamic Values

The Otter 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 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.


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.


🌐 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.

πŸ“ Note: The 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 here the most common blocks, and every time you add one of these blocks, they will be already shaped as you have previously taken care of. The configurations that you make here do not affect the already added content. 

πŸ“ Note: These blocks have the same configurations as the ones added from the blocks library.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.