Neve Block Editor Booster Module

The Block Editor Booster is part of Neve Pro Addon's modules. If you would like to learn more about the Neve Pro Addon, take a look at Neve Pro Addon's full documentation.

In this article the following subjects will be presented:


πŸ–²οΈ Activating the module

1
Install the Neve PRO and the Otter Blocks plugin, using these instructions.
2
Navigate to Appearance > Neve Options > Neve Pro.
3
Take a look at the modules and enable the Blocks editor.


πŸ‘· Using the module

In order to use the module, 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 searching for the new features.


🧰 Blocks Library

The Block Editor Booster module is improving Neve's blocks by providing new components.

What's new with the Block Editor Booster?


⏰ 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)


πŸ”Ž 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 Product Comparison

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

The Block Editor Booster has brought not only the new blocks but also new features:


πŸ”„ Conditional Loading

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.

Step 1: To start the process, click on the Add Rule Group.

Step 2: From that point, you need to add conditions, so click on Add a New Condition.

Step 3: Select one of the conditions displayed there.

Step 4: An interesting fact is that a group can have multiple conditions at the same time ( AND logical operation ).

  • Example: 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 ).

Step 5: Navigate to the website and check if the condition works.


πŸ”ƒ Import and sync review data from Woo 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.

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