Advanced Gutenberg: Blocks Setup

1. Advanced Button Block

You can create an Advanced Button by clicking its button in the Advanced Gutenberg section.

 

advanced-button

 

On the right panel, you can adjust some settings for the button:

  • Styles: 4 predefined styles

    • Default

    • Outlined

    • Squared

    • Squared Outline

  • Button link:

    • Link URL

    • Open in new tab: On/Off.

 

adv-button-settings

 

  • Text/Color:

    • Text size

    • Background color

    • Text color

 

text-color-button-settings

 

  • Border:

    • Border radius

    • Border style: solid, dotted, ridge,...

    • Border Color

    • Border width

 

adv-button-border

 

  • Margin: top, right, bottom and left.

  • Padding: top, right, bottom and left.

 

advanced-button-padding

 

  • Hover:

    • Color Settings: Background color, Text color and Shadow color. 

    • Shadow (H (horizontal) offset, V (vertical) offset, blur, spread), Opacity and Transition speed.

 

advanced-button-hover

 

2. Advanced List Block

You can create an Advanced List by clicking its button in the Advanced Gutenberg category.

 

advanced-list

 

After inputting the content, you can adjust the settings from the right panel:

  • Text Settings

    • Text size

  • Icon Settings

    • Icon (list, color and size)

    • Line height

    • Margin

    • Padding

 

advanced-list-settings

 

3. Summary Block

You can create a Summary block by clicking its button in the Advanced Gutenberg category after setting at least one Heading tag in the post or page. The summary can be aligned to the Left, Center or Right. To update it, use the Update Summary button.

 

summary-gutenberg-content

 

On the right panel, there are some options that you can adjust:

  • Load minimized: to show/hide the Summary by default

  • Summary header title: the Summary's header text, which is shown when the Load minimized option is enabled

  • Anchor color: pick a color for the Summary

 

summary-settings

 

4. Counter (Count Up) Block

 

You can create a Count Up block, possibly with a symbol, by clicking on its button in the Advanced Gutenberg category.

 

count-up

 

Then, from the right panel you can adjust some options for the Counter:

  • Color Settings: Header's color, Count Up's color and Description's color

  • Columns: 1-3

  • Counter Number Size: set the numbers' size

  • Counter Up Symbol: add a character before or after the counter

  • Toggle button: set the position of the symbol (On means that the symbol comes after numbers)

 

count-up-settings

 

5. Advanced Image Block

The Advanced Image block can be used to create an image. To add one, click on the Advanced Image button in the Advanced Gutenberg category, and then choose an image to insert.

 

advanced-image-button

 

Next, you can change the Image title and its Subtitle. You can adjust the image's settings from the right panel.

  • Action on click: either open the image in a lightbox, or open a custom URL

  • Link URL: Open link in new tab (toggle button)

  • Open link in new tab: On/Off

  • Image Size: whether the image should be displayed with full width, or with a custom height and width

 

advanced-image-settings

 

  • Focal Point Picker: select point to focus on image or set horizontal/vertical position

  • Overlay opacity default

  • Overlay opacity hover

  • Color Settings: Title's color, Subtitle's color, Overlay's color

  • Text Alignment: Vertical alignment (Top, Center, Bottom), Horizontal alignment (Left, Center, Right)

 

adv-image-hover

 

6. Testimonial Block

You can insert a testimonial into your content by clicking the Testimonial button in the Advanced Gutenberg category. Then, you can change the testimonial's avatar, name, job position and description.

 

testimonial-button

 

Finally, in the right panel you can adjust the settings for the Testimonial. When the Slider view option is disable, here is the settings:

  • Columns: Columns range in Normal view is 1-3, and in Slider view is 4-10.

  • Avatar: Avatar size, background color, and border settings, which include color, radius and width

  • Text Colors:

    • Name Color

    • Position Color

    • Description Color

 

testimonial-settings

 

When you enable Slider view option, some additional options for slider will be appeared:

  • Number of items
  • Items to show
  • Items to scroll

slider-view-column

  • Center mode
  • Pause on hover
  • Auto play
  • Autoplay speed (ms)
  • Infinite Loop
  • Transition speed (ms)
  • Show dots
  • Show arrows
  • Arrow size

 

slider-settings

  • Slider Colors:
    • Arrow and Border color
    • Dots color

 

slider-color

 

7. Map Block

In order to use the Map block, you need to add a Google API key in the Configuration. After that, you should follow this link, click on Enable APIs and Services button, then search and enable Geolocation API, Maps JavaScript API.

Once added, you can create the map by clicking on the Map button in the Advanced Gutenberg category.

 

map-block

 

From the right panel, you can insert a location by inputting the Latitude and Longitude, or by entering an Address and then pressing the Fetch Location button.

Some additional options for the map are available:

  • Zoom level

  • Height

  • Marker Icon

  • Marker Title

  • Marker description

  • Open marker tooltip

  • Map styles: silver, retro, night, ... and you can add your custom style also.

 

map-settings

 

8. Advanced Video Block

You can create a video to a post by clicking on the Advanced Video button in the Advanced Gutenberg section. Then, you can paste the URL from Youtube or Vimeo, or use any local video from your server. You can change the preview image by clicking on the Edit button from the top left corner.

 

advanced-video

 

Next, you can adjust settings for the video in the right panel.

  • Open video in light box: the lightbox offers additional display options

  • Full width: if it's off, you need set a custom width for the video

  • Video height

  • Color Settings: Overlay color and Play button color

  • Play Button: Icon style, Play button size

 

advanced-video-settings

 

9. Advanced Table Block

You can create a table by clicking the Advanced Table button in the Advanced Gutenberg category.

 

advanced-table-button

 

You can edit the table after setting the number of column and row.

 

advanced-table

 

After that, you can input text, or adjust rows and columns from the editor itself just above the table block. More settings can be modified in the right panel.

  • Styles

    • Default

    • Stripes

 

style-table

 

  • Table Settings

    • Max width: Set this to 0 to make max-width equivalent to 100%

    • Fixed width table cells

    • Table header, footer

    • Border collapsed

 

advanced-table-settings1

 

  • Cell Settings

    • Color Settings: Background color, Text color

    • Border: border style, color and width

    • Padding: top, bottom, left and right padding

    • Text Alignment: horizontal and vertical alignment

 

single-cells-settings

 

You can even merge cells (using Shift button) and split merged cells with the Advanced Table block.

10. Advanced Accordion Block

You can create an Advanced Accordion when you need to display more content in a smaller area by clicking the Advanced Accordion button in the Advanced Gutenberg category. After that, there will be 2 group accordions elements be displaying by default.

 

adv-accordion-block

 

Once created, you can adjust the header, body or border options from the right panel.

  • Accordion Settings:

    • Bottom spacing: Define space between each accordion (Frontend view only)

    • Initial Collapsed: Make all accordions collapsed by default.

  • Header Settings

    • Header Icon Style

    • Color Settings: Background Color, Text Color and Icon Color

 

adv-accordion-header

 

  • Body Color Settings

    • Background Color

    • Text Color

  • Border Settings

    • Border Style: solid, dashed or dotted

    • Color Settings

    • Border width, radius

 

adv-accordion-settings

 

11. Advanced Tabs Block

Similarly, you can create an Advanced Tab block when you need display more content in a smaller area. To insert one, click the Advanced Tab button in the Advanced Gutenberg category.

 

tab-block

 

Then, you can adjust the tab, body or border options from the right panel.

  • Tabs style
    • Desktop, Tablet or Mobile
    • Horizontal or Vertical
  • Tabs settings
    • Initial Open Tab

 

adv-tab-settings

 

  • Tab Colors

    • Background Color

    • Text Color

    • Active Tab Background Color

    • Active Tab Text Color

 

tab-settings

 

  • Body Colors

    • Background Color

    • Text Color

  • Border Settings

    • Style: none, solid, dashed or dotted

    • Color

    • Border width, radius

 

tab-settings1

 

You can share your social links very easily by using the Social Links block, which can be created by clicking its button in the Advanced Gutenberg category.

 

social-links

 

You can use the ready-made icon or upload your own icon, and adjust some more options from the right panel.

  • Preset Icons: you can upload your custom icon

  • Preset Icon Color

  • Icons settings

    • Icon size, space

 

social-links-settings

 

13. Recent Posts Block

There are 3 layouts that are available to display your recent posts: the Grid, List and Slider views. You can create any of these views by clicking the Recent Posts button in the Advanced Gutenberg category.

 

recent-posts-block

 

You can see how the blocks will be displayed in the frontend in the image above or in our Advanced Gutenberg Demo.

From the right panel, you can adjust the settings of each layout:

  • Order by

order-by

 

  • Category

  • Number of items

  • Columns (for Grid view only)

  • Display Featured Image

  • Display Post Author

  • Display Post Date

  • Display Read More Link

  • Read more text

  • Display Post Excerpt

  • First Post text as Excerpt: display some part of first text found in post as excerpt.

 

recent-posts-settings

 

14. Woo Products Block

There are 2 layouts available for the Woo Products block: the Normal and Slide views can display WooCommerce products on your WordPress blog. You can insert this block by clicking the Woo Products button in the Advanced Gutenberg category.

 

woo-block

 

You can see how the blocks will be displayed in the frontend in the image above or in our Advanced Gutenberg Demo

On the right panel, you can adjust the settings of each layouts:

  • Products Settings

    • Product Status

    • Category

  • Layout Settings

    • Columns

    • Number of Products

    • Order

 

woo-settings

 

15. Images Slider Block

If you want to display a number of images as a slide, clicking to Images Slider button in the Advanced Gutenberg category.

 

new-image-slider

 

Then pressing Add images button to choose your images showed in the slide. After that you can input the text Title and Text description for each images.

 

image-slider

 

You can edit the settings of the slider on the right panel.

Image Settings

  • Action on click: None, Open image in lightbox and Open custom link

  • Full width

  • Auto height

  • Always show overlay

Color Settings

  • Hover Color

  • Title Color

  • Text Color

 

slide-settings-1

 

Text Alignment

  • Vertical Alignment

    • Top

    • Center

    • Bottom

  • Horizontal Alignment

    • Left

    • Center

    • Right

slide-settings-2

 

16. Contact Form Block

You can get customer Email contact notification with this block. You can create that form by clicking on Contact Form button in the Advanced Gutenberg category.

 

contact-form

 

You can edit the settings of the Contact Form on the right panel.

  • Notice: It will not appeared if you enable reCAPTCHA option in Settings.

  • Email sender: You can change in Settings. An email will be sent to the admin email (by default) whenever a contact form is submitted.

  • Text Label:

    • Name input placeholder

    • Email input placeholder

    • Message input placeholder

    • Submit text

    • Empty field warning text

    • Submit success text

 

contact-settings1

 

  • Input Color: Background color and Text color

  • Border Settings: Border Color, Border Style and Border radius

  • Submit Button Settings:

    • Color Settings: Border and Text, Background

    • Button border radius

    • Button position: Left, Center and Right

contact-settings2

 

17. Newsletter Block

In order to get client Email, you can create the email block by clicking on Newsletter button in the Advanced Gutenberg category.

 

newsletter

 

You can edit the settings of the Newsletter on the right panel.

  • Notice: It will not appeared if you enable reCAPTCHA option in Settings.

  • Form Settings:

    • Form style: Default/Alternative

    • Form width (px)

  • Text Label:

    • Email input placeholder

    • Submit text

    • Empty field warning text

    • Submit success text

 

newsletter-settings1

 

  • Input Color: Background color and Text color

  • Border Settings: Border Color, Border Style and Border radius

  • Submit Button Settings:

    • Color Settings: Border and Text, Background

    • Button border radius

 

newsletter-settings2

 

18. Columns Manager Block

If you want to create a block containing other blocks inside, you should choose Columns Manager in Advanced Gutenberg category. It will appear the style for the block when creating a new one.

 

add-column-manager-block

 

Then you can add any types of block you want in each columns. Here is a column manager block includes 2 columns: the left one is Advanced Image and the right one are Paragraph, Advanced List.

 

column-manager-block

 

And on the right panel, you can adjust the setttings of Column Manager block.

  • Responsive Settings

    • Style for each device types: Desktop, Tablet, Mobile

    • Space between columns

    • Padding: Top, Right, Left and Bottom

    • Margin: Top, Right, Left and Bottom

 

column-settings-1

 

 

  • Row Settings

    • Columns Wrapped: If your columns is overflown, it will be separated to a new line (eg: Use this with Columns Spacing).

    • Wrapper Tag: Div, Header, Main, ...

    • Content Max Width (px vw, %)

    • Content Min Height (px, vw, vh)

    • Content Max Height (px, vw, vh)

 

column-settings-2

 

19. Login/Register Form Block

You can create a login form or register form for your website by clicking Login/Register Form button in the Advanced Gutenberg section.

 

login-form-block

 

And you can switch view from Login to Register on the navigation bar of this block or on the right panel.

 

login-register-form

 

And then you can go to the right panel to adjust more details about the form.

  • Initial Form: Login or Register

  • Redirect After Login: Home, Dashboard or Custom

  • Form Width (px)

  • Show Logo

  • Logo Width (px)

  • Show input field icon

  • Show register/header link

  • Header Color

  • Show lost password link

 

form-state-setttings

 

  • Input placeholder

    • Login input placeholder

    • Username input placeholder

    • Email input placeholder

  • Text/Input Color

    • Input background color

    • Input color

    • Text color

  • Border Settings

    • Border color

    • Border style

    • Border width

 

input-placeholder-settings

 

  • Submit Button Settings

    • Border and Text

    • Background

    • Button border radius

    • Button position

  • Submit Button Hover

    • Hover Colors: Background, Text and Shadow color

    • Shadow: Opacity, Transition speed and Shadow (H (horizontal) offset, V (vertical) offset, blur, spread)

  • Notice: We strongly recommend to enable Google reCaptcha to avoid spam bot. You can enable it in Form Recaptcha in Adv. Gutenberg > Email & Form.

 

submit-button-settings

 

20. Search Bar Block

You can create a search textbox on frontend by clicking the Search Bar button in the Advanced Gutenberg category.

 

search-bar-block

 

You can adjust the Search Bar settings on the right panel.

  • Styles: there are 2 predefined styles: Default and Classic

  • Search Bar State

    • Full width: On/Off

    • Width

  • Search Icon Settings

    • Search icon on the right: On/Off

    • Search icon

 

search-bar-settings

 

  • Search Input Settings

    • Search placeholder

    • Input Color: Background and Text color

 

search-input-settings

 

  • Search Button Settings

    • Show submit button: On/Off

    • Search button on the left: On/Off

    • Background and Text color

    • Border radius

  • Hover Colors: Background, Text and Shadow color

  • Hover Shadow: Opacity, Transition speed and Shadow (H (horizontal) offset, V (vertical) offset, blur, spread)

 

search-button-settings