Universal Filter Basics for Your Website
Learning Objectives
- Understand how to customise filter appearance on SquareWebsites
- Learn simple style adjustments for filters
- Set up mobile-friendly filter settings
- Reset filters to default when needed
Introduction
Customising your website's filters helps create a better user experience and makes your site look more professional. This chapter covers the basics of styling filters using SquareWebsites' Universal Filter options. You'll learn practical steps to adjust filter appearance and make them work well on mobile devices.
Lessons
Finding Your Filter Settings
First, you need to locate the filter customisation options in your SquareWebsites dashboard.
Step 1: Log into your SquareWebsites account
Step 2: Go to the 'Plugins' section
Step 3: Select 'Universal Filter Basics'
You'll see options for changing colours, fonts, and other visual elements. Each setting controls how your filters appear to visitors.
Making Basic Style Changes
Simple adjustments can make a big difference to how your filters look.
Step 1: Pick a filter element to change (like background colour or text)
Step 2: Choose your preferred colour or font from the dropdown menus
Step 3: Preview the changes before saving
Common changes include adjusting button colours, text size, and spacing between filter options.
Setting Up Mobile View
Your filters need to work well on phones and tablets. Here's how to optimise them:
Step 1: Click the 'Mobile Settings' tab in your filter panel
Step 2: Adjust the size slider to make filters fit smaller screens
Step 3: Check how the spacing looks on mobile preview
Mobile users should be able to tap filter buttons easily without hitting the wrong option.
Resetting to Default
If you don't like your changes, you can easily go back to the original settings.
Step 1: Open the filter customisation panel
Step 2: Click 'Reset to Default'
Step 3: Confirm the reset when prompted
This removes all your custom styling and returns filters to their original appearance.
Practice
Try changing the colour of one filter button on your site. Look at how this affects the overall appearance and whether it makes the filter easier or harder to use.
FAQs
Can I undo filter changes if I don't like them?
Yes, you can reset to default settings at any time using the reset button in the customisation panel.
Will styling changes slow down my website?
Basic style changes like colours and fonts don't usually affect loading speed, but it's good to check your site speed after making changes.
Do filter styles work the same on all devices?
Most basic settings work across different devices, but you should test on phones, tablets, and computers to be sure.
What happens if my theme updates?
Your filter customisations should remain in place after theme updates, but check your filters after any major updates to make sure they still look right.
Jargon Buster
SquareWebsites: A website building platform that provides tools for creating and customising websites without coding knowledge.
Universal Filter Basics: The core filtering functionality that helps visitors sort and find content on your website.
Mobile Settings: Options that control how your website elements appear and function on smartphones and tablets.
Reset to Default: A feature that removes all customisations and returns settings to their original state.
Wrap-up
You now know how to customise your website's filters to match your brand and improve user experience. Start with small changes and test them on different devices. Remember, you can always reset to default if something doesn't work out.
Keep experimenting with different styles to find what works best for your visitors. Good filter design makes it easier for people to find what they're looking for on your site.
Ready to take your SquareWebsites skills further? Join our community at https://www.pixelhaze.academy/membership