Blockons offers a more advanced Image Gallery block for you to build your website pages with… Packed with 3 different layouts and lots of customization options, the Advanced Image Gallery block is perfect for displaying your website images.
Example:
This Gallery example is using the Featured Grid layout with a hover effect to display the caption if the image has a caption set, and it also has the “Zoom Long” effect when hovered over the images.
Adding the Advanced Gallery block
Adding the Advanced Image Gallery block is as simple as selecting to add a new block to the page, and in the popup search section, search for “gallery”, “image” or “advanced” and you should then see it, and click the block to be added.
The other option is to open the blocks (left) sidebar by selecting the blue plus icon in the top left of the Gutenberg editor, then scroll for to the “Blockons Blocks” category section and then click the Advanced Image Gallery block there, to add it to the page.
Editing the Advanced Image Gallery block
To setup and start editing your Advanced Image Gallery block, you need to first add the block and then click the “Create Image Gallery” button.
Once you select and add all your images, you will only then be able to see and edit all the other settings available for the Advanced Image Gallery block.
After adding the images to the gallery, you will also see the option to “Add or Edit the images” in the gallery, and to remove images from the gallery you can simply click the X button which is placed on each image.
3 Different Layouts
The Advanced Image Gallery block offers 3 different gallery layouts to choose from… Select the layout you’d prefer to use and then you can edit the rest of the settings such as the amount of columns and the spacing between the images.
Normal Grid Layout
Masonry Grid Layout
Featured Grid Layout
These grid layouts will scale down to tablet and mobile to ensure all your images look good on smaller screen sizes too!
Once you’ve selected your grid layout and adjusted the columns and grid spacing, you can then move on to the settings to display the image captions and/or add image hover over effects.
Using the Image Caption
To display the image captions in the Advanced Image Gallery Block, you need to select to upload your image and then under the Attachment Details section you will find the Caption input to add any text over the image… This is done per image.
The image captions will only display on images where the captions have been added, so you don’t have to add a caption for every image if it’s not needed.
There are 6 different layouts for the image captions, you can go through them in the settings to find out how each one works.
The image below displays all the caption layouts and Image Hover effects available.
Try out each of the Image hover effects and see if you want to use any of them too.
If something does not work, you have new feature ideas for the Advanced Image Gallery block, or you simply need help using this gallery block, then please get in touch and we’ll assist as best as we can.
