ProductX

  1. Home
  2. Docs
  3. ProductX
  4. All Blocks
  5. Image

Image

Let’s explore the Image block of ProductX.

Importing Image Block

Go to a Page, and click the “+” icon to see all blocks. Click or drag and drop the “Image” block on a page.

Customization Options of Image Block

ProductX’s product blocks have vast customization options to meet your needs. Let’s show you what options the Image block provides.

Customization Options of Image Block
Image Block Customization

Image Upload Settings

You can upload images using the WordPress media manager, change image alt text, add links or buttons, add URLs, and enable captions.

Image Upload Settings
Image Upload Settings

Image Settings

With the ProductX image block, you can customize hover animation, image alignment, width, height, gray scale, radius, box shadow, and margin for both normal and hover and enable an overlay.

Image Settings
Image Settings

Advanced Settings

In the advanced tab, you will get settings for the following:

  • General
  • Responsive
  • Custom CSS
  • Advanced
Block Advanced Setting

General

You can modify class ID, z-index, margin, padding, normal & hover colors, border, box shadow, and border radius from the general settings.

Advanced General Settings

Responsive

You will have the responsiveness settings for the blocks if you want to show the block on particular devices or not.

Use the toggle bar to enable the following options:

  • Hide On Extra Large
  • Hide On Desktop
  • Hide On Tablet
  • Hide On Mobile
Advanced Responsive Settings

Custom CSS & Advanced

You can manually add your custom CSS to modify your blocks in the custom CSS field. And in the advanced field, you can add custom CSS classes.

Advanced Custom CSS settings
Was this article helpful to you? Yes No