Skip to main content

Advanced Group

After Turning on Blocks from Grigora's Kit Dashboard.

We can use Advanced Group Block in Site Editor/Blog/Page from Toggle Block Inserter.

Insert Advanced Group from listed Blocks.

Once Advanced Group is inserted, select the Advanced Group.

After selecting Advanced Group , Go to block settings, in block settings we see Geenral, Styles and Advanced of settings and we'll be exploring them one by one.

General​

Container Tag : In Container tag we can use Group as div, main, header, aside, footer, section and article which ever we select.

Note: This HTML tag will only be changed during its render in frontend, not in the Block Editor.

Maximum Width : The Maximum Width defines the maximum width of Advanced Group using text input. Acceptable units as per theme supports.

Minimum Height : The Minimum Height defines the Minimum Height of Advanced Group using text input. Acceptable units as per theme supports.

Block Gap : Block Gap adds space between blocks. Only numbers can be entered and has pixel as unit.

Padding : Padding can be applied to the Group as mixed padding (applies to all sides) or individual padding (applies to specific sides) by clicking on unlink sides using unit input where only numbers can be entered and has pixel as unit.

Margin : Margin can be applied to the Group which can be mixed margin (Applies on all sides) or individual margin (can be applied on individual sides) by clicking on unlink sides using unit input where the input value can be only numbers. Only numbers can be entered and has pixel as unit.

Overflow

  • Visible : If the overflow property is not given, Visible is the value it accepts by default. When our material spills over into another region, we can see it clearly because to this attribute.

  • Hidden : The text that overflowed will be "invisible" due to the hidden value since it will be removed.

  • Scroll : The scroll value also removes some of the content and creates a scrollbar so that we can scroll and view the removed content.

Styles​

Text Color​

(Text Color can be applied Normal and On-hover (in hover transition time can also be defined from 0.1 to 5 sec))

Text Color : Using the Colorpicker or Color Palette, we can change the color of the text.

Link Color : Using the Colorpicker or Color Palette, we can change the color of the link text.

Background​

In Background we have two options Normal and Hover.

Normal​

Color : Using the Colorpicker or Color Palette, we can change the color of the background.

Gradient : Two or more additional colors can be displayed with a smooth transition. There are two forms of gradient: linear and radial. Angles are also changeable.

Images : Here we can add images to the background. Select Single Image for single image. We can also toggle on Fixed button to fix the in background. And can also add multiple images to use as slideshow. Slideshow can also be fixed in background by toggling on Fixed button. It can also be played in loop by toggling on Loop button. We can also set time of single image by Single Image Duration slider, where minimum time is 0.5 sec, maximum time is 20 sec and default time is 5 sec. Transitions can also be changed under Transition Section and Time can also be changed under Transition Duration section, where minimum time is 0.1 sec, maximum time is 5 sec and default time is 0.5 sec .

Video : We can add videos here via link or gallery, and they will play in loop by toggling on Loop button.

Hover​

Color : Using the Colorpicker or Color Palette, we can change the color of the background. The transition time can also be adjusted using a slider

  • Minimum Value 0.1 sec
  • Maximum Value 5 sec
  • Default Value 1 sec

Gradient : Two or more additional colors can be displayed with a smooth transition. There are two forms of gradient: linear and radial. Angles are also changeable. The transition time can also be adjusted using a slider

  • Minimum Value 0.1 sec
  • Maximum Value 5 sec
  • Default Value 1 sec

Image : In image we can add a picture (just one) to the background here. We can also toggle on fixed button to fix the in background. The transition time can also be adjusted using a slider

  • Minimum Value 0.1 sec
  • Maximum Value 5 sec
  • Default Value 1 sec

Background Overlay​

In Background Overlay we have two options Normal and Hover.

Normal​

Color : Using the Colorpicker or Color Palette, we can change the color of the background.

Gradient : Here we can display two more colors in smooth transition. Gradient is available in two types i.e. linear and Radial. Angles can also be changed.

Image : Adds images to the background. We can also add overlay of color or gradient using Colorpicker or Color palette. We can also toggle on fixed button to fix the in background.

Hover​

(CSS Filter can also be applied)

Color : Applies color to the background using Colorpicker or Color Palette.The transition time can also be adjusted using a slider

  • Minimum Value 0.1 sec
  • Maximum Value 5 sec
  • Default Value 1 sec

Gradient : Here we can display two more colors in smooth transition. Gradient is available in two types i.e. linear and Radial. Angles can also be changed.The transition time can also be adjusted using a slider

  • Minimum Value 0.1 sec
  • Maximum Value 5 sec
  • Default Value 1 sec

Image : Add images to the background. We can also add overlay of color or gradient using Colorpicker or Color palette. We can also toggle on fixed button to fix the in background.The transition time can also be adjusted using a slider

  • Minimum Value 0.1 sec
  • Maximum Value 5 sec
  • Default Value 1 sec

Advanced​

Animation​

(Works on-hover)

Attention Seekers : Animations can be set here from listed animations with transition time using range slider.

  • Minimum Value 0 sec
  • Maximum Value 5 sec
  • Default Value 1 sec

On Scroll Animations​

Animation : On Scroll Animations can be set here from listed animations with Delay(using text box) and Transition Time(Using range slider)

  • Minimum Value 0 sec
  • Maximum Value 5 sec
  • Default Value 1 sec

Border​

(Border can be applied normal and On-hover) (Note: It would be best if you used General > Overflow > Hidden setting to apply Border Radius to Background and Overlay. You can skip this if you only want a border radius to elements inside the group.)

Width :Adds a border to Group and it can be applied in three different styles: solid, dashed, and dotted where width of the border can be modified. By clicking on Unlink sides we can apply border to any particular side. The colour of the border can also be changed using the colour picker.

  • Minimum value is 0px.
  • Maximum value is 100px.
  • Default value is 0px.

Radius : Under Radius we can change border radius. By clicking on Unlink sides we can change radius of any particular side.

  • Minimum value is 0px.
  • Maximum value is 100px.
  • Default value is 4px.

Box Shadow​

(Box Shadow can be applied normal and On-hover)

Box Shadow casts a shadow across the Group.

  • Color : Box shadow color can be changed using the Colorpicker or Color Palette.

  • Blur : Box shadow can be blurred with Blur effect. Value entered uses pixels as its unit.

  • Horizontal : Box shadow can be applied Horizontally. Value entered uses pixels as its unit.

  • Vertical : Box shadow can be applied Vertically. Value entered uses pixels as its unit.

  • Spread : Box Shadow can be spreaded. Value entered uses pixels as its unit.

Transform​

(Transform can be applied normal and On-hover)

Perspective :

Rotate : Group can be rotated in the x, y, and z axis.

Skew : Skew tilts the Group in x axis and y axis.

Offset : Offset moves the Group in the x and y axis.

Scale : Group's scale can be increased or decreased using Scale.

Text Shadow​

Color :In text shadow we can change Text Color using Color Picker or Color Palette.

Blur : Text shadow can be blurred with Blur effect. Value entered uses pixels as its unit.

Horizontal : Text shadow can be applied Horizontally. Value entered uses pixels as its unit.

Vertical : Text shadow can be applied Vertically. Value entered uses pixels as its unit.