Merlon Plugin - CSS Rollover effects on Squarespace Summary Blocks

Squarespace boasts a variety of tools to help designers construct beautiful webpages, but sometimes custom code (Squarespace CSS and HTML) is needed to make a webpage truly unique.

The past couple of effects have been focused on Image blocks, but to showcase the versatility of CSS and how it can be used to individualise Squarespace sites, we will be targeting Summary blocks with our Merlon plugin.

HERE IS A PREVIEW OF THE FINAL SQUARESPACE PLUGIN:

merlon-plugin.gif

PLEASE NOTE:

To target the individual image blocks for the effect, I have used the associated “Block ID’s”. These can be found using your browser’s developer tools and inspecting each element; however, I would highly recommend installing the “Squarespace Collection/Block Identifier” plugin if you use Google Chrome, for a quicker and easier solution.

The Summary block

If you’re new to Squarespace, and don’t know what a Summary block is used for, then I’ll give you a quick explanation.
Summary blocks are used to display your content, be that blog posts, shop products or a galleries; they are feed the content from another page.
Add a Summary block to your page, choose your content, and then add the code!

The CSS Code

Replace the “Block ID’s” with your own; remember, you don’t need to use two image blocks for this code to work.

Our Squarespace Plugins are exclusively for PixelHaze Academy Members, the great news is that you can join for only £75 per year to gain access to a huge range of discounts and resources.

 

Fun fact: we named this the “Merlon“ plugin as the positioning of the summary block’s content looks like castle battlements, and merlon’s were the solid upright section of the battlement!

 

I hope you found this both informative and useful, Will :)