Help Centre NewZapp Marketing and Strategy Blogs

            Design: Easy Image Gallery

            In this instalment of my Crafty Hacks series I want to show you how easy it is to make an image grid gallery.

            When I’m out and about in Webville and Emailtown, I’m much more likely to click on an interesting image than I am an Action that’s Calling to me. This is partly down to me being a bloodyminded bugger who hates being dictated to and would rather eat bees than admit your content is enthralling, but partly down to images being more interesting than text.

            A picture paints a thousand words, I’ve heard.

            Pictures are nice

            You are already aware of this. Multiple pictures can be even nicer; people like me won’t feel so dictated to when there’s a choice, and it implies a wealth of content or experiences to be had when we click through to reach your goal.

            I told you before I don’t have any nice pictures

            And I told you the internet is full of them! And you can even use some of them without getting in trouble. Any images marked as CC0 or Public Domain can be used wherever you like. Try any of the links in this handy blog post. If you’re the Milkybar Kid and only the very best is good enough, you can purchase high quality images very easily – just search for “Stock Images”.

            As ever, please don’t just steal images off Google. You will get in trouble, and it will be bad. No hanky will seem big enough.

            Alternatively, take actual photos

            The very best most interesting pictures are those that are obviously real and of your actual product, service or team. Even if you’re just armed with your phone you can still take great pics. Focus on lighting and focus and everything else will be fine. I’ve previously written a post about easy product photography, albeit geared towards using a camera. The principles are all the same though.

            Making a grid in NewZapp is super simple, but I’ve used a few nested padding blocks to make my example grid seem more feature-like. You can skip this part or add more, to your taste. Similarly, I’ve used a 3 Column Layout Block but you could use 2, 4 or alternating 1:2 and 2:1 Column Layout Blocks for a masonry effect and to highlight the larger images.


            Choose your dropzone
            Drop in a padding block
            Drop in a 3 column layout block
            duplicate this block twice
            drop in your images
            add links and alt text
            Save and Preview
            Yay, you're done

            My grid gallery ended up looking like this:

            Grid Gallery example

            Pro tips

            Make sure your images are all the same size! Don’t forget to link them all. For best results give them all relevant but different alt-text – load them up with keywords.

            Updated: 12 Nov 2018 07:58 PM
            Help us to make this article better
            0 0