Summary is one of the most versatile blocks available in Squarespace; it can do everything from display blog posts to allowing visitors to dial your phone number.
But the default read more link can be rather dull and could use some flair. In this article we’ll show you how to easily change its appearance to that of a button by using some code.
Change the Text
Your blog’s post list page currently displays a Read More link in a basic line of text with an underline. While this link can be easily customized with some simple code changes, its basic nature makes it less engaging. In this video I’ll show you how to transform that boring “Read More” text into an eye-catching button using simple CSS code.
This is an easy and quick way to customize your Squarespace site, without making extensive changes all across it. Perhaps there are certain aspects of your website you would like to tweak and this method provides the perfect way to do that without extensive code changes – take my lead in showing you how you can add this customization across all pages even without adding custom CSS code!
Learn how to utilize a CSS plugin to add accordion blocks in your site and leverage Squarespace’s amazing new feature! Take your Squarespace website to the next level and outshine competitors with this video!
Start by opening your web browser and heading directly to the page on which you would like to add a Read More button, whether it is a post or page across all of your sites or just on Squarespace blog. If using an older version of Squarespace (prior to version 7.1) please switch over to Custom CSS editor instead of Design Editor for best results.
Change the Color
Like most bloggers, you might wish for one text block in your blog to stand out more. That can easily be accomplished with just a few small adjustments – in this quick and easy Squarespace tutorial I will show how you can change both size and color of text blocks!
Apply this trick to any page or item on your site with a Read More Blog Link text block, but especially useful on blog pages with lots of posts; that way you can highlight one that you want your readers to click.
First, locate the block where you would like to make changes in color. To do this, click on the “Inspect” icon in the upper right corner of your block editor. When clicked, a box with code that defines this specific block’s style should appear containing its ID; copy and save this ID for future reference.
Once you’ve created your block identifier, head over to your Design tab and add some custom CSS. Paste your block ID code into the CSS box before calling out fonts by putting ‘h1’…’h2’… ‘h3’… or p after the ID. Finally, don’t forget your curly brackets!
Once you’ve added CSS, the changes should show in your live website. If they don’t, make sure you are running the latest version of Squarespace.
CSS can be an incredible way to customize your Squarespace website. With so much versatility available, CSS will enable you to make it truly stand out among its competition and help make your site an irreplaceable piece. So don’t be intimidated to experiment with it and discover all it can do to craft something truly exceptional and beautiful.
Change the Shape
No matter if you’re using your blog list page to organize Podcasts, showcase a Portfolio or host an evergreen Blog; chances are at some point, you may wish to customize the standard read more text link with something a bit more unique – something which is easy with just a bit of code!
Squarespace 7.0 and earlier allows you to do this easily by accessing the Design menu and clicking Custom CSS, before pasting in your block identifier code into the CSS box. Be mindful when calling out font names – for instance ‘p’ here- to ensure they appear before or after any ‘block identifier>’ tag before changing its font name as required.
If you’re using Squarespace 7.1, the process may vary slightly. Navigating to your Design menu and clicking CUSTOM CSS at the bottom, the CSS editor allows you to find paragraph styles for read more links as well as modify their block identifier code accordingly.
At Squarespace, the result will be an attractive, clickable link that mimics an actual button and blends seamlessly into the rest of your site! Plus, no extra fees apply – giving this a try doesn’t incur any extra charges either – give it a go and let us know how it goes if any questions arise or assistance is needed – we are always more than happy to assist and can’t wait to see what amazing things you come up with! Subscribe to our Newsletter so we can keep sending tips and tricks right into your inbox as well as helpful video tutorials covering various subjects! Don’t forget our library of helpful video tutorials!
Change the Link
Summary Block grids feature an option to add a “Read More” text link that links directly to a full blog post, making the article stand out and drawing more attention, but customizing is difficult; text appears as just plain line with an arrow attached, making it hard for anyone to modify. With custom CSS however, you can transform text into button or remove its arrow altogether!
To achieve this goal, it will require adding some lines of code into your CSS file. To do this, navigate to the page containing your Summary Block grid and go to Design > Custom CSS before pasting in the following code into the CSS Editor box – adjust its font size, weight, style, spacing etc as required for best results.
The code will alter the text color to red and transform an arrow into a circle, as well as underlining it to give an appearance of real links. You can customize this button further by changing its style or underlining it if needed.
With this simple code snippet, you can turn the “Read More” text on Squarespace blog posts into more of an actual button and provide visitors with an easily clickable link to your full content. This feature is especially helpful for older blogs with little new material to offer and are looking to gain traffic via search engines – it makes a big difference in usability and design!
