Qi Blocks for Gutenberg

created: 03/24/2022
latest update: 03/24/2022
by: Qode Interactive
helpcenter.qodeinteractive.com/

Welcome to the Qi Blocks for Gutenberg documentation file, where we will be taking a closer look at the 80 custom blocks for Gutenberg that you get with this plugin and all the options and features you get with them.

All blocks that come with Qi Blocks for Gutenberg are designed to be light and easy to use. The plugin comes packed with a huge selection of advanced, straightforward stylization options for each block, which allows you to create a large number of different sections and elements for your website in a clear and intuitive manner.

Note that this user guide covers both free and premium versions of the plugin, meaning you'll find both free and paid Qi Blocks for Gutenberg blocks here.

Without further ado, lets delve into the widgets and all they have to offer. Have fun creating your beautiful new website with Qi Blocks for Gutenberg!

Additional CSS Class(es)

Each of the blcoks that come with the Qi Blocks for Gutenberg plugin has an Advanced option sub-tab, located at the bottom of the block options tab. Here you'll find the Additional CSS class(es) field.

If you wish to style a particular content element differently, you can use this field to add an extra class name to that element and then refer to that class name in your css file.

Accordions and Toggles block for Gutenberg lets you easily configure and display visually appealing strings of text divided into individual sections that can be expanded when their corresponding titles are clicked on – here you can feature your FAQs or any other important bits and pieces of textual information.

Using the Accordions and Toggles block

1. Adding the Accordions and Toggles block

First off, you should locate the block by clicking either of the two '+' buttons (found in the top left of the screen and in the section below the 'Add title' text, to the right, respectively). After you've clicked the '+' button, you can type the name of the block in the search field that pops up. Now you can simply drag-and-drop the block to a desired section on the screen.

2. Accordions and Toggles block Content settings

You can find the options for customizing the block on the right side of the screen. In the event that the side area containing block options is not visible, you can click the three vertical dots that appear above the block once it is clicked on, and select 'Show More Settings' option found on top.

First off we’ll go through the options available in the Content tab.

Right off the bat, you have the Behavior dropdown where you can opt for using the Accordion or Toggle block layout. Accordion behavior type enables opening only one section of the element at a time – once a section is clicked on to be expanded, the previously opened one will close. Toggle behavior type allows for multiple sections to be expanded simultaneously.

Next up, regardless whether you selected the Accordion or Toggle behavior, you can adapt the Style of the element. These include Standard, Boxed, Border Top and Border Between predefined styles. Depending on the look you wish to achieve, pick the corresponding element layout and you’ll be able to see the new settings applied on the fly on the left side of your screen.

Standard layout features no borders, Boxed places a border around the entire element, Border Top displays borders above items in the accordion/toggle, and Border Between lays down borders between each item you decided to include.

The Open Icon and Close Icon fields let you add SVGs you wish to display in the element. Depending on the state of the section (active or passive), these icons will be displayed on them – close icon for already expanded sections and closed sections on mouse hover, and the open icon for all passive/closed sections.

Under the section titled Items you can add each individual item/section you wish to feature in your Accordion or Toggle. Here you can input a title and textual content for each of the items you wish to display.

3. Accordions and Toggles block Style settings

After you have picked a behavior type, style, set up the open & close icons and added individual items for sections, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Here you have a multitude of completely intuitive options for applying different stylizations to the titles, content, borders, as well as the icons. Note that in the event that you selected the Standard element behavior type, you’ll also have the option to set the spacing between the items.

4. Accordions and Toggles block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find five sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

In this sub-tab you can make various adjustments to the block background. You can choose between classic and gradient background types; in the event you selected the classic type, you can set a background color and add a background image, and if you opted for the gradient type you can set the first and second colors and locations, & choose a gradient type and angle.

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Advanced Columns custom block for Gutenberg lets you create easily customizable columns to which you can add other blocks of your choosing.

Using the Advanced Columns block

1. Adding the Advanced Columns block

2. Advanced Columns block Content settings

First off we’ll go through the options available in the Layout tab.

Layout

This is where you can make basic adjustments to the the columns. First off you can select and adjust one of three content width options.

After this you can adjust the column gap, height, vertical alignment, overflow behavior, and a HTML tag.

3. Advanced Columns block Style settings

After you have finished with the basic set up of your advanced columns, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Layout tab in the upper-right side of the screen.

Background

Here you can choose a background type, and configure the selected background type. Depending on the type you select, you can set a color for the background, add a background image, adjust the gradient style and add the video for the background.

Background Overlay

This is where you can adjust the column background overlay. You can choose between classic and gradient background styles and make adjustments to each, and you can alter background overlay opacity as well as select a blend mode for the overlay.

Border

Here you can select one of 5 border types and configure each of them, and you can input values for border radius and adjust box shadow styles.

4. Advanced Columns block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find three sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes, and you can reverse columns for tablet and mobile device screens.

Advanced Text custom block for Gutenberg is designed to let you display sections with fully customizable strings of text on your pages.

Using the Advanced Text block

1. Adding the Advanced Text block

Once you've done so, you can input the text you wish to display by clicking on the 'Text...' field and inputing the textual content.

2. Advanced Text block Content settings

In the Content sub-tab you can disable text line break for screens with resolutions below 1024px.

3. Advanced Text block Style settings

After you have finished with the basic set up of your advanced text, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Here you can pick an alignment style for the text, set a text color, and configure text typography; you can select a font family, adjust font size, weight, transform style, style, and decoration, as well as adapt text line height and letter spacing.

4. Advanced Text block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Author Info custom block for Gutenberg provides you with a straightforwad way to create presentations for authors on your website.

Using the Author Info block

1. Adding the Author Info block

Once you've done so, you can input the text you wish to display by clicking on the 'Text...' field and inputing the textual content.

2. Author Info block Content settings

In the Content tab you can choose one of two element layouts, input an author image, input a title, or optionally enable automatic display of the authors name as the title.

You can also input some additional text, add an author email, image for the author signature, link, and enable displaying social icons for the author. These icons can be textual, and for each of the you can add some text, icon image, and an icon link. The final two options let you enable a hover underline for the link, and you can display placeholders for empty textual inputs.

3. Author Info block Style settings

After you have finished with the basic set up of your author info, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are two sub-tabs for making various stylistic adjustments to the element.

Content Style Sub-tab

In the content style sub-tab you can choose a horizontal alignment for the element.

You can also choose a heading tag, color, hover color and typography for the title, a heading tag, color and typography styles for the text, a color, hover color and typography for the icon, set a color, hover color and typography styles for the email text, and adjust the background color, background hover color. The final option lets you choose one of 3 hover behaviors for the background (and pick a zoom origin for one of two zoom hover behaviors).

Spacing Sub-tab

In this sub-tab you can adjust the top margins for the title, text, email, signature and social icons, as well as adjust single icon margin. The remaining option here lets you input values for author info padding.

4. Author Info block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Banners custom block for Gutenberg provides you with a straightforward way to create captivating, fully customizable banners where you can display your important announcements, ads or anything else you wish to draw the attention of your visitors to.

Using the Banners block

1. Adding the Banners block

2. Banners block Content settings

General

Here you can make the basic adjustments to your banner. You can pick from two predefined banner layouts: Standard, which places the banner content directly over the banner image, and In Box which puts the content on top of the banner image in a boxed layout.

After you’ve picked a layout you wish to apply to the element, you can move on to adding the banner image & text, and selecting one of four predefined sizes for the banner image.

You can also choose whether you wish to include a button inside the banner, and input a URL you wish the button to lead to, choose if the link opens in a new or the same browser tab, add 'nofollow' to the link, and add custom attributes. The final option lets you enable a link overlay.

Content

As its name suggests, in this sub-tab you can add the content for your banner; a banner title, subtitle and some additional text. You can choose what to include, e.g. if you wish to display a title only, simply leave the remaining two fields empty. You can also style the title, subtitle and text of your banner separately, but more on that in a bit.

3. Banners block Style settings

After you have finished with the basic set up of your banner, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Content

Here you can adjust the banner padding, set the banner border radius, customize the banner box shadow and hover box shadow.

Text

In this sub-tab you can adjust heading tags, colors and typography for your titles, subtitles and text.

Spacing

Simply click and drag to set the top margins for titles and text.

Background

In the final sub-tab of the Style tab you can adjust the banner background in both initial and hover states. You can alter the background overlay initial color, overlay hover color, pick one of three image hover styles, and select a background image hover zoom origin.

4. Banners block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Blog List custom block for Gutenberg lets you display a captivating list with your blog posts in a number of visually appealing ways.

Using the Blog List block

1. Adding the Blog List block

2. Blog List block Content settings

General

Here you can make the core adjustments to your blog list element. First off you have the to choose between gallery and masonry blog list layouts.

You can also set proportions for the images, pick a number of columns you wish the list to have. The remaining options let you choose a size for the space between list items, choose between predefined responsive settings and inputting different column values for different responsive stages yourself, choose whether you wish to display pagination bullets in your list, and enable & adjust the zigzag item positioning.

Pagination

In this sub-tab you'll be able to select one of four pagination types for your blog list.

Query Sub-tab

Here you can set a maximum number of posts that you wish to display per 1 page, and select how you wish to order the items in the list.

If you wish to limit the list to certain items, you can select additional parameters that will define the items you wish to show.

Layout Sub-tab

In this sub-tab you can pick one of six layouts for items in the list, set a heading tag for the item titles, choose which of the additional post information you wish to show in the list - you can hide or show media, info icons, post dates, categories, authors, and buttons.

3. Blog List block Style settings

After you have finished with the basic set up of your blog list, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Here you’ll find 5 sub-tabs; style, layout spacing style, content style, date style, and read more button style. First off, let’s go through the settings that you can adjust in the Style sub-tab.

Style Sub-tab

In this sub-tab you can configure the title color, hover color and typography, choose whether you wish to place an underline beneath the title, set a color for the excerpt text, adjust excerpt typography, pick a color, hover color and adjust typography for the info text, input values for the image border radius, pick an image hover behaviour, hover zoom origin, and select colors for the overlay in normal and hover states.

Layout Spacing Style Sub-tab

Here you can make layout spacing adjustments to your list.

You have the option to alter the bottom margin for the post info section, title and text, as well as to input values for content padding.

Content Style Sub-tab

This is where you can adjust the content background color and item shadows in the list.

Date Style Sub-tab

Here you can adapt the appearance of post dates; you can alter date color, hover color, typography, background color, input values for date padding, adjust data border radius, and vertical & horizontal offset.

Read More Button Sub-tab

In this sub-tab you can adjust the read more button appearance; you can customize the button text typography, text color, hover color and border color for both normal and hover states (and choose a background reveal style for the hover state), and input values for the border width, radius and padding.

4. Blog List block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Button custom block for Gutenberg lets you create fully customizable buttons the easy way.

Using the Button block

1. Adding the Button block

2. Button block Content settings

General

Here you can make the basic adjustments to your button. First off you have the option to pick one of three button layouts.

Filled

This layout lets you display filled buttons – buttons with borders and colored backgrounds. You also get to choose from three button types with this layout; standard, with inner border & icon boxed. In addition to this you can enable an underline for the text, choose a button size, and of course input the text you wish to show on the button alongside a button link.

Outlined

This button layout has the same options as the filled button layout, the key difference being the fact that outlined buttons have borders, however their backgrounds are transparent.

Textual

Pick this layout if you wish to display a simple button with some text and a transparent background. You can enable an underline for the button text, input the text you wish to display on the button, add a URL for the button link & choose how the link opens.

Icon

Here you can add an SVG you wish to display inside the button, set an icon size, color, hover behavior, pick a position for the icon relative to the button, and input values for icon margins.

3. Button block Style settings

After you have finished with the basic set up of your button, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Style

Here you can adjust the button text typography and configure button color for normal and hover button states.

4. Button block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Call to Action is a custom block for Gutenberg that lets you effortlessly create visually appealing messages for your visitors and encourage them to take a certain action.

Using the Call to Action block

1. Adding the Call to Action block

2. Call to Action block Content settings

General Sub-tab

In the general sub-tab you can input the title (main text) of your call to action message, and input some additional text if you choose to.

You can also choose a screen size below which the button will not be displayed, and make the entirety of the call to action element clickable by setting the Enable link overlay option to “Yes”.

3. Call to Action block Style settings

After you have finished with the basic set up of your call to action, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are four sub-tabs for setting up various stylizations for your call to action.

Title Sub-tab

In this sub-tab you can adjust heading tags, colors and typography for the title.

Text Sub-tab

Here you can adjust the color and typography for the call to action text.

Background Sub-tab

In this sub-tab you can adjust the element background. First off you can choose between classic and gradient background types. For the classic type you have the option to adjust the color and add a background image, and if you select the gradient type you can set the first color, second color, the locations for both gradient colors, and pick a gradient type; if you opt to use the linear gradient type, you can adjust its angle.

Finally, you can also choose one of five adjustable border types for the background here.

Spacing Style Sub-tab

This is where you can set up the holder padding, adjust the top margin for the text, right content padding, and set button margins.

4. Call to Action block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Cards Gallery custom block lets you easily create an interactive presentation with multiple images stacked on top of each other; once a piece of an image that is set under the currently displayed image is clicked on, that image moves to the top of the stack.

Using the Cards Gallery block

1. Adding the Cards Gallery block

2. Cards Gallery block Content settings

First off you have three image shuffle styles to choose from. Depending on the one you go with, the images will appear stacked to the right, left, or in the left-right style.

Now we get to adding individual images to your card galleries. To add a new image item, click the + ADD ITEM button located beneath the Image Items section.

After you have done so, you’ll have the option to add a configurable link and an image for each of the items you wish to display in the gallery.

The final option lets you choose the proportions you wish to apply to the images.

3. Cards Gallery block Style settings

After you have finished with the basic set up of your cards gallery, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Here you can simply click and drag the sliders and set the scale step (scales the bottom images), and the offset step (defines how much of the bottom image(s) is visible beneath the currently displayed top image).

4. Cards Gallery block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Categories custom block for Gutenberg provides you with a straightforward way to display a list of post categories on your website.

Using the Categories block

1. Adding the Categories block

2. Categories block Content settings

First off, you can enable displaying post counts next to categories, you can enable displaying empty categories (existing categories that currently have no posts assigned to them), top level categories, and category hierarchy. You can also choose a behavior for the categories underline here.

3. Categories block Style settings

After you have finished with the basic set up of your categories, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Here you can set the category color, hover color, typography and adjust the size of the space between category items.

4. Categories block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Clients List custom block for Gutenberg lets you display a captivating list of your clients or business associates the easy way.

Using the Clients List block

1. Adding the Clients List block

2. Clients List block content settings

Content Sub-tab

Here you can make basic adjustments related to appearance and behavior of the element.

First set of options is related to list columns; here you can pick a number of columns for your list, choose predefined settings for columns on smaller screens or pick the number of columns for each responsive stage separately, and adjust the size of the space between the list items. You can also choose to include borders for your list if you wish, with two border types available.

If you choose not to display any of the two border types, you can place list items in boxes. You also have the option to choose one of five hover types.

After you made these adjustments, you can move on to adding individual items to your list.

To include an item in the list, simply click the +ADD ITEM button located at the bottom of the section. You can feature as many items as you decide.

You have the option to set a main image and an image that appears on hover for each client item. You can also add a title and some additional text, as well as add an adjustable link for each of the items.

3. Clients List block Style settings

After you have finished with the basic set up of your client list, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Style Sub-tab

In the style sub-tab you can further define the look and feel of your list. Here you can set an alignment type for the list, pick a heading tag for item titles, enable displaying an underline for titles on hover, set color for item titles and adjust typography, and pick a color & set typography for the additional item text.

On top of that you can adjust bottom margins for titles and images in your list, and input padding values for the element.

Border Style Sub-tab

In the second sub-tab you can make various adjustments to the list borders. In order for these settings to become available, you first need to enable one of two types of borders for your list from the Content tab.

Here you can choose a color for your borders, pick a border style, and set border width. There are three border types to choose from: solid, dashed and dotted.

4. Clients List block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Comments Template is a custom block for Gutenberg that lets you create easily adjustable comment templates on your website.

Using the Comments Template block

1. Adding the Comments Template block

2. Comments Template block Content settings

In the content tab you can enable displaying comment list and comment form in the element.

3. Comments Template block Style settings

After you have finished with the basic set up of your comments template, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are three sub-tabs for setting up various stylizations for your call to action.

Title Sub-tab

In this sub-tab you can adjust heading tags, colors and typography for the title. You can also input values for the comments title margins, and form title margins.

Comments Sub-tab

Here you can adjust the comment line color, bottom margin for the info section, and set colors for links in both idle and hover states.

Next up, you can adjust the user avatar width and right margin.

After this you can set a title color, hover color and typography for comments.

The last two remaining sub-tabs found here allow you to alter the comment text color, typography and top margin, as well as the date color, hover color and typography.

Form Sub-tab

In this sub-tab you can adjust the form notes, label, input fields and button.

First off, you have the options for setting the note color, link hover color, typography, and input values for note margins.

The next sub-tab provides you with options for configuring the form label color, typography and bottom margin.

In the Input Fields sub-tab you can adjust the input field text typography, padding, bottom margin, and you can also select one of five adjustable border types for the input field. You can also set initial and focus color, background color, border color and box shadow for the input field here.

Finally, you can move on to stylizing the comment template button. You can configure the button typography, input padding values for the button, adjust the top button margin, pick one of 5 adjustable border styles for the button, input border radius values, and adapt the box shadow.

You can also set a color, background color and border color for both initial and hover button states, as well as to choose whether you wish to show the button icon, set the button icon size and provide an SVG for the said icon.

4. Comments Template block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Contact Form 7 custom block for Gutenberg lets you display a wide variety of fully flexible contact forms using the free Contact Form 7 plugin.

Using the Contact Form 7 block

1. Adding the Contact Form 7 block

2. Contact Form 7 block Content settings

Content

Here you can select one of the previously created Contact Form 7 form templates.

3. Contact Form 7 block Style settings

Now we are going to take a look at the options available in the Style tab which contains nine sub-tabs for adjusting various stylistic features of your contact form. These are label style, input style, checkbox style, radio style, button style, spacing style, global style, error style, and response style. First off, let’s go through the settings that you can adjust in the Label Style sub-tab.

Label Style Sub-tab

In the first sub-tab you can adjust the contact form label typography and text color.

Input Style Sub-tab

Here you can make various stylistic choices related to input in both initial and focus states. You can adjust typography, color, background color, border color, pick one of 5 border styles, and input values for border radius.

Checkbox Style Sub-tab

In this sub-tab you’ll find options for adjusting the contact form checkbox; you can alter checkbox input size and space between checkboxes, and input values for checkbox input margins and checkbox holder margins.

Radio Style Sub-tab

Here you can make adjustments to the radio button in your contact form; you can adapt radio input size and set a size for the space between radio buttons, and input values for radio input margins and radio input holder margins.

Button Style Sub-tab

This is where you can adjust button typography, and set button color, background color and border color in both initial and hover states, you can select one of five border types you wish to use, input values for button border radius, and make the button take up the entire width of the element.

Spacing Style

In this sub-tab you can adjust element spacings. You can values for form item space, input padding, set button margins and padding.

Global Style Sub-tab

Here you can pick an alignment style for the contact form.

Error Style Sub-tab

Here you can configure the error message style. You can pick error alignment, adjust typography, color, and input values for error margins.

Response Style Sub-tab

In this sub-tab you can adjust contact form response styles. You can configure typography, text color, input values for padding and margins, pick one of 5 border styles and adjust the response background.

On top of that you can set colors for sent border, error border, spam border, and invalid message border.

4. Contact Form 7 block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Countdown custom block for Gutenberg provides you with a straightforward way to announce anything you wish by displaying eye-catching countdowns to a date you input.

Using the Countdown block

1. Adding the Countdown block

2. Countdown block Content settings

General Sub-tab

In the general sub-tab you can input the date and the hour you wish to element to countdown to. In addition to this, you can choose a format for your countdown; you can display the remaining months, days, hours, minutes and seconds, or choose to hide one of the aforementioned by selecting your preferred format style.

Labels Sub-tab

In the labels sub-tab you can input custom labels of your own for each time unit displayed, both when the digits for corresponding units are in their singular and plural forms. If you wish to leave the default values (months, days, hours, minutes, seconds), simply leave these fields empty.

3. Countdown block Style settings

After you have finished with the basic set up of your countdown, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are two sub-tabs for setting up various stylizations for your countdown.

Style Sub-tab

There’s a number of options for customizing your countdown in the style sub-tab. You can choose how you wish to justify items in the countdown and choose an alignment style for them. Aside from this you can also alter the digit color and typography, as well as change the color, typography and set the top margin for the item labels.

Item Style Sub-tab

In the item style sub-tab you can further define the stylization for your countdown. Here you can choose a background type, customize countdown item background, and set width, height and margins for countdown items.

4. Countdown block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Counter custom block for Gutenberg lets you display all your important numbers in fully customizable and captivating counter layouts.

Using the Counter block

1. Adding the Counter block

2. Counter block Content settings

Content

In the content tab you can make all basic settings related to your counter. First off you can input a start digit, an end digit, space between digits, step delay and digit label.

Start digit is a field where you can input a number from which the counter starts; namely, as the counter element appears in the viewport on your pages, as its name suggests, start digit is the first number displayed in the counter.

In the end digit field you can input the number you wish to display in your counter; this number will be displayed as the definitive value in your counter.

Space between digits refers to the way in which the counter will switch from the initially displayed start digit to its destination, the end digit (e.g. if you set the starting digit to 0 and input 5 in the step between digits field, the element will count by fives in the 5, 10, 15… manner).

The step delay lets you input a number of milliseconds that each step of the counter takes up.

The digit label input field can be used to display some additional text right next to the counter digits.

You can also choose whether you wish to display an icon and a separator in your counter, and add a counter title and some additional text.

Icon Sub-tab

In the icon sub-tab you can set an SVG you wish to display in your counter, and set icon color & size. Naturally, for these options to have effect you first need to enable displaying the icon in your counter element from the option found above.

3. Counters block Style settings

After you have finished with the basic set up of your counter, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Style

In the style sub-tab you can set the alignment for the element, adjust typography, color & background for counter digits. You can also enable the stroke effect for digits (display outlined digits), and if you choose to do so you can set the stroke color & outline width.

In addition to this you can style the counter title and the additional text if you decided to feature it in the element.

4. Counter block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Divider custom block for Gutenberg lets you create your style of visual separators between elements and sections on your pages the easy way.

Using the Divider block

1. Adding the Divider block

2. Divider block content settings

Content

The general sub-tab is used to define the divider element. Here you can pick from three divider layout styles; standard, border image, and with icon. In the event that you select the border or with icon layouts, you can add and further define the look of images/SVGs. You can also choose how you wish to position the divider line here.

3. Divider block Style settings

After you have finished with the basic set up of your divider, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Here you can define the style of your divider by setting a color for the divider line, picking one of three available border styles, and by adjusting the divider width, thickness and both top and bottom margins. Note that selecting divider color and border styles is available only in the event that you selected the standard or with icon element layouts from the Content tab.

4. Divider block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

FAQ custom block for Gutenberg lets you display fully customizable sections for frequently asked questions and topics the easy way.

Using the FAQ block

1. Adding the FAQ block

2. FAQ block Content settings

Content

Here you can enable a JSON schema for the element. This automatically inputs the json schema part of the code into the element and helps your FAQ section get indexed in search engines even on non-standard devices such are mobile devices or TVs.

You can also pick a behavior style for the FAQ element here, and choose one of 3 styles: standard, boxed, and border between.

You also have the option to enumerate different sections (items) you wish to feature in the element.

In the event that you selected accordion behavior type for the FAQs, you can also add ann SVG for both opening & closing the FAQ sections/items.

After you made your choices, you can start adding individual items to the FAQ.

To add a new item, simply click the + ADD ITEM button located at the bottom of the sub-tab. You can input a title and additional textual content for each of the items (sections) you wish to display in your FAQ.

3. FAQ block Style settings

After you have finished with the basic set up of your FAQ, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Title Sub-tab

Here you can adjust the FAQ titles. You can set a heading tag, configure typography, and alter title main & background colors and padding for both initial and active states.

Content Sub-tab

This is where you can adjust the content color, background color, content active background color, border color and input values for content padding.

Icon Sub-tab

Here you can adjust the icon size and the icon color in both initial and hover states.

Number Sub-tab

If you enabled displaying numbered items from the Content tab, you can make stylistic adjustments to those numbers here.

You can configure number typography, pick main and background colors for both initial and active states, adjust number width and height, and input values for number margins and the number border radius.

Style Sub-tab

In the style sub-tab you can pick a main color, background color and active background color for the content in your FAQ element. You can also input values for content padding, set color for the element border, and adjust size of the space between items as well as the icon size.

4. FAQ block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

How-to Schema custom block for Gutenberg lets you easily display step-by step tutorials and how-to’s with automatically generating json schema sections inserted into code.

Using the How-to Schema block

1. Adding the How-to Schema block

2. How-to Schema block Content settings

First option (enabled by default) generates the JSON schema for your how-to’s; this automatically inputs the json schema part of the code into the element and helps the section get indexed in search engines even on non-standard devices such are mobile devices or TVs.

In the remaining fields you can input a title for the element, a subtitle, some additional text, and you can also add individual steps (items) to your how-to.

For each of the steps you can input a title, textual content, and add an image.

3. How-to Schema block Style settings

After you have finished with the basic set up of your How-to Schema, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

First off, you can adjust the content alignment style for the how-to schema. After this, you'll find 4 sub-tabs: title, subtitle, text, and steps.

Title Sub-tab

Here you can pick an alignment for the content, pick a heading tag & set colors and typography for the title. You can also configure the bottom margin for the title holder and top margin for the title.

Subtitle Sub-tab

In this sub-tab you can adjust color and typography for the subtitle.

Text Sub-tab

Here you can adapt text color, typography and text top margin.

Steps Sub-tab

This is where you can make various stylistic choices for the steps in your element. You can configure the size for the space between steps, bottom margin for the step titles and text, and make further adjustments for step titles, text, and images.

You can set a heading tag for step titles, adjust step title colors and typography. The next set of options lets you adapt step text color and typography. You can also adjust step image shadow color, horizontal and vertical position, blur, spread, and position.

4. How-to Schema block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Icon With Text custom block for Gutenberg lets you easily display icons with some additional textual content which you can customize to fit your visual concept.

Using the Icon With Text block

1. Adding the Icon With Text block

2. Icon With Text block Content settings

Content

In the content tab you can pick one of three layouts for your icon with text; these layouts let you choose how you wish to position the icon relative to the content. You can also add a URL for the icon link and make adjustments to the link.

This is also where you can add an SVG that you would like to display, input a title, additional text, choose a content entry animation, enable displaying a button, and choose whether you wish to display a separator line inside the element. The separator will be placed between the element title and content.

Separator Sub-tab

The separator sub-tab can be used to define the separators in your icon with text element. Here you can pick from three separator layout styles; standard, border image, and with icon. You can also choose how you wish to position the separator line. Please note that in order for these options to have effect, you first need to enable displaying the separator in your icon with text element from the option found above.

3. Icon With Text block Style settings

After you have finished with the basic set up of your icon with text, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Here you’ll find 4 sub-tabs; style, spacing, icon, and separator. First off, let’s go through the settings that you can adjust in the Style sub-tab.

Style Sub-tab

In the style sub-tab you can set a heading tag, color, hover color & typography for the element title, and adjust typography and color for the additional text.

Spacing Sub-tab

In this sub-tab you can adjust the top margins for your title, additional text, and button, as well as input values for the icon margins.

Icon Sub-tab

This sub-tab comes with a number of options you can use to configure the icon itself. You can choose to display a box around the icon, set the icon size, color, and hover color, stroke hover and normal state colors, and in the hover state you can also choose a behavior type. There's also an option for adjusting the stroke width.

In the event that you opt for displaying your icon in a box, there are some additional options you can configure; you can set a background & background hover colors for the icon, and you can customize icon borders by adjusting border colors, size, and border radius.

Separator Sub-tab

If you enabled displaying the separator from the Content tab, you can further define the separator line here. Depending on the separator border type you selected in the Content tab, you can set a color for the separator, choose one of three separator border styles, and adjust separator width, thickness, and both bottom and top margins.

4. Icon With Text block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Masonry Image Gallery custom block for Gutenberg provides you with a simple way to display all your images in easily configurable captivating masonry-styled galleries.

Using the Masonry Image Gallery block

1. Adding the Masonry Image Gallery block

2. Masonry Image Gallery block Content settings

General Sub-tab

To start adding images to your masonry gallery, you should start adding individual image items to it. To add an image to the gallery click the + ADD ITEM button located at the bottom of the section. For each of the items you have the option to add the image, and input an adjustable image link.

Gallery Settings Sub-tab

In the gallery settings sub-tab you can enable custom links or the lightbox popup option (pop-up image previews) for viewing the images in your masonry gallery. The first option opens links of your choosing while the second will open previews of images once they are clicked on; these previews will be displayed in lightbox pop-ups, while the remainder of the screen gets dimmed.

The rest of the options found in this sub-tab let you set a number of columns you wish the gallery to have, adjust the size for the space between gallery items. select predefined responsive settings for columns or pick the number of columns for different responsive stages individually, pick an image hover style, and set colors for overlay in both normal and hover states.

3. Masonry Image Gallery block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Content tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Pinterest Image Gallery custom block for Gutenberg provides you with a simple way to display all your images in easily configurable captivating pinterest-styled galleries.

Using the Pinterest Image Gallery block

1. Adding the Pinterest Image Gallery block widget

2. Pinterest Image Gallery block Content settings

General Sub-tab

This is where you can add all the images you wish to display in your pinterest image gallery.

Gallery Settings Sub-tab

In the gallery settings sub-tab you can enable custom links or the lightbox popup option (pop-up image previews) for viewing the images in your pinterest gallery. The first option opens links of your choosing while the second will open previews of images once they are clicked on; these previews will be displayed in lightbox pop-ups, while the remainder of the screen gets dimmed.

3. Pinterest Image Gallery block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Content tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Image Gallery custom block for Gutenberg provides you with a s simple way to display all your images in easily configurable eye-catching galleries.

Using the Image Gallery block

1. Adding the Image Gallery block

2. Image Gallery block Content settings

This is where you can add all the images you wish to display in your gallery.

You can also enable custom links or the lightbox popup option (pop-up image previews) for viewing the images in your gallery. The first option opens links of your choosing while the second will open previews of images once they are clicked on; these previews will be displayed in lightbox pop-ups, while the remainder of the screen gets dimmed.

The rest of the options found here let you set a number of columns you wish the gallery to have, adjust the size for the space between gallery items. select predefined responsive settings for columns or pick the number of columns for different responsive stages individually, pick an image hover style, and set colors for overlay in both normal and hover states.

3. Image Gallery block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Content tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Image Slider custom block for Gutenberg lets you display your images in captivating, fully configurable slider layouts.

Using the Image Slider block

1. Adding the Image Slider block

2. Image Gallery block Content settings

General

This is where you can add all the images you wish to display in your image slider.

Slider Settings Sub-tab

In the slider settings sub-tab you can define the basic appearance and how your slider behaves.

You can choose a slider direction, set a number of columns you wish the slider to have, choose between predefined and custom responsive settings, set a size for the space between slider items, enable slider loop if you would like the slider to start over from the first image when it comes to the last image, choose whether you wish to align the slides centrally, enable automated slider play, enable displaying partial slider columns, enable slider dragging interaction, and input a value for the slide duration and the slide animation duration.

On top of that, you can choose whether you wish to display slider navigation arrows & pagination bullets, set a position for the pagination, and choose a slide effect.

You can also enable custom links or the lightbox popup option (pop-up image previews) for viewing the images in your slider. This will open previews of images once they are clicked on; these previews will be displayed in lightbox pop-ups, while the remainder of the screen gets dimmed.

The final set of options found here lets you pick an image hover style, and adjust the overlay normal and hover colors.

3. Image Slider block Style settings

After you have finished with the basic set up of your image slider, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are two sub-tabs for setting up different stylizations for your slider.

Navigation Sub-tab

In the first sub-tab you can make various adjustments to the slider navigation. In order for these settings to become available, you first need to enable slider navigation from the Content tab.

You can adjust horizontal and vertical navigation offset, add SVGs for next and previous navigation arrows, adjust color and background color for both initial and active/hover states, as well as adapt the arrow size, holder weight and hodler height.

Pagination Sub-tab

Here you can enable numbers for slides, set the color for the numbers, adjust number typography and font size, as well as number weight, transform style, style, decoration style, line height and letter spacing.

Next up you can adjust pagination offset, adjust both initial and active/hover colors, borders and size for the pagination, and configure the size of the space between pagination bullets.

4. Image Slider block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Info Box custom block for Gutenberg is ideal for displaying important informative messages for your visitors in simple and fully flexible box templates.

Using the Info Box block

1. Adding the Info Box block

2. Info Box block Content settings

In the content tab you can input the content you wish to display in your info box; here you can provide a subtitle, a title, some additional textual content, set and adjust an SVG you wish to display, add a URL you wish to link the element to, and make the entirety of the element clickable by setting the Enable Link Overlay option to “Yes”.

3. Info Box block Style settings

After you have finished with the basic set up of your info box, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are three sub-tabs for setting up different stylizations for the block.

Content Sub-tab

Here you can set an alignment type for the element, adjust the minimal height, info box background (add a solid or a customizable gradient color fill for the background, or display an image).

Text Sub-tab

This is where you can pick a heading tag for the title, and subtitle, set color for the title, subtitle and additional text, and adjust typography for the title, subtitle and text.

Spacing Sub-tab

In this sub-tab you can input values for the holder padding, adjust the bottom margin for the subtitle, title and additional text, as well as input values for additional text padding and set icon margins.

4. Info Box block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Message Boxes custom block for Gutenberg provides you with a simple way to display informative boxes with important notifications or messages for your visitors. These boxes can be closed if the viewer chooses to do so.

Using the Message Boxes block

1. Adding the Message Boxes block

2. Message Boxes block Content settings

Here you can add a title and some additional text you wish to display in your image box. You can also add an SVG icon (displayed on the left side of the element) and a close icon (displayed on the right side of your image box, once clicked the box disappears until page reload).

3. Message Boxes block Style settings

After you have finished with the basic set up of your message boxes, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are five sub-tabs for setting up different stylizations for the block.

Title Sub-tab

Here you can set a heading tag, color, and adjust typography for the title text.

Text Sub-tab

This is where you can pick a heading tag for the text, set color for the and adjust typography for the text.

Icon Sub-tab

The set of options found here allows you to pick an icon color, position, size, and input values for the icon margins.

Close Icon Sub-tab

Here you can choose a main and a hover color as well as adjust the size for the close icon.

Content Sub-tab

In the content sub-tab of the Style tab you can choose between classic and gradient background types and adjust color(s) for each. You can also add an image for the background, and input values for close icon box border radius and box padding.

4. Message Boxes block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Parallax Image Showcase custom block for Gutenberg lets you create visually attractive sections with images that move independently at different speeds on scroll.

Using the Parallax Image Showcase block

1. Adding the Parallax Image Showcase block

2. Parallax Image Showcase block Content settings

In the first tab you can add the images you wish to display in your element. First off you can add a main image, which will effectively be the largest image. You can also adjust the main image parallax level here.

To add parallax images to be displayed over the main image, simply click the +ADD ITEM button located at the bottom of the section.

Here you can add an image, image position, width, adjust vertical & horizontal image offset and input a value for the image z-index for each of the parallax image items you wish to feature. The last option found here lets you input the value for the parallax level for the image.

3. Parallax Image Showcase block Style settings

After you have finished with the basic set up of your parallax image showcase, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

In the style sub-tab you can input values for the main image padding, and adjust shadows for both main and parallax images featured in your parallax image showcase.

4. Parallax Image Showcase block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Content tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Post Author custom block for Gutenberg provides you with a straightforward way to display your post authors on your website pages.

Using the Post Author block

1. Adding the Post Author block

2. Post Author block Content settings

In the content tab you can pick one of post authors available on your site from a dropdown list. You can also enable displaying the author avatar, and add some text for the post author byline.

3. Post Author block Style settings

After you have finished with the basic set up of your post author, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are three sub-tabs for setting up different stylizations for the block.

Author Sub-tab

Here you can set a color, hover color and adjust the typography for the author name.

Byline Sub-tab

This is where you can configure the line color, typography and right line margin for the byline text.

Avatar Sub-tab

In this sub-tab you can adjust the right margin and the border radius for the post author avatar.

4. Post Author block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Post Date custom block for Gutenberg provides you with a simple way to display easily configurable dates of your posts.

Using the Post Date block

1. Adding the Post Date block

2. Post Date block Content settings

In the content tab you can input a custom date format and make the date a clickable link.

3. Post Date block Style settings

After you have finished with the basic set up of your post date, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Here you can adjust the date color, date hover color (in the event that you enabled the link behavior for the date in the Content tab), and configure the date typography.

4. Post Date block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Post Terms custom block for Gutenberg lets you easily display post terms or taxonomy items related to your posts.

Using the Post Terms block

1. Adding the Post Terms block

2. Post Terms block Content settings

In the content tab you can pick a term type you wish to display, choose a layout for the terms, and if you selected the horizontal terms layout, you can input a separator symbol here.

3. Post Terms block Style settings

After you have finished with the basic set up of your post terms, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are two sub-tabs for setting up different stylizations for the block.

Term Sub-tab

Here you can set a color, hover color, hover text decoration and typography for the term text. If you selected the vertical tem layout from the Content tab, you can also adjust the size for the space between term items here.

Separator Sub-tab

In the event that you selected the Horizontal term layout from the Content tab, you have the options for styling the separator here. You can adjust the color, typography, and input values for the separator margins.

4. Post Terms block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Post Title custom block for Gutenberg lets you easily display configurable post titles.

Using the Post Title block

1. Adding the Post Title block

2. Post Title block Content settings

In the content tab you can make the title a clickable link.

3. Post Title block Style settings

This is where you can pick a heading tag for the title text, adjust color, hover color and typography.

4. Post Title block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Pricing Table custom block for Gutenberg provides you with a simple way to display easily adjustable pricing tables.

Using the Pricing Table block

1. Adding the Pricing Table block

2. Pricing Table block Content settings

Here you can define basic values for your pricing tables. You can pick from six pricing table layouts (table appearance styles): cascading, minimal, simple, standard, vertical image, and with icon.

You can also chose to mark this table as featured, input the table title, price, currency, period of time relevant to the price, input some text you wish to display on the pricing table label (a ribbon or a badge displayed in the top right corner of the table), and choose whether you wish to display a separator line and a button in the element.

After you finished with the basic set up of your pricing table, you can start adding individual items (features or services) that you offer with this pricing table column.

To add individual items to your pricing list, simply click the Add Item button, or edit one of the example items that are already added to the element by clicking the item collapsible menu.

To each of the items you can add some text. On top of that, you can also choose to mark the item as excluded, effectively displaying the provided text with a strikethrough line (this can be useful when offering multiple pricing plans for comparison purposes).

3. Pricing Table block Style settings

After you have finished with the basic set up of your pricing table, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are six sub-tabs for setting up different stylizations for the block.

Table Sub-tab

Here you can further define the appearance of your table, You can choose an alignment, set a color for the background, choose one of five border styles for the table, input values for border, table and content padding, and adjust the top margin for the button.

Title Sub-tab

This is where you’ll find options related to the pricing table title. You can pick a heading tag for the title and configure its color, typography and margins.

Price Sub-tab

In this sub-tab you can stylize the price. You can configure the price color, typography, currency color & typography, pick a position for the period over which the price is valid and adjust period color and typography. The final set of options lets you input values for margins relating to price, currency, and period.

Label Sub-tab

In this sub-tab you can configure the pricing table label – this is either a badge or a ribbon displayed in the top right-hand corner of the table. You can choose a label type, adjust its color, background color, typography, padding, border radius and position here.

List Sub-tab

This is where you can define how the items in your table are listed. You can choose between ordered (this layout displays ordinal numbers next to each item) and unordered, pick a position for the items, and in the event that you selected the unordered type, you can add an easily adjustable icon for items.

Items Sub-tab

Here you can further define how items listed in your table appear. You can configure item color, excluded item color, item typography, and set the bottom margins for items.

Separator Sub-tab

If you enabled displaying the separator from the Content tab, you can further define the separator line here. You can adjust separator color, pick a border style, adjust width, thickness, and both bottom and top margins for the separator here.

4. Pricing Table block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Process custom block for Gutenberg provides you with a clear and intuitive way to display any type of process divided by stages.

Using the Process block

1. Adding the Process block

2. Process block Content settings

Here you can add individual stages or items you wish to display in your process element. You get to pick the item layout style, and choose whether you wish to enable an appear animation for the element. You can also choose a number of columns you wish the element to have, and select predefined responsive values or input custom column numbers for separate responsive stages.

To add individual items to your process element, simply click the Add Item button located at the bottom of the Content section, or edit one of the example items that are already added to the element by clicking the item collapsible menu.

To each of the items you can add an SVG, an item title, additional text, set item offset, holder size, color, adjust background type, pick one 5 modifiable border types, adjust process line offset and line rotation.

3. Process block Style settings

After you have finished with the basic set up of your process, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are five sub-tabs for setting up different stylizations for the block.

Title Sub-tab

Here you can further define how the process element appears. You can choose a heading tag for the process title, configure colors and typography for the title, as well as alter the top margin for the process title.

Text Sub-tab

In this sub-tab you'll find the text stylization options. You can adjust text color, typography, top margin, and input values for the text padding.

Item Sub-tab

This is where you can make changes to the way items appear. You can configure the item color, typography, offset, holder size, pick a background type, color, and image, as well as choose one of 5 adjustable border types for the items.

Line Sub-tab

Here you can stylize the process line. You can pick one of 3 line styles, pick a line color, and alter the line thickness.

Number Sub-tab

In the final sub-tab you can make adjustments to the process numbers. You can set number color, typography, holder size, background type, background color, and add a background image for the numbers here.

4. Process block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Product List custom block for Gutenberg lets you display beautiful and fully flexible lists containing all products you wish to showcase.

Using the Product List block

1. Adding the Product List block

2. Product List block Content settings

There are five sub-tabs for making basic adjustments to the element. Let's start off with General settings.

General

Here you can make the core adjustments to your product list element. First off you have the option to select one of two list appearance styles: gallery and masonry.

You can also set proportions for the image, pick a number of columns you wish the list to have and choose between predefined responsive settings and inputting different column values for different responsive stages yourself. The last two options let you choose a size for the space between list items and choose whether you wish to display pagination bullets and an adjustable zigzag line in your list.

Query

Here you can set a maximum number of posts that you wish to display per 1 page, and select how you wish to order the items in the list.

If you wish to limit the list to certain items, you can select additional parameters that will define the items you wish to show. You can also limit the list by choosing to filter by selecting on sale, featured, top rated or best-selling items.

Layout

In this sub-tab you can pick one of five different item layout styles, set a heading tag for item titles, and choose if you wish to display item categories, item ratings, and sale/sold mark for items in your list.

Button

Here you can make the basic adjustments to your button. First off you have the option to pick one of three button layouts: filled, outlined and textual.

For both filled and outlined buttons you can alter the button size and select one of three types: standard, with inner border, and icon boxed. You can also enable a button text underline.

Button Icon

Here you can add an SVG you wish to display inside the button, pick a hover behavior type for the button icon, input values for icon margins, and pick a position for the icon relative to the button.

3. Product List block Style settings

After you have finished with the basic set up of your product list, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are eight sub-tabs for setting up different stylizations for the block.

Pagination Style Sub-tab

In the event that you enabled showing pagination from the Content sub-tab General, you can adjust the separator appearance here. You can alter the pagination typography, main and background colors, add an SVG for the next and previous pagination arrows, andset a size for the arrows. The final set of options here lets you configure border radius, width, height, size of the space between items, and top margin for the pagination items.

Style Sub-tab

Here you can further define the appearance of your list. You can set a main color and a hover color for the title, adjust title typography, and configure content background color and image overlay inner offset.

Spacing Style Sub-tab

This is where you can adjust the spacing in your list; you can input values for list content padding, and set top margins for item ratings and categories (if you decided to display them in your list).

Category Style Sub-tab

If you enabled displaying item categories in your product list from the Content sub-tab Layout, you can stylize the category text here.

Price Style Sub-tab

In this sub-tab you can define how the item prices appear. You can set a color for the price, old price, adjust price typography, and set font size and top offset for the price currency.

Rating Style Sub-tab

If you enabled displaying item ratings in your product list from the content sub-tab Layout, you can configure how ratings appear here.

Button Style Sub-tab

Here you can adjust the button text typography and color, button background and border colors, border width, radius, as well as the button padding. Note that you can alter the colors for the button in both its normal and hover states.

Image Style Sub-tab

In this sub-tab you can make adjustments to image appearance in your list. You can input image border radius values, set overlay colors for both normal and hover states, & pick one of 3 image hover types.

Mark Style Sub-tab

Here you'll be able to make alterations to item marks in the list. You can input the values for mark padding, set sale & sold mark colors & background colors, adjust mark typography and input values for mark border radius & offset.

4. Product List block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Radial Progress Bar custom block for Gutenberg lets you display progressions of all types of processes in fully customizable, animated circular progress bars.

Using the Radial Progress Bar block

1. Adding the Radial Progress Bar block

2. Radial Progress Bar block Content settings

In the first field of the content tab you can input the percentage of completion (from 0 to 100) for the process you wish to display using the progress bar. This number will be displayed centrally inside the radial progress bar.

In the last three fields of this sub-tab you can input a value for the progress bar entry animation duration in milliseconds, a title for the progress bar, and some additional text.

3. Radial Progress Bar block Style settings

After you have finished with the basic set up of your radial progress bar, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are two sub-tabs for setting up different stylizations for the block.

Circle Style

First off, you can make adjustments related to the appearance of the progress circle itself.

Here you can set a line color and thickness for both active & inactive progress bar lines. Active line refers to the stretch of the line corresponding to the value you provided (e.g.75), and the inactive line represents the part of the progress bar from the point where active line ends all the way to 100% (or the far right side of your progress bar).

You can also pick a fill color for the circle here, and set a size for the radial progress bar circle.

Text Style

Text style sub-tab lets you set a heading tag for your title, and adjust colors, typography & margins for the title and text, as well as select a color and configure typography for the percentage number.

4. Radial Progress Bar block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Horizontal Progress Bar custom block for Gutenberg lets you display progressions of all types of processes in fully customizable horizontally laid out progress bars.

Using the Horizontal Progress Bar block

1. Adding the Horizontal Progress Bar block

2. Horizontal Progress Bar block Content settings

In the first field of the content tab you can input the percentage of completion (from 0 to 100) for the process you wish to display using the progress bar. You also get to choose where this number will be displayed relative to the progress bar.

On top of that you can enable gradient color fill for the bar and select starting & ending gradient colors, and you also have the option to enable a pattern fill for the progress bar and add a pattern image of your choice.

In the last two fields of this tab you can input the title for the progress bar and a value for the progress bar entry animation duration in milliseconds.

3. Horizontal Progress Bar block Style settings

After you have finished with the basic set up of your horizontal progress bar, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are two sub-tabs for setting up different stylizations for the block.

Bar Style

In the first sub-tab you can make adjustments related to the appearance of the progress bar itself. Here you can choose one of 5 border styles & place it around the bar if you choose so, and you can adjust border width & color.

The remaining options let you set line color, opacity & thickness for both active & inactive progress bar lines. Active line refers to the stretch of the line corresponding to the value you provided (e.g.75), and the inactive line represents the part of the progress bar from the point where active line ends all the way to 100% (or the far right side of your progress bar).

Text Style

Text style sub-tab lets you set a heading tag for your title, and adjust colors, typography & margins for both the title and the percentage number.

4. Horizontal Progress Bar block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Vertical Progress Bar custom block for Gutenberg provides you with a straightforward way to display progressions of all kinds of processes in fully adaptable vertically arranged progress bar layouts.

Using the Vertical Progress Bar block

1. Adding the Vertical Progress Bar block

2. Vertical Progress Bar block Content settings

In the first field of the content tab you can input the percentage of completion (from 0 to 100) for the process you wish to display using the progress bar. You also get to choose where & how this number will be displayed relative to the progress bar.

In the last two fields of this sub-tab you can input the title for the progress bar and a value for the progress bar entry animation duration in milliseconds.

3. Vertical Progress Bar block Style settings

After you have finished with the basic set up of your vertical progress bar, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are two sub-tabs for setting up different stylizations for the block.

Bar Style

In the first sub-tab you can make adjustments related to the appearance of the progress bar itself. Here you can input a value for the progress bar height, choose one of 5 border styles & place it around the bar if you choose so, and you can adjust border width & color.

Text Style

Text style sub-tab lets you set a heading tag for your title, and adjust colors, typography & margins for both the title and the percentage number.

4. Vertical Progress Bar block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Search custom block for Gutenberg lets you display an easily configurable search bar.

Using the Search block

1. Adding the Search block

2. Search block Content settings

In the content tab you can choose one of three layouts for the element, choose whether you wish to display the element title, input the placeholder text, as well as select icon or text search button type and make adjustments to each.

3. Search block Style settings

After you have finished with the basic set up of your search, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are four sub-tabs for setting up different stylizations for the block.

General Sub-tab

Here you can further define how the search element appears - this is where you can adjust the size of the space between the input field and the search button.

Widget Title Sub-tab

In the event that you opted to display the widget title from the content tab, in this sub-tab you'll find the title stylization options. You can set a heading tag for the title, and adjust title typography & bottom margin.

Input Sub-tab

This is where you can make changes to the way the input field appears. You can configure the input field typography, color, background color, border color, choose one of 5 border types, and input values for border radius & input padding for both initial and focus input field states.

Button Sub-tab

Here you can stylize the search button. You can alter the search button text typography, as well as text colors, background colors & border colors for both normal and hover button states. You can also choose one of five border types for the button, and input values for border radius & padding.

4. Search block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Section Title custom block for Gutenberg lets you easily create captivating and fully configurable titles for any section on your website pages.

Using the Section Title block

1. Adding the Section Title block

2. Section Title block Content settings

This is where you can input the title and make some stylistic choices related to its appearance.

You can also disable the title line break on certain devices, effectively removing the title on certain screens if you choose so.

Next up you can input the subtitle text, choose where you wish to position it relative to the title, as well as add an SVG you wish to display along with the subtitle.

After this you can add some textual content to be displayed below the title, and disable showing the text on certain smaller screens if you opt to.

The remaining two options let you choose a text link underline behavior, and enable a button inside the element.

3. Section Title block Style settings

After you have finished with the basic set up of your section title, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

At the top of this section you can choose one of three alignment styles for the element.

After you've done so, you can proceed to the four sub-tabs for setting up different stylizations for the block.

Title Sub-tab

The first set of options here are related to title appearance. You can pick a color for the title text, adjust title typography, select a heading tag and enable the text link underline draw.

Subtitle Sub-tab

Here you can make adjustments to the subtitle. You can choose a subtitle color text, configure the typography for the subtitle, pick an icon color, size, and vertical position.

Text Sub-tab

This is where you can pick the text color and adjust the text typography.

Spacing Sub-tab

The final sub-tab allows you to adjust the spacing inside the element. You can input the values for title margins, adjust top margins for the subtitle & text, configure the size of the space between the subtitle and subtitle icon, input values for subtitle and text padding, and modify the top button margin.

4. Section Title block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Single Image custom block for Gutenberg is designed to let you display an individual image on your pages.

Using the Single Image block

1. Adding the Single Image block

2. Single Image block Content settings

In the content tab you can add the image you wish to display. Apart from that, you can choose an image action you wish to apply to the image, choose the element alignment, and select one of 3 image hover styles, two of which you can customize additionally.

3. Single Image block Style settings

After you have finished with the basic set up of your single image, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Here you can further define how the single image element appears - this is where you can adjust the element width, max width, height, alter opacity for both normal and hover element states, modify the transition duration time in hover state, pick one of five customizable border types for the element, and input values for the border radius.

Widget Title Sub-tab

Input Sub-tab

Button Sub-tab

4. Single Image block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Spacer custom block for Gutenberg provides you with a simple way to add customizable empty space sections on your pages.

Using the Spacer block

1. Adding the Spacer block

2. Spacer block Content settings

Here you can adjust the size of the space you wish to add to your page.

3. Spacer block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Table of Contents custom block for Gutenberg lets you display neatly structured tables of contents with one-click one-page navigation.

Using the Table of Contents block

1. Adding the Table of Contents block

2. Table of Contents block Content settings

Here you can input a title, a subtitle, and some additional text you wish to display. In the excluded tags/classes/ids field you can input h tags, classes (in example. form) or ids (in #example) form that you wish to exclude. Each of the tags, classes or ids should be separated by commas.

3. Table of Contents block Style settings

After you have finished with the basic set up of your table of contents, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

At the top of this section you can choose one of three alignment styles for the element.

After you've done so, you can proceed to the five sub-tabs for setting up different stylizations for the block.

Title Sub-tab

The first set of options here are related to title appearance. You can choose a heading tag for the title, adjust title typography, pick a color for the title text, and configure the top title margin.

Subtitle Sub-tab

Here you can make adjustments to the subtitle. You can choose a heading tag for the subtitle text, configure the typography for the subtitle, and pick a color for the subtitle text.

Text Sub-tab

This is where you can modify the text typography, color, top margin, and input values for the text padding.

List Sub-tab

Here you can alter the top and left list margins, modify the size of the space between list items, choose between unordered and ordered list types, pick a list style position, select one of 3 list styles, and choose whether you wish to display an underline for items in the list on hover.

Item Sub-tab

The final sub-tab lets you pick item color, hover color, and adjust item text typography.

4. Table of Contents block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Horizontal Tabs custom block for Gutenberg lets you easily create and organize horizontally aligned tabs with content which you can customize to fit your visual style.

Using the Horizontal Tabs block

1. Adding the Horizontal Tabs block

2. Horizontal Tabs block Content settings

You can add individual Horizontal Tab items (tabs) by clicking the Add Item button located at the bottom of this tab.

For each individual item you can add a title, and input the content you wish to display in that tab.

3. Horizontal Tabs block Style settings

After you have finished with the basic set up of your horizontal tabs, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are three sub-tabs for setting up different stylizations for the block.

Navigation Sub-tab

In the first sub-tab of the Style tab, you can choose one of five customizable border types for the element.

Title Sub-tab

This is where you can modify the appearance of titles in your tabs. First off, you can pick an alignment type for the titles. You can also input values for the title margins & padding, pick a width for the title, set a heading tag for the title, and alter the title typography.

Next up you can set a color, pick a background type and modify it, and choose one of five customizable border types for the title. For the active/hover title states, you can pick a color, customize background, and adjust the underline height, offset, color, and choose whether you wish to enable an animated draw effect for the underline.

Text Sub-tab

This is where can alter the appearance of item text in your tabs. You can input values for the content padding, pick a text color, configure text typography, background color, and select one of five customizable border types.

4. Horizontal Tabs block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Vertical Tabs custom block for Gutenberg provides you with everything you’ll need to easily create and organize vertically laid out tabs with content which you can customize to fit your visual style.

Using the Vertical Tabs block

1. Adding the Vertical Tabs block

2. Vertical Tabs block Content settings

First off you have the option to display tab content underneath the tabs on screens with certain resolutions; by default, vertical tabs have their content displayed right next to the tab (on the vertical plane), however it may be a good idea to alter this appearance style for smaller screens in order to create a more clear viewing experience on those types of devices.

You can add individual Vertical Tab items (tabs) by clicking the Add Item button located at the bottom of this sub-tab.

For each individual item you can add a title, and input the content you wish to display in that tab.

3. Vertical Tabs block Style settings

After you have finished with the basic set up of your vertical tabs, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are three sub-tabs for setting up different stylizations for the block.

Title Sub-tab

This is where you can modify the appearance of titles in your tabs. First off, you can pick an alignment type for the titles. You can also choose a heading tag, and customize typography.

Next up you can set a color, pick a background type and modify it, and choose one of five customizable border types for the title. For the active/hover title states, you can pick a color, customize background, and adjust the sideline width, offset, color, and choose whether you wish to enable an animated draw effect for the sideline.

Text Sub-tab

This is where can alter the appearance of item text in your tabs. You can pick a text color, configure text typography, background color, and select one of five customizable border types.

Spacing Sub-tab

The final sub-tab lets you input values for the title padding, content (text) padding, and adjust the size of the space between tab items.

4. Vertical Tabs block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Tag Cloud custom block for Gutenberg provides you with a neat way to display previously created tags of your choosing in a number of ways.

Using the Tag Cloud block

1. Adding the Tag Cloud block

2. Tag Cloud block Content settings

In the content tab you can select a taxonomy you wish to display, choose a number of tags you wish to be visible, select whether you wish to show the number of items belonging to each tag displayed, and input a symbol you wish to use as a tag separator.

3. Tag Cloud block Style settings

After you have finished with the basic set up of your tag cloud, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

In the Style tab you can pick a tag color, hover color, adjust typography, choose a hover text decoration style, and input values for the size of the space for tag items.

4. Tag Cloud block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Team custom block for Gutenberg provides you with a wide selection of varied ways to showcase individual members of your team.

Using the Team block

1. Adding the Team block

2. Team block Content settings

Here you have the option to select one of 5 layout styles, each of them displaying the team member info in a different way relative to team member image. You can also input the team member name, role, add an image you wish to display, and if you selected the Info on Hover Inset element layout, you also have the option to add some textual content.

You also have the option to add social items for the team member; to add a new social item, simply click the Add Item button located at the bottom of the general sub-tab. For each social item you can add an SVG, and input a link you wish the icon to lead to.

3. Team block Style settings

After you have finished with the basic set up of your team, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are five sub-tabs for setting up different stylizations for the block.

Content Sub-tab

Here you can further define how the element appears. You can choose one of 2 image hover styles, adjust the size of the space between icons, alter the bottom text margin, pick a color for the content background, input values for the content padding, choose a vertical & horizontal content alignment, input values for content positioning, and alter the inner offset for the content background.

Name Sub-tab

Here's where you can modify the appearance of team member name text. You get to pick a heading tag, name text color, configure the typography, and alter the bottom margin for the name text.

Role Sub-tab

This is where you can make changes to the way the team member role text appears. You can configure the role text color, typography, and bottom margin.

Text Sub-tab

The text sub-tab lets you alter the appearance of additional team member text; you can alter its color and typography.

Social Sub-tab

The set of options found here lets you pick an icon fill color, stroke color, hover color, and icon size for the social icon(s) of the team member.

4. Team block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Testimonials custom block for Gutenberg lets you display testimonials with total ease & in the way you decide.

Using the Testimonials block

1. Adding the Testimonials block

2. Testimonials block Content settings

First off you can choose one of four layouts for testimonial items you wish to display. After this you can select how many columns you wish your testimonial list to have, pick predefined or custom settings for different responsive stages, and adjust a size for the space between the items in the list.

After you made your selections, you can start adding individual testimonials or quotes. To add a new item, click the Add Item button located at the bottom of this sub-tab.

For each of the items you wish to feature you can add a title, testimonial text, author, author occupation, and an image.

You can also adjust the colors for quote, title, text, author name, occupation, and configure the background.

In the event that you select the Boxed item layout, you can also input padding values, image border radius, and adjust the element background; if you select the Side With Image item layout, you can input values for the image border radius, modify the side width and choose how you wish to align the content vertically.

3. Testimonials block Style settings

After you have finished with the basic set up of your testimonials, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are three sub-tabs for setting up different stylizations for the block.

Quote Style Sub-tab

Here you can further define the appearance of quotes. You can add an SVG you wish to display, set a color for the quote, its size, background color, box size, border radius and position.

Text Style Sub-tab

In this sub-tab you can further define how the textual content appears in your testimonials. You can adjust titles, text, author name, and occupation text.

Spacing Sub-tab

In the final sub-tab of the style tab you can adjust bottom margins for titles, and item text, as well as configure item text padding, set right item side margin & top margin for the author occupation.

4. Testimonials block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Text Marquee custom block for Gutenberg lets you easily display sections with customizable auto-scrolling text.

Using the Text Marquee block

1. Adding the Text Marquee block

2. Text Marquee block Content settings

Here you can add individual items (text) you wish to display. You can also customize the typography for each of the items.

Apart from this, you can add an SVG for the separator, alter the animation duration, and choose the direction you wish the text to scroll in.

3. Text Marquee block Style settings

After you have finished with the basic set up of your text marquee, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Here you can adjust the text color, typography, choose whether you wish to feature a text stroke effect (and effectively display outlined text whose color & width you can alter), and configure the size for the space between text marquee items (in the event that you decided to display multiple text marquee items).

4. Text Marquee block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Timeline Showcase custom block for Gutenberg provides you with a simple and intuitive way to display visually appealing chronological lists with your events.

Using the Timeline Showcase block

1. Adding the Timeline Showcase block

2. Timeline Showcase block Content settings

Here you get to pick one of four distinct layouts for your timeline: horizontal alternating, horizontal standard, vertical separated and vertical side. Each of the layouts displays images and their corresponding info sections in a different way.

After you selected a layout for your timeline, you can start adding individual items to the element.

To add a new item, simply click the Add Item button located at the bottom of the section. For each of the items you can add a point icon (an icon placed on the timeline itself), add an image, a title, date, some additional text, a URL for the item link, and you can also choose how the link opens.

You can also enable an entry animation for the element, set a number of columns you wish to display and choose between predefined and custom responsive settings for the element.

3. Timeline Showcase block Style settings

After you have finished with the basic set up of your timeline showcase, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are four sub-tabs for setting up different stylizations for the block.

Content Style Sub-tab

Here you can make further adjustments to the appearance of your timeline. Depending on the layout you select in the Content tab, the options may differ here. You can input values for image border radius, adjust side width and content width here.

Style Sub-tab

Here's where you can modify the title, date and text appearance. You can pick a heading tag for the titles, adjust title color & hover color, and configure title typography. You can also adjust date and text color & typography.

Spacing Style Sub-tab

In this sub-tab you'll find settings related to spacing for the element. You can alter bottom margins for titles, dates & text, input values for title and text padding, alter the size of the space between items, modify item side padding and input values for image margins.

Line & Point Style Sub-tab

In this sub-tab you can adjust timeline line and point. You can choose how you wish to position the line, set line color & thickness, pick between standard and diamond point types, modify pointer position, adjust timeline point size & color, input values for point border radius, and pick the point icon size & color.

4. Timeline Showcase block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Add to Cart Button custom block for Gutenberg lets you display customizable add to cart buttons for your products.

Using the Add to Cart Button block

1. Adding the Add to Cart Button block

2. Add to Cart Button block Content settings

Here you can make the basic adjustments to your button. First off you have the option to choose one of previously created products you wish to assign the button to. After this, you get to pick one of three button layouts: filled, outlined and textual.

For both filled and outlined buttons you can alter the button size and select one of three types: standard, with inner border, and icon boxed. You can also enable a button text underline, and set a size for the button. Finally, you can also add an SVG you wish to display in the element.

3. Add to Cart Button block Style settings

After you have finished with the basic set up of your add to cart button, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

This is where you can adjust the button text typography, alter the text color, background color & border color for both normal and hover states (and pick a background reveal style for the hover state), input values for border width, radius, and padding.

4. Add to Cart Button block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Advanced Navigation custom block for Gutenberg provides you with a straightforward way to display your menus in a vast number of easily configurable appearance styles.

Using the Advanced Navigation block

1. Advanced Navigation block

2. Advanced Navigation block Content settings

First off, you should select one of the previously created menus you wish to display. After this, you can select one of two layouts; in the event that you select standard, you can pick a horizontal alignment for the menu, and if you go with the full screen option, you can make the dropdown menu open on click (as opposed to opening the menu by clicking the arrow icon).

3. Advanced Navigation block Style settings

After you have finished with the basic set up of your advanced navigation, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Depending on the layout you select in the Content tab, you'll be presented with a corresponding set of options here.

If you select the standard layout, here you'll be able to adjust menu typography, adjust colors for normal, hover and active menu states, modify item vertical & horizontal padding, adjust the size of the space between items, enable a customizable border between items and pick one of five configurable menu item styles. Depending on the item style you select, you'll get options for adjusting that specific menu item style.

The standard layout style options also let you menu area width, background color, box shadow, and top/bottom space, as well as menu item typography, colors, and vertical & horizontal item space.

If you selected the full screen layout from the Content tab, you can adjust menu width, alignment, and background, you can add an SVG for the menu opener and adjust the icon size, colors and stroke width, as well as add a close icon & alter its size, colors, stroke width, & top and right position for the close icon.

On top of that you can customize the full screen menu typography, colors, arrow size, vertical space for the items, and select one of two adjustable menu item styles.

The final set of options related to the full screen menu lets you adjust the submenu typography, item colors, and vertical item space.

4. Advanced Navigation block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Animated Text custom block for Gutenberg provides you with a simple and straightforward way to display captivating sections with animated textual content.

Using the Animated Text block

1. Adding the Animated Text block

2. Animated Text block Content settings

In the Content sub-tab you can input the text and adjust the appear animation you wish to apply. You can choose how you wish to split the title, pick one of 5 appear animation styles, and fine-tune the appear animation delay.

3. Animated Text block Style settings

After you have finished with the basic set up of your animated text, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Here you can pick an alignment style for the text, set a heading tag for the title, adjust title color, configure title typography & input values for title padding.

4. Animated Text block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Before/After Comparison Slider is a custom block for Gutenberg that lets you effortlessly create interactive before/after style image presentations with draggable handles that gradually reveal one of two provided images depending on the side they are dragged towards.

Using the Before/After Comparison Slider block

1. Adding the Before/After Comparison Slider block

2. Before/After Comparison Slider block Content settings

Now we are going to take a look at the options available in the Content tab.

Here you can add an image you wish to display for the before stage, and an image for the after stage. You can also input the text that will be displayed on the draggable slider handle, pick an orientation style for the slider, and input a value for the default image offset.

If you wish to position the draggable slider handle centrally (and effectively leave half of each image visible), simply leave this field empty as the default value set here is 50%.

3. Before/After Comparison Slider block Style settings

After you have finished with the basic set up of your slider by providing the images, inputting the handle text, choosing a slider orientation and adjusting the image offset, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Here you have the option to set the handle top offset, adjust the size of the circle displayed on the slider handle, alter handle line size, handle circle and text color and typography.

4. Before/After Comparison Slider block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Blockquote custom block for Gutenberg provides you with a simple way to display eye-catching quotes and style them the way you choose.

Using the Blockquote block

1. Adding the Blockquote block

2. Blockquote block Content settings

Now we are going to take a look at the options available in the Content tab.

First you have the option to go with one of three blockquote layout styles; Inline, which aligns the quote icon with the text, Background, which places the icon behind the quote, and Top which places the icon above the quote text.

After you have selected a layout style, simply input the quote text in the text field, and set an SVG to display at the beginning of the quote.

3. Blockquote block Style settings

After you have finished with the basic set up of your blockquote by selecting a layout, inputting the quote text, and adding an SVG, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

General

In the first section of the Style tab you can choose how you wish to align the quote text relative to the rest of the content, set alignment for the quote icon, pick and define a background style for your blockquote, and choose whether you wish to display quote borders. In the event that you select one of five blockquote border styles, you’ll also have the option to set the border width and color.

Text

Here you can pick a heading tag for the text and set the text color and typography.

Spacing

Adjust the holder padding, top margin for the text, and margins for the blockquote icon.

4. Blockquote block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Blog Carousel custom block for Gutenberg lets you display testimonials in eye-catching carousel slider layouts.

Using the Blog Carousel block

1. Adding the Blog Carousel block

2. Blog Carousel block Content settings

There are five sub-tabs in the Content tab for making basic adjustments to your blog carousel.

General

In the General sub-tab you can define the basic element appearance and how your slider behaves.

You can pick one of two slider directions, choose the number of columns you wish to display, pick between predefined and custom responsive settings for the element, set a size for the space between carousel items and configure slider height.

After this you can enable slider loop if you would like the slider to start over from the first image when it comes to the end of the blog list, enable automated slider play, choose whether you wish to align the slides centrally, enable displaying partial slider columns & slide mouse dragging, and input a value for the slide duration and the slide animation duration.

On top of that, you can choose whether you wish to display slider navigation arrows & pagination bullets, and set the proportions you wish to apply to images in the slider.

Query

Here you can choose how many posts you wish to show per page, select how you wish to order posts, and include additional parameters for posts you wish to display.

Layout

This is where you can further define the appearance of the carousel. You can pick one of five item layouts, set a heading tag for the titles, choose whether you wish to display post excerpts & input maximum excerpt length, choose whether you wish to center the content, enable or disable showing media, info icons, post dates, categories, authors, & button. In the event that you select the Info on Image item layout, you can also make the slider full height.

Read More Button

In the event that you select an item layout other than Standard & Info on Image, you can display a read more button for posts in your carousel. This is where you'll have options for configuring the button.

You can input the read more text, pick one of three button layouts, and enable button text underline. If you select filled or outlined button layouts, you can also choose one of three button types and adjust the size of the button here.

Read More Button Icon

This is where you can set an SVG for the read more button.

3. Blog Carousel block Style settings

After you have finished with the basic set up of your blog carousel, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Depending on the item layout you selected from the Content sub-tab Layout, you'll be presented with a different set of options for carousel style. There are up to seven sub-tabs for setting up different stylizations for the block.

Slider Navigation Sub-tab

You can make various adjustments to the slider navigation here. In order for these settings to become available, you first need to enable slider navigation from the Content sub-tab General.

Here you can adjust the horizontal and vertical offsets for the navigation, add SVGs you wish to use for next and previous navigation arrows, set arrow and background colors for both active and hover states, and for the hover state you can also enable interactive arrow movement.

Finally, you can alter the arrow size, and navigation arrow holder width and height.

Slider Pagination Sub-tab

In this sub-tab you can customize the slider pagination. In order for these settings to become available, you first need to enable slider pagination from the Content sub-tab General.

Here you can choose where you wish to position the pagination bullets relative to the slider, enable pagination numbers whose appearance you can adjust, alter the offset for pagination, and apply different stylizations for the pagination in its initial (idle) and active (hover) states. The final option allows you to set a size for the space between pagination bullets.

Style Sub-tab

This is where you can alter title colors & typography, choose whether you wish to underline titles on hover, set a color for excerpt text, adjust excerpt typography, modify info text colors & typography, input values for image border radius, pick one of three image hover behavior types (and pick a zoom origin for zoom hover behaviors), and set overlay colors.

Layout Spacing Sub-tab

Depending on the Item Layout you selected in the Content tab, the options found here may differ. Here you can adjust post info, title, image & text bottom margins, and input values for content padding.

Content Style Sub-tab

Here you can further define the appearance of the content. You can set a content background color and item shadow.

Date Style Sub-tab

If you enable displaying post dates from the Content sub-tab Layout, you can alter date appearrance here. You have options for selecting date colors, adjusting date typography, and you can input values for date padding.

Read More Button Style Sub-tab

If you enable displaying the button from the Content sub-tab Layout, you can further adjust the stylization of the button here. You can configure the button text typography, adjust colors for both normal and hover states (and choose a background reveal style for the hover state), input values for border width, border radius and padding.

4. Blog Carousel block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Working Hours custom block for Gutenberg provides you with a great and intuitive way to display your business’ working hours in easily styled elements.

Using the Working Hours block

1. Adding the Working Hours block

2. Working Hours block Content settings

This is where you can make basic adjustments to the element. You can input a subtitle, title, & text, choose the resolution below you wish to enable the responsive column layout, enable a separator line between the title & content, and add individual items you wish to display in the element.

For each of the items you can add an SVG icon you wish to display, input the name of the day, the working hours corresponding to that day, and pick a color for the item. You can add as many items as you deem neccesary.

3. Working Hours block Style settings

After you have finished with the basic set up of your working hours, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are four sub-tabs for setting up different stylizations for the block.

Item Sub-tab

Here you can further define the item appearance in the element. You can adjust icon colors & size, day text heading tag, color & typography, hours color & typoraphy. The final set of options lets you adjust the lines shown inside the element - you can choose a line type & pick one of five border types which you can customize.

General Sub-tab

In this sub-tab you can choose between three adjustable background types, and you'll be presented with options related to the specific background style you select.

Text Sub-tab

The text sub-tab lets you alter the appearance of textual content found in the element - you can set a heading tag, color and typography for titles & subtitles, and adjust additional text color, typoraphy, and enable an underline for the additional text.

Spacing Sub-tab

In the final sub-tab of the Style tab you can set a size for the space between items, input values for item padding and holder padding, adjust bottom margins for titles & subtitles, and configure the top margin for additional textual content.

4. Working Hours block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Cards Slider custom block for Gutenberg lets you easily create an interactive slider presentation with multiple images stacked on top of each other; once the slides change, the bottom image moves to the top of the stack.

Using the Cards Slider block

1. Adding the Cards Slider block

2. Cards Slider block Content settings

First off you have two image shuffle styles to choose from. Depending on the one you go with, the images will appear stacked to the right or to the left.

Now we get to adding individual images or image items to your card slider. To add a new image item, click the Add Item button located beneath the Image Items section. Here you can add a link and the image itself for each of the items you wish to feature in the element.

3. Cards Slider block Style settings

After you have finished with the basic set up of your cards slider, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are two sub-tabs for setting up different stylizations for the block.

Content Style Sub-tab

First off, you can adjust the offset step for your cards slider.

Slider Navigation Style Sub-tab

Here you can add SVGs you wish to use for next and previous navigation arrows, set arrow and background colors for both active and hover states, and for the hover state you can also enable interactive arrow movement.

Finally, you can alter the arrow size, navigation arrow holder width and height, navigation top margin, left offset, and finally, adjust the size of the space between navigation arrows.

4. Cards Slider block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Pie and Donut Charts custom block for Gutenberg lets you display fully customizable pie charts or donut charts in a simple and completely intuitive manner.

Using the Pie and Donut Charts block

1. Adding the Pie and Donut Charts block

2. Pie and Donut Charts block Content settings

Here you can add the individual items you wish to feature in your chart. For each individual item you can input a data value, data label, set background & hover background colors, add a pattern image if you wish to feature it for that specific item, and set border and hover border colors.

In addition to adding individual items and their properties, here you can also input a title for your chart, and include some additional text if you wish.

3. Pie and Donut Charts block Style settings

After you have finished with the basic set up of your pie and donut charts, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are four sub-tabs for setting up various stylizations for your chart.

Chart Sub-tab

First off, the chart style sub-tab lets you select how the chart will be aligned on your page; you can display charts on the left, right, and centrally.

The next dropdown labeled Chart Type lets you select the type of chart you wish to create. You can create either a Pie Chart or a Doughnut Chart.

You can also adjust the chart width, chart aspect ratio, border width, and border width on hover.

Text Sub-tab

In this sub-tab you can adjust the text alignment, color, and typography. In addition to this you can pick a heading tag for your title, set a color for the title and alter title typography.

Spacing Sub-tab

In this sub-tab you can set the top margin for the title & text and input text padding values.

Legend Sub-tab

This sub-tab is all about letting you display & customize chart legends. You can choose whether you wish to display the legend, pick where you wish to position legends, set the legend bar width & height, set a size for the space between legend items & set legend bar and legend holder margins.

Apart from that, you can adjust the legend label color & typography here.

4. Pie and Donut Charts block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Clients Carousel custom block for Gutenberg provides you with a great way to showcase your clients or business partners in fully customizable carousel slider layouts.

Using the Clients Carousel block

1. Adding the Clients Carousel block

2. Clients Carousel block Content settings

In the Content tab you can define the basic element appearance and how your slider behaves.

On top of that, you can choose whether you wish to display slider navigation arrows & pagination bullets, and set the proportions you wish to apply to images in the slider. The final set of options lets you enable boxed items in the carousel, and pick one of 5 hover styles for the items.

Finally, you can add individual items you wish to display in your carousel. For each of the items you can add an image, a hover image, a title, additional text, a link, and an icon.

3. Clients Carousel block Style settings

After you have finished with the basic set up of your clients carousel, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are six sub-tabs for setting up different stylizations for the block.

Content Sub-tab

Here you can further define the appearance of the content. You can choose a text alignment, adjust image bottom margin, input values for content padding, adjust background color, and input values for box item padding here.

Title Sub-tab

This is where you can make adjustments to title appearance - you can adjust its heading tag, color, typography, bottom margin, and you can enable & modify the underline for title on hover.

Text Sub-tab

In this sub-tab you can define the color & typography for additional item text.

Icon Sub-tab

Here you can configure icon color, size, top position and right position.

Navigation Sub-tab

You can make various adjustments to the slider navigation here. In order for these settings to become available, you first need to enable slider navigation from the Content tab.

Finally, you can alter the arrow size, and navigation arrow holder width and height.

Pagination Sub-tab

In this sub-tab you can customize the slider pagination. In order for these settings to become available, you first need to enable slider pagination from the Content tab.

4. Clients Carousel block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Content Menu custom block for Gutenberg enables you to create a section containing menus which you can fully customize with ease.

Using the Content Menu block

1. Adding the Content Menu block

2. Content Menu block Content settings

Now we are going to take a look at the options available in the Content tab.

First off you can select one of the previously created menus, pick from either horizontal or vertical menu style, and adjust the horizontal alignment for the menu. For the horizontal layout you can also enable responsive menu and choose the responsive breakpoint below which the horizontal menu will be shown vertically.

3. Content Menu block Style settings

After you have finished with the basic set up of your content menu, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

In this tab you can adjust the menu typography style, and make varioius stylistic choices for the menu in it's normal, hover and active states.

You can adjust item colors, item background colors, item even background color, configure vertical padding, horizontal padding, size for the space between menu items, enable borders between items, set border colors, thicknes and finally, pick one of five configurable menu item styles.

4. Content Menu block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Data Table custom block for Gutenberg provides you with an easy way to display fully adjustable tables containing all types of data.

Using the Data Table block

1. Adding the Data Table block

2. Data Table block Content settings

Now we are going to take a look at the options available in the Content tab.

In the first sub tab you can adjust the number of rows per page, enable an enumerating row (and set the cell width for this numbered row).

To edit specific data table cells, you can click on the table cell you wish to edit - on the right side of the screen you'll find an option for choosing between text and image cell styles. You can change the text directly in the cell, or replace images by clicking the image cell and selecting the replace image option found above.

3. Data Table block Style settings

After you have finished with the basic set up of your data table, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are four sub-tabs for making various stylistic changes to the appearance of the element.

General Sub-tab

In this tab you can pick a table layout, a table alignment, set a minimal width for the table, adjust the table background, the headings row background color and the first column background color, pick a border style, select one of five adjustable border types, and input values for the headings cell and cell paddings.

Main Title Sub-tab

This is where you can adjust the heading tag, color and typography style for the main title.

Cell Sub-tab

Next up you have the options to adjust the cell text color, typography, text link color, text link typography, and you can enable one of two underline styles for the text link.

Pagination Sub-tab

In the pagination style sub-tab you can configure the pagination alignment and typography, as well as to set pagination color and background color for its both normal and active/hover states.

In addition to that you can add SVG icons for the previous and next pagination arrows, adapt the arrow size, input values for pagination item border radius, adjust the pagination item width, height, space between pagination items, and top pagination margin.

4. Data Table block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Device Frame Carousel custom block for Gutenberg lets you easily compose remarkable carousel presentations with multiple items with images fitted inside device-styled frames.

Using the Device Frame Carousel block

1. Adding the Device Frame Carousel block

2. Device Frame Carousel block Content settings

There are two sub-tabs in the Content tab for making basic adjustments to your device frame carousel.

General

In the general sub-tab you can add your carousel items by clicking the Add Item button located at the bottom of this section, or you can edit the existing items found in the element.

For each of the items you wish to feature in the carousel you can choose one of four predefined device frame images (or use a custom device frame image of your own), add the images you wish to display in this specific frame, set the slide width, device width, image border radius and input values for the image offset.

Slider Settings

In the slider settings sub-tab you can define the basic appearance of your carousel slider and how it will behave.

You can choose a slider direction, set a number of columns you wish to display, pick from predefined and custom responsive settings, adjust the size of the space between items, and modify slider height.

You can also enable slider loop if you would like the slider to loop when it comes to the last slide, enable automated slider play, choose whether you wish to align the slides centrally, enable displaying partial columns, enable mouse slide dragging, and input values for the slide duration and the slide animation duration.

On top of that, you can choose whether you wish to display slider navigation arrows & pagination bullets, and choose where you wish to place them.

3. Device Frame Carousel block Style settings

After you have finished with the basic set up of your device frame carousel, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are three sub-tabs for setting up different stylizations for the block.

General Sub-tab

Here you can enable a shadow effect for the device frames.

Navigation Sub-tab

You can make various adjustments to the slider navigation here. In order for these settings to become available, you first need to enable slider navigation from the Content tab.

Finally, you can alter the arrow size, and navigation arrow holder width and height.

Pagination Sub-tab

In this sub-tab you can customize the slider pagination. In order for these settings to become available, you first need to enable slider pagination from the Content tab.

4. Device Frame Carousel block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Device Frame Slider custom block for Gutenberg lets you easily create visually appealing slider presentations with images displayed inside predefined or custom device-styled image frames.

Using the Device Frame Slider block

1. Adding the Device Frame Slider block

2. Device Frame Slider block Content settings

There are two sub-tabs in the Content tab for making basic adjustments to your device frame carousel.

General

In the general sub-tab you can add the images you wish to feature in the slider and pick one of three predefined device-styled frames (or use a device frame image of your own). You can also enable a shadow effect for the device frame.

Slider Settings

In the slider settings sub-tab you can define the basic appearance of your slider and how it will behave.

You can choose between two slide effects, select a slider direction, set a number of columns you wish to display, pick from predefined and custom responsive settings, adjust the size of the space between items, and modify slider height.

On top of that, you can choose whether you wish to display slider navigation arrows & pagination bullets, and choose where you wish to place them. Finally, you can enable custom links and input the links for each image you included in the slider - the order of links corresponds to the order of the images you added, and each should be separated by a comma.

3. Device Frame Slider block Style settings

After you have finished with the basic set up of your device frame slider, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are three sub-tabs for setting up different stylizations for the block.

Device Sub-tab

Here you can adjust the device width, image border radius, and input values for the image offsets.

Navigation Sub-tab

You can make various adjustments to the slider navigation here. In order for these settings to become available, you first need to enable slider navigation from the Content sub-tab Slider Settings.

Finally, you can alter the arrow size, and navigation arrow holder width and height.

Pagination Sub-tab

In this sub-tab you can customize the slider pagination. In order for these settings to become available, you first need to enable slider pagination from the Content sub-tab Slider Settings.

4. Device Frame Slider block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Drop Caps custom block for Gutenberg provides you with a neat way to introduce your paragraphs & strings of text by featuring a decorative initial letter which you can fully adapt.

Using the Drop Caps block

1. Adding the Drop Caps block

2. Drop Caps block Content settings

Now we are going to take a look at the options available in the Content tab.

This is where you can input your textual content; note that the first letter of this text string is the one to which the decoration will be applied.

3. Drop Caps block Style settings

After you have finished with the basic set up of your drop caps, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

This tab lets you make various stylization choices and apply them to your drop caps. There are three sub-tabs for making various stylistic changes to the appearance of the element.

Letter Sub-tab

Here you can adjust the letter typography, color, and holder size.

You can also enable the letter stroke effect if you choose to; this will apply an outlined style to the initial letter of your text, and you can pick the outline (letter stroke) color and set the width for the stroke.

Another effect you can apply to the initial letter is the letter clip effect; by enabling this you’ll have the option to set a background inside the initial letter. You can choose a background type, set a color for the background, and add an image to be featured inside the letter.

The final two options found in this sub-tab let you input values for letter margins and padding.

Text Sub-tab

The two options featured in this sub-tab let you adjust the text typography and color. This applies to all the textual content apart from the initial letter.

Background Sub-tab

Here you can define the background for your drop cap (the initial letter of the text); you can pick a background type, and add a color of your choice or an image to the background around the initial letter.

In addition to this you can display borders around the element if you wish, and you get five different border types to choose from: solid, double, dotted, dashed and groove. You can also set the border width, color, and input values for the letter border radius.

4. Drop Caps block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Dual Image with Content custom block for Gutenberg provides you with an easy way to create sections that contain two images, one placed on top of the other, with some accompanying content.

Using the Dual Image with Content block

1. Adding the Dual Image with Content block

2. Dual Image with Content block Content settings

Here you can input your title, provide additional textual content, add a main image you wish to display, set a height for the main image, choose between custom and predefined responsive settings for the main image, and add a second image.

3. Dual Image with Content block Style settings

After you have finished with the basic set up of your dual image with content, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are three sub-tabs for setting up different stylizations for the block.

Content Sub-tab

Here you can choose a position for the content relative to the image, choose how you wish to align the content, adjust content width, input values for content padding, set a background color for content, and adjust the width of the second image.

Title Sub-tab

In this sub-tab you can set a heading tag for the title, pick title color, adjust title typography, & bottom margin, and enable an underline draw for the text link.

Text Sub-tab

The text sub-tab lets you alter the appearance of textual content found in the element - you can set a text color, adjust text typography, maximum width, and bottom text margin.

4. Dual Image with Content block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Google Map custom block for Gutenberg provides you with a straightforward way to display an easily editable Google Map with a customizable location pin for multiple addresses.

Using the Google Map block

1. Adding the Google Map block

2. Google Map block Content settings

Here you can input the addresses you wish to show, and set an image you wish to use for the pin icon.

To add individual addresses you should click the Add Item button found at the bottom of the section, and you can also edit the preexisting item found in the element.

3. Google Map block Style settings

After you have finished with the basic set up of your google map, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Here you have the option to input values for map height and zoom, as well as to paste a Snazzy Map style JSON code for map stylization you wish to use. You can also enable/disable map dragging, map scroll, map street view control button, map type control button, and map full screen control button on your map.

4. Google Map block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Graphs custom block for Gutenberg lets you display captivating and fully customizable graphs containing all sorts of data.

Using the Graphs block

1. Adding the Graphs block

2. Graphs block Content settings

Now we are going to take a look at the options available in the Content tab.

Here you can input your datasets or items. To add a new item, simply click the +ADD ITEM button located near the bottom of the sub-tab.

For each of the items you wish to feature in the graph you can input the dataset values separated by commas, and dataset labels. You can also adjust the line color and hover color, adjust filling modes, area color and hover area color, and choose whether you wish to enable a linear mode for the graph (if you set this option to “Yes” the line in the graph will go straight from one dataset value to another, as opposed to gradually rising/falling which is the default setting).

At the very bottom of this section you can input data labels for the entire graph. It’s important to note that you should separate these labels by commas.

3. Graphs block Style settings

After you have finished with the basic set up of your graphs, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

This tab lets you make various stylization choices and apply them to your graphs. There are three sub-tabs for making various stylistic changes to the appearance of the element.

Letter Sub-tab

Here you can adjust the letter typography, color, and holder size.

The final two options found in this sub-tab let you input values for letter margins and padding.

Graph Sub-tab

Here you can make adjustments related to graph appearance. First off you can choose between two graph styles: line and bar.

You can also pick one of 3 chart alignments, configure graph width, border width, and in the event that you select the Bar graph style, you can also input values for hover border width, bar size and category size.

Legend Sub-tab

This is where you can adjust graph legends. The first option located in this sub-tab lets you pick if you wish to display the chart legend in the first place.

You can pick where you wish to position and how you wish to align the legend, adjust legend bar width, and height. Finally, you can configure legend bar margins, and adjust label colors & typography.

Tick Sub-tab

In the final sub-tab of the style tab you can configure graph ticks. You can input minimum and maximum data values, and adjust the size for the graph steps.

4. Graphs block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Highlighted Text custom block for Gutenberg lets you accentuate certain words or parts of your text the way you choose.

Using the Highlighted Text block

1. Adding the Highlighted Text block

2. Highlighted Text block Content settings

Now we are going to take a look at the options available in the Content tab.

First off, you can input the text you wish to display by simply inputting it in the element on the left side of the screen. You can pick words (or portions of the text) you wish to highlight by selecting the text and clicking the Highlight text selection button found in the options that appear above the text. You will be able to style this highlighted text the way you choose, but more on that in a bit.

After you've provided the text and selected the portions of it you wish to highlight, you can move to the settings found in the Content tab. Here you can enable an appear animation for the text, and adjust the appear animation delay time.

3. Highlighted Text Style settings

After you have finished with the basic set up of your highlighted text, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

This tab lets you make various stylization choices and apply them to your highlighted text. First off, you can choose an alignment for the text.

There are two sub-tabs for making various stylistic changes to the appearance of the element.

Text Sub-tab

Here you can set a heading tag for the text, adjust text color and typography.

Highlight Sub-tab

This is where you can configure the highlighted text - you can set a highlight text color, background color, top offset, bottom offset, and you can input values for the highlighted text padding.

4. Highlighted Text block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Image Hotspots custom block for Gutenberg is ideal for creating an image showcase section which contains multiple interactive hotspots which reveal information when hovered on.

Using the Image Hotspots block

1. Adding the Image Hotspots block

2. Image Hotspots block Content settings

Now we are going to take a look at the options available in the Content tab.

Here you can add the main image you wish to display, and add individual hotspots to it.

For each of the hotspots you can add a title, a subtitle, upload an SVG icon you wish to use for that specific pin, and adjust the pin position. You can pick predefined horizontal and vertical positions for the pin, and you also have the option to manually adjust vertical and horizontal offsets for the pin.

You can also pick a fade info position for the informative content that appears when a specific pin is hovered (this option has effect only in the event that you select Fade in info display style; this can be done in the Style tab, under the Info Style sub-tab).

3. Image Hotspots Style settings

After you have finished with the basic set up of your image hotspots, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

This tab lets you make various stylization choices and apply them to your highlighted text. First off, you can choose an alignment for the text.

There are four sub-tabs for making various stylistic changes to the appearance of the element.

Pin Style Sub-tab

In this sub-tab you can make various stylistic adjustments to hotspot pins.

You can add an image you wish to be used for all the pins by default, set a pin color, size, holder background color, holder size, and input values for pin border radius.

Info Style Sub-tab

Next up, you can configure the info sections which appear when the hotspots are clicked on.

You can pick an info display style, info position, enable arrows on info sections, adjust info offset from the pin, set a background color, and input values for info padding and info border radius.

Info Title Style Sub-tab

In this sub-tab you can make adjustments to info titles.

You can set a heading tag for the titles, their color, typography, and bottom margin.

Info Subtitle Style Sub-tab

Here you can make adjustments to info subtitles. You can set subtitle color and typography.

4. Image Hotspots block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Info Button custom block for Gutenberg is great for creating buttons that contain a bit of extra information displayed directly on the button.

Using the Info Button block

1. Adding the Info Button block

2. Info Button block Content settings

Now we are going to take a look at the options available in the Content tab.

Here you can make the basic adjustments to your info button and provide content you wish to display in the element. First off you have the option to pick one of two button layouts.

Filled

This layout lets you display filled buttons – buttons with borders and colored backgrounds. You also get to choose from two button types with this layout; standard & icon boxed. In addition to this you can choose a button size, and of course input the text you wish to show on the button alongside some additional text (subtext), and you can input the button link and button icon here.

Outlined

This button layout has the same options as the filled button layout, the key difference being the fact that outlined buttons have borders, however their backgrounds are transparent.

3. Info Button Style settings

After you have finished with the basic set up of your info button, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Here you can adjust typography and colors for both the info button text and subtext, configure button background and border colors, border width, radius, as well as the button padding. Note that you can alter the colors for the info button in both its normal and hover states.

4. Info Button block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Interactive Banner custom block for Gutenberg provides you with everything you can need to create visually striking banners that your website visitors can interact with.

Using the Interactive Banner block

1. Adding the Interactive Banner block

2. Interactive Banner block Content settings

Now we are going to take a look at the options available in the Content tab.

Here you can make the basic adjustments to your interactive banner. First off, you can pick from four predefined banner layouts:

Standard, which initially displays banner title over banner image, however once hovered on, the subtitle which you can provide appears.

Revealing, which initially displays banner title & subtitle over banner image, but once hovered on, some additional text which you can input appears.

Image Switch, which lets you input banner title, subtitle, additional text next to the banner image. You can upload two images you wish to display; the first one will be displayed initially, and the second one once the element is hovered on.

From Bottom, which is essentially identical to revealing, only with textual content displayed at the bottom of the banner.

Aside from picking a layout for your interactive banner, you can add an image you wish to display in the banner, input title and subtitle text for the banner, choose whether you wish to display a banner button, and add a URL you wish to link the interactive banner to & enable an overlay for the link.

3. Interactive Banner Style settings

After you have finished with the basic set up of your interactive banner, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Depending on the layout you select at the top of the main Content tab, there are up to four sub-tabs for making adjustments to the element.

Content Sub-tab

Here you can input values for banner padding and adjust the top banner margin.

Title Sub-tab

Here you can adjust the heading tag for the title, set title color and typography.

Subtitle Sub-tab

This is where you can set a heading tag for the subtitle text, adjust the bottom margin for the subtitle, and configure subtitle text color & typography.

Text Sub-tab

Note that this sub-tab becomes available if you select any element layout apart from the Standard from the main Content tab.

The text sub-tab lets you pick a heading tag for the additional text, adjust top & bottom margins for the text, and configure text color and typography.

4. Interactive Banner block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Interactive Link Showcase custom block for Gutenberg lets you create captivating and fully configurable interactive showcases with textual content and corresponding images.

Using the Interactive Link Showcase block

1. Adding the Interactive Link Showcase block

2. Interactive Link Showcase block Content settings

Now we are going to take a look at the options available in the Content tab.

First off, you have the option to pick one of four layouts:

Standard, which displays images corresponding to item titles adjacent to them, to the left or right, while the titles themselves are aligned centrally inside the element. You can hide the images below certain resolutions if you choose so.

Background, which displays item images across the entire background of the element, with item titles placed on top of the images.

Inline, which aligns the items and the images in the same horizontal line as the text. You can also input a separator symbol of your choosing (this will be placed between the items), and you can hide the images below certain resolutions if you choose to.

Split, which divides the element vertically, item titles being displayed on the left and the rest of the element being taken up by corresponding item images. You can also stretch the image to take up the entire size of the element section it is placed on, and you can hide the images below certain resolutions.

3. Interactive Link Showcase Style settings

After you have finished with the basic set up of your interactive link showcase, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are three sub tabs for making various stylistic adjustments to the element.

Content Sub-tab

First off you can make the element take up the entire height of the screen. After that, you get options for inputting the list padding values, adjusting the list width, configuring the size of the space between the items, and the width of the images.

Title Sub-tab

Here you can set title color, hover color, typography, pick one of two hover styles, and adjust hover line thickness & offset.

Text Sub-tab

The text sub-tab lets you set text color, hover color, typography, and top margin for the text.

4. Interactive Link Showcase block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Item Showcase custom block for Gutenberg lets you create detailed showcases for items of any sort; you can display an item image with customizable informative sections with your content arranged around the said image.

Using the Item Showcase block

1. Adding the Item Showcase block

2. Item Showcase block Content settings

There are two sub-tabs for making basic adjustments to the element.

Now we are going to take a look at the options available in the Content sub-tab labeled General.

General

Here you can pick a layout type you wish to use and add the image you wish to display centrally in the element.

Standard item showcase layout displays item icons (or numbers depending on what you wish to display with your showcase items, more on that in a bit) above item titles.

Side icon layout displays icons (or numbers) next to item titles.

After you added the main image and selected a layout you wish to use, you can start adding item showcase items.

To add a new item showcase item, click the Add Item button located at the bottom of the section, or you can edit the preexisting items found in the element.

For each of the items you wish to feature around the image you can choose whether you wish to display an icon or a number (positioned above or adjacent to your title, depending on the layout you previously selected), add individual item titles, additional text, and input URLs for item links.

Appear Animation

Here you can enable a content entry animation for the element.

3. Item Showcase Style settings

After you have finished with the basic set up of your item showcase, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are two sub-tabs for making stylistic changes to the appearance of the element.

Style Sub-tab

In this sub-tab you can make various stylistic adjustments to icons, titles, numbers & text.

You can adjust the icon color, hover color & size, and you can pick a heading tag for the title text, adjust title color, hover color and typography. The rest of the options found here let you modify number and text color & typography.

Spacing Style Sub-tab

Next up, you get a set of options related to element spacing. You can adjust image top offset, side margins, item space, title bottom margin, and you can input values for icon & number margins.

4. Item Showcase block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Preview Slider custom block for Gutenberg lets you easily create slider presentations with two image slides displayed simultaneously, one of which is placed on top of the other inside a mobile device-styled image frame.

Using the Preview Slider block

1. Adding the Preview Slider block

2. Preview Slider block Content settings

There are two sub-tabs for making basic adjustments to the element.

Now we are going to take a look at the options available in the Content sub-tab labeled General.

General

In the first sub-tab you can add individual slides you wish to display. Each slide of the preview slider contains a main image, and an image displayed inside a device-styled frame. You can also choose from three predefined image frames, or use a custom image frame of your own.

Slider Settings

In the slider settings sub-tab you can define the basic appearance of your slider and how it will behave.

You can select a slider direction, set a number of columns you wish to display, pick from predefined and custom responsive settings, adjust the size of the space between items, and modify slider height.

On top of that, you can choose whether you wish to display slider navigation arrows & pagination bullets, and choose where you wish to place them.

3. Preview Slider Style settings

After you have finished with the basic set up of your preview slider, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are three sub-tabs for making stylistic changes to the appearance of the element.

Device Sub-tab

In this sub-tab you can make stylistic adjustments to the smaller of the two sliders, the device slider.

You can configure bottom and right offsets for the slider, as well as adjust device width, image border radius, and input values for image offsets.

Navigation Sub-tab

Finally, you can alter the arrow size, and navigation arrow holder width and height.

Pagination Sub-tab

4. Preview Slider block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Pricing List custom block for Gutenberg lets you display easily customizable lists containing the items you have for sale and their prices.

Using the Pricing List block

1. Adding the Pricing List block

2. Pricing List block Content settings

Now we are going to take a look at the options available in the Content tab.

Here you get to pick a layout for your list and insert individual items you wish to display in it. There are two layout types to choose from: standard, which displays the item image after the item title, and image before, which displays the item image in front of its title.

To add individual items to your pricing list, simply click the Add Item button located near the bottom of the Content section, or edit one of the example items that are already added to the element by clicking the item collapsible menu.

For each of the items you have the option to add an item image, item title, set a color for the item title, provide some additional descriptive text, input a price, a discounted price, and set a color for the price.

Finally, you have the option to display a button inside the element.

3. Pricing List Style settings

After you have finished with the basic set up of your pricing list, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

This tab lets you make various stylization choices and apply them to your highlighted text. First off, you can choose an alignment for the text.

There are four sub-tabs for making various stylistic changes to the appearance of the element.

General Sub-tab

Here you can choose a size for the space between the items in your list, select whether you wish to display a separator line, and adjust the top margin for the pricing list button.

Content Sub-tab

This is where you can pick a heading tag for your pricing list item titles, and adjust colors & typography for titles and descriptive text for items. You can also configure the top margin for the descriptive text and input values for image margins.

Line Sub-tab

Line sub-tab provides you with options for adjusting pricing list line color, choosing one of four line types, choose line thickness, and setting margins for the line.

Price Sub-tab

In the price style sub-tab you can make your stylistic choices regarding how the prices in your list appear. You can adjust price color, typography, background, and input values for price padding and price border radius.

4. Pricing List block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Product Category List custom block for Gutenberg lets you display captivating and fully flexible lists with your products designated to a specific category of your choice.

Using the Product Category List block

1. Adding the Product Category List block

2. Product Category List block Content settings

Now we are going to take a look at the options available in the Content tab.

There are three sub-tabs for making basic adjustments to the element.

General

Here you can make the core adjustments to your product category list element. First off you have the option to select one of two list appearance styles: gallery and masonry.

You can also set proportions for the image, pick a number of columns you wish the list to have and choose between predefined responsive settings and inputting different column values for different responsive stages yourself. The last option found here lets you enable a zigzag item placement in the list, and adjust the zigzag amount.

Query

Here you can set a maximum number of posts that you wish to display per 1 page, and select how you wish to order the items in the list. You can also choose to prevent empty product categories from being displayed in your list.

If you wish to further limit the list to certain items, you can input taxonomy IDs corresponding to items you wish to show.

Layout

In this sub-tab you can pick one of three different item layout styles, and set a heading tag for item titles in your slider.

3. Product Category List Style settings

After you have finished with the basic set up of your product category list, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

This tab lets you make various stylization choices and apply them to your highlighted text. First off, you can choose an alignment for the text.

There are five sub-tabs for making various stylistic changes to the appearance of the element.

Style Sub-tab

Here you can further define the appearance of your list. You can set a color a for the title, adjust title typography & box width, input values for title padding and set a color for the title background.

Button Style Sub-tab

Image Style Sub-tab

Image sub-tab provides you with options for adjusting the image overlay color, overlay hover color, pick an image hover behavior (and hover zoom origin for one of the two zoom hover behavior types).

Border Style Sub-tab

This is where you can input values for the border radius.

Spacing Style Sub-tab

The final sub-tab lets you adjust the bottom offset for the titles.

4. Product Category List block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Product Slider custom block for Gutenberg lets you display your products in eye-catching and fully adaptable slider layouts.

Using the Product Slider block

1. Adding the Product Slider block

2. Product Slider block Content settings

Now we are going to take a look at the options available in the Content tab.

There are five sub-tabs for making basic adjustments to the element.

General

Here you can define the basic appearance of your slider and how it will behave.

On top of that, you can choose whether you wish to display slider navigation arrows & pagination bullets, choose where you wish to place them and select a screen resolution below which you wish to hide them. The final option found here lets you set the proportions for the images.

Query

Here you can set a maximum number of posts that you wish to display per 1 page, and select how you wish to order the items in the slider.

If you wish to limit the list to certain items, you can select additional parameters that will define the items you wish to show. You can also limit the list by choosing to filter by selecting on sale, featured, top rated or best-selling items.

Layout

In this sub-tab you can pick one of five different item layout styles, set a heading tag for item titles, and choose if you wish to display item categories, item ratings, and sale/sold mark for items in your list.

Button

Here you can make the basic adjustments to your button. First off you have the option to pick one of three button layouts: filled, outlined and textual.

For both filled and outlined buttons you can alter the button size and select one of three types: standard, with inner border, and icon boxed. You can also enable a button text underline.

Button Icon

Here you can add an SVG you wish to display inside the button, pick a hover behavior type for the button icon, input values for icon margins, and pick a position for the icon relative to the button.

3. Product Slider Style settings

After you have finished with the basic set up of your product slider, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are ten sub-tabs for making various stylistic changes to the appearance of the element.

Slider Navigation Style Sub-tab

You can make various adjustments to the slider navigation here. In order for these settings to become available, you first need to enable slider navigation from the Content sub-tab General.

Here you can adjust the horizontal and vertical offsets for the navigation, add SVGs you wish to use for next and previous navigation arrows, set arrow and background colors for both active and hover states, and for the hover state you can also enable interactive arrow movement.

Finally, you can alter the arrow size, and navigation arrow holder width and height.

Slider Pagination Style Sub-tab

In this sub-tab you can customize the slider pagination. In order for these settings to become available, you first need to enable slider pagination from the Content sub-tab General.

Here you can choose where you wish to position the pagination bullets relative to the slider, enable pagination numbers whose appearance you can adjust, alter the offset for pagination, and apply different stylizations for the pagination in its initial (idle) and active (hover) states. The final option allows you to set a size for the space between pagination bullets.

Style Sub-tab

Here you can further define the appearance of your slider. You can set a color a for the title, adjust title typography & hover color, configure content background color, item background color and item background hover color.

Spacing Style Sub-tab

In this sub-tab you can input values for content padding, item padding, & adjust category, swap holder and rating top margins.

Category Style Sub-tab

If you enabled displaying item categories in your product list from the Content sub-tab Layout, you can stylize the category text here. You can adjust the category color, hover color, and typography.

Price Style Sub-tab

In this sub-tab you can define how the item prices appear. You can set a color for the price, old price, adjust price typography, and set font size and top offset for the price currency.

Rating Style Sub-tab

If you enabled displaying item ratings in your product list from the Content sub-tab Layout, you can configure how ratings appear here by adjusting their color and rating icon size.

Button Style Sub-tab

Image Style Sub-tab

Image sub-tab provides you with options for inputting the values for image border radius, making the image full height, adjusting the image overlay color, overlay hover color, and picking an image hover behavior (and hover zoom origin for one of the two zoom hover behavior types).

Mark Style Sub-tab

Here you'll be able to make alterations to item marks in the slider. You can input the values for mark padding, set sale & sold mark colors & background colors, adjust mark typography and input values for mark border radius & offset.

4. Product Slider block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Rating custom block for Gutenberg lets you easily display a fully customizable star-styled rating with 5 degrees.

Using the Rating block

1. Adding the Rating block

2. Rating block Content settings

Now we are going to take a look at the options available in the Content tab.

Here you can choose one of two layouts for the element, adjust the rating you wish to display, and add SVG icons for marked and unmarked ratings.

3. Rating block Style settings

After you have finished with the basic set up of your rating, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

In the style sub-tab you can adjust the horizontal element alignment, set the size for the space between rating items, configure the icon size, and adapt colors for marked and unmarked rating items.

4. Rating block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Slider Switch custom block for Gutenberg lets you easily create visually appealing slider presentations with two images displayed inside predefined or custom device-styled image frames.

Using the Slider Switch block

1. Adding the Slider Switch block

2. Slider Switch block Content settings

There are two sub-tabs for making basic adjustments to the element.

Now we are going to take a look at the options available in the Content sub-tab labeled General.

General

In the general sub-tab you can add the images or individual items you wish to feature in the slider and pick one of two predefined device-styled frames for the main image, & three predefined device-styled frames for the secondary image (or use a device frame images of your own).

For each of the items you wish to feature you can add a title, some accompanying text, a main image, a device image, and add a URL for the link you wish to link the item to.

Slider Settings

In the slider settings sub-tab you can define the basic appearance of your slider and how it will behave.

On top of that, you can choose whether you wish to display slider navigation arrows & pagination bullets, pick a resolution below which you wish to hide them, and choose where you wish to place them.

3. Slider Switch Style settings

After you have finished with the basic set up of your slider switch, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are three sub-tabs for making stylistic changes to the appearance of the element.

Device Sub-tab

In this sub-tab you can make stylistic adjustments to the slider.

You can configure the main image border radius, input value for main image offsets, adjust main slider left offset, device bottom & right offsets, device width, device image border radius, and you can input values for the device image offsets.

Title Sub-tab

In this sub-tab you can make adjustments to the title appearance. You can set a heading tag for the title, set a title color, adjust typography and bottom margin.

Text Sub-tab

This is where you can adjust the text stylization. You can pick a text color, adjust typography and bottom text margin.

Navigation Sub-tab

Finally, you can alter the arrow size, and navigation arrow holder width and height.

Pagination Sub-tab

4. Slider Switch block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

Testimonials Carousel custom block for Gutenberg lets you display testimonials in eye-catching carousel slider layouts.

Using the Testimonials Carousel block

1. Adding the Testimonials Carousel block

2. Testimonials Carousel block Content settings

In the general sub-tab you can define the basic element appearance and how your slider behaves.

You can pick one of five layouts for items. After this you can choose how you wish to align the slider, adjust the number of columns, choose between predefined and custom responsive settings, modify the size of the space between items, and configure the slider height.

Next up you can enable slider loop if you would like the slider to start over from the first image when it comes to the end of the testimonial list, choose whether you wish to align the slides centrally, enable automated slider play, choose whether you wish to enable displaying partial slider columns, enable slide mouse dragging, and input a value for the slide duration and the slide animation duration.

On top of that, you can choose whether you wish to display slider navigation arrows & pagination bullets, input values for image border radius, and adjust the element background.

After you have made all the adjustments to the element, you can start adding Testimonials Carousel items to your slider.

You can add individual items by clicking the Add Item button or by editing one of two existing items in the element. Each of the items can contain a title, testimonial text, author name, occupation, and image. You can also adjust colors for the title, text, author and occupation, and configure item background.

3. Testimonials Carousel block Style settings

After you have finished with the basic set up of your testimonials carousel, you can move on to styling the element. To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are five sub-tabs for setting up different stylizations for the block.

Quote Style Sub-tab

Here you can further define the appearance of quotes. You can add an SVG you wish to display, set a color for the quote, its size, and position.

Text Style Sub-tab

In this sub-tab you can further define how the textual content appears in your testimonials. You can adjust titles, text, author name, and occupation text.

Spacing Sub-tab

Depending on the Item Layout you selected in the Content tab, here you can adjust top margins for the title and occupation text, bottom margins for title, text, and item image, & input values for text padding and box padding.

Navigation Sub-tab

You can make various adjustments to the slider navigation here. In order for these settings to become available, you first need to enable slider navigation from the Content tab.

Finally, you can alter the arrow size, and navigation arrow holder width and height.

Pagination Sub-tab

In this sub-tab you can customize the slider pagination. In order for these settings to become available, you first need to enable slider pagination from the Content tab.

4. Testimonials Carousel block Advanced settings

Next up you can make advanced settings to your block. You can access these settings by clicking the tab labeled Advanced located in the upper-right side of the screen, next to the Style tab. Here you'll find six sub-tabs for making various adjustments to the block.

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

Typeout Text custom block for Gutenberg is great for featuring smoothly animated typeout text sections anywhere on your pages.

Using the Typeout Text block

1. Adding the Typeout Text block

2. Typeout Text block Content settings

Now we are going to take a look at the options available in the Content tab.

This is where you can input the text you wish to display. Note that the typeout text widget consists of two types of text – static, which you can input in the field named Text, and the typeout text itself. The text that gradually gets typed out is inserted in the typeout words field.

Note that you can add as many typeout words as you choose; simply make sure to separate the words using a comma.

You also have the option to input a character of your choice as a cursor in the field located below the text input field.

3. Typeout Text block Style settings

After you have finished with the basic set up of your typeout text, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

Here you can pick an alignment for the element, set a heading tag, color and typography for the text (static text). The final option lets you adjust the color for the typeout text.

4. Typeout Text block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.

This block comes with the Qi Blocks for Gutenberg Premium.

WP Forms custom block for Gutenberg lets you display a wide variety of fully flexible contact forms using the free Contact Form by WPForms plugin.

Using the WP Forms block

1. Adding the WP Forms block

2. WP Forms block Content settings

Now we are going to take a look at the options available in the Content tab.

Here you can select one of the previously created WPForms templates.

3. WP Forms block Style settings

After you have finished with the basic set up of your wp forms, you can move on to styling the element.

To access these settings, simply click on the tab titled Style, located next to the Content tab in the upper-right side of the screen.

There are nine sub-tabs for making various stylistic adjustments to the element.

Label Style Sub-tab

In the first sub-tab you can adjust the contact form label typography and text color.

Input Style Sub-tab

Here you can make various stylistic choices related to input in both initial and focus states. You can adjust typography, color, background color, pick one of 5 border styles, and input values for border radius.

Checkbox Style Sub-tab

In this sub-tab you’ll find options for adjusting the contact form checkbox; you can alter checkbox input size, and input values for checkbox input margins, item margins and checkbox holder margins.

Radio Style Sub-tab

Here you can make adjustments to the radio button in your contact form; you can adapt radio input size, and input values for radio input margins, radio item margins and radio input holder margins.

Button Style Sub-tab

This is where you can adjust button typography, set button color, background color and border color in both initial and hover states, pick one of five border types, and input values for button border width and border radius.

Spacing Style

In this sub-tab you can adjust element spacings. You can values for form item space, adjust label space, input padding, adjust text area height, set button margins and padding.

Global Style Sub-tab

Here you can pick an alignment style for the contact form.

Error Style Sub-tab

Here you can configure the error message style. You can pick error alignment, adjust typography, color, and input values for error margins.

Response Style Sub-tab

In this sub-tab you can adjust contact form response styles. You can configure typography, response text color, input values for padding and margins, pick one of 5 configurable border styles and adjust the response background.

4. WP Forms block Advanced settings

Advanced

In the first sub-tab you can input values for block margins and padding, Z-index, and add the CSS ID and CSS Classes.

Motion Effects

This is where you can choose one of 50+ entry animations for the block.

Background

Border

Here you can choose one of five border types for the element, input values for the border radius, and adjust border box shadow. You can also adjust border width and color.

Positioning

Here's where you can adjust the width and the position for the element.

Responsive

Here you can choose whether you wish to omit the element on certain screen sizes.