Add engaging images to your site to convey your brand and engage visitors, using this video as an overview to style image captions using CSS.
CSS (Cascading Style Sheets) is one of the cornerstone technologies of the Web alongside HTML and JavaScript, providing your website content with visual style and appeal. CSS defines what style the content takes.
Header
Squarespace websites’ headers are the first thing visitors see, making a lasting first impression for your brand. Plus, customizing it’s look is straightforward using CSS!
Image captions provide context to images, yet can be difficult to read on mobile devices. By adding a lightbox effect to them, captions become easier to read on mobile while simultaneously becoming more prominent and driving user engagement.
In this video, I demonstrate how you can easily style image captions on hover in both Grid and Slideshow gallery block designs of 7.1 editor. This code applies to any image within your gallery but will not work on Stack or Carousel gallery block designs.
Squarespace makes creating galleries easy, offering the option to add captions for every image in a gallery. Captions help describe images for those with accessibility needs or who use assistive screen readers; you can either do this via the Gallery Settings panel or directly into HTML code.
In this video, I’ll demonstrate how to style caption text in Squarespace’s 7.1 editor by using CSS and data-section-id attributes that allow us to target specific page sections.
Image Block
CSS makes Gallery Section image captions much more interesting. In this video, you’ll learn how to use custom code to generate two-line image descriptions that fit seamlessly into your website’s style.
As soon as you add an Image Block, a toolbar with several options will appear. From here, you can set the block’s responsiveness (how it displays across various screen sizes), upload an image file from your computer or select an existing image from Media Library; use its resizing handles to alter its size as needed.
By selecting the ‘Add text over image’ icon, your Image Block becomes a Cover Block which enables you to insert text over an image. Furthermore, its position within your page content can also be vertical or horizontal.
The Image Block comes equipped with various settings you can configure, such as the ‘Focus on Image’ feature that makes images stand out more. Visitors can click it to access larger versions. Furthermore, you can enable “Open in Modal Box,” enabling clickable images that open in modal windows; width control options include pixels or percentage of browser window width.
Summary Block
Add style and dimension to your gallery sections by customizing image caption text with this simple CSS tweak. It works for both Slideshow and Grid layouts and even adds a splash of color behind caption text for extra visual flair.
An image gallery section allows you to show an image with text titles or descriptions which will appear underneath or over it, along with an arrow or link allowing visitors to navigate directly to another page on your site. This feature encourages viewers to move around your website more freely and therefore increases time spent there.
Summary Block, which displays multiple blog posts, events or shop items visually attractively, makes it simple to add a summary for each item with short description and thumbnail image – ideal for promoting featured content or new products! As soon as changes are made to its source content, your Summary Block will automatically update accordingly.
Summary Blocks can be customized using class selectors, like any HTML element. You can access them by clicking the Gear icon in the upper-right corner of your editor and choosing “Advanced,” or by using the /> icon located at the page header.
Carousel
Image carousels – commonly referred to as content sliders or swipeable merry-go-rounds — are an engaging way to draw people in on social media. By encouraging viewers to flip through multiple images or videos at once, image carousels increase the odds that viewers click one of them.
If you use a carousel on your website, ensure the captions are legible and add value for visitors. While captions don’t have their own style features like font size and colors, they should adhere to any rules applicable to text on your site – such as below an image, overlaid on top or even displayed when clicked upon.
Carousels’ post copy, which appears above the images in a slideshow format, can help build engagement and support business goals. Some brands choose to leave this area blank while it could also serve as an opportunity to highlight key details about each image or video in your carousel.
