How to use Brand Grid block by Zoloblocks

This documentation provides comprehensive insights into the Brand Grid Blocks developed by Zoloblocks.

Adding a block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the Brand Grid block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here the Selected block, the parent block, and its child block will appear.
3. After on the right side, Click on the Block. Then the brand grid box details appear.
4. Here show all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab ( Parent Block )

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences. Customize for the Parent’s blocks. Any changes applied will all items.

General Section

Go to Basic > General

In this section, you can set the layout for the Brand Grid,

1. Presets: It’s a predefined design, Select any of them.

2. Show Brand Name: Enable this switcher to show the Brand Name.
3. Show Brand Label: Enable this switcher to show the Brand Label.
4. Enable Logo Link: Enable this switcher to show the Logo Link.

Link Type Select

5. Global: Set the link type Global It will work the whole content as a button.

5. Label: Select the link type label. The label will work for navigating.

5. Title: Select the Title for the link type. They will work as a navigation button.

6. Alignment: Set the alignment for the content ( Left, Center, Right).
7. Content Horizontal Position: Set the Horizontal position of content ( Left, Center, Right ).
8. Content Vertical Position: Set the Vertical position of content ( Top, Center, Bottom ).

Grid Section

Go to Style > Grid

This section provides control of Grid,

1. Column Number: Set the number of columns and how many columns you need to select.
2. Columns Gap: Set the gap between the columns.
3. Row Gap: Set the gap of the row.

Style Tab ( Parent Block )

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Container Section

Go to Style > Container

This section provides control to customize the container of the brand grid,

1. Height: Set the height of the container.
2. Border: Set the border of the container.
3. Border Radius: Make the border corner edges round by providing it.

4. Box Shadow: Set the box shadow for this
5. Padding: Set padding for the inner space of the container.
6. Margin: Set the margin for the container.

Content Section

Go to Style > Content

Make the customization of the content, by following. Hover over the content and you will see it.

1. Padding: Set the padding of the content.
2. Background: Set the background of the content.

Photo Section

Go to Style > Photo

In this section, you can make the photo stylish,

1. Photo Size: Set the size of the photo.
2. Padding: Set the padding of the photo.
3. Margin: Set the margin of the photo.

Title Section

This Title section provides controls to customize the Title of the brand grid,

1. Typography: Set the typography of the Title.
2. Text Stroke: Set the stroke of the Title.
3. Margin: Set the margin of the Title.

Normal State of Title

4. Color: Set the color for the Title, It works in a normal state.

Hover State of Title

5. Color: Set the color for the Title, The changes will appear on mouse hover.

Label Section

Go to Style > Label

Label section share controls to appear change of the Label,

1. Typography: Set the typography of the label.
2. Color: Set the color for the label.
3. Text Stroke: Set the label text stroke.
4. Margin: Set the margin for the label.

Brand (Child Blocks)

Here we will work with the Child blocks of Brand. The changes will applied to the relevant item only. Let’s follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Select the Brand Child block under the Brand Grid blocks.
3. On the right side, the selected Brand Child details will appear.
4. The Brand Child controls will appear here. ( Basic, Style, Extra ).

Basic Tab ( Child Block)

This tab provides control to customize the child item of brand grid.

Set Brand Logo

Go to Basic > Layout

This section provides controls to set the log for the brand child,

1. Brand Logo: Click on the Replace, and there an media library will open you can select any image.

Set Content

Go to Basic > Content

Here on this section, you can set content for the brand grid child blocks, It will appear on mouse hover.

1. Title: Set the title for the brand grid.
2. Select Tag: Set any HTML Tag for Title ( H1, H2, H3, H4, H5, H6, p, span ). The title tag is essential for both user experience and search engine optimization (SEO).
3. Label: Set the label of the grid. ( It refers to link ).
4. URL: Set the URL for the brand Grid.

Add New Brand Child

After the Brand Child item, you will find a button ” + ADD BRAND ” and it will add a new brand child. You can add as many items as you need.

Style Tab ( Child Block )

This tab provides the controls of the Brand Child Items. The changes will apply only to relevant items. Let’s Explore all the controls.

Container Section

Go to Style > Container

This section provides controls to customize the appearance of the container,

1. Height: Set the height of the container.
2. Border: Set the border of the container.
3. Border Radius: Set the border radius to make the corner edges rounded.

4. Box Shadow: Make a shadow of the container.
5. Background: Set the background for the container.
6. Padding: Make inner space by adding padding.
7. Margin: Set margin for outer space of the container.

Content Section

Go to Style > Content

Set the content visually look perfect,

1. Padding: Set the padding for the content.
2. Background: Set the background for the content.

Photo Section

Go to Style > Photo

This section provides controls to make the photo more customizable, We have followed a few of them to show images simple and interactive.

1. Photo Size: Set the size of the photo.
2. Padding: Make inner space by adding the padding.
3. Margin: Set the outer space for the Margin.

Title Section

Go to Style > Title

This section provides control to customize the Title of Brand grid,

1. Typography: Set the typography for the title.
2. Text Stroke: Set the stroke for the title,
3. Margin: Set margin for title. It will make space.

Normal State of Title

4. Color: Set the color for the Title. It appears in a normal state.

Hover State of Title

5. Color: Set the color for the Item for the hover state, The changes appear on mouse hover.

Label Section

Go to Style > Label

This section provides controls to change the label appearances,

1. Typography: Set the typography for the Label.
2. Color: Set the color of the label.
3. Text Stroke: Set the Stroke of the text.
4. Margin: Set margin for the outer space of the label.

Extra Tab Controls

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

Video Tutorial for learning more.

Check the demo page.

Thanks for being with us!