How To Hide A Page From Index Navigation In Mojave Template Squarespace?
Creating a Responsive Filterable Gallery in Squarespace
Accept you ever wanted to create a responsive gallery to feature different collections of your work all within i folio?
While Squarespace doesn't have a content block to create this magic, I practise have handy trick I've used in various means across my website. This method actually uses several pages, and the results are so similar to a ane-page feel that your audience volition hardly realize it while your responsive gallery changes with a click of a button right before their eyes.
On this "one page," your audience can select different categories to view. And they tin can hands toggle betwixt these filtered views without losing their bearings or e'er having to click the <— Back push of their browser.
Similar to a storefront with categories listed at the top for easy sorting, this Squarespace piece of work-effectually has many uses.
Let's jump right into today'due south step-by-pace tutorial!
Filterable Squarespace Gallery Design
If you would like help creating a filterable gallery system on your website, I would love to chat with you! Transport me a bulletin on my Squarespace Filter Pattern Service page to get started.
Branding + Squarespace Website Design
Looking for help with your Squarespace website? Then, you've come up to the correct place. I specialize in Squarespace website design for creative entrepreneurs. I work with small business organization owners to design one-of-a-kind brands and websites.
Ready to bring your creative business concern dreams to life and have your site to the adjacent level? Take a await at my custom brand and website pattern service here to go in touch and schedule a free consultation call.
The Squarespace workaround:
Since Squarespace doesn't currently have a characteristic that lets viewers toggle between different galleries on ane page, we demand to add a petty inventiveness and a few extra steps to create this final effect.
The trick is to create a serial of pages—i for an overview alphabetize page and one for each category. Each page has an identical navigation menu that lists the categories you can view. These menu titles link back to their corresponding pages.
This makes the gallery titles responsive so users can easily click around without feeling like they're leaving the page. To clearly indicate what gallery is currently being viewed, its title in the menu is shown in assuming text on its page.
What it looks like in activity:
Here's a video of how this filterable gallery works to help you visualize the final result as you work through the step-by-step instructions:
Ideas for means to use this workaround:
Possible means to implement this technique include . . .
-
Filtered photo gallery display // Perfect for photographers, this is a creative fashion to showcase the different types of photos you offer. Let your audience easily filter between portrait, nuptials, family unit, newborn, etc. Or any other way you'd similar to group your photos in a responsive, dynamic gallery.
-
Portfolio collections for artists // Highlight different collections of your works of fine art. Make it piece of cake for your audience to find and view the pieces they're most interested in. Here's how: follow the steps.
-
New or featured products from your shop // Showcase your latest or pop products. Potential buyers can get a glimpse of your available items past easily toggling through select products from your shop.
-
Archives page for your web log or podcast // Allow your readers or listeners quickly find the information they are looking for. Utilize this workaround to filter the topics your content is centered around.
-
Comprehend folio for your products that link to an external website to purchase // Products that link to another site to buy. Create a "store" on your Squarespace website that link to items in your external store, such as Etsy or Shopify.
Here's how I used this trick to sort my weblog archive categories :
1 // Cull categories and content:
Categories // Get-go, decide on the categories of content you want to feature. Choose titles for them, and figure out the guild yous want to listing them.
These categories will serve every bit page headings. When clicked, each heading will reveal the photos in its category by refreshing the browser to that category'due south page.
I chose "blog posts," "workspace inspiration," and "icons" as categories.
Content // Gather the images you want to feature across all of your galleries. Every image volition be assigned to ane of these categories. This will ensure each photo shows up on the proper page when someone clicks on its category.
two // Create a new gallery collection to firm content and category tags:
Create gallery collection // On the pages screen of your Squarespace website, click the plus sign in the "non linked" section to create a new folio. In the carte that pops upwardly, select "Gallery" from the options in the Collections department.
Type in a proper name for your page, and hit enter.
Add images // On your new gallery folio, click the outlined box expanse to upload the images you desire to include in the drove. Be certain to add photos for all of your desired gallery categories into this collection.
Hint: It tin be helpful to add one category at a time to go on them split in your collection.
One time uploaded from your estimator, the image thumbnails will announced on the left. Rearrange them into your desired gild.
Hide page // Since this page'south only purpose is to store our photos for the filtered gallery pages, nosotros want to forestall this page from being viewed. To do this, simply click on gear icon to open the page'due south settings, and disable the page.
three // Assign a category tag to each item:
For each particular, hover over the thumbnail, and click the gear icon to open up the settings window. You tin can likewise double click the prototype to open information technology. Then, add together the assigned category. Repeat this step for each photo in your gallery collection.
I chose to create 3 categories: weblog posts, workspace inspiration, and icons.
*Update: In Squarespace 7.ane, information technology volition look like this instead . . .
When you click the gear icon, the window will open up to the Content Tab of the prototype Settings. Scroll down until you run into "Add Tags" and "Add Categories."
When y'all brand changes, the SAVE button will appear. Be sure to click it once you are done.
4 // Choose a embrace photo for each category:
Side by side, choose 1 cover photo for each category. These images will represent the categories on the "alphabetize" folio of your filterable gallery to give people a peek and encourage them to explore your categories for more.
To make these select photos appear on your gallery alphabetize folio, check the "Featured Image" circle in the settings window. You lot tin can find this in the "Options" tab.
Annotation: Don't feature any other images aside from your comprehend photos as they volition show up on the cover page.
*Update: In Squarespace 7.1, it will look like this:
5 // Create and design your gallery index folio:
In one case you've finished uploading and tagging your photos, click dorsum to your pages with the arrow in the top left hand corner.
Back on the pages screen, click the plus sign again to create a new, blank folio.
This will be your index gallery page. You can remember of it as a homepage for your filtered galleries that shows the categories available for viewing. Afterward its more often than not set upwards, nosotros will indistinguishable this folio to salvage you from repeating a few steps while creating the pages for your specific categories.
Click "EDIT" to start edifice your page.
Add an alphabetize championship: In the text block, type in a championship for your index page. I wrote "Our Galleries."
Next, we'll add a line to separate the title from the residue of the page content.
Hover over the teardrop shape below the text block until a line appears.
Click the teardrop shape to insert a new content block. Select "Line."
Create index navigation headers // Side by side, we'll add text blocks adjacent beneath the line—one for each category. Each text block volition have ane category title in information technology, which will somewhen link to its corresponding page. These will eventually serve as navigation headings for your galleries. This will allow your audition to click through your galleries and view their contents.
I added two spacers, and dragged them so they were side-past-side. So, I added i more below, and dragged information technology next to them. This resulted in three text blocks all in a line—one for each category.
Text Blocks Hint: If yous insert 3 text blocks on top of each other at once, they tend to join together. So it'southward helpful to insert ii, movement them into place next to each other, so add the third ane. Then you can continue with with rearranging them.
So, type your categories into the text blocks to create navigation headings. We volition come up back and add together in the links in just a few steps subsequently we create their pages.
I added one more infinite block to keep a niggling distance between the navigation headers and the gallery below.
Add your gallery content with a summary cake // Side by side, use the teardrop shape once again to insert your gallery images.
In the content block menu, in the Summary section, click "Filigree."
When the gallery grid appears, it will look something like this:
Content // In the summary settings, choose the gallery you lot created at the get-go of this web log post to pull in your content. Your images will appear.
Layout // Accommodate the summary settings to get your desired style. I fix the image ratio to 1:ane foursquare and adjusted the column and gutter widths to 270 and 60 respectively.
Brandish // Then, remove the default date from the main metadata and choose to evidence merely the thumbnail. Ready the number of items to 30 (the current maximum).
Since this is the alphabetize page of your filtered galleries, be certain to check "Featured Filter" so information technology just shows your chosen cover photos—i for each category—from Step iv. Click "Employ."
This creates the outline of your encompass page and a template for your filtered gallery pages. Click "Save."
half dozen // Create filtered gallery pages—ane for each category.
At present it'southward time to create a page for each filtered gallery.
To salvage yourself from building each page from scratch, only indistinguishable the index page you but created to use it equally a template.
Hover over the page title in the left-hand menu, and click the gear icon to open up the page's settings.
In the "General" tab on the left, scroll downward to the bottom, and click "Indistinguishable Page," then "Confirm."
Duplicate this page for each category filter.
Rename pages // Rename each page to distinguish which category will exist showcased on it. (Make sure they are recognizable as you will exist selecting these from all of your website pages in a moment when you add together links to your gallery navigation.)
Customize URL // Adjust the URL slug, for each page, also.
7 // Customize and configure each page:
Now that you have all the necessary pages created, information technology'south time to add the last details and customizations.
On each page, make the text bold for that page to emphasize the current gallery being viewed. And for each category in your header navigation text, add together internal links to link to their corresponding pages.
This makes the category navigation headings clickable so your audience tin switch between galleries. Since the headings stay the aforementioned—except for the bold text to betoken the current gallery—information technology makes it experience like you lot're not even leaving the page, which gives the desired effect of this Squarespace workaround.
Note: Don't select "open in new tab" otherwise you won't finish upward with the filtered gallery effect.
Then, accommodate the summary grid settings so the proper gallery is shown past calculation a filter.
In short, make these adjustments on each page to customize the results that testify when a user clicks on the category headings:
-
i // Bold the current page championship (this will be different for each page)
-
ii // Add navigation links (this will be the same for each page)
-
iii // Add summary filigree filter (this volition exist different for each page)
-
4 // Select "Featured Filter" for index page simply. Unselect for category pages.
INDEX PAGE:
Showtime with the index page—the first i y'all created and used as a template.
Make its title bold.
Add the link to its matching page in the championship. And add links to all of the headings, too.
To add a link, offset highlight the text expanse that yous want to be clickable, then click the link icon. Select "Content," and choose your destination. For this purpose, don't select Open up in New Window.
That complete your Index page. Be certain to click "Salve."
CATEGORY PAGES:
Now it's fourth dimension to customize your filtered gallery pages. Follow these steps for each category page you accept.
Kickoff up, is my Blog Posts gallery folio.
Bold the page's title in the navigation.
Add links to all of the page titles to create your live navigation.
Display: Add together the corresponding category filter. Unselect "Featured Filter" to brand your images tagged with that category appear.
Layout: You tin can change how many images evidence on a line, likewise. On my Blog Posts gallery page, I upped it to four past adjusting the cavalcade width to 225.
When you are done, click "SAVE." So, get dorsum and repeat the procedure for each folio.
I did this for my Workspace Inspiration gallery page.
And for my Icons gallery page.
And now your filterable gallery is complete!
viii // Examination your filterable gallery on your Squarespace website.
The final step is to click through all of your links on each page to make certain everything is in working order.
Take a expect at the concluding results:
Hither'due south a video to testify you how this gallery workaround turned out:
Taking it to the side by side level:
I used the nuts of this technique to create my weblog archives pages. I took it a step further, however, and designed a cover page that was unlike from the balance:
Hopefully this Squarespace workaround will come in handy for you, too! It's a great trick to have up your sleeve for all of your category filtering needs. Have you e'er created a filtered gallery or something similar for your website? I would dearest to know. Exit a comment below!
You might too like . . .
How To Hide A Page From Index Navigation In Mojave Template Squarespace?,
Source: https://www.pondertrail.com/blog/responsive-filterable-gallery-squarespace-workaround
Posted by: millshisherring.blogspot.com
0 Response to "How To Hide A Page From Index Navigation In Mojave Template Squarespace?"
Post a Comment