This documentation provides comprehensive insights into the Advanced Image Block developed by Zoloblocks.

Adding a block to the editor

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

After Inserting the blocks, Follow this.

Click on the Document Overviewer button and the Blocks list view will appear.
Here appears the Advanced Image block.
After on the right side, Click on the Block. Then the Advanced Image details appear.
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,

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.

Layout: Set the layout for the image (e.g.: Normal or Overlay). Here select the Overlay and follow next.
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)
Alignment: Make the image align by following it ( e.g.: Left, Center, Right ).

Image Resolution: Set the resolution for the image ( e.g.: Thumbnail, Medium, Large, Full).
Alt Text: Set Alt text for the image, which is most important for SEO.
Image Link: Set the link for the image.
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,

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

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

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,

Text: Set the text for the description.

Set Visibility For Description

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

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,

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

Set Visibility For Description

This image has an empty alt attribute; its file name is separator-2-1024x457.webp

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

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,

Mask Shape: Select the mask shape for the image( e.g.: None, Abstract, Brush, Aesthetic Blob.. ).
Mask Size: Select the size for the mask( e.g.: Auto, Conver, Contain ).
Mask Position: Set the position for the mask ( Center center, center right, left, etc.).
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.