CSS Hacks — Squarespace 7.1 Footer CSS | AJM Learn
Let's customize the footer of your Squarespace 7.1 websites with CSS. The footer design is almost as important as the header design. It’s on every page, there’s tons of opportunity to keep visitors moving around your site, and it’s a great place to sneak in an extra call to action.
Original post:
https://ajmexperience.com/learn-posts...
For more CSS code to enhance your website designs, check out the rest of the learn series:
https://ajmexperience.com/learn
Get our free CSS Selector Cheat Sheet:
https://www.ajmexperience.com/css-che...
Get our full CSS Library:
https://www.ajmexperience.com/squares...
——————
HERE'S WHAT TO DO:
Add a line above the footer: You can change the color and thickness of the line.
Tip! This is nice to use when your footer is the same color as the background of your site.
footer {
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 4px;
border-color: #7cccbd;
}
Add a drop shadow:
#footer-sections {
box-shadow: 5px 5px 12px black;
position: relative;
z-index: 2;
}
Center all the text on mobile:
@media only screen and (max-width:750px){ #footer-sections * {text-align:center}}
Check out some of our favorite plugins to add to the footer:
Scroll progress bar (not actually the footer, but bottom of the page)
Instagram feed
https://www.ghostplugins.com/products...
Google reviews
https://dash.elfsight.com/demo/google...
Cookie consent
https://dash.elfsight.com/demo/cookie...
Business hours builder
https://dash.elfsight.com/demo/busine...
——————
AJM EXPERIENCE
🖥 A marketplace for graphic designers, Squarespace lovers, & CSS nerds: https://www.ajmexperience.com/
☕️ Buy me a coffee: https://www.buymeacoffee.com/ilyajm
Thanks for watching and hope you learned something. My name is Amanda Jones McNay and I am a Squarespace web designer and CSS nerd. I have designed well over 100 different Squarespace sites for clients and have used custom CSS code in every one of them. My site is dedicated to helping all CSS designers to perfect their craft and create cool sh!t.
——————
This article contains affiliate links. Whenever you buy something through one of these, I get a small commission, without any extra cost to you :)