The past work gallery offers a chance to show off previous projects without the need for a full on portfolio page before you need one. With custom CSS, we transformed the native Squarespace gallery block into this beautiful slideshow, guiding visitors clearly through the examples of your past work to show off your skill, experience & demonstrate what you have to offer.

For a simple style to set this template apart, we opted for a sideways header and select uses of sideways text throughout the template. This design choice makes use of the white space of the page, while making a big impact without having to overload the back-end of the website with CSS to have a distinct style. Since the site is only one page, we wanted to keep the coding simple without sacrificing style or legibility.

Lightbox Anything Plugin

For The Learning Loop and the Shannon template, we used the Lightbox Anything Plugin to showcase the different formats that services are available as. By making use of the Lightbox Anything Plugin & the Universal Filter menu, we were able to organize the offerings in a way that helps website visitors narrow down available services based on their own needs.

Lightbox Anything Plugin

For Molly Snell-Larch Consulting (and the Molly template) we used the Lightbox Anything Plugin to showcase the past work done with individual cooperatives, organized by type of cooperative organization, without having to dedicate an entire page to each example or clutter the Past Work page with examples. This structure allows the consultant to show off their experience while keeping the page simple for the site visitor, as the key demographic is looking for simple, streamlined information.

Lightbox Anything Plugin

For Hare Brained Design Studio & the hare brained template we combined the Lightbox Anything Plugin and a CSS zoom on hover effect over our photos as a simple, interactive “about us” pop-up function. While the information included in the pop-ups are fun facts about our team members to help get to know us (the information we want to make sure folks read is in simple text blocks in the “meet our team” section), the interactive nature and the combined functions help show off the type of custom elements we can include in our projects.

Accordion Block + Custom CSS

Using an accordion block and custom CSS, we designed our services to show up with this simple side tab menu. It is visually intuitive, so visitors can navigate it easily, and find what they need without having to guess. This function is meant to appeal to folks who need help but in looking for help are hoping for someone to keep it simple for them.

Summary Block + Custom CSS

Using a summary block and custom CSS, we can feature our custom features posts throughout our site, making clear:

• what the feature is

• what technique was used

• what that feature does

with a more intuitive slideshow design, to encourage interaction from site visitors.

Gallery Block + Custom CSS

Using gallery sections and custom CSS, we created two simple slideshows with number labels & captions. Then, with additional CSS, we moved the gallery sections to be side by side, since the information presented is mainly for fun & to get to know our small team. This also provides us a way to showcase a gallery block on our site, which we would otherwise have little use for at this stage. This shows off our skill in CSS and our understanding of Squarespace features beyond their native capabilities.

Text Block + Custom CSS

Using a text block and custom CSS, we created the effect of specific header text changing color when hovered over. This being the first thing that site visitors get to interact with shows off our style and skill immediately. It helps make clear that while web design & development is something fun and playful for us, we have the design strategy and custom CSS skills to make a functional, impressive site that levels up Squarespace's native features.

Lightbox Anything Plugin

For Hare Brained Design Studio we created this Pet Dress Up page with the Lightbox Anything Plugin and custom CSS. It’s our small love letter to this new phase in our career, and the visitors to our site, because we still think visiting websites should be fun!

Carousel Block + Custom CSS

Using custom CSS and the native Squarespace carousel block, we achieved this feature which helps to emphasize the collaborative nature of the work, as it literally allows visitors to drag others into the spotlight, both on the home page & the about page.

Gallery Block + Custom CSS

The slideshow with numbers & caption designkeeps the aesthetic of the page simple and direct, while making time on the site an interactive process for visitors as they are given the option to click through the needed information as it is presented to them. This section is a native Squarespace gallery block customized with CSS to allow for ease of updating post handoff.

List Section + Custom CSS

Using custom CSS, we elevated design of the native Squarespace list section to create a section used again and again throughout the website. The repeated use helps to keep the aesthetic and interactive experience of the site cohesive throughout, so visitors know what to expect on any given page. The functionality of the side tabs allows visitors to interact with what is on the page without over-complicating the experience.

Summary Block + Custom CSS

Using Custom CSS and the native Squarespace summary block, we designed team summary tabs designed to look like folder tabs to go along with the playful, school supply design throughout the rest of The Learning Loop website.

The functionality has intuitive visual clues (shadows, a click mouse, etc.) to guide users through what actions they are supposed to take if they want to interact with the section, rather than continue scrolling.

Universal Filter Plugin + Custom CSS

With such a wide variety of offerings we decided to use the Universal Filter Plugin to installa menu where site visitors can choose to narrow down the service info available to them based demographic served or service desired.

This helped to provide an interactive way for site visitors to get to know The Learning Loop’s expertise & robust support options without excessive visual clutter or overwhelm.