Documentation for Gutenbee

GutenBee is a collection of elegant WordPress blocks enhancing your editing experience in the Gutenberg editor and vastly extending the potential of the new editor experience.

Installation

To install the plugin simply navigate to Plugins Add New in your WordPress dashboard and search for Gutenbee! 

Next, click the Install Now button and wait for the plugin to be installed. Once the plugin is installed you can click the Activate button.

That’s it. The plugin is installed and activated.

Enabling your Blocks

Navigate to SettingsGutenBee Settings and enable or disable your new custom blocks. By default, all blocks are enabled and work as expected except for the Google Maps Block, which will need first a valid API key. You learn how to obtain an API key by following the guide here.

Blocks one by one

After Installing the plugin, you will notice a new tab appeared in your block collection that includes all active GutenBee blocks.

These new tools will help you shape your content and generate complex scenarios using the new WordPress Editor. Let’s have a look at each block.

Accordion Block

With this block you can create easily an Accordion structure, by directly adding your content editing the Title, Content and change several settings from the Block Options:

  1. Change the number of Tabs (accordion items).
  2. Collapse all tabs when a user clicks on another tab.
  3. Change the Color of the background, border and title color.
  4. Change the Appearance (margin from other elements).
  5. Add a Custom class to allow you directly change the block style via CSS.

Color Settings for the Accordion Block

Especially, you can change the blocks colors from the Color Settings Section:

  1. Change the background color of the block.
  2. Change its title text color.
  3. Change its border color.

Countdown Block

This block will allow you to create an advanced countdown element using the date and time you want as an ending point.

  1. Here you can change the ending date and time.
  2. Change which elements you want to display or not.
  3. Select the font style and size as well as the padding and margin of the block.
  4. Change the text color.
  5. Change the background color.
  6. Add a custom CSS class to style your block.

Date & Time Tab

In detail in this tab you will find:

  1. Select the date and time the counter will finish.
  2. Advanced Calendar to easily find your date.

Settings Tab

Also, you can change which parts you need to hide or show each time.

  1. Show/Hide Days.
  2. Show/Hide Hours.
  3. Show/Hide Minutes.
  4. Show/Hide Seconds.
  5. Show/Hide Labels.

Appearance

Here you can change the looks of the countdown by selecting the font size and its with. In detail:

  1. Change the font size or the block number elements.
  2. Change the label font size.
  3. Change the block width.
  4. Apply margin spacing from other blocks.

Text Color

Here you can change the color of all numbers and labels

Background Color

Here you can change the background color of the number/label containers

Advanced Options

Add a custom CSS class to style your block.

Countup Block

This block will allow to you create a count up element from a  number to an ending one. You can have extra labels (prefix and suffix) before and after the counter.

  1. Add a starting number.
  2. Add a  number that the counter will stop.
  3. Select a label that will appear before the counter.
  4. Select a label that will appear after the counter.
  5. Change the animation time between each count up.
  6. Select a separator for large numbers.
  7. Change the Font Size.
  8. Change the alignment of the block.

Divider Block

This is a simple divider block which will allow you to create distance between elements or add a border with various styles between them.

  1. Change the divider style.
  2. Change the weight of the border.
  3. Change the width of the divider (%).
  4. Change the height of the divider in pixels.
  5. Align it based on your content.
  6. Change the divider background color.
  7. Advanced styling using a CSS class.

Icon Block

This block will allow you to add specific icons from our handmade listing. You can style them as you need changing their size, color and type.

  1. Select an Icon from the dropdown list.
  2. Change the icon container looks using a frame or not around it. Changing this value will generate new fields to control your elements. So using “Stacked” will render a new padding option and generate a Secondary Color menu for your icon background. While using “Framed” will create a border width option.
  3. Change the icon size.
  4. Change the icon alignment.
  5. Change the Primary Color.
  6. Change margin between other blocks.
  7. Add a custom class to your icon.

Icon Box Block

This block will help you generate a custom element with an icon, a title, and a subtitle.

  1. Change your icon settings
  2. Change the Title settings
  3. Change the Test/subtitle settings
  4. Change the Content settings
  5. Change the appearance of the block
  6. Use advanced options to style the block.

Icon settings

You can select your icon and style it:

 

  1. Select an icon from the dropdown list.
  2. Change the icon container looks using a frame or not around it. Changing this value will generate new fields to control your elements. So using “Stacked” will render a new padding option and generate a Secondary Color menu for your icon background. While using “Framed” will create a border width option
  3. Change the icon size.
  4. Change the icon alignment.
  5. Select the distance between the icon and any other element

Title Settings

  1. Change the header type of the title
  2. Select the font size.

Text Settings

Here you can just change the text font size

Content Settings

In this tab, you can change the content alignment

Primary Color

Here you can select the primary color of the block

Image Box Block

This block will allow you to create an Image element next to a title and a subtitle. You can use any image you wish from your media library.

  1. Change image settings.
  2. Change the main title settings
  3. Change the text settings.
  4. Change content settings.
  5. Change the appearance of the block.
  6. Use advanced options to style the block.

Image Settings

  1. Change the image alignment.
  2. Change the image width.
  3. Select the image distance from other elements.

Title Settings

  1. Change the header type of the title.
  2. Select the font size.

Image Comparison Block

This block will allow you to create a side by side comparison for two images of your selection

  1. Select the offset of these images.
  2. Select the default image size (these are created by default from WordPress or your theme).
  3. Change the appearance of the block.
  4. Select advanced options to style the block.

This block will allow you to create beatiful justified galleries using a set of images you will select.

  1. Change the row height. All your images will have this height.
  2. Change the distance between each image.
  3. Change the last row behavior.
  4. Randomize the order of these images.

Progress Bar Block

You can easily create a static progress bar with several features.

  1. Change the bar width (%).
  2. Display or not the percentage number.
  3. Change the title before the block.
  4. Change the inner text title or the process bar.

Color Settings

Here you can also change the color settings of your bar

  1. Select a title text color.
  2. Select a custom color besides the suggestions.
  3. Default the color to the original.
  4. Change the bar background.
  5. Change the bar text color.

Slideshow Block

Create a simple Slideshow with various parameters and images. First, you will need to select a set of images for your slideshow like shown below:

Then you can:

  1. Change the slideShow settings
  2. Change the slideshow appearance
  3. Change your image settings
  4. Select advanced styling option for your slideshow

Slideshow Settings

  1. Enable / Disable autoplay.
  2. Repeat all slide infinitely.
  3. Use the arrow navigation.
  4. Use the dot navigation.
  5. Change the animation style.
  6. Change the animation speed.
  7. Change the time between each slide.
  8. Pause on hover.

Colors

  1. Select the arrow navigation color
  2. Select a custom color besides the suggestions
  3. Default the color to the original
  4. Select the dot navigation color

Appearance


Here you can change the margin of the slider from other blocks

Image Settings

  1. Link to a location
  2. Select the image size

Advanced

Add a custom Class for your slideshow.

Tabs Block

This block will allow you to create easily a tab element with your content inside. You can edit the tab title and contents by writing them directly your block.

  1. Select the number of tabs.
  2. Change the color settings.
  3. Change the appearance of the block.
  4. Add advanced styling options for your tab block.

Color Settings

  1. Select the active tab background color.
  2. Select a custom color besides the suggestions.
  3. Default the color to the original.
  4. Select the active tab text color.
  5. Select a border color.

Google Maps Block

This tab will allow you to create a Google Map Element as a block. In order this to work you will need to set up an API key and add it under SettingsGuttenBee Settings

Here you can

  1. Change the Latitude/Longitude for your icon to appear.
  2. Change the Zoom Level of the map.
  3. Change the height of the map.
  4. Disable Map Zoom while scrolling.
  5. Change the map style.
  6. Upload your own marker.
  7. Add a complimentary popup with the text you want.

Additional Help

Still, have questions or problems setting up GutenBee? We will be happy to help you out in GutenBees’ support forums

LIMITED OFFER - Coupon code: SAVE30 - Save 30% OFF on any purchase! - Buy Now