How to use the Advanced Image block by Zoloblocks

This documentation provides comprehensive insights into the Advanced Image Block 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 Advanced Image 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 appears the Advanced Image block.
3. After on the right side, Click on the Block. Then the Advanced Image details appear.
4. Here show all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences.

General Section

Go to Basic > General

This section provides control for the advanced image, let’s add an image first,

1. Image: Click on the upload photo and an image selector will appear on the left side, Click on the ” Upload ” button and add the image.

2. Layout: Set the layout for the image (e.g.: Normal or Overlay). Here select the Overlay and follow next.
3. Content Position: Set the position for the content (e.g.: Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center, Bottom Right)
4. Alignment: Make the image align by following it ( e.g.: Left, Center, Right ).

5. Image Resolution: Set the resolution for the image ( e.g.: Thumbnail, Medium, Large, Full).
6. Alt Text: Set Alt text for the image, which is most important for SEO.
7. Image Link: Set the link for the image.
8. Open in new tab: Enable the switcher to open the link in new tab.

Heading Section

Go to Basic > Heading

Set heading content by following the controls,

1. Text: Set the text for the heading.
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).

Set Visibility For Heading

3. Visible On: Set the Always tab to visible the heading.

3. Visible On: Set the Hover tab to visible the heading. It will work only on mouse hover.

Description Section

Go to Basic > Description

Set the descriptions by following,

1. Text: Set the text for the description.

Set Visibility For Description

2. Visible On: Set the Always tab to visible the description.

2. Visible On: Set the Hover tab to visible the description. It will work only on mouse hover.

Separator Section

Go to Basic > Separator

This section provides control for the separator,

1. Style: Select any style for the separator (e.g.: None, Solid, Dotted, Dashed, Double).
2. Position: Set the position of the separator (e.g.: Before Title, After Title, After Description).

Set Visibility For Description

3. Visible On: Set the Always tab to visible the separator.

3. Visible On: Set the Hover tab to visible the separator. It will work only on mouse hover.

Mask Section

Go to Basic > Mask

This section provides control for the mask,

1. Mask Shape: Select the mask shape for the image( e.g.: None, Abstract, Brush, Aesthetic Blob.. ).
2. Mask Size: Select the size for the mask( e.g.: Auto, Conver, Contain ).
3. Mask Position: Set the position for the mask ( Center center, center right, left, etc.).
4. Mask Repeat: Set repetition for the mask ( e.g.: No Repeat, Repeat, Repeat X, Repeat Y ).

Style Tab

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.

Image

Go to Style > Image

Make the image appearance customization by following the controls,

1. Select Effect: Select the effect for the image(e.g.: None, Blur, Slide Top, Right, Left, Zoom, etc. ).
2. Margin: Set the margin for the image.

Overlay Section

Go to Style > Overlay

Normal Tab

1. Overlay Opacity: Set the overlay opacity to a normal state.

Hover Tab

2. Overlay Opacity: Set the overlay opacity to a hover state.

Content Section

Go to Style > Content

Make the customization for appearance changes by following it,

1. Max Width: Set the width for the content.
2. Padding: Set padding for the content.
3. Margin: Set margin for the content.

Heading Section

Go to Style > Heading

This section provides control for the heading customization,

1. Typography: Set the typography for the heading.
2. Color: Set the color for the heading.
3. Margin: Set margin for it.

Description Section

Go to Style > Description

This section provides control for the description customization,

1. Typography: Set the typography for the description.
2. Color: Set the color for the description.
3. Margin: Set margin for it.

Separator Section

Go to Style > Separator

This section provides control for the separator customization,

1. Color: Set the color for the description.
2. Width: Set the width for the separator.
3. Height: Set height for the separator.
4. Margin: Set margin for it.

Extra Tab Control

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 Coming Soon! Check the demo page.

Thanks for being with us!