Otter Pro documentation

This is the premium version of the Otter Blocks plugin, also known as Gutenberg Blocks and Template Library by Otter. More advanced blocks and features are available in this version.

🧰 Tools needed

  • The Otter Blocks Plugin - download it from here, and check this doc to find out how to install it.
  • The Otter Pro Plugin - choose a plan here.
    • πŸ“Note: If you have already installed the Neve Pro Addon, check this doc to find out how to install Otter Pro.

πŸ“© Download and Install

1
Install the free version of the Otter plugin.
2
Navigate to Themeisle store and insert your credentials.
3
Scroll down until you see the Otter Pro plugin and click on download.

4
Navigate to Dashboard > Plugins > Add New and upload the .zip that you previously downloaded.

πŸ“ Note: The Neve Pro license can be used to activate Otter Pro.


πŸ—‚ Blocks Library

The Otter Pro plugin improves WordPress blocks by providing new components, in addition to the free blocks.

And also new options for some free blocks:


⏰ Business Hours

As expected from the name, the block is very useful when it comes to creating a schedule for a business.

To  add this component, scroll down into the blocks library and select the Business Hours block.

The customizations available for this block are divided into seven panels:

  • Styles - decide what type of style is suitable, having two options:
    • Default - entirely white table.
    • Black & White - black top and bottom of the table and white rows.
    • Default Style - select one of the two options above to become the default style of the block.

  • Settings - dimension sliders to change the aspect of the block:
    • Gap - space between rows.
    • Title Font Size - adjust the size of the title ( eg. Opening Hours).
    • Items Font Size - change the size of each item from the table ( days and hours ).
    • Border Radius - rounds the borders of the table.
      • Visible for the Black & White style.
    • Border Width - alters the size of the table, increasing the width of the border.

  • Color - the user has the possibility to change the default colors of the block, by choosing from the ones available ( Global Colors or Custom color ), with the chance to undo the modifications, by clicking on the Clear button. The colors are available for three areas: 
    • Title
    • Background
    • Border

πŸ“ Note: More than that, if the combination seems hard for people to read, a notice will appear.

  • Custom CSS - in case you want to modify certain things, the custom CSS tab comes in help.
    • Add your custom CSS - in the textbox.

  • Visibility Conditions - control the visibility of the blocks, using conditions.
    • Add Rule Group - choose from the list of conditions, regarding Users, Posts, or Date&Time.

  • Animations - select an animation to enliven the content of the block.
    • Delay - the delay of the animation when a user enters the page.
    • Speed - decide how much the animation should last.

  • Advanced 
    • Additional CSS class(es)


The popup is a notice that appears suddenly on the screen, over another window or display.

To  add this componentscroll down into the blocks library and select the Popup block.

The  popup can contain anything. In order to edit the content that will be displayed, click on the block and add one of the blocks from the list:

πŸ“Note: The settings of the added block are specific.

The customizations available for this block are divided into six panels:

  • Settings
    • Open Trigger - depending on the desired effect, pick one of the following triggers: 
      • On Load - appears when the page is loaded.
        • Wait Time - choose how much time to wait before showing the popup.
          • if it's left empty, it will open instantly.
      • On Anchor Click - first, you have to create an anchor on the page. The popup opens when the anchor is clicked.
        • Anchor - use an anchor on the page to open the popup.
      • On Scroll - appears when the page is scrolled.
        • Scroll Distance - adjust the distance of the scroll when the popup would appear.

        • On Exit - appears when the user exits the page.

    • Show Close Button - enable / disable the βŒ button.
    • Close on Click Outside - the popup will close if the user clicks outside the box.
    • Close on Anchor Click - the popup will close if the user clicks on the anchor provided.
    • Dismiss for Recurring Visitors ( not available for the On Anchor Click trigger) - if a visitor has entered many times on the website, you can set the popup to not be displayed in a certain period.

  • Style - this menu is responsible for the appearance of the popup. 
    • Minimum Width - establishes the width of the popup window.
    • Background - choose the color of the background.
    • Overlay - select the color that appears while the popup is opened.
    • Overlay Opacity - decide how transparent the color of the overlay should be.

  • Custom CSS - in case you want to modify certain things, the custom CSS tab comes in help.
    • Add your custom CSS - in the textbox.

  • Visibility Conditions - control the visibility of the blocks, using conditions.
    • Add Rule Group - choose from the list of conditions, regarding Users, Posts, or Date&Time.

  • Animations - select an animation to enliven the content of the block.
    • Delay - the delay of the animation when a user enters the page.
    • Speed - decide how much the animation should last.

  • Advanced 
    • Additional CSS class(es)


πŸ“„ Posts

The Posts block allows displaying a certain number of posts on different pages.

The specific customizations available for this block cover four areas:

  • Styles - display the posts as Grid or as List.

  • Post Types 
    • Post Type - select the types of posts: Post / Page  / Product.

  • Settings - here you can customize the content displayed within the block, such as the number of columns, how they are ordered, the categories from which you want to display posts, the number of posts, and also offset.

  • Design & Layout - πŸ’³ ( pro ) customize the Image / Category / Title / Meta / Description, change their visibility and reorder them.

πŸ“ Note: To see all the options of the Posts block, check this dedicated doc.


πŸ”Ž Review Comparison Table

πŸ“ Note: This table works only with the reviews added with the Product Review block, not with the ones added from the website.

In order to use the Review Comparison Table, follow these steps:

  • Step 1: Navigate to the desired page and add the Product Review component from the blocks library.
  • Step 2: Publish the page, otherwise it will not work.
  • Step 3: Repeat the steps above for how many reviews you want to compare.

To  add this componentscroll down into the blocks library and select the Review Comparison Table block.

When the block appears,  pick the reviews that you want to compare.

The  customizations available for this block are divided into five panels:

  • Custom CSS - in case you want to modify certain things, the custom CSS tab comes in help.
    • Add your custom CSS - in the textbox.

  • Visibility Conditions - control the visibility of the blocks, using conditions.
    • Add Rule Group - choose from the list of conditions, regarding Users, Posts, or Date&Time.

  • Animations - select an animation to enliven the content of the block.
    • Delay - the delay of the animation when a user enters the page.
    • Speed - decide how much the animation should last.

  • Color 
    • Button - change the color of the button.
    • Button text - controls the color of the text of the button.

  • Advanced 
    • Additional CSS class(es)


πŸ›οΈ WooCommerce Comparison Table

This block helps the customers to have a better overview of the desired product, by comparing it with other products that he selects.

In order to use this option, follow these steps:

  • Step 1: Navigate to Dashboard > Appearance > Neve options > Neve PRO.
  • Step 2: Scroll until the WooCommerce Booster module.
  • Step 3: Click on the πŸ”½ icon, to open the Extra features.
  • Step 4: Enable the Comparison Table.

To add this componentscroll down into the blocks library and select the WooCommerce Comparison Table block.

When the block appears, pick the products that you want to compare.

The  customizations available for this block are divided into seven  panels:

  • Settings
    • Table View Type - changes the way that the table is displayed, with two options: column / row.
    • Enable alternating row color - will alternate the colors of the rows, by changing white with grey.

  • Fields - control the fields that are compared in the table.
    • Reordering option - change the order of the fields, with a drag-and-drop movement.
    • Visibility - choose what field to be displayed, by clicking on the πŸ‘οΈ icon.

  • Color - the appearance of the table can be easily modified with the colors selection. You can choose from the Global Colors of Neve, or custom color.
    • Background - modifies the color of the hole table, except for the names of the fields.
    • Header Text - changes the color of the name of the fields.
    • Text - changes the color of the product details.
    • Border - changes the color of the border that separates the products.

  • Custom CSS - in case you want to modify certain things, the custom CSS tab comes in help.
    • Add your custom CSS - in the textbox.

  • Visibility Conditions - control the visibility of the blocks, using conditions.
    • Add Rule Group - choose from the list of conditions, regarding Users, Posts, or Date&Time.

  • Animations - select an animation to enliven the content of the block.
    • Delay - the delay of the animation when a user enters the page.
    • Speed - decide how much the animation should last.

  • Advanced 
    • Additional CSS class(es)


πŸ›’ Add to Cart Button

The  add to cart button represents the button that stays somewhere around the product, to ensure the sale process.

This component can be added by scrolling down into the blocks library and select the Add to Cart Button block. Pick a product from the list and the button will appear ( this means that each product can have a different button ).

The  customizations available for this block are divided into five panels:

  • Styles - this is mainly for the button's appearance.
    • Default - this style is identical to the Primary one.
    • Primary - light blue background with black text.
    • Secondary - dark blue background with white text.
    • Default Style - pick one of the options above to decide which will be the default style of the button.

  • Custom CSS - in case you want to modify certain things, the custom CSS tab comes in help.
    • Add your custom CSS - in the textbox.

  • Visibility Conditions - control the visibility of the blocks, using conditions.
    • Add Rule Group - choose from the list of conditions, regarding Users, Posts, or Date&Time.

  • Animations - select an animation to enliven the content of the block.
    • Delay - the delay of the animation when a user enters the page.
    • Speed - decide how much the animation should last.

  • Advanced 
    • Additional CSS class(es)


🎯Features Library

The Otter Pro plugin has brought in not only the new blocks but also new features:


πŸ”„ 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.

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

There are  extra visibility conditions available for the PRO version, that depend on the installed plugins ( WooCommerce and LearnDash ).

πŸ“ Note: Here is a dedicated doc about the Visibility Conditions.


πŸ”ƒ Import and sync review data from WooCommerce products

This feature is related to the Product Review Block. It displays the review of a manually added product, but this process can be automated by using the details of a WooCommerce product.

This can be easily done with the new feature of the Otter Blocks, Sync with WooCommerce, an option that appears in the right-hand Settings panel.

By selecting a product from the list, the current review information will be synced with the selected WooCommerce product.


πŸ“Œ Transform To Sticky

This feature is accessible by clicking on the  three dots with options and clicking on the Transform to Sticky. This will generate a new panel with options, from which a lot of them are pro features, except for one that is available in both free and pro.

With the Otter Pro plugin, you are able to customize the position, offset, and behaviour, or enable this on mobile.

πŸ“ Note: For further information about the pro options of the sticky feature, check this doc.


πŸ› WooCommerce Builder

The WooCommerce Builder is a powerful tool that allows you to create a product page as you wish, using the blocks and the resources available on the edit product page.

You can access it from Products > All Products, pick one from there, and click to edit it. It will open the builder that looks similar to the WordPress Editor.

πŸ“ Note: Here is a dedicated doc about the WooCommerce Builder.


🎯 Dynamic Values

The Dynamic Values feature is a time saver option that ensures the syncing aspect of your website, allowing you to use a dynamic value that inherits the specific information of a certain post / page. This can be done by accessing the editor and inserting the "%" symbol. It will open the dynamic values list from which you can choose.

The pro version of Otter brings in more data types, as well as Dynamic Values.

πŸ“ Note: You can look here for more details about the extra options of the Dynamic Values.


πŸ–Š Local Fonts

The Local Fonts module can be found in Settings > Otter > Fonts Module. From there, you can click to enable the Save Google Fonts Locally option.

This feature will speed up your website, by hosting the Google Fonts locally. This means that the fonts that you use on your website will no longer be requested from Google Fonts, but will be loaded from the server.

πŸ“ Note: The Neve theme has a similar module ( Performance Module ), which syncs with Otter's Local Fonts. Once you enable / disable it, the other one will do the same.

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