How to use the Advanced Image block by Zoloblocks

  • BdThemes
  • How to use the Advanced Image block by Zoloblocks

Table Of Contents

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

search and insert 2 - BdThemes
  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.
list view and controls 2 - BdThemes

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( BasicStyleExtra ) 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

general 5 - BdThemes

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.
general 2 2 - BdThemes
  1. Layout: Set the layout for the image (e.g.: Normal or Overlay). Here select the Overlay and follow next.
  2. 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)
  3. Alignment: Make the image align by following it ( e.g.: Left, Center, Right ).
general 3 1 - BdThemes
  1. Image Resolution: Set the resolution for the image ( e.g.: Thumbnail, Medium, Large, Full).
  2. Alt Text: Set Alt text for the image, which is most important for SEO.
  3. Image Link: Set the link for the image.
  4. Open in new tab: Enable the switcher to open the link in new tab.

Heading Section

Go to Basic > Heading

heading - BdThemes

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

heading always - BdThemes
  1. Visible On: Set the Always tab to visible the heading.
heading hover - BdThemes
  1. Visible On: Set the Hover tab to visible the heading. It will work only on mouse hover.

Description Section

Go to Basic > Description

description - BdThemes

Set the descriptions by following,

  1. Text: Set the text for the description.

Set Visibility For Description

desctiption 2 - BdThemes
  1. Visible On: Set the Always tab to visible the description.
description hover - BdThemes
  1. Visible On: Set the Hover tab to visible the description. It will work only on mouse hover.

Separator Section

Go to Basic > Separator

separator 1 - BdThemes

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

This image has an empty alt attribute; its file name is separator-2-1024x457.webp
  1. Visible On: Set the Always tab to visible the separator.
separator 3 - BdThemes
  1. Visible On: Set the Hover tab to visible the separator. It will work only on mouse hover.

Mask Section

Go to Basic > Mask

mask - BdThemes

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

image 2 - BdThemes

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

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

Hover Tab

overlay hover - BdThemes
  1. Overlay Opacity: Set the overlay opacity to a hover state.

Content Section

Go to Style > Content

content 4 - BdThemes

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

heading 1 - BdThemes

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

description 1 - BdThemes

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

separator 1 1 - BdThemes

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!

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins. This website is powered by Element Pack Pro and Rooten Theme.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge