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 Settings→GutenBee 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 that 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’s options. Let’s take a look at the settings.

Accordion Settings

Under the Accordion Settings tab you can set up how the Accordion will work. There are three available options:

1. From the number of tabs slider you can select how many tabs the accordion will have.
2. If the collapse others on click switch is on clicking to open one tab will close/collapse the currently open one.
3. You can have one tab be open on page load by selecting it and toggling the start current tab open switch. This is a per tab option and you can have more than one tabs set to be open by default.

Block Appearance

Under Block Appearance you can customize the look of the block. The available options are:

1. Title Text Color: This option controls the color of the tab title’s text, for Default, Hover and Active State.
2. Title Background Color: This option controls the color of the tab title’s background, for Default, Hover and Active State.
3. Content Text Color: This option controls the color of the content text.
4. Content Background Color: This option controls the background color of the content area.
5. Border Color: This option modifies the color of the block’s borders.
6. Padding: With this option you can control the padding on each side of the block individually or all at once.
7. Margin: With this option you can control the margin on each side of the block individually or all at once.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.

Banner Block

Buttons Block

The Buttons block consists of the Button Group block which groups multiple buttons and offers options for the general appearance of the group and the Button block which controls the functionality and appearance of the individual button.

Let’s take a look at the Button Group first.

Button Group Settings

Here you can control the alignment of the entire button group and choose to display your buttons aligned to the left, right or center.

Notice that the Button Alignment has three icons next to its label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the button group alignment for each device.

Block Appearance

Under Block Appearance you can customize the look of the block. The available options are:

1. Background Color: This option controls the background color of the button group.
2. Padding: With this option you can control the padding on each side of the block
3. Background Color: This option controls the background color of the button group.
4. Padding: With this option you can individually control the padding on each side of the block.
5. Margin: With this option you can control the margin on each side of the block individually or all at once..

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.

Button Settings

Here you can set the button’s URL, select if you wish for it to open in a new tab and set the relation between the current and the linked document via the rel attribute. If you wish to add more than one attributes separate them with a space.

Block Appearance

Under the block appearance tab you can control how each button looks. Let’s take a look at the options.

1. Font Size: This option allows you to set the font size either via a drop down of preset values or by setting an exact pixel value in the input.
2. Text Color: This option allows you to set the color for the button’s text.
3. Background Color: This option controls the button’s background color.
4. Border: This option allows you to select the border style via the drop down and then select the border color and width.
5. Border Radius: This option allows you to round the button’s corners.
6. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
7. Padding: With this option you can control the padding on each side of the block individually or all at once.
8. Margin: With this option you can control the margin on each side of the block individually or all at once.

Notice that the Font Size, Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.

Predefined Templates

Under the Predefined Templates tab you can choose from pre-built button sizes and button styles for easier button creation. Available button sizes are extra small, small, medium and large. Available button styles are normal and outline.

Container Block

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.

Block Appearance

Under the block appearance tab you can control how the block looks. Let’s take a look a the options.

1. Box Text Color: This option allows you to set the color of the count down text.
2. Box Background Color: Controls the color of the box’s background.
3. Box Label Text Color: Changes the color of the labels.
4. Block Background Color: Controls the background of the entire block.
5. Border: This option allows you to select the border style via the drop down and then select the border color and width.
6. Border Radius: This option allows you to round the box’s corners.
7. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
8. Box Max Width: Allows you to set a maximum width for the boxes (relative to their container).
9. Number Font Size: Set the font size for the numbers either via a drop down of preset values or by setting an exact pixel value in the input.
10. Label Font Size: Set the font size for the labels either via a drop down of preset values or by setting an exact pixel value in the input.
11. Label Top Margin: Control the spacing between the numbers and the text below.
12. Padding: With this option you can control the padding on each side of the block individually or all at once.
13. Margin: With this option you can control the margin on each side of the block individually or all at once.

Notice that the Font Sizes, Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.

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.

Block Settings

1. Start Number: Input the number from which you want to start your count up from.
2. End Number: When this number is reached the count up ends.
3. Prefix: Any input here will appear to the left of the number in the count up.
4. Suffix: Any input here will appear to the right of the number in the count up.
5. Animation Duration: The time it takes for the count up to reach the end number.
6. Separator: This is the thousands separator, can be comma, dot, or space.
7. Text Font Size: Set the font size for the count up either via a drop down of preset values or by setting an exact pixel value in the input.
8. Title Top Margin: Control the spacing between the numbers and the text below.
9. Title Font Size: Set the font size for the title text either via a drop down of preset values or by setting an exact pixel value in the input.

Notice that the Font Size options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.

Block Appearance

Under the block appearance tab you can control how the block looks. Let’s take a look a the options.

1. Text Color: This option allows you to set the color of count up text.
2. Title Color: This option allows you to set the color of the title text below the numbers.
3. Background Color: This option controls the block’s background color.
4. Border: This option allows you to select the border style via the drop down and then select the border color and width.
5. Border Radius: This option allows you to round the box’s corners.
6. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
7. Padding: With this option you can control the padding on each side of the block individually or all at once.
8. Margin: With this option you can individually control the margin on each side of the block individually or all at once.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.

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.

Block Settings

This section is used to control the look of the divider. Let’s take a look at the available options.

1. Style: There are four available styles to choose from, solid, dotted, dashed and double.
2. Weight: Controls the thickness of the divider.
3. Width: Controls whether the divider will span the entire width of its container or be narrower.
4. Height: Sets the height of the divider’s container.
5. Alignment: Changes the alignment of the divider, useful when the width is less than 100%. Available options are left, center and right.

Block Appearance

Under the block appearance tab you can control how the block looks. Let’s take a look a the options.

1. Color: This option allows you to set the color of the divider.
2. Background Color: Controls the color of the divider container’s background.
3. Background Image: Applies a background image to the divider’s container and allows you to configure its appearance.
4. Border: This option allows you to select the border style via the drop down and then select the border color and width.
5. Border Radius: This option allows you to round the divider container’s corners.
6. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
7. Padding: With this option you can control the padding on each side of the block individually or all at once.
8. Margin: With this option you can individually control the margin on each side of the block individually or all at once.

Notice that the Background Image, Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.

Food Menu Block

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 Settings→GuttenBee Settings

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

Map Appearance

You can use the textarea in this section to paste in a custom map style, like the ones provided by SnazzyMaps if you don’t wish to use any of the preinstalled styles.

Block Appearance

Under the block appearance tab you can control how the block looks. Let’s take a look a the options.

1. Background Color: Controls the color of the map’s background.
2. Border: This option allows you to select the border style via the drop down and then select the border color and width.
3. Border Radius: This option allows you to round the map’s corners.
4. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
5. Padding: With this option you can control the padding on each side of the block individually or all at once.
6. Margin: With this option you can control the margin on each side of the block individually or all at once.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.

Heading Block

Create flexible headings for your content with the Heading Block.

Block Settings

This section will help you configure the heading. Let’s check out the available options.

1. Level: Set the level of the heading.
2. Font Size: Set the font size for the heading either via a drop down of preset values or by setting an exact pixel value in the input.
3. Alignment: Select the text alignment for the heading.

Notice that the Font Size and Alignment options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.

Block Appearance

Under the block appearance tab you can control how the block looks. Let’s check out the options.

1. Text Color: This option allows you to set the color for the heading’s text.
2. Background Color: This option controls the heading’s background color.
3. Border: This option allows you to select the border style via the drop down and then select the border color and width.
4. Border Radius: This option allows you to round the heading container’s corners.
5. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
6. Padding: With this option you can control the padding on each side of the block individually or all at once.
7. Margin: With this option you can individually control the margin on each side of the block individually or all at once.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.

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.

Block Settings

This section will help you configure the block. Let’s check out the available options.

1. Icon: Use the dropdown to find and select your desired icon.
2. View: Choose between default, stacked (rounded container with solid background) or framed (square container with border).
3. Icon Size: Set the size of the icon.
4. Alignment: Choose the alignment of the icon, available options are left, center and right.

The Shape and Padding options are made available when a view is selected to control the shape of the icon’s background and its padding. Furthermore when the Framed view is selected a Border Size option is available to control the width of the border.

Notice that the Icon Size option has three icons next to the label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.

Icon Appearance

Under the icon appearance tab you can control how the block looks. Let’s check out the options.

1. Primary Color: This option allows you to set the primary icon color.
2. Secondary Color: This option controls the icon’s secondary color (visible only when a View is selected).
3. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
4. Padding: With this option you can control the padding on each side of the block individually or all at once.
5. Margin: With this option you can individually control the margin on each side of the block individually or all at once.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.

Icon Box Block

Icon List Block

Create lists with custom icons instead of bullets.

List Settings

This section will help you configure the list. Let’s check out the available options.

1. List Layout: Choose between a normal or an inline list.
2. List Item Spacing: Set the default spacing between list items.
3. List Alignment: Choose the alignment of the list, available options are left, center and right.
4. List Item Link Display: Choose if you want to display the list items as inline or block level elements.
5. List Item Separator Width: Set the desired width of the list item separator.
6. List Item Separator Color: Set the color of the separator.

Notice that the List Item Spacing option has three icons next to the label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.

Font Settings

This section controls the font sizes for the list icons and text. You can set the font size either via a drop down of preset values or by setting an exact pixel value in the input.

Block Appearance

1. Text Color: This option allows you to set the color for the list’s text.
2. Icon Color: This option controls the color of the list icons.
3. Background Color: This option controls the list’s background color.
4. Border: This option allows you to select the border style via the drop down and then select the border color and width.
5. Border Radius: This option allows you to round the heading block’s corners.
6. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
7. Padding: With this option you can control the padding on each side of the block individually or all at once.
8. Margin: With this option you can control the margin on each side of the block individually or all at once.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.

Icon List Item Settings

By selecting each Icon List Item you can configure its icon via a handy drop down, add a URL where the list item will link to when clicked and choose if you want it to open the link in a new tab.

Image Block

Embed images in your content with the Image block.

Block Settings

This section will help you configure the image. Let’s check out the available options.

Firstly in the Styles section you can choose between the default or a rounded layout for the image.

Under the Image Settings tab you have the following options:

1. Image Width: Set a fixed width for the image.
2. Alt Text: Fill in an alternative text for the image, especially useful to screen reader users.
3. Image Size: Choose the image’s size among the available image sizes of your WordPress installation.
4. Image Link: Select where the image will link to when clicked..

Notice that the Image Width option has three icons next to the label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the image’s width for each device.

Block Appearance

Under the block appearance tab you can control how the block looks. Let’s take a look a the options.

1. Background Color: Controls the color of the block’s background.
2. Border: This option allows you to select the border style via the drop down and then select the border color and width.
3. Border Radius: This option allows you to round the image’s corners.
4. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
5. Padding: With this option you can control the padding on each side of the block individually or all at once.
6. Margin: With this option you can control the margin on each side of the block individually or all at once.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.

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.

Image Settings

This section will help you set up the block’s image. Let’s check out the available options.

1. Image Alignment: Pick the alignment of the image, allows you to position the image to the left, right or over the text.
2. Source Size: Set the size of the source image among the available image sizes of your WordPress Installation.
3. Image Width: Set a fixed width for the image.
4. Margin: Set the margin for just the image.

Notice that the Image Width and Margin options have three icons next to the label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.

Content Settings

This section will help you set up the block’s content. Let’s check out the available options.

1. Alignment: Set the text alignment.
2. Heading Element: Set the level of the content’s heading.
3. Heading Font Size: Control the font size of the heading either via a drop down of preset values or by setting an exact pixel value in the input.
4. Heading Bottom Margin: Controls the spacing between the heading and the text below it.
5. Text Font Size: Control the font size of the text either via a drop down of preset values or by setting an exact pixel value in the input.

Notice that the Font Size options have three icons next to the label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.

Block Appearance

Under the block appearance tab you can control how the block looks. Let’s check out the options.

1. Title Color: This option allows you to set the color of the content heading.
2. Content Text Color: This option controls the color of the content text.
3. Block Background Color: This option controls the block’s background color.
4. Border: This option allows you to select the border style via the drop down and then select the border color and width.
5. Border Radius: This option allows you to round the block’s corners.
6. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
7. Padding: With this option you can control the padding on each side of the block individually or all at once.
8. Margin: With this option you can individually control the margin on each side of the block individually or all at once.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.

Image Comparison Block

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

Block Settings

This section will help you set up the block. Let’s check out the available options.

1. Default Offset: Sets the initial position of the draggable comparison slider, by default it is in the middle of the image.
2. Source Image Size: Set the size of the source image among the available image sizes of your WordPress Installation.

Block Appearance

Under the block appearance tab you can control how the block looks. Let’s take a look a the options.

1. Background Color: Controls the color of the block’s background.
2. Border: This option allows you to select the border style via the drop down and then select the border color and width.
3. Border Radius: This option allows you to round the image’s corners.
4. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
5. Padding: With this option you can control the padding on each side of the block individually or all at once.
6. Margin: With this option you can control the margin on each side of the block individually or all at once.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.

Image Gallery Block

This block will allow you to create beautiful galleries using a hand picked set of images.

Block Settings

This section will help you set up the block. Let’s check out the available options.

1. Gallery Type: Choose between a Justified or a regular columned gallery type (with customizable column numbers).
2. Row Height: This is used as a lower bound for the height of each row in justified galleries.
3. Margins: Controls the spacing between gallery images.
4. Last Row: Controls how the last row is treated in justified galleries. The row can be justified, aligned left, right or center, or hidden entirely.
5. Randomize: Randomizes the image order on each page refresh.

Block Appearance

Under the block appearance tab you can control how the block looks. Let’s take a look a the options.

1. Background Color: Controls the color of the block’s background.
2. Border: This option allows you to select the border style via the drop down and then select the border color and width.
3. Border Radius: This option allows you to round the image’s corners.
4. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
5. Padding: With this option you can individually (or collectively) control the padding on each side of the block.
6. Margin: With this option you can individually (or collectively) control the margin on each side of the block.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.

Paragraph Block

Create flexible paragraphs with this block.

Block Settings

This section will help you set up the block. Let’s check out the available options.

1. Font Size: Control the font size of the paragraph text either via a drop down of preset values or by setting an exact pixel value in the input.
2. Drop Cap: Makes the first letter of the paragraph larger.
3. Alignment: Controls the alignment of the paragraph text.

Notice that the Font Size and Alignment options have three icons next to the label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.

Block Appearance

Under the block appearance tab you can control how the block looks. Let’s check out the options.

1. Text Color: This option allows you to set the color for the paragraph’s text.
2. Background Color: This option controls the paragraph’s background color.
3. Border: This option allows you to select the border style via the drop down and then select the border color and width.
4. Border Radius: This option allows you to round the paragraph container’s corners.
5. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
6. Padding: With this option you can individually (or collectively) control the padding on each side of the block.
7. Margin: With this option you can individually (or collectively) control the margin on each side of the block.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.

Post Types Block

With this block you can select a custom post type,  page, or a post and display a portion of it inside your content. This is specifically useful for landing pages, as you can select more than one items!

Block Settings

The block’s options can be split into three distinct sections. The styles, the query and the layout.

Style

This section allows you to select between predefined block styles (if available) which will change the appearance of the displayed post grid.

Query setup

This section will create the query which will return the post types we want in our grid.

1. Post Type: Select a post type to pull the posts from.
2. Base Category: Select a category/taxonomy term to further narrow down the results.
3. Author: Return only posts from a specific author.
4. Excluded Posts: Exclude certain posts from the results.
5. Included Posts: Include certain posts to the results (can be used to create a grid of hand-picked posts).
6. Posts Per Page: Set the number of posts you want to see per page on the grid.
7. Pagination: Enable or disable the pagination.
8. Offset: Skip one or more posts from the start of the query.
9. Order By: Select by which attribute your posts will be ordered from (i.e. date, title, id etc).
10. Order: Display the posts in an ascending or descending order.

Layout

Here you can select how many columns your grid will have, choose to enable or disable grid gutters, toggle the category filtering buttons and set a label for the button on each post type item.

Post Type Templates

The post types block offers templates which allow you to change the structure of the grid items. To do that you will first need to create a child theme, or if using the one of our themes grab it from our downloads section.

Once you have the child theme installed create a folder inside it called template-parts and inside that create another folder called gutenbee.

Next navigate to the /wp-content/plugins/gutenbee/src/blocks/post-types-templates/ folder of the GutenBee plugin and copy the article-default.php and article-media.php files in the /template-parts/gutenbee/ folder you have created in the previous step.

Now you can edit these two files with your preferred code editor and modify the markup according to your needs. The article-media.php takes care of the appearance of grid items when the grid has only one column, and the article-default.php works for 2-4 columned layouts.

Progress Bar Block

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

Block Settings

This section will help you set up the block. Let’s check out the available options.

1. Percentage: Set the “completed” percentage on the bar.
2. Display percentage: Show a numeric representation of the percentage value on the bar.
3. Title Bottom Margin: Control the spacing between the bar and its title.
4. Title Font Size: Control the font size of the title text either via a drop down of preset values or by setting an exact pixel value in the input.
5. Bar Text Font Size: Control the font size of the bar’s text either via a drop down of preset values or by setting an exact pixel value in the input.

Notice that the Font Size and Alignment options have three icons next to the label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.

Block Appearance

Under the block appearance tab you can control how the block looks. Let’s check out the options.

1. Title Text Color: This option allows you to set the color for the title text.
2. Bar Text Color: This option controls the color of the text on the bar.
3. Progress Background Color: This option controls the background color of the “completed” section of the bar.
4. Bar Background Color: This option controls the background color of the rest of the bar.
5. Block Background Color: This option controls the background color of the entire block.
6. Border: This option allows you to select the border style via the drop down and then select the border color and width.
7. Border Radius: This option allows you to round the block’s corners.
8. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
9. Padding: With this option you can individually (or collectively) control the padding on each side of the block.
10. Margin: With this option you can individually (or collectively) control the margin on each side of the block.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.

Reviews Block

Create summary reviews with individual ratings and an automatic average score.

Block Settings

This section will help you set up the block. Let’s check out the available options.

1. Score Font Size: Control the font size of the score text either via a drop down of preset values or by setting an exact pixel value in the input.
2. Score Color: Choose the desired color for the score text.
3. Verdict Font Size: Control the font size of the verdict text either via a drop down of preset values or by setting an exact pixel value in the input.
4. Verdict Color: Choose the desired color for the verdict text.

Notice that the Font Size options have three icons next to the label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.

Review Item Settings

This section will help you configure global review item options. Let’s check out the available options.

1. Display Rating: Toggle the appearance of the rating number on each rating bar.
2. Bar Text Font Size: Control the font size of the bar text either via a drop down of preset values or by setting an exact pixel value in the input.
3. Bar Height: Set the rating bar height.
4. Bar Text Color: Control the color of the bar’s text.
5. Progress Background Color: Choose the desired color for the filled portion of the bar.
6. Bar Background Color: Change the overall background color of the bar.

Notice that the Font Size option has three icons next to the label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.

Block Appearance

Under the block appearance tab you can control how the block looks. Let’s take a look a the options.

1. Background Color: Controls the color of the block’s background.
2. Border: This option allows you to select the border style via the drop down and then select the border color and width.
3. Border Radius: This option allows you to round the block’s corners.
4. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
5. Padding: With this option you can individually (or collectively) control the padding on each side of the block.
6. Margin: With this option you can individually (or collectively) control the margin on each side of the block.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.

Review Item

Selecting each review bar presents you with another option. This one allows you to set the rating number via the slider or the available input.

Slideshow Block

Create a simple Slideshow with various parameters and images.

Block Settings

This section will help you set up the block. Let’s check out the available options.

1. Autoplay: If enabled the slides will advance without user input.
2. Infinite Slide: If enabled the slider will loop around to the first slide when it reaches the end.
3. Arrow Navigation: Toggles the navigation arrows.
4. Dot Navigation: Toggles the navigation dots.
5. Animation Style: Choose between fade and slide animations for your slideshow.
6. Animation Speed: Set the animation speed for the slide/fade effect.
7. Autoplay Speed: Set the speed between slides.
8. Pause on Hover: Choose if you’d like the slideshow to pause when hovered.

Navigation Appearance

This section will help you configure the appearance of the slideshow’s navigation. Let’s check out the available options.

1. Arrow Navigation Color: Controls the color of the navigation arrow.
2. Arrow Background Color: Controls the background color of the navigation arrow.
3. Dot Navigation Color: Controls the color of the navigation dots.
4. Dot Background Color: Controls the background color of the navigation dots.

Block Appearance

Under the block appearance tab you can control how the block looks. Let’s take a look a the options.

1. Background Color: Controls the color of the block’s background.
2. Border: This option allows you to select the border style via the drop down and then select the border color and width.
3. Border Radius: This option allows you to round the block’s corners.
4. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
5. Padding: With this option you can individually (or collectively) control the padding on each side of the block.
6. Margin: With this option you can individually (or collectively) control the margin on each side of the block.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.

Spacer Block

Add spacing between elements.

Block Settings

This section will help you set up the spacer’s height via the slider or the input.

Block Appearance

Under the block appearance tab you can control how the block looks. Let’s check out the options.

1. Background Color: Controls the color of the spacer’s background.
2. Background Image: Applies a background image to the divider’s container and allows you to configure its appearance.
3. Enable Parallax: Toggles the parallax effect. Needs a background image set.
4. Parallax Speed: Controls the speed of the parallax effect.
5. Border: This option allows you to select the border style via the drop down and then select the border color and width.
6. Border Radius: This option allows you to round the divider container’s corners.
7. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
8. Margin: With this option you can individually (or collectively) control the margin on each side of the block.

Notice that the Background Image and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.

Tabs Block

This block will allow you to create easily a tab element with your content inside.

Block Settings

Block Appearance

Under Block Appearance you can customize the look of the block. The available options are:

1. Tab Text Color: This option controls the color of the tab’s text, for the default, hover & active states.
2. Tab Background Color: This option controls the color of the tab’s background, for the default, hover & active states.
3. Content Text Color: Control the color of the content.
4. Content Background Color: Change the background color of the content.
5. Content Border Color: This option modifies the color of the content’s borders.
6. Padding: With this option you can individually (or collectively) control the padding on each side of the block.
7. Margin: With this option you can individually (or collectively) control the margin on each side of the block.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.

Testimonial Block

Create testimonials for your site.

Style & Image Settings

This section will help you set up the block. Let’s take a look at the available options.

1. Styles: Choose if you want to display a default square shaped avatar or a rounded one.
2. Image Width: Set a fixed width for the image.
3. Alt Text: Set the alternative text of the image, useful for screen reader users.
4. Image Size: Set the source size of the image by picking among the available ones in your installation.

Notice that the Image Width option has three icons next to the label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.

Layout & Text Settings

This section will help you configure the block’s layout and text. Let’s take a look at the available options.

1. Avatar Position: Select the location of the avatar relative to the text.
2. Content Font Size: Control the font size of the content either via a drop down of preset values or by setting an exact pixel value in the input.
3. Citation Font Size: Control the font size of the citation either via a drop down of preset values or by setting an exact pixel value in the input.
4. Info Font Size: Control the font size of the info text either via a drop down of preset values or by setting an exact pixel value in the input.

Notice that the Font Size options have three icons next to the label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.

Block Appearance

Under the block appearance tab you can control how the block looks. Let’s check out the options.

1. Text Color: This option allows you to set the color of the block’s text.
2. Background Color: This option controls the testimonial’s background color.
3. Border: This option allows you to select the border style via the drop down and then select the border color and width.
4. Border Radius: This option allows you to round the block’s corners.
5. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
6. Padding: With this option you can individually (or collectively) control the padding on each side of the block.
7. Margin: With this option you can individually (or collectively) control the margin on each side of the block.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.

Video Block

Easily embed videos from your media library.

Block Settings

This section will help you set up the video block. Let’s take a look at the available options.

1. Autoplay: If enabled the video will begin playing automatically when the page loads. (does not work on mobile devices).
2. Loop: If enabled the playback will restart when the video reaches its end.
3. Muted: If enabled the video will be muted by default.
4. Playback Controls: If enabled will display interactive playback controls.
5. Play Inline: If enabled, mobile browsers will play the video in-place instead of fullscreen by default.
6. Preload: Choose what sort of data will be preloaded ( before the user clicks to play the video).
7. Poster Image: Choose an image which will be displayed as a placeholder before the playback starts.

Block Appearance

Under the block appearance tab you can control how the block looks. Let’s check out the options.

1. Border: This option allows you to select the border style via the drop down and then select the border color and width.
2. Border Radius: This option allows you to round the block’s corners.
3. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
4. Padding: With this option you can individually (or collectively) control the padding on each side of the block.
5. Margin: With this option you can individually (or collectively) control the margin on each side of the block.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.

Video Embed Block

Embed videos from YouTube or Vimeo

Block Settings

This section will help you set up the video embed block. Let’s take a look at the available options.

1. Cover Image: Choose a cover image which will be displayed before the playback starts.
2. Show Controls: Show or hide the video playback controls.
3. Enable Autoplay: If enabled the video will begin playing automatically when the page loads. (does not work on mobile devices).
4. Mute: If enabled the video will be muted by default.
5. Loop: If enabled the playback will restart when the video reaches its end.
6. Modest Branding: If enabled makes YouTube branding more discreet.
7. Lazy Load: If enabled video assets will only be loaded once playback is initiated and not on page load.
8. Stick to bottom on scroll: If enabled, the video will stick to the bottom corner of the view port and keep playing once the user scrolls past it.
9. Start time in seconds: Set a custom timestamp to start the video playback from.
10. End time in seconds: Set a custom timestamp as the video’s end.

Block Appearance

Under the block appearance tab you can control how the block looks. Let’s take a look a the options.

1. Background Color: Controls the color of the block’s background.
2. Border: This option allows you to select the border style via the drop down and then select the border color and width.
3. Border Radius: This option allows you to round the block’s corners.
4. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
5. Padding: With this option you can individually (or collectively) control the padding on each side of the block.
6. Margin: With this option you can individually (or collectively) control the margin on each side of the block.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.

Common Options

Visibility Settings

Via the Visibility Settings you can hide the block for certain type of device or user. It is available on all blocks.

The Viewport visibility toggles allow you to hide the block on desktops, tablets and mobiles. You can choose to hide it on more than one device type.

The Authentication visibility toggles allow you to display the block only to logged in or logged out users.

Additional Help

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